All67 [22.04.21] Data Fetching in Next.js Next.js란? The React Framework for Production. 공식 사이트를 타고 들어가면 가장 먼저 확인할 수 있는 문구다. 위 표현 그대로 Next.js는 대규모 서비스에 특화된 구조와 설계를 간편하게 만들 수 있도록 도와주는 리액트 프레임워크라고 할 수 있다. Next.js 내에서는 페이지를 렌더링 하는 다양한 방법을 지원하고 있기 때문에 각각의 장점을 두루 흡수할 수 있는데, 이 글에서는 다음과 같은 렌더링 기법의 특징과 해당 기법을 구현하기 위해 Next.js에서 제공하는 api들을 알아보려 한다. CSR SSR SSG CSR CSR은 Client Side Rendering의 약자로, 데이터의 요청이 발생하면 클라이언트가 데이터를 가져와 html을 다시 그린다. 이는 리액트의.. 2024. 1. 9. [22.01.06] JS의 Map vs Object 최근에 알고리즘과 자료구조를 공부하면서 Set, Map을 의식적으로 자주 사용하려 했다. 그 결과, 어떠한 상황에서 이러한 자료구조가 어울리는지 조금 더 알게 되었다. 하지만 Map은 기본 객체와 비교해보았을 때 어떤 부분이 다른지 이해가 잘 되질 않았다. 이번 글을 통해 각 차이점을 살펴보고 각 자료구조를 어떻게 사용하면 좋을지 알아보려 한다. 1. Default Keys Map - default key가 없다. Map 내부의 중복만 방지한다면 어떤 값을 key로 선언하든 상관이 없다. Object - built-in prototype을 가지고 있기 때문에 prototype 객체의 default key와 충돌 가능성이 있는 네이밍은 피해야 한다. (e.g. toString, hasOwnProperty .. 2024. 1. 9. [21.12.22] React + TypeScript + Webpack + Babel (2021) 그동안 학습하고 직접 적용해보았던 여러 환경설정들을 정리할 겸 포스팅을 남겨보려 한다. Spec Yarn ESLint Prettier Webpack Babel TypeScript React Package Manager(Yarn) yarn init -y yarn install TypeScript + ESLint 기존의 TSLint는 deprecated 되었기 때문에 ESLint에 TypeScript 지원 설정을 추가해주는 방향이 권장되고 있다. 관련 문서를 참고하여 설정을 그대로 진행하였다. 1. library, parser, plugin 설치 yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin 2... 2024. 1. 9. [21.10.22] 초심자를 위한 React Testing Library React Testing Library(이하 RTL)는 구현 기반의 테스트 도구인 Enzyme의 대안으로 자리 잡은 테스트 도구입니다. 따라서 RTL은 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것을 권고합니다. 예를 들어 Hello World라는 코드가 있다면, RTL은 div 태그를 사용하는지보다 Hello World 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 그리고 이와 같이 구현보다 기능에 초점을 맞춘 테스트 방식은 신뢰도를 높임과 동시에 코드 리팩토링 시 테스트 코드 수정 빈도를 줄일 수 있습니다. The more your tests resemble the way your software is used, the more confidenc.. 2024. 1. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음