3주차 발자국

📍2024.05.13 ~ 2924.05.16

🏁 3주차 미션

😎 강의 수료

강의 요약

#6 React TDD 기본

TDD (Test Driven Development) 란 테스트 코드를 먼저 작성하고, 테스트 코드를 Pass 할 수 있는 실제 코드를 작성하는 개발 방법이다. 안정적인 소스 코드, 디버깅 시간 및 개발 시간 감소, 깨끗한 코드의 장점이 있다.

React Testing Library

리액트 컴포넌트에 대한 테스트를 사용자 중심으로 작성하는데 도움을 주며 사용자의 행동에 대한 테스트를 강조하는 라이브러리이다. 리액트 구성 요소 작업을 위한 API 를 추가하여 DOM Testing Library 위에 구축된다. DOM Testing Library 는 DOM 노드를 테스트하기 위한 매우 가벼운 솔루션이다.

render 함수 : DOM 에 컴포넌트를 렌더링 하는 함수이며 인자로 렌더링할 리액트 컴포넌트를 사용한다.

쿼리 함수 : 페이지에서 요소를 찾기 위해 사용한다. get, find, query 유형이 있다.

getBy : 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상 일치하면 오류를 발생한다

queryBy : 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null 을 반환한다.

findBy : 쿼리와 일치하는 요소가 발견되면 Promise 를 반환한다. 요소가 발견되지 않거나 기본 제한 시간 후에 둘 이상의 요소가 발견되면 프로미스가 거부된다. ( getBy + waitFor = findBy )

waitFor : 일정 기간 동안 기다려야 할 때 사용하여 기대가 통과될 때까지 기다릴 수 있다.

Jest

Jest 는 Facebook 에 의해 만들어진 테스팅 프레임워크이다. 최소한의 설정으로 동작하며 테스트 케이스로 어플리케이션 코드를 확인한다. 단위테스트를 위해 이용한다.

describe : 테스트를 그룹화하는 블록을 만든다

it : 개별 테스트를 수행하며 각 테스트를 작은 문장처럼 설명한다.

expect : 값을 테스트할 때마다 사용되며 matcher 와 함께 사용된다.

matcher : 다른 방법으로 값을 테스트 하도록 할 때 사용된다.

코드 형식 라이브러리

Prettier : 코드 형식을 맞추는데 사용하며 코드 포맷터 역할을 한다.

ESLint : 개발자들이 특정 규칙을 가지고 코드를 짤 수 있게 도와주는 라이브러리이며 코드 포맷터이기도 하지만 문법 오류를 파악하는 것이 주요 기능이다.

#7 React TDD 를 이용한 간단한 앱 생성 및 배포

FireEvent API : 유저가 발생시키는 이벤트에 대한 테스트를 하는 경우 사용한다.

test('테스트 설명', () => {
    render(<App />); // 테스트를 위해 App 렌더링
    const buttonElement = screen.getByTestId('plus-button');
    fireEvent.click(buttonElemtn); // buttonElement 에 클릭 이벤트 발생
    const counterElement = screen.getByTestId('counter');
    expect(counterElement).toHaveTextContent(1); // counterElement 의 텍스트가 1
});

Github Action 을 이용한 AWS S3 로 앱 자동 배포

Jenkins, Circle CI, Travis CI, Github 등이 배포에 쓰인다. 강의에서는 Github 을 사용한다.

순서

저장소 생성 - 프로젝트와 연결 - Github 페이지에서 workflow (Node.js) 생성 - S3 버킷 생성 - 버킷 설정 변경 (정적 웹 사이트 호스팅 활성화) - 버킷 정책 변경 - Github workflow yml 파일에 앱 자동 배포 코드 추가 - IAM 사용자 추가 - Github 저장소 env 설정에 IAM 키 추가

#8 Next.js 와 Typescript

Next.js

리액트의 SSR (Server Side Rendering) 을 쉽게 구현할 수 있게 돕는 프레임워크이다.

CSR 은 검색엔진에 최적화되어있지 않기 때문에 SSR 을 사용한다.

Next.js 는 모든 페이지를 pre-render 하여 HTML 을 클라이언트에서 자바스크립트로 처리하기 전에 생성함으로써 SEO 검색엔진 최적화가 좋아진다.

Next.js 에서 데이터를 가져오는 방법

getStaticProps : Static Generation 으로 빌드할 때 데이터를 불러온다.

페이지 렌더링 시 사용자 요청보다 먼저 필요한 데이터를 가져올 수 있을 때, 데이터를 headless CMS 에서 가져올 때, 모든 사용자에게 같은 데이터를 보여줄 때, 페이지가 미리 렌더링 되어야 하고 빨라야 할 때 사용한다.

getStaticPaths : Static Generation 으로 데이터에 기반하여 pre-render 시에 특정한 동적 라우팅을 구현한다.

path 는 어떤 경로가 pre-render 될 지 결정한다. params 는 페이지 이름이 pages/posts/[postId]/[commentId] 인 경우 postId, commentId 이다. fallback 이 false 이면 getStaticPaths 로 리턴되지 않는 것은 모두 404 페이지로 이동되며 true 인 경우는 fallback 페이지를 보여준다.

getServerSideProps : SSR 로 요청이 있을 때 데이터를 불러온다.

async 로 export 하면 Next.js 는 각 요청마다 리턴되는 데이터를 getServerSideProps 로 pre-render 한다. 따라서 다른 페이지로 이동했다가 이전 페이지로 돌아가도 최신 데이터가 반영된다. 요청할 때 데이터를 가져와야 하는 페이지를 미리 렌더링 할 때 사용한다.

Static Site Generation (SSG) : 빌드 때 HTML 을 각 페이지별로 서버에 생성해 놓고 요청 시에 HTML 을 반환한다.

TypeScript

자바스크립트에 타입을 부여한 코드를 단순화하고 쉽게 디버그 할 수 있으며 타입 검사 및 컴파일 오류 검사의 기능을 수행하는 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저 실행 시 파일을 한 번 변환하는 컴파일 과정을 거친다.

타입스크립트의 타입은 자바스크립트의 타입들과 추가로 tuple, Enum, Any, Void, Never, Union 타입이 있다.

any : 잘 알지 못하는 타입을 표현하며, 컴파일 때 타입 검사를 거치지 않는다. noImplicitAny 라는 옵션을 사용하면 any 타입을 썼을 때 오류를 발생시킬 수 있다.

union : 둘 이상의 데이터 유형을 사용할 때 유니온 타입이라고 한다. ex. let code : (string | number);

tuple : 지정한 순서와 타입만을 사용할 수 있는 특수한 형태의 배열 타입이다.

enum : 열거형을 의미하며 별도의 값을 설정하지 않으면 0부터 시작한다.

void : 데이터가 없고 타입이 없는 상태이다. any 와 반대의 이미이다.

never : 절대 일어나지 않을 것이라고 확신할 때 사용하며 주로 함수의 리턴 타입으로 사용된다. 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미한다.

void vs never : void 는 값으로 undefined, null 을 가질 수 있으나 never 는 어떠한 값도 가질 수 없다.

type annotation : 개발자가 타입을 타입스크립트에게 직접 전달한다.

type inference : 타입스크립트가 알아서 타입을 추론한다.

type assertion : 값의 타입을 설정하고 컴파일러에게 유추하지 않도록 지시한다.

#9 React Version 18

Automatic batching

batching 은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어 한 번의 리렌더링으로 모든 업데이트가 진행될 수 있게 하는 것을 말한다.

적은 리렌더링, 이벤트 핸들러 밖에서도 작동하며 필요할 때 제외 가능한 것이 특징이다.

Suspense on the server

<Suspense /> 를 사용하여 앱을 더 작은 독립 단위로 나누어 앱 사용자가 콘텐츠를 빨리 보고 빠르게 상호작용할 수 있다.

Streaming HTML : 모든 데이터를 가져오기 전에 renderToString 대신 renderToPipeableStream 을 사용하여 HTML 을 스트리밍하는 방법이다.

Selective Hydration : 모든 코드가 로드되기 전에 hydrate 하는 방법이다.

hydration : 자바스크립트 논리를 전체 앱에 대해 서버 생성된 HTML 에 연결하는 것이다.

Transition

업데이트에 urgent 를 주어 상태 업데이트 시에 우선순위를 주게 하는 기능이다.

#10 Redux

자바스크립트 애플리케이션을 위한 상태 관리 라이브러리이다. Redux 는 State 를 관리한다.

Action -> Reducer -> Redux Store -> React Component -> (이벤트가 발생하면) -> Action

Provider : Redux Store 에 접근해야 하는 모든 중첩 구성 요소에서 Redux Store 를 사용할 수 있도록 한다.

useSelector, useDispatch 를 이용해 provider 로 둘러싸인 컴포넌트에서 store 에 접근 가능하다.

리덕스 미들웨어: 액션을 전달하고 리듀서에 도달하는 순간 사전에 지정된 작업을 실행할 수 있게 하는 중간자

Redux Thunk : 리덕스를 사용하며 비동기 작업을 할 때 많이 사용한다.

Redux Toolkit : 리덕스 로직을 작성하기 위한 공식 권장 접근 방식이다.

Redux Persist : 페이지 새로고침 후에도 Redux Store 의 State 들을 유지할 수 있다.

#11 도커를 이용한 리액트 실행

Docker

컨테이너를 사용하여 응용 프로그램을 쉽게 만들고 배포, 실행할 수 있는 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 프로그램 다운로드 과정을 간단하게 만들기 위해 사용한다.

컨테이너 안에 다양한 프로그램, 실행환경을 추상화하고 동일한 인터페이스를 제공해 프로그램의 배포 및 관리를 단순하게 하고 어디서든 실행 가능하게 한다.

도커 클라이언트에서 커맨드 실행 - 도커 서버에서 이미지가 로컬에 캐시 되어있는지 확인 - 캐시된 이미지가 없는 경우 도커 허브에서 이미지를 가져와 로컬 캐시에 저장한다 - 이미지로 컨테이너를 생성한다 - 이미지로 생성된 컨테이너는 이미지에서 받은 설정이나 조건에 따라 프로그램을 실행한다.

도커 파일, 이미지

도커 파일 생성 순서 : 베이스 이미지 명시 - 추가로 필요한 파일 다운을 위한 명령어 명시 - 컨테이너 시작 시 실행될 명령어 명시

베이스 이미지는 이미지의 기반으로 간단하게 OS 라고 생각하면 된다.

이미지는 응용 프로그램 실행 시 필요한 모든 것 (실행 명령어, 파일 스냅샷)을 포함하고 있다.

파일 스냅샷은 디렉토리나 파일을 카피한 것이다.

도커 이미지 생성 순서 : 도커 파일 작성 - 도커 빌드로 도커 파일의 명령어들이 도커 클라이언트에 전달 - 도커 서버 - 이미지 생성

포트 매핑

이미지를 만들 때 로컬의 파일을 컨테이너에 복사하듯이 네트워크도 로컬 네트워크와 컨테이너 내부의 네트워크를 연결해줘야 한다. -p 키워드로 매핑을 할 수 있다. ex docker run -p 3000 : 3000 이미지 이름 -> 3000번 포트끼리 연결함

도커 컴포즈 파일을 작성하면 도커 실행 시에 긴 명령어를 간단하게 만들 수 있다.

느낀점

TDD 와 배포, 타입스크립트, 도커까지 배웠다. 테스트 코드를 직접 작성해보니 신기했다. 테스트를 용이하게 하기 위해 함수와 컴포넌트를 작게 만들어야 한다는 것을 확실히 깨달았다. 범위가 크면 테스트 코드 작성하기가 매우 복잡할 것 같다. 이전에 배포는 해본 적이 없어서 S3 에 코드 배포하는 것이 가장 흥미로웠다. 기존에 자바스크립트로 짰던 코드를 리팩토링 해볼 예정이다. 수업을 들을 때는 간단했는데 직접 하려고 했더니 많이 헷갈렸다. 시간이 부족해서 과제를 원하는 만큼 구현하지 못한 것 같아 아쉽다. 워밍업 클럽을 수료하고 나서도 남은 과제를 풀어야겠다.