포트폴리오 제작 회고

부트캠프 수료 후 이력서와 더불어 포트폴리오를 작성해야하는데 노션과 웹형식 중에 고민을 하다가 다른 라이브러리들도 사용해보자 생각이 들어 웹사이트 형식으로 만들어보기로 했다.

 

Portfolio

• 프로젝트 기간 : 2023 - 08 - 10 ~ 
• 깃허브 레포 : 📃레포 링크
• 배포 링크 : 🔗배포 링크
• 개발인원 : 1인

 

사용 주요스택, 라이브러리

• React
• TypeScript
• Tailwindcss
• framer-motion
• emailjs
• react-scroll
• react-modal

 

먼저, 타입스크립트를 사용하는 것은 거의 필수로 생각을 했었고, 애니메이션은 한번도 써보지 못했던 framer-motion을 사용하여 더 적은 코드를 작성하는 간단한 선언적 구문을 통해 애니메이션 코드베이스를 읽고 유지 관리를 쉽게 하였고, tailwindcss를 사용해서 클래스의 이름에 더이상 얽매이지 않을 수 있고, 일관성 있는 디자인 시스템으로 유지보수를 보다 쉽게 할 수 있게 하였습니다.

 

프로젝트 회고

트러블 슈팅

navbar scroll 제어

처음 navbar의 버튼들을 이용하여 스크롤을 제어하려고 할 때 scroll 이벤트를 이용하여 해당 값을 가져와서 사용하려고 하였으나 그렇게 했을 때 콘솔을 찍어보면 수많은 로그가 발생한다. 이유는 React의 특성상 변화가 있을 때 DOM을 다시 탐색하고 변화가 있는 부분을 Render하여 리플로우, 리페인팅 되기 때문에 성능에 문제가 발생하였다. 따라서 성능 개선을 위해 react-scroll 라이브러리를 사용하여 간단하게 스크롤 이벤트를 줄 수 있었고, scroll 할 때마다 값을 받아올 필요도 없어졌다.

참고 - https://www.npmjs.com/package/react-scroll

https://www.npmjs.com/package/react-scroll

 

폰트, 이미지 파일 최적화

해당 포트폴리오 프로젝트 배포 후 다른 환경으로 접속을 해보았을 때 폰트와 이미지들이 생각보다 좀 더 늦게 적용되고 있는 부분이 눈에 보였다. 따라서 폰트들은 woff2라는 확장자를 사용하여 woff보다 30% 더 좋은 압축률로 폰트 중 가장 용량이 작은 것으로 수정을 하였다. 이미지들은 loading='lazy' 속성을 사용해 직접적으로 보이지 않는 것은 우선순위에서 미뤄두기 때문에 웹사이트의 성능을 향상시킬 수 있었다. 또한 decoding='async'을 사용하여 LCP가 아닌 이미지에 대해 디코딩을 먼저 할 필요가 없도록 지정하여 페이지 로드 속도를 높였다.

참고1 - https://lakelouise.tistory.com/337

[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)

참고2 - https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization

(번역) 이미지 최적화에 대한 명확한 가이드

 

Contact Form issue

An element doesn't have an autocomplete attribute 해당 이슈는 양식의 필드에는 id나 name 속성이 있지만, autocomplete 속성이 지정되지 않았을 때 브라우저는 사용자의 이전 입력을 기반으로 자동완성을 제공하지 않을 수 있고, 이로 인해 사용자 경험이 저하될 수 있다. 따라서 자동완성을 올바르게 활성화하려면 양식 필드마다 적절한 autocomplete 속성 값을 지정하기 위해 ContactForm의 input필드에 autoComplete속성을 추가하여 사용자 경험을 증대시켰다.

참고 - https://bobbyhadz.com/blog/input-elements-should-have-autocomplete-attributes

[DOM] Input elements should have autocomplete attributes | bobbyhadz

 

Modal overlay 클릭시 모달이 닫히지않는 문제

react-modal 라이브러리를 처음 사용해보아 아래의 문서를 참고하여 작성을 해보았는데 overlay를 클릭해도 모달이 닫히지 않는 문제가 발생하였다. 처음엔 overlay의 z-index의 문제인줄 알고 바꿔보았는데 해결이 되지않았다. 하지만 알고보니 모달을 여는 함수인handleOpenModal를 가지고 있는 div가 ModalContents를 감싸고 있어서 계속 모달이 열린것이었다. ModalContents 컴포넌트를 handleOpenModal함수를 가지고 있는 div 바깥으로 빼주니까 정상적으로 작동하였다.

참고 - https://www.npmjs.com/package/react-modal

react-modal

 

느낀점

생각보다 제작이 오래걸렸지만 유익한 라이브러리를 많이 사용해볼 수 있었던 계기가 되었다. modal을 portal로 구현해본적은 있었지만 react-modal 라이브러리를 처음 사용해보았는데 isOpen, onRequestClose 등의 속성들을 통해 아주 간단하게 modal을 제어할 수 있었다. 또, 아주 크게 감탄했던게 framer-motion이였다. 해당 라이브러리를 통해 애니메이션과 제스쳐를 아주 쉽게 다룰 수 있었다. framer-motion은 앞으로의 프로젝트에서도 계속 사용하고 싶어질만큼 아주 편리하였다. 또, emailjs를 통해 gmail을 연동하여 contact를 통해 form을 전송하면 내 gmail로 이메일이 오는 아주 신기한 라이브러리도 사용해 볼 수 있었다. 그리고 포트폴리오를 만들어보면서 색과 레이아웃이 너무 골치아프고 힘들었다. 어떤색을 쓰던 뭔가가 이상하고 촌스러워보였다. 색과 레이아웃은 더 고민해보고 계속 바꿔보아야할 것 같다.