나에게는 2023년 10월달 즈음에 만들어 두었던 포트폴리오가 있다.
오랜만에 포트폴리오에 들어가봤는데 무엇인가 밋밋했다. 포트폴리오라곤 했지만 그냥 resume에 있는 내용을 웹 페이지로 옮겨놓은 느낌이었다.
포트폴리오란 많은 내용을 효과적으로 전달해야 하는 것이 아닌가?, 지금 포트폴리오에서 나에 대해 알 수 있는 내용들이 있는가?라는 의구심이 들기 시작했다. 또한 아래 나열한 항목들을 이유로 포트폴리오 리팩토링을 결심했다.
포트폴리오를 갈아 엎는 이유
사용된 기술 스택에 대한 아쉬움
포트폴리오를 만들 때 CRA로 초기 프로젝트를 생성하였고, React + JS, SCSS, styled-components를 사용하였다.
포트폴리오를 만들 당시엔 TypeScript에 익숙하지 않은 상태였고, Vite의 존재를 몰랐었다.
SCSS, styled-components의 숙련도를 높히기 위해 시작했던 프로젝트이지만, 지금은 TypeScript의 숙련도도 프로젝트를 통해 높혔고 다른 기술 스택들에 대한 학습 욕구도 생겨 프로젝트 리팩토링을 결심하게 됐다.
디자인의 아쉬움
포트폴리오의 디자인은 내가 독창적으로 만든 것이 아닌, 여러 포트폴리오들을 구경하며 예쁘다고 생각한 부분들을 인용하여 만들어졌다. 원작 개발자분들이 보게 된다면 기분이 나쁠 수도 있을 것이고, 프론트엔드 개발자를 희망하는 사람이 디자인을 못한다는 것이 화가 났다.
예쁘게 디자인 할 수 있을지에 대한 자신은 없지만 직접 디자인을 시도해보고 싶었다.
코드 타이핑 공백기
'코드 타이핑 공백기'라는 말이 어색하긴 하지만, 의도를 쉽게 풀어서 말하자면 코드를 안 친 기간이 길어지고 있다는 것이었다.
최근엔 코딩 테스트 준비와 FE 면접 질문에 대한 학습 위주로 시간을 보내고 있었기 때문에 중간에 사전 과제를 1차례 진행한 것 말고는 3월까지 진행한 프로젝트 이후 제대로 코드를 친 날이 없다.
코드를 오래 안 치면 감을 잃는다는 소리가 있듯이, 개발에 대한 감을 잃지 않기 위해 + 기술 스택 학습을 통한 실력 향상을 위해 포트폴리오 리팩토링을 결심하게 됐다.
새로운 버전의 포트폴리오
React.js? Next.js?
JS 대신 TS를 쓰는 것은 쉽게 정할 수 있었지만 React를 사용할 것인지 Next를 사용할 것인지 고민이 많이 됐다.
React를 선택한다면 CRA 대신 Vite를 사용하여 빌드해보는 것이 챌린지 요소였고, Next를 선택한다면 새로운 기술을 학습해보는 것이 챌린지 요소였다.
최근 채용 공고를 살펴 봤을 때 Next를 도입하는 회사가 많았고, 사전 과제 전형을 수행할 때 Next를 잠깐 사용 해봤는데 프레임워크인 Next가 주는 이점이 나에겐 좋게 느껴졌다. 코드 작성 부분에서 자유성이 높아 무엇이 맞는 방법인지 많은 고민이 필요했던 React와는 달리, 정해진 규칙에 따라 코드를 작성해야 하는 Next이기에 코드 작성 대해 오랜 고민이 필요 없었다. (코드를 깔끔하고 효율적으로 작성하는 것에 대한 고민이 필요 없다는 것이 아니다. 사용법이라고 하는 것이 옳아 보인다.)
물론 Next 학습 기간이 짧아 내가 생각한 이점이 바람직한 내용이 아닐 수 있지만, 현 시점에선 Next를 선택하지 않을 이유가 없었다.
CSS-in-JS? CSS Modules? Utility-First CSS?
TS와 Next.js를 사용하는 것까진 결정했고, Next.js 프로젝트에서 스타일링을 어떻게 할 것인지에 대한 고민이 있었다.
CSS-in-JS, CSS Modules, Utility-First CSS 3가지 기법이 떠올랐고 주관적인 각각의 장단점을 생각해봤다.
CSS-in-JS
- 장점
- props로 변수를 전달받아 동적으로 css를 적용하는 것이 가능하다.
- 재사용성이 좋다.
- styled-components, Emotion 사용 경험이 있다.
- 단점
- 성능 문제 - 렌더링 속도에 영향을 줄 수 있다. (JS에 CSS 코드가 입력되기 때문에, 페이지 로딩 시 구문 분석 과정이 필요하기 때문)
CSS Modules
- 장점
- 모듈 간 네이밍 중복 문제가 발생하지 않는다. (정의한 CSS 클래스마다 자동으로 고유한 className을 생성해서 해당 class를 로컬 스코프로 제한함으로써 네이밍 충돌을 예방)
- 렌더링 속도가 빠르다.
- 단점
- props를 통한 동적 스타일링이 불가능하다. (백틱을 이용해 className을 동적으로 바꾸는 스타일링은 가능)
Utility-First CSS (tailwindCSS)
- 장점
- 디자인 시스템 구축에 용이하다
- 일관성 있는 디자인
- twin.macro 라이브러리를 통해 유사 CSS-in-JS 기법을 사용할 수 있다.
- 단점
- 애니메이션, 트렌지션 구현에 제약이 있다.
- tailwindCSS의 러닝 커브가 높다
Next.js와 tailwindCSS 조합을 많이 사용하는 것 같았지만, tailwindCSS의 러닝 커브가 높다는 것과 애니메이션 & 트렌지션 구현에 제약이 있다는 점 때문에 매력적이지 않았다.
props를 통해 동적 스타일링이 가능하다는 강력한 장점을 가진 CSS-in-JS와 성능에 이점이 있는 CSS Modules 기법 중 고민 끝에 CSS Modules 기법을 선택하게 됐다.
개인 포트폴리오이기 때문에 성능 문제가 크게 체감되지는 않겠지만 CSS-in-JS 기법을 이전 프로젝트에서 사용해보기도 했고 Next.js에서 CSS Modules을 기본으로 지원하고 CSS Modules에 대한 숙련도를 높히기 위함이다.
빠른 시일 내에 개발을 해야했다면 CSS-in-JS 기법을 선택했을 것 같다. 하지만 이번 포트폴리오는 이전에 다뤄보지 못한 것에 대한 학습이 주 목표이기 때문에 위와 같은 결정을 하게 됐다.
Next.js + TS의 조합으로 개발을 진행하고 CSS Modules 기법 스타일링을 하는 것으로 결정한 만큼 만족할 만한 결과물이 나왔으면 좋겠다.😁
