지난 주, 부트캠프를 통해 이력서 첨삭을 받고, 이후 코드스테이츠 6월 그로잉 데이에 참석해 신입 개발자의 취업과 관련된 세션을 2개를 들으면서 이력서를 갈아엎어야겠다는 생각이 들었다. 기존 노션 이력서의 가장 치명적인 단점은 "다른 사람과 차별을 줄 요소가 없다. 그리고 노션 레이아웃이 너무 뻔하다"였다. 내용은 충분히 바꿀 수 있을 것 같았는데, 레이아웃은 노션 특유의 느낌 때문에 바뀌어도 크게 다른 느낌을 줄 것 같진 않았다. 게다가 평소에 프론트엔드 개발자라면 이력서 정도는 만들어야 한다(...)는 생각을 하곤 했는데, 이 참에 만들어보기로 했다.
- 레퍼런스 찾기
구글에서 "프론트엔드 이력서"를 검색해 레퍼런스를 찾았다. 신기하게도 토스의 프론트엔드 개발자 분들의 이력서가 상단에 많이 노출되어 있었고, 역시 토스라는 생각이 들었다!
- 기술 스택 정하기
기술스택을 정하기 위해, 찾아본 이력서 페이지들 총 6개를 wappalyzer 크롬 익스텐션으로 어떤 스택으로 만들었는지를 확인했고, 다음과 같았다.
- React, Emotion, Next.js, Vercel
- Naver Analytics, oogle Analytics, 깃허브 페이지, Hexo
- Google Analytics, React, Netlify, Emotion, Gatsby, PWA
- Google Analytics, React, Netlify, Emotion, Gatsby, PWA
- 노션, oopy
- 노션, oopy
oopy는 이번에 처음 알게 됐는데, 노션으로 만든 페이지를 웹사이트로 만들어주는 배포 플랫폼이었다. 검색 상단에 노출되는 것을 보면 노션으로 만든 페이지도 따로 메타 태그를 설정할 수 있는 것 같다. 덧붙여, OOPY에서 양질의 SEO 관련 아티클을 발견했다!
OOPY SEO 가이드
Hexo는 주로 Github Page나 heroku와 함께 블로그를 만들기 위해 사용되는 정적 사이트 생성기인 것 같았다. 이번 프로젝트에서는 이력서를 만들 예정이기 때문에, 후보군에서 제외했다.
OOPY의 경우, 노션으로 간단히 만들 수 있다는 점이 매력적이긴 했으나 월 6,490원의 가격이 부담스러웠고, 이번 프로젝트의 목표가 "기존의 노션 이력서 레이아웃을 탈피하자"였기 때문에 후보군에서 제외했다.
최종적으로는, React의 프레임워크로 Next.js를 사용할 것이냐, Gatsby를 사용할 것인가 하는 문제가 남았다. 두 개를 비교하는 여러 아티클들을 찾아봤고, 다음과 같은 점들을 이유로 최종적으로 Next.js 선택했다!
-
이력서 웹사이트만을 위해 Gatsby를 추가로 학습하는 것은 비효율적이라 생각했다. 추후 개인 블로그를 따로 만들어 배포하게 되더라도 확장성이나 유지보수, 늘어날 내부 콘텐츠의 양을 생각했을 때, Gatsby가 아닌 Next.js를 사용할 것 같았다.
-
지난 프로젝트를 하면서, Next는 어떤 원리로 SSG와 SSR를 하는지에 대해 궁금해졌다. Next13에서는 기존의 페이지 단위 렌더링에서 클라이언트 단위 렌더링으로 넘어가며
"use client";키워드를 이용해서 서버 컴포넌트와 클라이언트 컴포넌트를 분리하는 것까지는 이해했으나, 빌드가 어떻게 진행되고, SSR이 어떤 방식으로 구현되는지는 자세히 알지 못했다. 해당 부분에 대해 자세히 공부해보고 싶었다. -
둘 다 SSG로 만들 수 있다면, 한정된 영역에서 사용되고 있는 Gatsby보다는 범용적으로 많이 쓰는 Next.js를 사용하는 것이 커뮤니티 풀, 유지보수 측면에서 유리할 수 있겠다는 생각이 들었다. Gatsby의 장점인 plugin은 관리가 잘 되지 않는다는 얘기가 있었다.
그래서 어떤 기술 스택을 사용할 건데?
언어: TypeScript
JS 라이브러리: React, Next-PWA
React 프레임워크: Next.js 13 / App dir
배포: Vercel
처음 생각했던 기술 스택과 일치하지만, 여러 기술들을 비교해보고 알아보는 과정을 통해 더 확신을 가질 수 있었다.
- 프로젝트 시작 전, 미리 적어보는 고려할 점 체크리스트는 다음과 같다.
- 웹 사이트가 반응형으로 잘 구현되었는가?
- SEO가 적절히 작성되었는가? (Lighthouse로 체크)
- 서버 컴포넌트와 클라이언트 컴포넌트가 잘 분리되어 작성되었는가?
- 각 요소에 맞는 적절한 HTML 태그가 사용되었는가? (h1, main, header...)
- 컴포넌트가 적절한 구조로 나뉘어져있는가? 중복되는 코드는 없는가?
참고한 이력서
임지훈 개발자님 이력서
송현지 개발자님 이력서
이현섭 개발자님 이력서
김찬연 개발자님 이력서
정윤호 개발자님 이력서
김희철 개발자님 이력서
