[Pre-Project] Day 11(D-DAY) - build, next.js S3로 배포하기, github read.me, 프로젝트 리뷰

fejigu·2022년 11월 9일
1
post-thumbnail

📍 Pre-Project, Day 11(D-DAY)

프리 프로젝트의 마지막 날이다. 주말 동안 백엔드 쪽에서 cors error를 잡으려고 했지만 모두 잡지 못했지만 일단 배포를 해보기로 하였고, next.js 배포에서도 어려움을 겪었는데 메인 프로젝트 전에 이런 경험들을 모두 한 것이 다행인 것 같다.

  • 기능 구현 및 코드 확인
  • git merge, git branch 정리
  • github read.me 작성하기
  • build 하기
  • next.js S3로 배포하기
  • 프로젝트 리뷰하기

✍🏻 pr, git branch 정리


→ 마지막 날이니 모두 prgit branch를 정리하였다.

프론트엔드의 경우, 매일 모여서 개인의 branch를 dev로 pr를 하고 나서 개인의 branch를 정리해왔기에 따로 정리할 것이 없었고, 백엔드의 경우 하나의 개인 branch에서 작업하고 있었기에 이날 모여서 dev로 pr하였고, 최종적으로 프론트엔드와 백엔드 모두 main으로 pr하였다.

충돌이나 별다른 이슈없이 진행되었다.


✍🏻 next.js S3로 배포하기

→ 우리가 부트 캠프 과정에서 배웠던 배포는 npm run buildbuild 파일 안에 있는 파일들을 모두 올려주면 배포가 되어서 간단할 것이라 생각했다. 하지만 next.js S3로 배포하는 것은 달라서 구글링을 해야했고, 구글링을 통한 방법으로 해보았지만 생각보다 쉽게 되지 않아 팀원들 모두 당황했다.

next.js S3로 배포하기 참고자료

next.js S3로 배포는 프로젝트를 build(npx next build)하면 프로젝트 폴더에 out이라는 폴더가 생기는데 이 때 out 폴더 안에 있는 모든 폴더 및 파일을 업로드해주면 끝이였다.

→ 하지만 위의 방법대로 하였지만, 배포 화면에서 보이지 않았고 우리 팀원은 모두 어떤 것이 문제인지 한참 찾게 되었다.

결국 원인을 찾게 되었는데, 문제는 build 자체가 잘 되지 않았던 것이다.

터미널에 뜬 메세지들을 다시 모두 읽어보니 error가 생겼고, build가 제대로 되지 않았다는 것을 알 수 있었다. 컴퓨터는 다 말해준다.. 에러 메세지를 제대로 읽자

npx serve out으로 확인했을 때도 제대로 되는 것을 확인할 수 있었고, error message에서 알려준 문제들을 해결한 후 build를 다시 하니 문제 없이 배포가 되었다!


✍🏻 github read.me 작성하기

→ 팀장인 본인이 마지막으로 github read.me를 작성하였으며, 서버가 닫혔을 때도 우리가 구현한 화면을 보여주기 위해해서 기능 구현 화면을 gif로 만들어서 첨부하였다.


✍🏻 프로젝트 리뷰하기

→ 팀원들과 마지막으로 프로젝트 리뷰하는 시간을 가졌다.

각자 아쉬웠던 부분들도 있었지만, 모두가 공통적으로 이번 프리 프로젝트 기간동안 많은 것을 배웠다고 이야기했다. 개인적으로도 지금까지 전체 부트캠프 동안 배웠던 것보다 이 2주도 안되는 시간 동안 배운 것이 더 많았고 성장했다고 느꼈으니 말이다. 이번 프리 프로젝트에서는 결과보다는 과정에서 배운 것과 성장한 것에 집중하기로 하였다. 당장 다음날부터 시작되는 메인 프로젝트도 기대반 걱정반이다. 아래와 같이 프리 프로젝트를 통해 배우고 느낀 것을 토대로 메인 프로젝트에 임해야겠다

⭐️⭐️⭐️⭐️⭐️

  • github 관리의 중요성(merge, pr, push, pull에 대한 이해가 생겼다)
  • commit message, pr message 구체적으로 잘 작성하자
  • 백엔드와 소통하는 방법 + 전체적인 웹에 대한 이해
  • API 명세서 작성의 중요성
  • fetch에 대한 연습과 공부 필요성(프리 프로젝트 기간 중에 이 부분에 대한 이해와 학습이 가장 부족하다고 느꼈다)
  • component명 팀원들과 미리 상의하고 작성하자(중복되어 css가 먹히지 않는 경우가 있었다)
  • layout을 미리 잡고 들어가자(공통적으로 적용되는 layout을 생각하지 못해 중간에 잡아야했다)
  • 구현하고자 하는 기능을 코드로 작성하기(그동안처럼 배운 것을 따라 작성하는 것과 내가 구현하고자 하는 기능을 코드로 작성하는 것은 확실히 달랐다. 연습이 많이 되었다)
  • 배포 기간을 여유있게 두자(마감 전날에 배포를 하려고 하니, 여러 에러들로 어려움이 있었다)
  • 팀원들간의 코드 리뷰 시간을 가지면 좋을 것 같다(각자 맡은 기능을 구현하고, 에러가 있을 경우에만 다같이 확인하니 본인이 맡지 않은 기능 구현에 대한 이해나 공부 없이 넘어가서 아쉬웠다)
profile
console.log(frontendjigu( ☕️, 📱); // true

0개의 댓글