나 살기가 너무 힘들어 - 블로그 개발자의 개발 후기
이 글에서는 여러분이 현재 보고 있는 블로그를 만들어 가는 과정을 공유하려고 합니다. 그러나, 이 글에서는 블로그에서 사용한 코드에 대해 집중적으로 언급하지 않을거에요. 주로 저의 경험과 그 과정에 대해 이야기하려고 해요. 소스코드에 대한 궁금증이 있으신 분들은 이 블로그의 깃허브 저장소 링크를 확인해주세요.
6월의 어느 날, 학급 특색활동 시간이었어요. 그때 무엇을 할까 고민하다가 결국 부용고등학교를 소개하는 글들을 모아놓은 블로그를 만들기로 결정했어요. 하지만, 개발할 줄 아는 사람이 없어 저 혼자서 모든 개발 작업을 진행했어요. (사실, 학교에 개발을 할 수 있는 사람이 저밖에 없어서 다른 선택의 여지가 없었습니다.)
아쉽게도 저는 디자인 감각이 그리 좋지 않습니다. 그래서 일명 '공대 디자인'이라고 불리는, 특유의 아름다움이 떨어지는 디자인을 만들어내는 사람이었습니다. 그러나 운 좋게도, 저희 학교 밖에 있는 멋진 사람들의 도움을 받아, 블로그 디자인을 완성할 수 있었죠.
블로그 디자인을 받은 저는 이제 사용할 기술을 골라야 했습니다. 여전히 웹 개발에서는 React.JS가 많이 사용되고 있죠? 하지만 React.JS는 CSR (Client Side Rendering)를 사용하여서 인터넷 환경이 좋지 않은 환경에서는 최초 접속 시에 심각한 시간이 걸릴 수도 있고 SEO 생성에 좋지 않은 영향을 미치기 때문에 무엇을 사용할지 생각해 보다가 여태껏 한 번도 사용해 본 적은 없지만 SSR (Server Side Rendering)를 사용하는 Next.JS를 사용하기로 했어요. 웹 개발 시장은 빠르게 변화하고 있고 언제 Next.JS를 대체할 기술이 나올지는 모르겠지만 지금 당장 개발을 해야 하니 사용했어요.
Yarn을 사용하여 create-next-app을 설치하고 프로젝트 폴더를 생성하였습니다. 생성 후 먼저 저는 components 폴더를 만든 후 Header와 Footer를 만들었습니다. Header와 Footer에 고정 스타일링을 하기 위해 @emotion/styled 모듈을 설치해 스타일링 해준 다음, layout.tsx에 지정해주었습니다. 이렇게 하면 모든 페이지에서 Header와 Footer가 표시됩니다.
그 후 app 폴더 밑에 page.tsx 파일을 작성하기 시작했습니다. 사이트에 접속하자마자 표시될 내용을 적고 style.tsx에 따로 스타일링 할 코드를 작성 후 page.tsx에 적용하였습니다.
그다음에 글을 올라오게 만들어야 했어요. 글을 올라오게 만들게는 생코딩을 하는 것이 방법이 있을 수 있지만 개발자들 사이에는 이런 말이 있어요. 네가 원하는 코드? 이미 너보다 잘하는 사람이 만들어 놓음. 네, 이 말대로 이미. Next.JS에는 정적 사이트를 만들 수 있도록 도와주는 next-contentlayer라는 모듈이 있어요. 이 모듈의 config를 작성해서 어떤 글을 어떤 경로에서 불러올지 선언해 주어 재학생 페이지와 예비 입학생 페이지에 표시될 글을 나눌 수 있도록 설정하고 Type도 지정해주었어요.
이제는 글 목록을 렌더링 해줄 코드와 글을 렌더링 해줄 코드가 필요해요. students와 prospective_students라는 폴더를 생성하고 그 아래에 재학생과 예비 입학생 페이지에 표시될 내용을 생성했어요. page.tsx 파일에 제목과 설명을 적고 그 밑으로 각 페이지에 표시되어야 할 글을 불러오도록 해야 하는데 여기서 엄청난 어려움을 겪었어요. posts/students 혹은 posts/prospective_students에 저장된 파일들을 next-contentlayer를 이용해 불러와야 하는데 참고할 코드도 정말 적고 공식 문서가 엉망진창이어서 예제 깃허브 저장소에서 어떻게든 코드를 붙여서 가능하게 만들었습니다.
이제 글 렌더링을 해줄 코드가 필요한데, 앞서 말했던 것처럼 공식 문서가 많이 엉망이라 예제 깃허브 저장소에서 참고하여 코드를 짜야 했어요. 글 목록은 next-contentlayer에서 불러와서 json 파일로 쉽게 저장해 줘서 날짜와 제목, 작성자를 표시하고 클릭하면 도메인/페이지/파일-이름으로 이동하게 만들었어요. 그래서 students 폴더와 prospective_stuents 폴더 밑에 [... slug]라는 폴더를 만들고 그 아래에 page.tsx를 작성해서 글을 렌더링 하게 만들었어요. 그다음에는 style.tsx를 생성해서 스타일링을 했습니다.
여기까지가 제 개발 과정을 담은 이야기예요. 모두 다 이해하셨나요? 사실 이 글은 모두가 이해하도록 쓴 글은 아니에요. 나중에 부용고등학교에 재학하고 있으면서 저처럼 개발이 취미인 어떤 학생이 저와 비슷한 프로젝트를 시작하게 될 때 도움이 되길 바라는 마음에서 작성했습니다. 그런데 웬만하면 시작조차 하지 마세요. 긴 글 읽느라 수고하셨습니다.