프론트엔드

Next.js 14 기초 활용법

Next.js 14의 기초 활용법을 정리해봤다. 1. 프로젝트 만들기 create-next-app 을 활용해서 간단하게 프로젝트를 생성할 수 있다. npx create-next-app 명령어 입력 후 TS 사용여부, Tailwind 사용여부, App router 사용여부 등 물음에 답하면 그에 맞게 프로젝트를 생성해 준다. 2. CSS 스타일링 원하는 스타일링 방식(CSS-in-JS, CSS Modules, Tailwind 등)을 선택해서 사용하면 된다. 2-1. Global 스타일 모든 루트에 적용될 스타일을 global.css 파일에 적어 놓는다. 해당 파일을 루트 레이아웃에서 import해서 적용한다. /* /app/layout.tsx */ import '@/path/global.css' 3. 폰트..

Typescript와 Duck typing

어떤 2개의 타입의 이름, 위치가 다르더라도 구조가 같다면 Typescript는 2개의 타입을 같은 타입으로 본다. (Duck typing) type A = { a: string } type B = { a: string } let a: A = {a: 'aa'} let b: B = {a: 'bb'} a = b // 가능 b = a // 가능 정리 Typescript는 컴파일 단계에서 타입 검사를 하는데 이때 Duck typing 방식을 사용한다. C#/java는 이름이 같은지까지 확인하는 nominal typing 방식을 사용한다.

나만의 react boilerplate 만들기 - (4) 개선

TS 버전업 TS 버전을 기존 4.4.2 -> 5.2.2로 올렸다. 버전업시에 기존 yarn berry 3.3.0과 호환이 되지 않아 yarn berry도 3.6.3으로 올렸다. 다른 의존성도 해당 버전에 맞게 업데이트했다. TS 5.0 이상은 데코레이터, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 변화가 있다. 이 참에 해당 기능들을 좀 활용해보면 좋을 것 같다. dev:msw 명령어 추가 개발시에 msw 구동이 필요할 때와 아닐 때(api 찌를 백엔드가 있는 경우)가 있다. 그런 경우에 활용하기 위해 기존 dev 명령어를 dev(msw X), dev:msw (msw O)로 나누었다. .env로 msw 구동 여부``를 환경여부를 주입해서 코드상에서 활용하도록 했다. ///..

React 테스트 방법

백엔드 서버 요청 처리 (MSW 활용) 실제로 서버에 요청하는 E2E 테스트를 할 수도 있지만, 백엔드보다 프론트엔드가 먼저 개발이 들어가거나 하는 경우나, 프론트만 분리해서 테스트 하고 싶은 경우에는 MSW를 활용할 수 있다. 서버 요청시 MSW가 가로채고 모의 응답을 보내준다. MSW 초기 설정 테스트에서 요청들을 mock server가 가로채도록 설정해준다. // src/mocks/server.js import { setupServer } from 'msw/node' import { handlers } from './handlers' // This configures a Service Worker with the given request handlers. export c..

TDD

TDD란? Test Driven Development 테스트 코드 작성 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성 장점 많은 기능 테스트하기에 소스 코드에 안정감 디버깅 시간 줄어들고 실제 개발 시간 줄어듬 깨끗한 코드 방법 기능 하나에 대한 테스트 코드 작성 해당 테스트 코드 통과하도록 코드 작성 1~2 반복 예시 기능 하나에 대한 테스트 코드 작성 it('counter starts at 0', () => { render() const counter = screen.getByTestId('counter') // 임시로 testid 사용, getByRole을 되도록이면 쓰자 expect(counter).toHaveTextContent('0') }) 해당 테스트 코드 통과하도록 코드 작성..

React 테스트 기초 (사용 툴, 환경 설정)

인프런의 "따라하며 배우는 리액트 테스트"를 듣고 정리해 봤다. 테스트를 하는 이유 더 안정적인 어플리케이션을 만들기 위해 디버깅 시간 단축 - 테스팅 환경이 구축되어 있다면 자동화된 유닛 테스팅으로 특정 버그를 쉽게 찾아 낼 수 있다. 재설계 시간 단축, 추가 구현 용이 사용 툴 React Testing Library React 컴포넌트 테스트용 라이브러리 - 사용자 입장의 테스트, 행위 주도 테스트 (click, type 등) DOM Testing Library 위에 구축 주요 API render DOM에 컴포넌트 렌더링, 인자로 렌더링할 컴포넌트 리턴 값으로 RTL에서 제공하는 쿼리 함수, 기타 유틸 함수를 담고 있는 개체를 리턴 해당 쿼리, 유틸 함수는 소스 코드가 복잡할 경우 비추천, 대신 sc..

렌더링 성능 최적화 - Redux

Redux의 useSelector 렌더링 문제 해결 문제점 Redux의 useSelector로 특정 데이터를 구독하는 컴포넌트는, 리덕스 스토어에서 특정 데이터(구독하지 않은 것일 수도 있음)가 변경되는 경우 알림을 받는다. 새로운 상태와 현 상태를 비교해 값이 다르면 리렌더링한다. 보통 useSelector(state => ({a: state.a, b: state.b})) 이 selector에 전달한 콜백의 리턴 값을 기준으로 비교한다. 위의 예시는 매번 새로운 객체가 생성되기 때문에 값이 다른 것으로 판단하고 리렌더링한다. (구독하는 데이터가 변경되지 않았음에도 불필요한 리렌더링) 해결 Object를 새로 만들지 않도록 State 쪼개기 // 변경 전 const { modalVisible, bgCol..

렌더링 성능 최적화 - Layout Shift 피하기

Layout Shift 피하기 Layout Shift: 화면 레이아웃이 계속 변경되는 것 -> 리플로우 발생, 사용성에 많이 안 좋은 영향 (ex: 원래 클릭하려던 애가 밀리면서 다른 애 클릭) 원인 사이즈가 정해져 있지 않은 이미지 사이즈가 정해져 있지 않은 광고 동적으로 삽입된 콘텐츠 Web font (FOIT, FOUT) 해결 이미지, 광고의 사이즈를 예측해서 width, height을 준다 동적으로 삽입될 콘텐츠의 크기를 예측하고 다른 화면요소들이 밀리지 않게 설계한다. 폰트 최적화 이미지 사이즈 비율 맞추기 이미지의 width, height을 고정된 값으로 주면 Layout Shift는 발생하지 않지만 이미지의 비율이 깨지게 된다. (반응형으로 이미지 크기가 변하는 경우) 이런 경우 Wrappe..