jee's coding story

우리가 주소창에 url을 입력하고 엔터를 누르면 해당 url로 이동하게 된다. 이때 어떤 과정을 통해 페이지의 화면이 그려지게 되는지 간단히 정리해보려고 한다. 요약 HTML을 파싱 하여 DOM Tree 생성 CSS를 파싱 하여 CSSOM Tree 생성 DOM Tree와 CSSOM Tree를 합쳐 Render Tree 생성 Layout: Render Tree를 이용해 각 노드들의 위치와 형태 계산 Paint: 노드들을 실제 화면에 그림 일단 주소창에 url을 입력하고 엔터를 누르면 브라우저는 해당 서버에 요청을 보낸다. 요청을 받은 서버는 응답으로 HTML 데이터를 보내준다. HTML 데이터를 받은 브라우저는 화면을 그리기 위해 본격적으로 다음과 같은 단계를 거친다. 1. HTML 데이터를 파싱 하여 D..

타입스크립트 환경에서 jest로 테스트를 하려고 코드를 작성하던 중, 아래 이미지처럼 컴포넌트를 렌더링하기 위해서는 testEnvironment 설정을 jsdom으로 설정하라는 오류가 발생했다. 그래서 jest.config.ts 파일을 아래 소스코드처럼 수정하였고, 또 다시 오류가 발생했다. import type { Config } from "jest"; const config: Config = { // ... 기존 설정 testEnvironment: "jsdom", }; export default config; 이번엔 jest-environment-jsdom은 더이상 기본으로 제공되지 않으니 설치를 해야한다는 안내였다. (As of Jest 28 "jest-environment-jsdom" is no ..

최근 프로젝트를 진행할 때 TDD 개발 방식으로 진행해서 테스트 코드를 작성한 적이 있었고 블로그에 포스팅도 했었다. [글 보러 가기] 이번에는 TypeScript로 코드를 작성하고 있으며 vite로 개발 환경을 구축했기 때문에 jest를 따로 설치한 뒤 config 파일을 생성했다. (지난번엔 CRA로 개발 환경을 구축했고, testing-library가 기본으로 설치되어 있었다.) 타입스크립트 환경에서 jest 초기 설정 방법을 작성해보려고 한다. 패키지 설치 npm install --save-dev jest @types/jest ts-jest ts-node or yarn add -D jest @types/jest ts-jest ts-node 위 명령어를 사용하여 jest 패키지와 타입스크립트를 사용..

상황 vite의 react + ts 템플릿으로 프로젝트 초기 설정을 하던 중 .eslintrc.cjs 파일에서 위와 같은 오류가 발생했다. ESLint 홈페이지의 no-undef 오류 부분을 읽어보았고 [이 부분]을 발견했다. 원인 해당 부분에 따르면 ESLint는 자주 사용되는 라이브러리 및 런타임 환경을 미리 정의할 수 있도록 여러가지 환경을 제공한다고 한다. [제공하는 환경 리스트] 해당 오류는 node가 설정이 안되었기 때문에 발생하는 것이었다. 해결 env 부분에 browser, es2020 옆에 node: true로 설정해주니 오류가 해결되었다.

개인 프로젝트를 진행하면서 새로 시도해 볼 것들을 몇 가지 정해두고 시작했다. 그중 하나는 테스트 코드를 작성하는 것이다. 처음 작성해 보면서 들었던 생각과 어떻게 코드를 작성했는지 기록을 남겨보려고 한다. 테스트 코드를 작성하기 전 길잡이 1. 어떤 코드를 작성할 것인지 사용자에게 입력 값을 받기 위한 form 컴포넌트가 필요하다고 생각해 보고, 이 코드를 화면에 그릴 예정이다. 원활한 테스트를 위해 더 구체적으로 정해보자면, 사용자에게 가보고 싶은 여행지를 답변받아야 한다고 할 때, 화면 상단에 '가보고 싶은 여행지는?' 이라는 질문이 있고 사용자는 그 아래 있는 input에 답을 작성한 다음 "제출" 버튼을 클릭하여 양식을 제출할 수 있다고 하자. 2. 어떤 코드를 테스트할 것인지(테스트 코드 시나..