⭐Next JS

🪐Next JS란?

Next.js는 React 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)을 지원하는 웹 애플리케이션 프레임워크입니다. Next.js는 개발자들이 React를 사용하여 빠르고 확장 가능한 웹 애플리케이션을 구축할 수 있도록 도와줍니다.
Next.js는 기본적으로 React의 기능을 갖추고 있으면서도, 추가적인 기능과 개발 경험을 제공합니다. 주요 기능 중 하나는 서버 사이드 렌더링(SSR)입니다. 이는 서버에서 페이지를 렌더링하여 초기 로딩 속도를 개선하고, 검색 엔진 최적화(SEO)를 향상시킵니다. 이를 통해 페이지의 내용을 검색 엔진이 잘 인덱싱하고, 초기 로딩 속도를 개선하여 사용자 경험을 향상시킬 수 있습니다.
-chatGPT

기존에 React는 Client Side Rendering을 한다. Client는 서버에게 요청에 의한 응답을 받고 js파일을 다운로드 받은 다음, React를 실행해서 화면을 볼 수 있다. 하지만 React가 실행되어야 페이지가 보이기 때문에 크롤링이 되지 않는다. 그러므로 검색 엔진 최적화가 되지 않는다.

하지만 SSR에서는 Client에게 이미 렌더링된 HTML파일을 보내주기 때문에 크롤링이 가능하며 화면을 보기 위해 js를 실행하지 않아도 된다.

🪐설치 방법

npx create-next-app@latest --typescript ./

위 키워드는 최신 NextJS를 다운받을 수 있지만 우리는 12버전으로 실습을 진행하기 때문에

npx create-next-app@12.1.0 --typescript ./

으로 설치를 진행한다.

🪐기본 파일 구조

styles/Home.module.css는 Home 컴포넌트를 꾸미기 위한 (Home 컴포넌트에 종속된) 스타일이다.

⭐Pre-rendering

🪐Pre-rendering이란?

NextJS는 모든 페이지를 위한 Html을 Client side 에서 js로 처리하기 전에 즉, 사전에 생성한다는 것이다. JS를 사용해서 처리하기 이전에 페이지를 보여주므로 검색엔진 최적화가 좋아진다.

🪐Pre-render Test

pre render 테스트를 하기 전에 먼저 js를 disable해야한다. 하는 방법은 https://developer.chrome.com/docs/devtools/javascript/disable/
위 페이지를 참조하면 된다.

개발자 도구를 연 다음, ctrl + shift + p 를 누른 후에

javascript를 검색한 후 disable javaScript를 선택한다.

선택후에 Source에 경고등이 켜지면 성공이다.

그 상태로 react를 기반으로 하는 사이트에 들어가면
https://create-react-app.examples.vercel.com/

이런 화면이 보인다. 말 그대로 app을 실행하기 위해 JS를 run해야 한다는 뜻이다.

하지만 nextJs를 기반으로 하는 사이트에 들어가면
https://next-learn-starter.vercel.app/

화면이 렌더링이 되는 것을 볼 수 있다.

🌈결론

pre-rendering을 사용하면은 화면에 요소들이 보이기는 하지만 js가 실행되기 전에는 기능은 없다. 하지만 pre-rendering을 하지 않으면은 js가 실행되기 전에 기능 뿐만 아니라 화면도 보이지 않는다.

⭐Data Fetching

기존에 React에서는 useEffect()를 통해서 데이터를 가져왔지만 nextJs에서는 용도에 따라서 여러가지의 방법으로 데이터를 가져올 수 있다.

🪐getStaticProps

위와 같이 특정 api 서버에 데이터를 요청한 후 받아온 데이터를 props에 넣어서 반환한다.

그러면 위와 같이 Blog라는 컴포넌트에서는 props의 posts를 distructuring을 통해서 받아온 다음 사용한다.

getStaticProps는 페이지를 pre-rendering 하는데에 필요한 데이터를 가져올 때 사용한다.

🪐getStaticPaths

export async fucntion getStaticPaths() {
  return {
	path : [
      { params : {...} }
    ],
   	fallback: true // false or "blocking"
   };
}

동적 라우팅이 필요할 때 getStaticPaths로 경로를 정의하고, HTML build 시간에 렌더된다.

🪐getServerSideProps

getServerSideProps는 Next.js 프레임워크에서 제공하는 서버 사이드 렌더링(SSR)을 위한 함수입니다. 이 함수를 사용하면 페이지 컴포넌트가 서버 측에서 렌더링되기 전에 데이터를 미리 가져올 수 있습니다.
getServerSideProps 함수는 페이지 컴포넌트 파일 내부에서 export된 async 함수입니다. 이 함수는 서버 측에서 실행되며, 페이지 컴포넌트의 초기 렌더링 시 서버에서 필요한 데이터를 가져오고 해당 데이터를 페이지 컴포넌트의 props로 전달합니다. 이렇게 서버 측에서 데이터를 가져오면 페이지 컴포넌트가 클라이언트로 전송되기 전에 데이터가 채워진 상태로 렌더링됩니다.
-chatGPT

export async function getServerSideProps(context) {
  // 데이터를 가져오는 비동기 로직을 작성합니다.
  // ...
  
  // 가져온 데이터를 props로 반환합니다.
  return {
    props: {
      data: ...
    }
  }
}

☄️getStaticProps vs getServerSideProps

getStaticProps 함수는 정적 사이트 생성에 적합한 페이지에 사용됩니다. 컨텐츠가 자주 변경되지 않는 블로그 게시물, 제품 목록, 문서 페이지 등은 사전에 렌더링된 정적 HTML 파일을 서비스하는 것이 효율적입니다.

중요한 점은 getStaticProps 함수는 빌드 시점에 실행되므로, 데이터가 업데이트되면 다시 빌드해야 새로운 데이터가 반영됩니다. 데이터의 업데이트가 자주 발생하거나 동적인 데이터가 필요한 경우에는 getServerSideProps를 사용하는 것이 적합합니다.
-chatGPT

⭐TypeScript

🪐TypeScript가 나오게 된 배경

javaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 그러나 JavaScript는 동적 타입 언어로서, 변수의 타입을 런타임 시에 결정하기 때문에 개발자가 실수로 잘못된 타입을 사용할 수 있습니다. 이로 인해 런타임 에러가 발생할 수 있으며, 디버깅과 유지보수에 어려움을 겪을 수 있습니다.

또한, JavaScript는 동적 타입 언어이기 때문에 컴파일 단계에서 타입 체크를 할 수 없습니다. 따라서 코드의 에러를 발견하기 위해서는 실행해봐야만 하는 런타임 시점에서 오류를 찾아내야 합니다. 이는 개발자의 생산성을 떨어뜨릴 수 있고, 큰 규모의 프로젝트에서는 유지보수에 어려움을 초래할 수 있습니다.

이러한 JavaScript의 한계를 극복하고 개발자 경험을 향상시키기 위해 TypeScript가 등장했습니다. TypeScript는 정적 타입 언어로서, 변수의 타입을 미리 명시하고 컴파일 단계에서 타입 체크를 수행합니다. 이를 통해 개발자는 코드를 작성하는 과정에서 타입 관련 에러를 사전에 발견할 수 있으며, 더욱 신뢰성 있는 코드를 작성할 수 있습니다.

🪐TypeScript란?

js에 타입을 부여한 언어이다. js확장판이며 js에 dataType을 명시하는 기능이 추가되었다.

기존에 js와는 다르게 TypeScript로 작성된 파일은 컴파일러로 컴파일을 한 이후에 만들어진 js소스코드로 소스코드를 동작시킬 수 있다.

🌈type system

🪐TypeScript를 사용하는 이유