[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (3) - 페이지 및 폴더 구조

우선 개인적으로 Tailwind의 코드 형식을 썩 좋아하지 않는다. 가독성뿐만 아니라 인라인 스타일을 먹여 놓은 듯한 기분이 들어서 아직 어색한게 아닐까 하는 생각이 든다.

가장 선호하는 방식은 기존 유명한 라이브러리(Bootstrap, Material UI, AntD 등)에 scss 형식으로 직접 수정하는 방식인데, 이왕 하는거 그냥 구조를 적절히 이해하면서 코드를 작성해보자- 라는 생각으로 scss로만 진행했다. (추후 NextUI 적용을 위해 Tailwind를 어쩔 수 없이 반영한다..ㅜ)

 

src 폴더 안에 app 폴더와 model 폴더가 나누어져 있고, 모든 페이지는 app 폴더 내부에서 움직인다.

 

전체적인 css의 통일성을 위해서 globals.css에 내가 사용하려는 색상을 변수로 지정하여 사용한다.

globals.css

 

layout 폴더에 Header와 Footer를 반영함으로써 위/아래로 고정된 헤더와 푸터가 구성될 있도록 적용했다. position: 'sticky'를 통해 헤더는 스크롤이 진행될 때 상단에 붙어 있을 수 있도록 반영했다. sticky를 사용할 때는 부모요소에서 overflow: 'hidden'이 적용되지 않아야 함을 잊으면 안된다.

app/layout.tsx

한국어로 구성될 사이트이기에 html lang는 en -> ko 로 변경하였다. 예전에 해당 부분을 놓친 적이 있어 피드백을 받은 이후 항상 놓치지 않으려 하는 부분 중 하나이다ㅎ

Providers.tsx 는 ProgressBar를 사용하기 위해 NextUI를 적용해야 했고, 따라서 Providers로 감싸 NextUI가 반영될 수 있도록 처리했다.

 

페이지 폴더 내부에서 폴더 prefix에 _(언더바)를 붙임으로써 라우팅이 되지 않도록 처리 했고, 해당 폴더 내부의 파일로 page.tsx를 구성하는 구조 만들었다.

따라서 about/page.tsx는 분리된 컴포넌트로 구성될 수 있도록 구현했다.

app/about/page.tsx

 

props로 받는 title은 UI의 통일성을 위해 적용했으며, 각 컴포넌트별 받는 title은 전부 대문자로 구현할 수 있도록 적용했다.

 

Next14 는 기본적으로 not-found 페이지 라우팅을 제공해주는데 404 페이지를 대신하여 홈으로 다시 라우팅 해주는 방식을 사용했다. ServerSide Rendering 이기 때문에 redirect 함수가 적용된다.

app/not-found.tsx



위의 방식으로 구성된 폴더 구조와 파일들에 css를 적용하여 페이지 디자인을 적용했다.

데이터를 하드코딩하는 습관을 최대한 버리고자 utils 폴더에는 화면에 뿌려진 내용을 따로 입력하여 전달 받았다. 수정하기 편하도록 markdown 형식으로 반영하면 어땠을까 하는 생각도 든다.

app/_utils/utils.ts