coding- w00se

제어 컴포넌트와 비제어 컴포넌트 Keep - 제어 컴포넌트와 비제어 컴포넌트의 차이를 알게 됐다. - 페이먼츠 1단계에서는 제어 컴포넌트만 사용했지만 2단계에서는 용도에 맞게 제어/비제어 컴포넌트를 적용했다. Problem - Try 1. DOM을 적절하게 활용하지 못했다. - 비제어 컴포넌트로 Form을 구현할 때 input 태그에 있는 value에 접근하기 위해서 ref를 사용했다. - ref를 이용하는 방법이 잘못된 방법이라 생각하진 않는다. 하지만 ref 이외의 DOM에 접근하는 방법을 몰랐기 때문에 아쉬운 점으로 적었다. - Form 태그의 onSubmit 이벤트 발생 시 전달받은 event.target 객체와 태그의 id를 같이 활용하면 ref를 사용하지 않고 input 태그의 value에 접..

리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용합니다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 합니다. 즉 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절합니다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 합니다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정합니다. 참고 자료 https://stackoverflow.com/a/46169521

컴포넌트 작성 및 분리 Kepp 이번 미션의 목표는 CDD(Component-Driven Developmenet)에 따라 UI를 구성하고 재사용하는 것이다. 미션의 목표에 맞게 작은 컴포넌트부터 개발했다. 그리고 컴포넌트의 재사용을 고민하면서 개발했다. Problem - Try 컴포넌트를 작은 단위로 나누어서 개발했지만 조립해서 잘하지 못했다. 아래는 이번 미션의 입력 폼 부분에 대한 예시 이미지이다. 입력 타입과 너비 등이 다르지만 모두 Label과 Input 컴포넌트를 조립해서 만든 LabeledInput 컴포넌트를 사용했다. 이런 방식으로 진행하니 컴포넌트를 담고 있는 페이지에서 가독성이 떨어지는 현상이 발견됐다. 따라서 작은 컴포넌트를 조립해서 입력 종류에 따라 컴포넌트를 만들었다면 가독성이 떨어..

env .eslintrc.json의 env 스크립트의 실행 환경을 명시하는 곳으로, 실행 환경에 맞는 전역 변수들을 사전에 정의할 수 있습니다. 예를 들어 아래의 예시 코드처럼 jest: true를 설정하면 jest 파일에서 describe, test, expect 등의 함수들이 no-undef 규칙에 걸리지 않는 것을 확인했습니다. env: { jest: true } env에 설정할 수 있는 옵션은 여기서 확인 가능합니다. es2021 옵션 공식 문서에 의하면 es2021: true 옵션을 사용하면 ECMAScript 2021의 전역 변수들을 사전에 정의하고 ecmaVersion parser option도 12로 설정한다고 합니다. parserOption eslint에서 사용하는 parser의 opti..

bottomup 좋다. 하지만, 최소한의 설계는 하고 진행하도록! 전역 state관리 및 옵저버 패턴 활용 전역 store에서 상태값을 관리했다. 상태 값에 변화가 있을 때, 변화가 있는 상태 값을 구독하고 있는 컴포넌트를 렌더링한다. const state = { testNum: 100, testString: 'hello', } // 상태 값 별로 구독 리스트를 따로 관리하면, 상태 값이 변경됐을 때 구독된 컴포넌트들만 렌더링할 수 있다. const components = { testNum: new Set(), testString: new Set(), } api를 직접 테스트 VS stub을 통한 테스트 api 요청 부분을 stub하는 방식은 여기에 정리했다. 공식문서와 코치님의 말에 의하..

cypress의 Network Requests intercept 메서드를 활용하면 Api 요청 부분을 stub할 수 있다. 사용 예시: api 요청부분을 stub으로 처리하고 응답 결과로 dummy 데이터 반환하기 'https://abcd.efg.com/*'을 사용하면 url host가 abcd.efg.com으로 시작하는 모든 요청에 대한 응답을 stub한다. 공식문서에 의하면 아래 예시처럼 fixture를 단축해서 사용할 수 있다.cy.intercept('https://abcd.efg.com/*', { fixture: 'dummyData.json' }).as('requestData'); cy.wait('@requestData');

cypress viewport 크기 조절하기 왜 필요한가🤔? cypress의 기본 viewport 크기는 1000px X 660px이다. 만약 테스트하려는 서비스의 엘리먼트 스타일이 해당 viewport의 크기보다 크다면, 예상치 못하게 테스트 실패할 수 있다. 예시: dimmed 영역 클릭 시 모달이 닫히는지 확인하는 테스트 [viewport 크기 조절 전] viewport의 크기를 조절하지 않으면 모달의 dimmed 영역이 보이지 않아, 테스트가 원활하게 진행되지 않는다. [viewport 크기 조절 후] 성공! 방법 cy.viewport() 메서드를 이용하는 방법 cypress.json 파일에 viewport의 크기를 설정하는 방법 예시 // cypress.json { "viewportWidth":..

webpack 기본기를 공부하기 시작! 웹팩을 공부하고 사용한 경험이 이번 미션의 가장 큰 수확이라고 생각합니다. webpack의 CleanWebpackPlugin를 사용하면서 output path를 잘못 설정해서 .git 디렉터리가 삭제되는 경험을 했습니다. 실패는 성공의 어머니라고 하듯이, 해당 경험이 webpack을 공부하는데 계기가 됐습니다. 디렉터리가 삭제됐다면 mac 기준으로 cmd + z를 시도해 볼 필요가 있습니다.(저는 침착하지 못했고, 결국 다시 처음부터 작업을 시작했습니다.) 웹팩에 대해서는 블로그의 게시글로 간략히 정리를 했습니다. 랜덤 테스트에 대해서 랜덤은 테스트하기 힘들다라는 말을 자주 들었는데, 막상 랜덤과 관련 있는 테스트 코드를 작성할 때 어떤 식으로 테스트 코드를 작성할..

throttle 기법 일정 시간동안 발생한 이벤트를 한번만 처리하는 방법 에를 들어 throttle을 활용하면 1총 동안 이벤트가 여러 번 발생해도 이벤트 내부 함수는 1번만 실행할 수 있게 구현 가능합니다. scroll 이벤트와 연속적으로 호출되는 이벤트를 처리할 때 유용합니다. let timerId; const handleToDoListScrollEvent = (e) => { // 스크롤이 맨 아래 쪽에 있지 않으면 early return if (e.target.offsetHeight + e.target.scrollTop < e.target.scrollHeight) { return; } // timerID가 Truthy한 값이면 early return if (timerId) { return; } ti..

dotenv란? .env라는 파일에서 변수를 불러와서 process.env에 변수를 삽입해주는 패키지 웹팩의 DefinePlugin과 함께 사용하면, 빌드된 파일에 환경 변수를 주입할 수 있다. 설치 npm install --save dotenv활용법 프로젝트의 root 디렉터리에 .env 파일 생성 후 환경 변수 선언 // .env API_KEY="123" webpack.config.js 파일에서 DefinePlugin 설정 // webpack.config.js require(&#39;dotenv&#39;).config(); module.exports = { ... plugins: [ ... new webpack.DefinePlugin({ // .env 파일의 API_KEY 값을 API_KEY 환경 변..