[포트폴리오 페이지 만들기] 2. 내용구성 및 사용 기술 정하기

이제 포트폴리오 페이지에 어떤 내용을 담을지, 또 어떤 기술을 써서 만들지 정해본다.

 

구성할 내용

내 소개	링크	작업물 리스트
간단한 인적사항 경력 기술 스택 성격(성향)	깃헙 블로그	작업물에 대한 간략한 소개 캡쳐화면 개발 기간 나의 기여도 사용기술 + 특정 기술을 사용했을 경우, 왜 그 기술을 선택했는가 + 사용 과정에서 어떤 어려움을 겪었는가 + 사용자에 대해 고민했는가 + 다양한 상황에 대한 고민이 있었는가

 

사용할 기술

 

💡 Next.js VS React 

 

이전 회사를 다니면서 10개 정도의 프로젝트를 리액트로 만들어왔기에 사용에 익숙한데 비해,

next.js로는 2개 프로젝트 + 개인 연습용 프로젝트에서 잠깐 써본 수준이기에 스스로 아직 연습이 더 필요한 상황..

 

그래서 개인적으로 next.js를 더 적극적으로 활용해보고 싶은 마음인데,

이런 주관적인(?) 결정 외에도 nextJS를 써서 포트폴리오 페이지를 만들어야 할 객관적인 이유들을 생각해보았다.

 

1) SEO에 더 유리함

리액트는 CSR(클라이언트 사이드 렌더링), next.js는 SSR(서버 사이드 렌더링) 방식으로 동작한다.

 

[CSR]

👉 유저가 앱에 접속한다

👉 앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서를 전달한다

👉 브라우저가 javascript 파일을 다운로드하고, 유저는 그동안 빈 화면을 보게 된다

👉 다운로드가 끝나면 브라우저는 리액트 코드가 들어있는 js 파일을 실행한다

 

장점으로는 한 번 로드가 완료되면 이후 렌더링이 빠르다는 것이지만, 그만큼 초기 로드가 오래걸리고

맨 처음에 빈 html 문서를 받기 때문에 SEO에 좋지 않다는 단점이 있다.

 

[SSR]

👉 유저가 앱에 접속한다

👉 서버에서 리액트를 실행하고, 리액트는 UI를 렌더링한다

👉 서버는 렌더링된 결과를 통해 HTML 파일을 브라우저에 전달한다 (이 때 유저는 앱의 초기화면을 보게 된다)

👉 이후에 브라우저는 리액트 코드가 들어있는 javascript 파일을 다운받아 실행한다

👉 앞에서 불러온 HTML과 자바스크립트 코드가 동기화되어 앱이 동적으로 상호작용한다 (이후부터는 CSR 과정과 동일)

 

서버에서 UI를 모두 구성한 후 유저에게 화면을 보여주기 때문에 유저는 '어떤' 화면을 접속했을 때부터 볼 수 있고,

처음 불러왔던 HTML 파일에 정보들이 포함되어 있기 때문에 SEO 봇이 데이터를 수집 가능하도록 한다.

나는 구글에 프론트엔드 개발자 포트폴리오라고 검색해서 나오는 페이지들을 종종 구경하는 편이라.. 검색결과에 걸리는 것 또한 중요한 요소라고 생각했다.

 

next.js를 사용했을 때의 단점으로는 페이지를 새로 요청할 때마다 새로고침되어 UX가 떨어질 수 있다는 것인데, 내 포트폴리오 사이트에서는 페이지간 이동이 많지 않을 것으로 생각되어 큰 이슈가 아닐 거라 판단했다.

 

 

2) Vercel 배포에 최적화

이전에 리액트로 만들었던 사이트를 vercel로 배포한 적이 있었는데, 매우 편리하고 좋았던 경험이어서,

이번에도 vercel을 이용해보려 했다.

다만, 리액트로 만든 앱을 배포할 때 설정 옵션을 자잘하게 만져주지 않으면 버그가 발생했었다. 가령 새로고침하면 404 페이지가 뜬다던지... 크리티컬한 이슈는 아니었지만, 역시 next.js에서 공식적으로 지원하는 호스팅 사이트이다보니 여기에 최적화됐다는 느낌이 들었다.

 

 

 

💡 번들링 툴 : Vite VS Turbopack

예전 리액트로 만든 프로젝트에서는 vite를 번들러로 사용했었는데, 기본 CRA를 썼을 때와 비교해서

엄청나게 빨라진 속도를 체감하고 신세계라 생각했었다.

작년 말 next.js 13 릴리즈되면서 터보팩이 함께 출시되었다. 기존의 웹팩보다 700배, Vite보다 10배 빠르게 JavaScript를 필요한 파일로 컴파일해주는 번들링 툴이라고 한다(몇몇 글을 찾아보면 저 수치는 비교군이 부정확한 상태에서 측정된 결과라는 말도 있음)

아직 알파 버전이라 안정성이 떨어진다는 말도 있는데.. 한번 직접 써보면서 vite와 어떤 점이 다른지 비교해보고 싶다.

 

 

💡 스타일 라이브러리 :  emotion VS styled-components VS etc...

 

지금까지 써본 스타일 라이브러리들은 styled-components, chakra-ui, tailwind 등이 있었는데,

styled-components는 서버사이드렌더링 시 ServerStyleSheet라는 것을 따로 설정 해야 한다고 한다.

 

스타일드 컴포넌트가 나에겐 익숙하긴 하지만, emotion이 SSR에서 세팅하기에 편하다고 하고,

또 아직 안써본 기술을 직접 써보며 익힌다는 측면에서 의미있을 거라 생각했다.

(둘 다 성능이나 용량 면에서 큰 차이는 없다고 함)

 

+ 개인적으로 chakra-ui는 독특한 스타일의 디자인을 커스텀하는 것보다는,

어디선가 많이 본 듯한 깔끔+무난한 페이지 디자인을 양산해내는 데에 최적화되어 있는 듯한 느낌을 받았다.

(ex 차크라가 기본 제공하는 요소들을 그대로 갖다쓰면 예쁘고 미려하게 보이지만, 이걸 커스텀하려면 번거롭고 지저분해짐)

 

그에 비해 styled-components는 만드는 사람이 이미 구상해놓은 디자인이 머릿속에 존재하고,

이걸 직접 한땀한땀 만들며 커스텀 하며 만들어나갈 때 용이했는데...

emotion 또한 비슷한 방식으로 구현할 수 있다고 하니, 직접 써보며 체감해봐야겠다!