본문 바로가기

Article

(19)
[아티클 프로젝트 034] [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄) [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄) 쏘카 컴포넌트 정의 사이트 기존방식의 문제점때문에 컴포넌트 개발에 대한 논의 시작 디자이너끼리는 UI스타일 가이드 문서로 최소한의 규칙 공유 하지만 개발자는 기존 코드 확인이 가능할 경우 재사용, 그렇지 않을 경우 다시 개발 디자인 시스템 구축 네이밍 통일 컴포넌트 용어, 네이밍 통일 네이밍 룰 정립 무슨_무슨_Button 실제 형태(Size, Line)를 기준 약어 사용 금지, 풀네임으로 명시 테마 구성된 컬러가 다를 경우 고정속성, 가변속성 개념 사이즈, 텍스트 스타일 가변속성 테마에 따라 달라지는 속성 색상 각자의 영역에서 가변속성을 컨트롤 하기 쉽게 세팅해두고 사용 컬러별 컴포넌트 생성 아쉬운 점이 됨 컴포넌트 수..
[아티클 프로젝트 033] SEO 그것을 알려드림 SEO 그것을 알려드림 SEO(Search Engine Optimization) 검색광고 역이 아닌 검색엔진최적화(Organic Search) 영역중 최상단에 나오게 하는 작업 첫페이지가 왜 중요한가? 상위 5개에서 67% 클릭 발생 최적화 Technical SEO 검색엔진이 데이터를 잘 수집 할수 있도록 하는 작업 Content SEO 검색자 질문에 답을 줄수 있는 컨텐츠 제작 최근 원티드에 적용한 Technical SEO Robots.txt 세부적으로 허용, 비허용 경로 작성 URL 표준화 (canonical) 같은 URL 뒤에 파라미터를 붙여 검색엔진에게 알려주자 https://www.example.co.kr?type=a https://www.example.co.kr?type=b 구조화된 데이터 (..
[아티클 프로젝트 030] ES6부터 ES2020까지 04. ES10, ES2020 간단하게 알고가기 ES10, ES2020 간단하게 알고가기 ES2019(ES10)의 변화 Object.fromEntries Object.entries의 반대 기능 Object.entries는 객체를 2차원 배열로 만들어준다. 2차원 배열을 객체로 만들어준다. 배열말고 Map같은 것도 지원 Array.prototype.flat Array.prototype.flatMap 다중 배열을 펼치는 기능 기본 1단계 펼침 숫자 인수를 넣어 몇 번 연달아 펼칠치 결정 가능 String.prototype.trimStart String.prototype.trimEnd String.prototype.trimLeft String.prototype.trimRight 공백 제거 가능 하위호환을 위해 같은 역할을 하는 메서드를 두개 만들었다고 한다..
[아티클 프로젝트 028] ES6부터 ES2020까지 02. ES7, ES8 간단하게 알고가기 ES2016(ES7) 변화, ES2017(ES8)의 변화 ES7 ES6에 비해 변경된 것이 별로 없다. 제곱연산자와 includes 메소드가 가장 큰 변화 제곱연산자 ** 를 통해 제곱연산을 할 수 있다. Math.pow(5, 3); // 125 5 ** 3; // 125 var i = 5; i **= 3; // 125 includes(찾을요소, 시작 순서) 배열에 해당 요소가 있는지 확인 indexOf와 같은 결과가 나오지만 NaN에 대한 처리가 다르다. [NaN].includes(NaN); // true [NaN].indexOf(NaN) > -1; // false ES8 메소드 Object Object.values(객체) Object.entries(객체) Object.keys와 Object.value..
[아티클 프로젝트 027] ES6부터 ES2020까지 01. ES6 간단하게 알고가기 ES6 간단하게 알고가기 선언 ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다. let 변수 const 상수 (배열과 오브젝트의 값 변경은 가능하다.) immutable array 기존 배열을 복제하여 사용한다. 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.) const a = [1,2,3]; const b = [...a]; 메서드 화살표함수(Arrow function) 클래스 개념 도입 setPrototypeOf 프로토타입 객체 추가 모듈(module) 프록시(proxy) startsWith(), endWith() 앞 뒤로 문자열 일치 여부 판단 includes() 문자열 포함 여부 판단 for-of for-i..
[아티클 프로젝트 019] react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 / 비동기적으로 바뀌는 컴포넌트 UI 테스트 react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 비동기적으로 바뀌는 컴포넌트 UI 테스트 비동기적으로 바뀌는 컴포넌트 UI 테스트 Async Utilities 함수를 사용 wait 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기 timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능) 리액트 16.8 버전 버그있음 waitForElement 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..) 프로미스가 끝날때 선택한 엘리먼트 resolve waitForDomChange 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지..
[아티클 프로젝트 018] react-testing-library 를 사용한 리액트 컴포넌트 테스트 react-testing-library 를 사용한 리액트 컴포넌트 테스트 react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행 필요한 기능만 지원해서 가볍다 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다. props, state 조회하는 작업을 하지 않음 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음 CRA 프로젝트 생성 react-testing-library, jest-dom 설치 jest-dom은 jest 확장, dom관련 matcher를 추가해준다. vscode 사용 시 @types/jest 도 같이 설치 테스트 코드 작성 테스팅 스냅샷 테스팅 ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 ..
[아티클 프로젝트 017] Enzyme를 사용하여 리액트 컴포넌트 테스트 Enzyme를 사용하여 리액트 컴포넌트 테스트 테스트 소개 가장 기본적인 방법은 내부 유틸 함수인 react-dom/test-utils 사용한다. 하지만 복잡하고 불편한 점이 있기 때문에 리액트 공식문서에서도 테스팅 라이브러리 사용을 권장한다. react-testing-library를 권장하며 Enzyme를 대체하여 사용할 수 있다고 언급한다. 두 라이브러리는 서로 다른 철학을 가지고 있다. Enzyme 컴포넌트 내부 기능 집중 post나 state 확인 컴포넌트 내장 메서드를 직접 호출 react-testing-library 렌더링 결과에 집중 컴포넌트 인스턴스에 신경쓰지 않고 화면에 보여지는 것 이벤트 발생 시 화면의 변화에 대한 부분에 최적화 사용자 관점에서 테스팅하기 용이하다. Enzyme 1. ..