웹사이트 주소

https://silly-meninsky-e1fc3e.netlify.app/

제작 계기

• 당시 리액트와 리덕스 공부를 갓 끝마치고 무언가를 만들어보고 싶었다.

• 개발자라면 자기소개 포트폴리오가 하나쯤 있어야 할 것 같아서 제작하게 되었다. 무엇보다도 그동안 공부한 리액트와 리덕스를 사용해보고 싶었다.

• 지인분의 소개로 최덕경님의 포트폴리오 웹사이트를 발견하게 되었고, 이에 영향을 받아 포트폴리오를 제작했다.

• 그래서 내 첫 포트폴리오, '발레와 나'가 탄생하게 되었다.

결과물 (pc)

결과물 (모바일)

사용 기술

구현 기술

• React와 styled-components, redux

배포

• Netlify

회고

성취

1. 리액트(함수형 컴포넌트) 에 능숙해짐

• 처음부터 배포까지 해결한 만큼 리액트에 익숙해지지 않을래야 않을 수가 없었다.

2. Redux toolkit을 사용한 상태관리 가능

• 리덕스 툴킷은 너무나 신세계였다고 한다...

3. styled-components과 css에 능숙해짐(??)

• 의도치는 않았지만... styled-component를 사용한 퍼블리싱과 css 속도가 정말로 빨라졌다.
• 내 손이 생각보다 빠르구나..! 를 알게 된 계기.

4. 프론트엔드의 개념을 스스로 정립함

• 프론트엔드 작업은 70퍼센트가 마크업 및 스타일링이고, 30퍼센트-혹은 그 이하-만이 정말 '프론트엔드 작업'에 해당함을 깨달았다.
• 나중에 마크업 못하는 프론트엔드 개발자가 있다는 걸 알고 대충격 대잔치

개선점

1. 디자인의 중요성을 깨달음

• 나는 개발자니까 디자인은 디자이너가 알아서 하겠지...! 라고 철썩같이 믿었지만 일단 취준하는 입장에서는 해당하지 않는다는 것을 깨달았다.
• 그래서 사실은, 미완성의 프로젝트다.(작업중 아예 새로운 포트폴리오를 처음부터 다시 작업하기로 결심함)
• 마찬가지 이유로 모바일 디자인의 중요성을 깨달았다. 모바일과 pc는 사용감이 완전히 달랐고, 나는 그걸 몰랐다(해봐야 알지)

2. React의 한계를 깨달음

• 리액트..라는 프레임워크가 정말 좋은 건 맞다. 클로저 기반으로 움직이고, 무엇보다 생산성과 유지보수성을 놀라울정도로 향상시켜준다.

• 그러나 작업하면서 정말 '자잘한' 단점들이 보였다. 여기서 자잘한 단점이란, 내 프로그래밍이 원인이 아닌, 프레임워크 내에서의 문제였다.

• 1) 이미지 파일 경로 이슈

• 예컨대 src의 경로를 소스 내 상대경로로 지정하면 개발모드에서는 이미지가 정상적으로 보인다. 하지만 배포 모드에서는 찾지 못한다. 배포 모드에서 제대로 찾으려면 일일히 파일을 찾아서 꼭 앞에 ./을 써줘야 한다.

• 그렇다면 public으로 지정하면 어떨까? 개발모드에서는 이미지가 깨져보인다. 하지만 배포 모드에서는 제대로 보인다(???)

• 2) ssr

• 서버사이드 렌더링은 어떨까? 과연 리액트에서 하라는 대로만 하면 완벽한 ssr과 seo를 구현할 수 있을까?

• 내 결론은 아니었다. 우선 복잡하기도 하고, 무엇보다 매번 웹팩 설정을 건드려야 하는데 아니 웹팩이 언제 업데이트될지 알고 매번 건드리나.

• 1과 2 외에도 그 외 자잘한 이슈들로 영 정나미가 떨어졌다.

3. 그래봤자 카피캣

• 이 포트폴리오는 상당 부분 최덕경님의 포트폴리오를 따라했다.
  (물론 창조의 어머니는 모방이라지만, 거기서 끝나면 그냥 모방밖에 더 되겠냐고)
• 이런 걸 쓰기에는 너무 자존심이 상했다. 솔직히 프론트엔드 개발자면 정말 original한 그런

감상

• 다음에는 Next.js를 사용하기로 결심했다.
• ..라고는 해도, 사실 내가 이 글을 쓰는 시점은, 이미 next.js를 사용한 프로젝트를 2번 끝낸 시점이다. ssr 외의 목적으로도 체감상 안정성 등에서 Next.js + ts 조합이 절대적으로 우위를 점하는 것 같다. 어플 개발 목적이라면 계속 React를 사용하겠지만, 웹을 개발할 때는 당연히 Next.js를 쓸 것 같다.