웹 포트폴리오 프로젝트 - 완료

웹 포트폴리오

웹 포트폴리오 제작 후기

MZ 사전 프로젝트를 마친 이후로, 웹 포트폴리오를 제작하게 되었습니다.

개발을 진행하면서 Next.js와 TypeScript의 필요성을 느껴 학습과 개발을 병행했고, 완벽하다고 할 수는 없지만 나름 성공적으로 마무리했다고 생각합니다.

👉 웹 포트폴리오 링크:
My Website

My Website

이곳에서 제 웹 포트폴리오를 만나보실 수 있습니다 !

 

그리고 프로젝트 마치고 난 뒤 이제 후기를 작성해 볼게요.

 

1. TypeScript & Next.js & Tailwind CSS

이번 프로젝트를 통해 TypeScript와 Next.js를 처음 학습하면서 바로 실전 적용해봤습니다.

기초는 노마드 코더의 니코쌤 강의를 참고하며 익혔습니다.

TypeScript 적용

기존에 JavaScript가 익숙했기 때문에 타입을 일일이 지정해야 하는 부분이 불편하게 느껴졌지만, 컴파일 전에 오류를 확인하고 명확한 에러 메시지를 볼 수 있는 점이 좋았습니다.

특히 대규모 프로젝트에서는 필수적인 요소라는 점을 이해하게 되었습니다.

Next.js 도입

Next.js 사용 경험을 요구하는 구인공고가 많아 학습을 시작했는데, 특히 App Router 기반의 라우팅 시스템이 편리했습니다. 에러 페이지, 레이아웃 관리 등도 효율적으로 구성할 수 있어 만족스러웠습니다.

Tailwind CSS 사용

처음 사용해 봤는데, 스타일을 짧고 간결하게 적용할 수 있어 편리했습니다. 하지만 익숙하지 않다 보니 문서를 자주 찾아봐야 하는 점은 다소 불편했습니다. 그래도 적응하면 훨씬 효율적인 스타일링이 가능할 것 같습니다.

 

2. Node.js 백엔드 & SQLite 데이터베이스

백엔드와 데이터베이스에 대한 경험이 거의 없었기 때문에 많은 검색과 ChatGPT의 도움을 받으며 개발했습니다.

• Node.js로 간단한 CRUD 기능 구현
  → 게시판 기능을 추가하며 기본적인 CRUD 작업을 이해할 수 있었습니다. (삭제 기능은 추가하지 않음)
• SQLite 사용
  → 가볍고 간단한 데이터베이스가 필요해 SQLite를 선택했으며, 기본적인 데이터 저장과 조회 기능을 구현했습니다.

백엔드 개발을 하면서 프론트엔드 코드 작성도 더 잘 이해하게 되었고, API를 소비하는 입장과 제공하는 입장을 모두 경험할 수 있어 큰 도움이 되었습니다.

 

3. 배포 과정

원래 AWS를 활용해 배포하려 했지만, Docker 설정 및 여러 오류로 인해 시간이 오래 걸릴 것 같아 CloudType 을 다시 선택했습니다. (AWS 학습은 이후 따로 진행 예정)

배포 시 발생한 문제

• 로컬 환경에서는 정상 작동하던 코드가 배포 후 에러 발생
• Next.js의 next/image 사용을 강제하는 문제
• TypeScript에서 타입 미지정으로 인해 오류 발생

배포 환경에서 예상치 못한 문제들이 많았지만, 하나씩 수정하면서 결국 성공적으로 배포할 수 있었습니다.

 

4. 성능 최적화

처음에는 모든 이미지를 로컬에 저장했는데, 네트워크 탭에서 확인해보니 성능이 좋지 않았습니다.

최적화 적용 사항

• PNG/JPG → WEBP 변환: 용량을 줄여 로딩 속도 개선
• 우선 로딩 이미지 설정: priority 속성을 사용해 중요한 이미지를 먼저 로드

이렇게 최적화를 적용한 후, 초기 로딩 시간이 10초 → 1초 내외로 단축되었습니다. 장기적으로는 이미지 전용 DB를 활용하는 방향도 고려해야 할 것 같습니다.

 

마무리

이번 프로젝트를 통해 프론트엔드뿐만 아니라 백엔드, 배포, 성능 최적화까지 경험해 볼 수 있었습니다. 아직 부족한 부분이 많지만, 여러 경험을 쌓으며 점점 나아지고 있다는 걸 느낍니다. 앞으로도 개선해 나가면서 더 좋은 포트폴리오를 만들어서 얼른 취업해서 현업에서 구르고 싶어요. 화이팅 하도록 하겠습니다 !