Next.js와 TS, 글래스모피즘으로 포트폴리오 제작하기! (1) : 구상

리린·2021년 9월 28일

Next.js

목록 보기

2/17

시작하면서

포트폴리오 제작의 계기

이제 슬슬 이력서를 돌려야 할 것 같아서 포트폴리오를 제대로, 각 잡고 만들기로 했다.

사실 React로 포트폴리오 제작 + Neflify로 배포까지 마친 게 있긴 하다.

구버전 포트폴리오

문제점

디자인이 너무 별로인데다가(~~그냥 구리다~~), 리액트로 SSR을 다시 할 엄두가 나지 않았다.

남의 포트폴리오를 따라했다는 점도 마음에 들지 않았다. 그럴 수밖에 없었던 내 실력도, 리덕스 툴킷으로 한 상태관리도, 그냥 전부 마음에 들지 않았다.

비전공자 + 주니어 개발자의 한계가 내 눈으로도 보이는 게 싫었다. 만약 그런 한계가 보인다면, 그건 차라리 까마득한 시니어 개발자가 툭 지나가는 말로 지적해줬으면 했다.

최소한 내 딴에는 최고의 결과물을 뽑아내고 싶었다.

해결하는 과정

문제는 시간이 제약되어 있다는 점이다. 애초에 '최고' 나 '완벽'이라는 말에는 헛점이 있다. 사람은 완벽할 수 없다. 그냥 그 상황에서 최선을 뽑아내는 건 가능해도, 완벽한 결과물을 뽑아내는 건 불가능하다. 만약 그런 게 가능하다고 말하는 사람이 있다면 그건 그냥 수사적인 말장난에 불과하다.

그래서 당장 구현하고 싶은, 필수 요건을 간단히 추려보았다.

필수 구현 요소

Next.js 사용하기

re-rendering(static-rendering, server-side-rendering) 구현하기

SWR 사용하여 상태관리 하기

redux는 이제 그만

최신 프론트엔드 디자인 적용하기

2021프론트엔드 최신 디자인 에 소개된 Glassmorphism 적용하기

StyledComponents 사용하기

내게는 css-in-js 스타일, 그 중에서도 StyledComponents를 이용한 퍼블리싱이 가장 효율적이었다.

api 적용해보기

여기서 조금 고민이 생긴다. 이전에 nest.js와 타입스크립트를 사용하여 백엔드 로직을 구현해둔 것이 있는데, 이걸 사용하기에는 솔직히 불안하다(~~원래 첫 포폴은 전부 마음에 들지 않는 것인가~~). 이유는 여기서 확인할 수 있다.

우선 openAPI에서 json으로 요청을 보내 받아온 내용들을 가지고 Next.js의 장점인 pre-rendering을 구현해보려고 한다. 가장 만만한 날씨 요청이 되지 않을까 싶다.

다만 예전에 봤던 CORS오류가 걱정된다. 그때는 벡엔드로 요청을 보내서 해결했는데 지금은 어떠려나. 그래도 날씨 API정도는 쉽게 받아올 수 있을 것 같다.( 개인적으로는 백엔드에서 요청을 보내고 프론트엔드는 그걸 받아와 흩뿌려주는 게 베스트라고 본다.)

vercel 사용하여 배포하기 + 도메인 적용하기

도메인은 미리 사 뒀고, 이번에는 Next.js 라인을 작정하고 탈 생각인 만큼 Netlify보다 Vercel을 이용하여 배포할 작정이다.

디자인 구현하기

글래스모피즘 디자인 구현하는 방법

css 속성 딱 4개만 기억하면 된다
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(5px); //배경 희뿌옇게 만들어줌
z-index: 4;
이 4개 갖고 지지고 볶는다. 나머지는 똑같다. 오히려 디자인툴로 하는 디자인이 더 어려울 것 같다 ㄷㄷ