포트폴리오 사이트를 만들고나서...

 포트폴리오 사이트를 의도치않게 3일만에 후딱 만들었다.
 next.js, notionAPI를 활용하여 개발을 했는데, 다시한번 next.js의 편리한 점을 느낄 수 있었다.

1. next.js는 기본적으로 서버와 프론트를 한번 : 이것은 누구나 알고있지, 근데 이게 왜 장점인지를 느끼게 되었다. notionAPI는 기본적으로 프론트단에서(즉, 브라우저에서) 바로 요청을 하면 에러를 발생하는데 이를 해결하려면 서버를 구축하던가 그게 아니면 폴리필을 해결해야한다. 근데 next.js는 서버를 구축하기 매우 간편하다.

2. next.js를 통해 골라먹는 렌더링 방식 : 페이지별 메타데이터를 입혀주고 처리하기 매우 간편하고 좋다.

이 두가지를 가장 크게 느낄 수 있었다. react로 개발했을 때에는 express로 서버를 다시 작업하는 등 귀찮았을텐데...

 또 하나, 크게 느낀 점은 react-query의 장점

1. 캐싱을 통한 불필요한 요청 방지 : 내가 만든 포트폴리오 사이트를 자세히 보면 각 페이지에서 새로 고침을 하면 로딩이 생기면서 스켈레톤 UI나 로딩 스피너가 동작하지만, HOME화면부터 순서대로 들어가면 그런 로딩이 없이 바로바로 렌더링 된다. notionAPI 요청을 통해 받아온 값을 react-query를 활용하여 캐싱해두기 때문이다.

2. 로딩화면을 구축하기 매우 간편하다. 사실 이건 axios 훅을 만들어서 사용하면 되기는 하지만, 제공을 하는데 안 쓸 이유는 없지. isLoading을 이용해서 로딩을 할 때에 클라이언트에서 웹 사이트가 정상 동작하고 있다는 것을 알려줄 수 있다.

3. 각 기능 분리 : mvc 모델이라고 한다면 모델에 해당하는 부분을 react-query로 간편하게 분리해서 작업함으로써 기능이 UI나 다른 부분에 의존성을 갖지 않도록 해주고 그 기능의 재사용성 또한 보장한다.

 작업기간이 3일인 것 치고 나름 만족스러운 결과물이었다.
 :: https://bamsport.vercel.app/home

하지만, 원래 내 계획은 포트폴리오는 3D로 만드려고 했다는 점.
회사에 다닐때 포트폴리오를 three.js로 구축한 사람을 만났는데
이 분은 디자인-퍼블리셔-프론트엔드로 나아간 그 장점을 3D 화면을 통해 매우 잘 표현해서 인상깊었다.

 누군가 그런 말을 할 수 있을 것 같다. '기능만 제대로 하면되지 3D이던 2D이던 무슨 상관이야?! 백엔드나 다른 분야의 사람이 그런말을 한다면 아 그렇구나 하겠지만, 프론트엔드 개발자가 그런 말을 한다면 흐르지 않고 고여가는 분이다. 라고 생각이 들 것 같다. 그렇다면 프론트엔드가 왜 필요한지에 대한 고민을 먼저해보시는 게 낫지 않을까?
 내가 하고 싶은 말은 화면이 신기해서 아니면 이뻐서 이 서비스에 머무르는 시간이 혹은 어느 하나의 인터렉션을 가져가는 흥미가 생긴다면 프론트엔드로서 매우 의미있는 행동이라는 것이다. 그런 점에서 2D로 흔해빠진 화면보다 3D로 구현해서 좀 더 머무르고 좀 더 흥미를 갖게 만든다면 프론트엔드로서 일을 매우 잘 했다라고 할 수 있지 않을까?

 

 그래서 three.js를 정리하고 three.js를 통한 화면구성이 있는 포트폴리오로 업그레이드 시켜보려 한다.