Next.js를 사용해 일상공유 Diary 서비스 만들기

Next.js를 사용해 Diary프로젝트를 진행하고 있다. 팀프로젝트를 하기 어려운 상황도 있었고, Next.js를 통해서 백엔드까지 구현할 수 있다는 것, 그리고 SSR( 아직까지 크게 와닿지는 않지만.. )을 공부할 수 있다는 생각에 더 큰 흥미를 느껴서 도전해보게 되었다. 강의를 들으면서 작은 토이프로젝트를 구현해보고, 그것을 바탕으로 Next.js기반의 프로젝트를 구상했다.

Next.js는 React.js와 비슷하지만 가장 뚜렷하게 큰 특징은( 내가 생각하기에 ㅋㅋ) (1)라우터와 (2) 서버 / 클라이언트 컴포넌트가 나뉘어져 있다는 것이다. 프로젝트를 만들면서 이 부분에 조금 고민이 많았던 것 같다.

(1) 라우터 : 폴더 경로에 따른 파일 시스템 계층 구조로 이루어져 있다. 폴더를 생성하면 그에 해당하는 페이지가 연결되는 방식이다. 프로젝트가 진행되면서 페이지가 하나씩 추가되었고, 해당 폴더도 늘어갔다. 폴더 관리를 어떻게 하는 것이 좋을까 하는 고민도 자연스럽게 하게 되었고, 이번 프로젝트에서는 페이지별로 컴포넌트와 스타일 파일을 관리해보는 것으로 선택했다.

(2) 서버 컴포넌트와 클라이언트 컴포넌트가 구분되어 있어서, 각각의 특징에 맞게 코드를 작성해야 했다. React.js에서 사용했던 useEffect, useState와 같은 hooks들은 서버 컴포넌트에서 사용할 수 없었다. 그래서 그들을 사용하려면 use client를 사용해야 했다.

Next.js는 SSR을 구현하기 위한 프레임워크다. 서버에서 렌더링 한 페이지를 클라이언트에 보내줘 빠른 로딩이 되게 하는 게 장점이다. 그렇기 때문에 서버 컴포넌트를 최대한으로 사용하고 사용자와 인터렉션이 있어야 하는 부분( 버튼 같은? )을 클라이언트 컴포넌트로 구현하는 것이 핵심이다. 왠지 'use client'를 쓰면 지는것 같은 느낌이ㅋㅋㅋㅋ 누가 답을 알려주면 참 좋겠다는 생각을 굉장히 많이 했다.

GPT에게 '내가 이렇게 생각해서 이렇게 구현했는데 이게 맞아? '라는 형태로 질문을 하면서 내가 이해한 내용을 확인하고, 잘못 이해한 부분은 다시 찾아보며 공부하는 형태로 프로젝트를 진행해갔다. 물론 GPT는 21년도 까지의 내용이 있기 때문에 대부분의 Next.js내용은 공식문서를 비교하며 봐야했다ㅋㅋㅋ 그 외에도 개발 전반적인 내용 비동기처리, react, js등의 여러 내용을 추가적으로 공부할 수 있는 기회가 됐다.♡

오늘까지 완성된 프로젝트의 진도는@_@ version01로,

• 기본 페이지 ( 홈 / 로그인 / 회원가입 / 작성 페이지 / 마이페이지 / 수정페이지 )는 완료.

• 기능은 회원가입 / 로그인 / 글작성 까지는 된다!!

아직은 개발중인 프로젝트의 개발 진행기다. 다음주에는 마이페이지 기능구현과 로그인 여부에 따른 세부적인 부분을 봐야할 것 같다. 뭔가 혼자 끄적거리는 것처럼 글을 썼더니 반말체가 되어버렸네요. 마무리만 존대로ㅋㅋㅋ 더 딥한 이야기는 블로그와 노션에 있어요. 모든 이야기를 공유하고 싶지만 시간이 늦었으므로. 이만 여기까지 하겠슴니다.

★blog