doeunn.log

Jest 이번 포스팅의 주제인 React Testing Library(RTL)는 컴포넌트를 가상 DOM으로 렌더링하는데 도움이 됩니다. 지난 글에서 render를 통해 확인했었습니다. 또한, 가상 DOM을 검색하는 데 도움이 되는데 create-react-app과 제공되는 테스트에서 getByText 메서드를 확인했습니다. 아직 사용하진 않았지만, 곧 가상 DOM과 상호 작용하여 요소를 클릭하거나 텍스트를 입력할 것입니다. 여기까지가 RTL의 역할입니다. 테스트 러너의 필요 → Jest 테스트를 찾고 실행하며 단언(Assertion)할 무언가가 필요합니다. 이때 Jest를 사용합니다. Jest가 유일한 테스트 러너는 아니며 Mocha나 Jasmine도 있지만 테스팅 라이브러리에서 Jest를 권장하며 cr..

Testing을 하는 이유 Testing이란 코드의 에러를 확인하고 추후 나타날 수 있는 이슈와 버그를 예측하는 과정인데요. 즉, 모듈, 함수에 특정 값을 대입했을 때 기대한 결과값이 도출되는지, 렌더링된 화면에 내가 원하는 요소, 콘텐츠 등이 들어있는지 등을 확인하기 위해서입니다. 이걸 다르게 생각해 보면, 내가 만든 서비스를 매번 일일이 실행한 후에 모든 기능을 손수 눌러서 확인하지 않고도 내가 의도한 대로 온전히 작동하는지 빠르게 점검하기 위함이 되겠습니다. 테스트 실행 $ npm test 위 명령어를 bash에 입력해주게 되면, Jest에서 Watch 모드 실행으로 시작되게 됩니다. 우선 지금은 a를 입력해서 테스트를 실행해 봅시다. 테스트는 실행했고, 한 개의 테스트를 찾아 통과했습니다. 그런데..

Storybook이란? Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 스토리북(Storybook)은 프론트엔드 개발에 사용되는 인기있는 오픈 소스 도구입니다. 주로 UI 컴포넌트를 독립적으로 개발, 테스트 및 문서화하는 데 도움이 됩니다. 저 같은 경우에도 공용 컴포넌트를 만들 때 당장 사용하면서 만드는 것이 ..

이번 글에서는 이펙티브 타입스크립트를 공부하며 알게 된 unknown 타입에 대해 더 자세히 알아보려고 합니다 :) ✔️ 함수의 반환값과 관련된 unknown 함수를 하나 작성해 봅시다. function parseYAML(yaml: string): any { // ... } 함수의 반환 타입으로 any를 사용하는 것은 좋지 않은 설계이므로, 대신 호출한 곳에서 반환값을 원하는 타입으로 할당하는 것이 이상적입니다. interface Book { name: string; author: string; } const book: Book = parseYAML(` name: Wuthering Heights author: Emily Brote `) 위와 같이 Book이라고 타입을 선언해주지 않고 생략을 하게 되면, ..

Next.js가 제공하는 여러 기능들 1. page-based routing system(with dynamic routes) pages 하위에 있는 파일들을 가지고 Routing을 구현했었습니다. 그리고 Slug를 통해 Dynamic한 routes도 제공하고 있었습니다. 2. Pre-rendering SSG / SSR Next.js에서 Data Fetching 하는 방식을 말하면서 pre-rendering에 대해서도 이야기 했었고, 그 중에서도 SSG와 SSR이 있었죠? SSG는 Static Side Generation이고, SSR은 Server Side Render였죠. 그래서 빌드하는 타이밍에 먼저 렌더해 놓을 것인가 아니면 요청이 올 때마다 새로 렌더해서 줄 것인가의 차이였습니다. 그렇지만 둘 다..

API란? Application Programming Interface의 약자로, 응용 프로그래밍 인터페이스라고 해석할 수 있습니다. 쉽게 말해, 컴퓨터나 컴퓨터 프로그램 사이의 연결을 의미합니다. 즉, 연결을 어떻게 할 것인가에 대한 정의라고 보면 되겠습니다. Frontend Service - Backend Service 간의 연결 Frontend가 만드는 영역을 Frontend Service, Backend가 만드는 영역을 Backend Service라고 하겠습니다. 이 두 가지가 서로 연결될 때 API가 활용됩니다. Frontend Service는 고객과 닿아있고, Backend Service는 DB에 닿아있습니다. 고객이 DB에 접근하기 위해 FE와 BE가 연결되어야 하고, 이때 API를 활용합니..