Next.js 의 Route Handler 를 통해, 백엔드 구현이 가능하다! 이에 대해 알아보자 Route Handler 란? 공식 홈페이지의 설명을 인용하자면, 주어진 route 에서 사용하는 웹 요청 / API 응답을 처리하는 custom handler 구현이 가능한 기능이라고 한다. 데이터를 요청받는 과정과, 이를 클라이언트에게 반...

Next.js 에서 컴포넌트 렌더링이 어떻게 이루어지는지 알아보자. Next.js 13 버전 이후 부터는 리액트 처럼 컴포넌트 단위로 렌더링이 이루어지게 됐다. 그런데, 여기서 컴포넌트의 구분이 생겼는데 서버 컴포넌트(Server Component) 클라이언트 컴포넌트(Client Component) 이렇게 2개로 구분할 수 ...

이제 Next.js 를 사용해보자! 설치 npx create-next-app@latest create-next-app 을 통해 설치하기를 권장하고 있다. 이렇게 설치하고 나면 아래와 같은 터미널 프롬프트가 출력된다. 이후 프로젝트 파일 구조는 아래와 같이 생성된다. 라우팅 과정 Tree 계층 구...

Web FrameWork 인 Next js 에 대해서 다루어볼 차례가 됐다! Next.js 란? 리액트 기반 웹 프레임워크로서, React 를 확장해 다양한 기능을 제공한다. Next.js 에서 제공하는 대표적인 기능 다양한 렌더링 기법: CSR, SSR, SSG, ISR 라우팅: 파일(폴더) 기반 라우팅 Route Hand...

TypeScript 내의 기본 타입을 간단히 정리해보려고 한다! ⭕ ❌ Boolean 2 가지의 상태를 표현하고 싶을 경우 사용해주면 되겠다. 3 가지 이상을 표현하고 싶다면 enum 이나 string 을 쓰자! function isValidPassword(password: string): boolean { return pa...

이제 TypeScript 를 마주했다! 간단한 설치법 부터, 기본 설정과 관련해서 내용을 정리해보았다. TypeScript 란? 다음과 같이 JavaScript 가 가진 약점들을 보완하기 위해 등장했다. 런타임 시에 결정되는 변수 타입 약한 타입 체크 등 느슨한 규칙 JS의 단점을 알 수 있는 아래 얘시를 보자. const ...

이번 프로젝트에서 처음으로 네이버 지도 API 를 사용했는데, 이번 경험으로 카카오 맵만 사용하기로 했다. 그러면서 처음 접한 React 기능이 있어 같이 작성해보려고 한다.