이제 사전 교육을 마치고 본격적으로 프로젝트에 들어간다.
들어가기 전 프로젝트에서 어떤 기술 스택을 사용할지 목록을 보고 있었는데 Next.js가 보여서 프로젝트 전에 한번 정리 해두면 좋을것이라 생각 되어 글을 작성하게 되었다.

Next.js

Next.js는 기본적으로 React를 기초로 둔 프레임 워크이며 최근 많은 사람들의 관심과 사랑을 받고 있는 프레임워크이기도 하다.
특히 React.js 팀이 Next.js 팀을 도와주고 React.js에도 Next.js의 기능을 도입하는 등
서로 밀어주고 있는게 눈에 보일정도다.

심지어 최근 React docs 페이지를 Next.js로 만든것 같다.

장점

그렇다면 Next.js는 왜 사용해야 할까?
기본적으로 Next.js 하면 떠오르는 단어가 있다.
서버 컴포넌트, 클라이언트 컴포넌트, 서버 사이드 렌더링, 클라이언트 사이드 렌더링

서버 컴포넌트

서버 컴포넌트는 클라이언트가 아닌 서버에서 만들어지는 컴포넌트를 의미한다.
여전히 무슨 말인지 모르겠다.

더 깊게 파고 들어가자면 서버 컴포넌트는 서버에서 클라이언트에게 해당 페이지를 줄 때 미리 만들어주는 HTML 페이지를 생각하면 된다.
예전에 HTML에 대해 배운적이 있을것이다.
HTML은 기본적인 사이트의 뼈대를 의미한다.
간단한 페이지를 만들 수 있지만 뼈대만을 의미하기 때문에 어떤 동작이나 상호작용은 할 수 없다.

우리가 뼈만 남은 사람하고 대화하거나 춤을 출 수 없는것과 동일하다.
바로 이 뼈다귀를 미리 서버에서 만들어서 제공하는게 서버 사이트 렌더링이고 그걸 우리가 컴포넌트로 만들게 된다면 서버 컴포넌트가 된다.

이게 왜 장점인가? 싶은 생각이 들 수 있을 것이다.
그렇다면 리액트의 특징에 대해 생각해보면 된다.

리액트의 특징은 모든 화면이 <div id="root" /> 에서 시작된다.
이 하나의 태그에서 모든 것들이 그려지고 사라지는것을 반복한다.
한마디로 모든 것을 자바스크립트로 구현 하고 있으며 이는 실제 뼈대가 없기 때문에 뼈대부터 만들기 위해 로딩이 느려지고 사용자가 받아야하는 파일의 용량이 매우 커진다.

그리고 구글이나 빙 같은 검색엔진이 어떤 키워드에 대해 검색을 할 때 참고하는게 사이트의 HTML 정보다.
리액트는 그런 정보가 없기 때문에 사이트의 이름 같은것들은 가져올 수 있어도 사이트의 내용물은 가져올 수 없다.

그래서 Next.js는 그런 문제를 해결하기 위해 서버에서 React.js 코드를 가지고 HTML을 만들어 기본 뼈대를 클라이언트에게 제공하고 바로 뼈대가 움직일 수 있도록 여러 과정을 거쳐서 움직일 수 있도록 클라이언트 사이트에서 렌더링 하여 해결한다.

대신 이 서버 컴포넌트는 사용자의 브라우저에서 동작하는 것도 아니고 언급했다시피 HTML로 만들어지는 만큼 순수한 HTML에서 사용할 수 있는 영역만 코드로 작성할 수 있다.

예를 들어 버튼을 눌렀을 때 화면에서 뭔가 나타나고 사라지게 하는 자바스크립트 코드를 작성한다면 Next.js가 에러를 열심히 뿜을 것이다. (그 외에도 window 같은 객체들)
그런 버튼들은 사용자의 브라우저에서 동작할 수 있도록 클라이언트 컴포넌트로 만들어주면 된다.

풀스택 제작 가능

Next.js에서 마치 Node.js와 비슷한 역할을 하는 서버가 존재한다.
이를 통해서 백엔드에서 필요한 CRUD 같은 간단한 작업은 Next.js의 Route를 통해서 간단하게 처리 할 수 있다.
특히나 기존 프론트엔드에서 그런 DB에 접근한다면 발생할 수 있는 보안 문제도 Next.js에 있는 백엔드에 접근하는 것이기 때문에 발생하지 않는다.
본격적인 백엔드가 필요하다면 굳이 필요는 없지만
간단하게 게시판을 만든다던가 더미 api를 작성한다면 나름대로 의미 있는 기능이다.

단점

러닝커브가 React와 비교하여 좀 더 큰 비용이 발생한다.
아무래도 React의 프레임워크이기 때문에 React보다 좀 더 알아두어야 할께 많으며
특정 컨벤션들이 존재하기 때문에 (파일 구조가 파일 이름 규칙 등) 그런것들도 익혀야 한다는 단점이 있다.

그 이외에 단점에 대해선 아직 잘 모르겠다.

마지막으로 정리 하면서

Next.js에 대해 간단하게 알아보고 정리 해보았다.
장점과 단점에 대해 간략하게 적었는데
서버 컴포넌트가 필요하지 않고 간단하게 만든다면 굳이 Next.js를 사용할 이유가 없다.
하지만 내가 구글과 검색 엔진 같은걸로 사이트를 홍보해야한다면
아니면 사이트 규모가 어느정도 크다면
Next.js를 선택하는 것도 의미 있는 행동이라 생각한다.
위의 스크린샷은 Next.js 13 app directory가 베타일때 공부하면서 테스트 하면서 찍은 스크린샷이다.

네트워크 탭에서 미리 HTML이 어떤 모양으로 들어오는지 확인할 수 있는데
Next.js의 서버 컴포넌트로 작성한 만큼
HTML이 미리 작성되어서 들어오는걸 미리보기로 볼 수 있었다.

계속해서 프로젝트와 취업을 위해 Next.js를 공부하고 기록해나가고 싶다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프