블로그, Next.js로 직접 개발하기

모바일 및 태블릿에 대한 반응형 디자인을 적용했습니다.

블로그 주소

https://vividnow.vercel.app/

VIVIDNOW의 블로그

 

 

기획 의도 : 왜 블로그인가?

2018년, 우연히 제 손에 들어온 <해커와 화가>라는 책이 있습니다. 책의 저자는 에어비엔비 등을 배출해서 유명한 미국의 스타트업 엑셀러레이터 'Y Combinator'의 공동창업자인 폴 그레이엄(Paul Graham)입니다. 미술 작가로서, 프로그래머로서, 창업가로서 그가 여러 해 동안 작성해 온 에세이를 묶어서 낸 결과물이 <해커와 화가>인 것입니다. 신선한 책의 제목만큼이나 내용도 흥미롭답니다. 세상을 바라보는 그만의 통찰력과 새로운 관점이 많이 담겨있어 즐겨 읽을 수 있었습니다. 프로그래밍에 지식이 없던 당시였음에도, '무엇이 좋은 프로그래밍 언어인가?'를 논하면서 LISP에 대한 그의 애정을 드러내는 내용 역시도, 제 마음을 사로 잡았습니다. 당시 인터프리터니, 어셈블러니 외계어 같았던 키워드들도 손수 찾아볼 정도로요.

 

폴 그레이엄의 저서와 그의 블로그

좋아하는 영화나 책을 반복해서 접하다보면, 후속 시리즈도 소비하고 싶어지기 마련입니다. 동시에 그 컨텐츠의 제작자가 어떤 사람인지에 대해서도 궁금해지기도 합니다. 책에는 담겨있지 않은 그의 새로운 에세이를 찾고 싶은 마음에 구글링을 하다보니, 폴 그레이엄의 블로그를 발견할 수 있었습니다. 비교적 투박하고, 전형적이지 않은 블로그의 UI로 보아 아마 폴 그레이엄이 직접 개발한 것이겠죠? 그 덕분에 저는 그가 10대 시절 nerd(?)로서, 이후 프로그래머로서, 그리고 스타트업 창업자이자 투자자로서의 삶의 경험이 녹여진 흥미로운 그의 에세이들을 더 읽으며, 폴 그레이엄이라는 인물에 대해 더 알 수 있었습니다. 이렇게 블로그라는 서비스는 한 개인이 자기 삶을 표현할 수 있게 돕고, 어떤 컨텐츠를 여러 사람들과 공유할 수 있는 역할을 한 것입니다. 이때부터 손수 만든 블로그에 포스팅도 할 수 있으면 좋겠다는 생각을 품기 시작했습니다.

 

네이버나 티스토리, 브런치 등 이미 안정적인 블로그 서비스는 많습니다. 하지만 다른 누군가가 만든 서비스이지요. 수년 전 막연히 꿈꾸기 시작했던 서비스를 '내가 직접 만든다'는 것, 또 개발뿐만 아니라 서비스를 직접 운영하며 '개발자로서 역량과 세상을 바라보는 안목을 기른다는 것'이 제게 큰 의미가 있습니다. 이제 개발자로서 첫 발을 내딛습니다.

---

사용 스택 및 서비스

Language: TypeScript, Javascript

Front-End : Next.js, React, TailwindCSS

Back-End : Node.js, Next.js, MongoDB

Infra : AWS(ECR, AppRunner), Github Actions

etc: Swagger

 

기술적 의사결정

1. Next.js13: 유연한 SSR/SSG/CSR 선택과 서버 구성의 통합의 이점 

2. App Runner: 소규모 앱 + 낮에 집중된 트래픽 고려 → Fargate 기반의 App Runner 선택

- Auto Scaling, Load Balancing 간편 설정(내장) → 인프라 구축 비용 절감

- 유휴 상태시 프로비저닝된 인스턴스로 동작, CPU 비용x → Fargate대비 비용

 

서비스 아키텍쳐 (Vercel --> AWS App Runner로 전환 23.10.06)

 

변경 전 vercel

Vercel -> ECR+ AWS App Runner 로 전환

서비스 구성

PC/태블릿/모바일 반응형

소셜로그인 활용한 방명록 작성 기능

블로그 운영자 소개 및 프로젝트 이력 페이지

다크모드

채널톡API 연결

무중단 배포 및 배포 자동화( AWS ECR + App Runner  )

Markdown을 활용한 블로그 포스팅

---

목표 기능 및 작업 상태

1단계 구성 (23.05.18~23.06.22, 단독, 5주)

- 다크모드

- 채널톡API 연결

- 소셜로그인 활용한 방명록 작성 기능

- Vercel 자동 배포 구축

- 포트폴리오(프로젝트) 열람 페이지

- 소개 페이지(lottie-player 애니메이션 적용)

- AWS S3 이용한 정적 이미지 불러오기

- 커스텀 로그인 페이지 (06.09)

- 랜딩 페이지 개편-> 타이핑 애니메이션 적용 (06.11)

- Vercel analitics 설치(06.13)

- 이슈 트레커 목적 Sentry.io 설치 (6.16)

- 마크다운을 통한 블로그 포스팅 및 상세페이지 조회 (06.22)

# 개발 중 개선이 필요했던 이슈들

1. 페이지 렌더링시 lotiie-player 애니메이션 로딩 속도

2. Cold start: 페이지 첫 이동 및 페이지 내 기능 첫 작동시 시간지연 이슈 단축할 방법

- vercel은 무료 이용시 serverless function region이 캘리포니아로 설정되어있어 느렸던 것, 인천으로 바꾼 뒤 시간이 단축됨.

3. 방명록 페이지 이용시, 단순 조회, 작성, 삭제 등 임의의 시점에서 무한로딩/프리징이 발생하는 이슈

--> (23.06.11) npm run build 후 npm run start시에는 프리징 문제가 없는 것을 확인하고, 문제 원인을 다시 탐색 시작. 즉, 개발하는 상황에서만 문제 발생

--> npm run dev로 실행한 동시에 VS code의 코드 '자동저장'으로 설정한 상태에서 코드를 수정하여 문제가 생긴 것으로 파악. 자동저장을 해제하니 문제는 나타나지 않음. 

 

 

 

트러블슈팅

1. 다크 모드 버튼 구현 시도 중, 작동 안 되는 오류 -> 컴포넌트 적용구조 변경으로 해결

https://veams.tistory.com/108

 

2. 배너 닫기 버튼 구현 중, 오류 발생 -> useState() 초기 설정을 바꾸어 해결 

https://veams.tistory.com/113

 

(현재 댓글기능 미공개)

3. 댓글 작성 시, 새로고침 없이 목록 업데이트 구현 어려움 -> 서버 측 코드와 useEffect() 설정 변경으로 해결

https://veams.tistory.com/107

 

4. 자바스크립트에서 타입스크립트로 마이그레이션

- 초기에 블로그를 빠르게 만들기 위하여 자바스크립트로 구현함, 서비스가 개발된 후 파악하지 못한 에러가 누적되기 전에 해소하기로 결정.

- 서버 연결 코드 등, import() 경로가 잘못 지정되었음에도 애플리케이션이 작동하던 문제를 발견하고 교정할 수 있었음.

 

5. 로그인 페이지로 이동하는데 시간이 5~7초 가량 소요되는 문제

--> 로그인을 위한 NextAuth의 라이브러리 성능 문제가 존재하던 것으로 추정. 로그인 페이지를 따로 구성하는 대신, 모달창으로 구현하여 페이지 이동없이 로그인 가능하도록 수정 

https://veams.tistory.com/118

 

6. CSR대비 SSR의 단점인, 각 페이지 전환시 느린 속도

- 사용자가 랜딩페이지 렌더링 종료 후, 각 페이지 prefetching 작업 -> 각 페이지 이동의 전환 속도 향상

 

7. 인프라 마이그레이션 : Vercel -> AWS App Runner ( 23.10.06 )

- 배포 전환: Vercel의 Cold Start이슈 → App Runner Provisioned Instance 유지로 해소

App Runner 특징
- 유휴 상태시 프로비저닝된 인스턴스로 동작, CPU 비용x → Fargate대비 비용 절감

- Auto Scaling, Load Balancing 간편 설정(내장) → 인프라 구축 비용 절감

 

개발블로그 방문 : https://vividnow.vercel.app

VIVIDNOW의 블로그

깃허브 : https://github.com/vividnow/my-Blog-with-Next.js

 

GitHub - vividnow/my-Blog-with-Next.js: Next.js로 만든 블로그(포트폴리오, 방명록)