매일의 나

리액트에서 허용하는 환경변수 REACT_APP_ 프리픽스가 있는 변수만 환경변수로 넣어준다. 예: REACT_APP_BASE_URL 프리픽스가 없으면 환경변수로 설정할 수 없다. 단, NODE_ENV, PUBLIC_URL은 리액트에서 이미 정의된 변수들은 예외 NODE_ENV는 npm test, npm start, npm build 명령어가 실행될 때 자동으로 test, development, production으로 설정된다. 임의로 값을 넣어줘도 리액트가 무시한다. 환경변수는 빌드 시 스태틱한 값으로 주입된다. 환경변수를 변경하면 새로 빌드해야 한다. npm start로 개발서버를 실행 중인 경우라면 재시작해야 한다. 빌드 파일은 사이트에 접속한 누구나 볼 수 있기 때문에 환경변수에 민감정보를 넣으면 ..

ESLint Plugin - 나만의 검사 규칙을 만들 때 내가 만든 규칙이기 때문에 검사규칙에 대한 rule 정의 파일이 있다. 가져다 쓸 때는, 플러그인의 어떤 규칙을 사용할 것인 지 명시해야 한다. (내 규칙을 정의해놓기만 했고, 쓸 건지는 없으니까) { plugins: ['react'], rules: { 'react/button-has-type': 'error' } } 위에 처럼 활성화할 규칙들을 하나하나 명시해서 쓰는 것이 불편하니까, 활성화할 규칙을 모아 내부에서 설정으로 만들어 놓기도 했다. { // plugins: ['react'] 생략 - recommended 설정 안에 plugins: ['react']가 있기 때문 extends: ['plugin:react/recommended'] } E..

리액트-타입스크립트 템플릿 프로젝트 만들기 CRA, typescript 템플릿 ESLint 설정하기 CRA로 생성한 프로젝트에는 이미 eslint관련 디펜던시가 존재하고, eslint 설정이 있기 때문에 따로 eslint, eslint-config, eslint-plugin 들을 받지 않아도 된다. 다만, 설정을 내 입맛대로 바꾸고 싶으면 수정이 필요할 수 있다. Prettier 설치와 설정하기 prettier와 eslint 규칙이 출돌하는 부분이 있어서 config, plugin 설치해야 한다. IDE의 autosave 옵션을 켜도 된다. husky 설정하기 커밋 전 코딩 컨벤션, 문법 오류 확인 또는 테스트를 해보는 용 lint-staged를 사용하여 스테이징 상태의 파일에 eslint와 pretti..

15.1 Performance 탭과 성능 최적화 15.1.1 Performance 탭의 구성 크롬 개발자 도구의 Performance 탭에서 웹페이지의 성능을 측정할 수 있다. 특이한 점은 (1)의 새로고침버튼을 누르면 웹페이지를 새로고침해 측정을 시작한다는 것. (2)의 다운로드, 업로드 기능을 통해 성능개선결과를 확인하는 데 이용할 수 있다는 점. (3)의 버튼으로 성능측정할 것을 선택할 수 있다는 것. (4)의 휴지통 버튼을 누르면 가비지컬렉션이 된다는 것. 그리고 (5), (6), (7)의 영역에 성능측정 결과가 나타난다는 점이다. 15.1.2 렌더링 블록 렌더링 블록: 렌더링을 막는 것 블록 리소스: 렌더링 블록의 원인이 되는 리소스 15.1.2.1 CSS의 렌더링 블록 렌더링 블록의 원인 렌더..

프론트엔드 테스트는 어떻게 작성해야 할까? github에 공개된 테스트 코드의 내용을 훓어보니 아래 세 가지 내용에 대해서만 테스트하고 있음을 알게되었다. 사용자가 사용하는 방식 버튼 클릭 시, 또는 텍스트 입력 시 등등 외부 인터페이스 메서드가 올바른 매개변수와 함께 호출된다. 속성이 의도한 방식대로 적용된다. 스냅샷 테스트 엘리먼트가 렌더링되며 엘리먼트가 스냅샷과 일치한다. 메모 애플리케이션의 구조와 테스트 메모 애플리케이션의 구조 Memo MemoInputArea - Button MemoList MemoItem - Button 메모 애플리케이션의 컴포넌트, Util의 기능과 테스트 기능 나라면 어떤 테스트를 할까? 실제 테스트 코드 Memo addMemoItem() 이벤트핸들러를 MemoInputA..

14. 스냅숏 테스트와 시각적 테스트 14.1 스냅숏(snapshot) 테스트 직렬화 결과를 스냅숏으로 기록해 이전의 스냅숏과 차이가 있는 지 테스트하는 방법 14.1.2 스냅숏 테스트의 장점과 단점 장점 단점 예상치 못한 변경을 빠르게 알아차릴 수 있다. 직렬화되는 모든 데이터를 검증할 수 있다. 개별적으로 모든 속성을 검증하는 것보다 간결하게 테스트 코드를 작성할 수 있다. 조건이나 연산 결과에 따라 엘리먼트의 스타일이 달라지거나 엘리먼트의 노출여부가 달라지는 경우에 효율적으로 검증할 수 있다. 스냅숏 테스트만으로 테스트의 의도를 나타내기 어렵다. TDD를 수행하기에 적합하지 않다. 모든 UI의 변화를 감지하고 테스트할 수 없다? 14.1.3 그럼 어떻게 작성해야 할까? 스냅숏 테스트 단위를 작게 잡..

13. 프런트엔드 테스트 13.1 좋은 테스트란 무엇인가? 테스트의 궁극적인 목적은 애플리케이션과 코드의 품질 향상이다. 테스트를 위한 테스트는 없는 게 낫다. 좋은 테스트는 단순하고 이해하기 쉽다: 테스트 코드만 보고 테스트하고자 하는 것과 그 결과를 알 수 있다. 유지보수가 가능하다: 서비스 코드의 유지보수에 맞춰 유지보수 가능할 수 있는 범위로 작성한다. 내부 구현보다는 인터페이스를 기준으로 테스트한다: 이 코드를 사용하는 사용자의 입장에서 테스트하는 것이 좋다 독립적으로 실행된다: 테스트의 실행순서가 실행결과에 영향을 끼치지 않는다. 일관성이 있다. 13.2 프런트엔드 테스트 프런트엔드의 경우 자바스크립트 코드뿐만 아니라, 이벤트핸들러의 동작, 화면의 출력이 잘 되는 지 등도 테스트해야 한다. 모..

8. 브라우저 렌더링 과정 브라우저의 구현 방법은 표준화되어 있지 않기 때문에 제조사별로 브라우저를 다르게 구현한다. 크롬의 경우 멀티프로세스 아키텍처를 차용하였다. 크롬 브라우저 아키텍처 At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give..