### 새로운 시작은 늘 설레게 하지

SSR(server side rendering)에 대해 관심이 생겨 Next.js를 공부하던 도중 개인 개발 자료나 공부한 내용, 포트폴리오 등을 기록할 수 있는 블로그가 있으면 좋겠다는 생각이 들었고 Next.js 기초를 마친 후 바로 블로그 제작 프로젝트를 시작하게 되었다.
 
***
 
### 주요 사용 기술

**Frontend** : React.js, Next.js, Typescript
**DB** : planetscale
**ORM** : prisma
**Depoly** : vercel
 
***
 
### Next.js

Next.js는 React를 기반으로하는 프레임워크로 Next.js를 사용하면 SSR, serverless 등 편리하고 좋은 기능을 사용할 수 있다.

[ 편의성 ]
Next.js로 프로젝트를 시작하면 정말 빠르게 프로젝트를 진행할 수 있다.기존 React에서는 페이지를 제작하면 url을 라우팅해줘야 해당 페이지로 이동할 수 있었는데 Next.js에서는 pages폴더 내에 생성한 파일의 이름과 위치가 즉시 url이 되어 정말 편리했다.

> pages 폴더에 블로그 메인 페이지인 blog.tsx 파일을 생성한 뒤 'localost:3000/blog'라는 url을 입력하면 blog.tsx 페이지에 접근한다.

 

또한 serverless로 구현이 가능하여 서버를 따로 구현하지 않아도 된다는게 너무 편리했다. 개인적인 소규모 프로젝트를 진행할 때 백엔드를 구현하는 것에 시간이 많이 소모되었지만 Next.js에서는 pages 폴더 내의 api 폴더에 생성한 파일이 서버단에서 동작하는 파일이 되고 폴더명과 파일명이 url이 된다.

> pages > api > user > index.ts 와 같은 경로에있는 index.ts에 접근하려면 'localhost:3000/api/user'로 request를 전송하면된다.

 
[ 성능ㆍ기능 ]
SSR(server side rendering)과 SSG(static site generator)을 배우고 경험하며 신선한 충격을 받았다. SSR을 사용하여 동작하는 코드는 브라우저에 전송되기 전에 이루어지는 과정으로 서버단에서 동작하는 것과 같은 역할을 한다. 또한 기본적으로 페이지 렌더링은 사용자의 브라우저에서 이루어지는데 SSR을 이용하면 서버에서 직접 렌더링한 데이터를 사용자에게 넘겨주기 때문에 사용자의 PC 사양이 좋지 않더라도 빠르게 페이지를 이용할 수 있다.
 
SSG는 블로그 제작에는 이용하지 않았지만 SSG의 개념을 처음 봤을 때는 충격이 컸다. 프로그래밍을 처음 시작하고 HTML, CSS, Javscript 기초를 배우며 정적 페이지를 많이 만들어보고 데이터를 이용한 동적 페이지를 만들기 위해 노력했는데 이제는 다시 정적 페이지를 만들기 위해 노력한다는것이 신기했다.
 
SSG 처리를 하게 되면 데이터를 가진 페이지를 전부 html로 생성하여 빌드하게된다. 해당 방법을 이용하게 되면 백엔드로 기본적으로 API를 호출하지 않아도 페이지가 완성되어있기 때문에 로딩이란것이 없다.
 
***
 
### TypeScript (TS)

TS도 이제 막 공부하여 프로젝트에 처음 적용했는데 사용하자마자 왜 TS를 사용하는지 이해할 수 있었다.처음 사용했을 당시에는 TS가 협업에 효율적이고 type이 구분되어 있지 않은 javascript에 type을 정의 한다는 정도로 인식했는데 실제로 사용해보니 type을 정의하여 자동완성 기능 사용이 가능해지고 type이 다르거나 오타가 발생하면 즉시 에러 표시가 나타나 작업의 효율성이 크게 증가했다.
 
단순 Javascript 환경에서의 작업은 오타로 인한 오류를 정말 많이 봤었는데 이번 프로젝트를 진행하면서는 오류 화면을 본 기억이 별로 없는 것 같다. (앞으로 개인 프로젝트를 진행하면 대부분 TS를 사용할 것 같다...)
 
***
 
### planetscale & prisma

planetscale은 매우 간편하며 git과 매우 유사한 방식으로 DB를 관리할 수 있어 효율적이었다.git 처럼 branch를 나누어 DB를 관리할 수 있고 개발용 branch에서 작업 후 실서비스용 branch로 변경사항을 적용한다는게 정말 마음에 들었다.
 
TypeScript ORM인 primsa도 엄청난 생산성과 효율성을 느끼게 해주었다.기존에는 다소 번거로웠던 스키마 관리나 쿼리문들을 매우 편리하게 사용할 수 있게 해주었으며 처음보는 사람들도 바로 사용할 수 있을 정도로 기본 사용법들이 쉬운 편이었다.
 
***
 
### vercel

배포는 next.js 배포 환경에 제일 좋다는 vercel을 이용했다.vercel을 이용한 배포는 내가 경험한 배포중 가장 쉽고 빨랐다. 특히 사용하며 개발자의 사용성에 대해 많이 신경썼다는 것을 느낄 수 있었다.배포 방법은 github 계정을 연결하면 내 github 저장소를 전부 불러오고 그중 원하는 저장소를 선택하기만 하면 자동으로 빌드를 시작하고 에러가 없으면 배포를 완료한다.배포하는 것 역시 정말 편리했지만 사용성이 정말 좋았다.
 
한번 깃 저장소를 연결해 놓으면 작업 후 main 브랜치에 푸쉬하면 자동으로 리빌딩하여 재배포 한다는 것은 너무나 편리했고 소규모 프로젝트는 무료로 이용할 수 있는 것도 좋았다.배포를 완료한 뒤 홈페이지에 접속했을 때는 사소한 문제가 있었다. 웹폰트를 불러오는 프로토콜이 https가 아닌 http라 vercel에서 차단해 원하는 웹폰트를 사용하지 못하는 문제가 발생했고 큰 문제가 아니라 이는 나중에 수정하기로 했다.
 
가장 큰 문제는 개발환경에서는 페이지 이동 및 API 호출 시 즉각적으로 결과가 반환되었는데 배포된 환경에서 페이지 이동 시 1초 \~ 2초정도 걸려서 매우 당황스러웠다. SSR을 고보고 API도 확인해보며 몇 시간 정도 삽질을 하다 원인을 알아 냈는데 무료버전의 vercel 이용시 사용 지역이 북미로 설정되어있어 기본적으로 웹페이지 이용시 살짝 느리다는 느낌을 받을 수 있는데 사용중인 DB의 지역이 도쿄로 되어있어 한국 -> 북미(웹 접속) -> 도쿄(DB 호출) -> 북미(응답) -> 한국 과 같은 말도 안되는 프로세스가 이루어지고 있었다. 해당 사실을 인지하니 1초 \~ 2초만에 페이지가 로드되는 것도 대단하다는 생각이 든다.
 
***
 
### 마치며

다른 블로그 플랫폼을 이용하지 않은 이유는 개인 웹사이트를 만들고 나만의 웹사이트에 자유롭게 개인 프로젝트나 작업들을 올리고 싶어서였다. 그렇기 때문에 앞으로도 다양한 프로젝트로 업데이트 하고 싶고 블로그 역시 부족한 부분이나 수정 사항들이 좀 있기 때문에 조금 씩 손봐야 할 것 같다!!

### 새로운 시작은 늘 설레게 하지

SSR(server side rendering)에 대해 관심이 생겨 Next.js를 공부하던 도중 개인 개발 자료나 공부한 내용, 포트폴리오 등을 기록할 수 있는 블

NextJs를 이용한 개인 블로그 제작 후기