안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..

최근에 Next.js 학습을 시작했습니다. 오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다. 렌더링의 종류는 크게 4가지가 있습니다. CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다. 👉🏻CSR 특징 클라이언트(브라우저) 측에서 렌더링합니다. 1. 사용자가 Website 요청을 보냄 2. 브라우저는 HTML을 다운로드 합니다. 3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다. 1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고, 2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 ..

👉🏻Next.js + Typescript + Styled-components 직접 세팅 최근에 NextJS 공부를 시작했습니다. Next.js + Typescript + Styled-components를 한번 직접 세팅을 해보면서 궁금했던것들을 정리한 글입니다. 브이로그 잘 찾아보면 그냥 세팅하는 방법들은 잘 나와있습니다. 이 글은 NextJS 내부적으로 어떻게 돌아가는지 살펴본 글입니다. yarn create next-app --typescript 프로젝트 터미널에서 다음과 같이 명령을 작성합니다. yarn add styled-components @types/styled-components //rock_paper_scissors/src/pages/_app.tsx import { ThemeProvider..