프로젝트 4주차에는 완성도를 높이는 것을 목표로 진행하였다.

24.10.28 4주차 일정 회의(오프라인)

마지막 주차이기 때문에 지금까지 개발한 사항을 정리하고 개발이 필요한 사항들에 대해서 우선순위를 정하였다.

24.10.30 4주차 멘토 회의

마지막으로 멘토와 회의를 진행했다. 상품 상세 페이지의 그래프 부분이 dev api에 있는 데이터로는 확인하기 어려운 부분이 있어서 멘토와 함께 데이터를 생성하여 해결하였다. 그리고 vercel에 배포를 하기 위해 main 브랜치에 merge를 하는 작업을 했다.

느낀점

프로젝트를 시작할 때는 만만하게 보고 시작하였는데 막상 진행하다 보니까 시간이 많이 부족했다. 타입스크립트와 Next.js를 사용하여 개발하는 것은 거의 처음 하다시피 하다보니까 개발을 하게되면서 사전직무에서 배운것 외에도 알아야 할 것들이 많이 있었다. 앞으로 공부할 도서도 구매했기 때문에 공부 후에 리팩토링을 해봐야겠다.

그리고 기존에 남아있던 개발 습관을 고칠 수 있는 기회가 되어서 좋았고, 프론트엔드 개발자와의 협업은 해본적이 거의 없어서 좋은 경험이 되었다.

프로젝트 3주차에는 주요 페이지 개발과 API 연동 개발을 주로 진행했다.

24.10.21. 3주차 일정 회의(오프라인)

오프라인으로 만나서 지금까지 진행사항을 공유하고 각자 개발을 진행했다. 16시에 멘토와의 회의를 갖고 수요일(23일)에 중간발표가 정해져서 가능한 부분까지 각자 정해서 발표 전까지 개발을 완료하는 것을 목표로 했다.

24.10.23. 2주차 중간 회의(오프라인)

스터디룸을 대여하여 중간발표 후 개발사항에 대한 피드백과 2주차 개발사항에 대해 정하고 각자 개발을 진행했다.

24.10.23 ~ 24

form 작업을 할 때 react-hook-form을 사용하였는데 처음 사용하는 것이다 보니 코드를 지저분하게 작성했었다. 문서와 서치를 통해 찾아보니 provider를 통해서 register를 하위 컴포넌트 내에서도 사용할 수 있는 방법을 찾아서 검색 페이지를 개발할 때는 이 부분을 적용하였다. register drilling이 필요 없다 보니 상위 form 컴포넌트에서 다뤄야 할 상태나 이벤트들이 하위 컴포넌트로 나눠져서 코드의 가독성과 사용성을 높일 수 있었다. 여기서 적용한 것을 먼저 개발했던 회원가입 form 에 적용하여 리팩토링을 하였다.

느낀점

우리 팀의 프로젝트 완성도가 다른 팀에비해 낮아서 최종 발표팀으로 선정되지 못하였다. 프로젝트를 시작할 때 jira나 commit 컨벤션, pr 정리등을 중점적으로 협업에 도움이 될 수 있도록 진행하였더니 개발에 늦어진 것 같다. 하지만 3주차가 끝나가는 시점에 주요 기능들은 개발을 완료하여서 다행히 프로젝트를 완성시키 수 있을 것 같다. 최종 발표팀으로 선정되지 못한 것은 아쉽지만 프로젝트를 성공적으로 완료해서 포트폴리오 작성에 문제가 없도록 마무리 해야겠다.

프로젝트 2주차에는 기초 공통 설정과 공용컴포넌트 개발을 끝내고 각자 개발 할 페이지를 나눠서 개발을 진행하였다.

24.10.16. 2주차 일정 회의(오프라인)

오프라인으로 만나서 지금까지 개발한 공용컴포넌트에 대한 코드리뷰와 리뷰를 반영하여 수정하는 작업을 진행하였다. 그리고 다국어 설정을 위한 app의 폴더 구조를 수정하였다. 각자 추가 개발이 필요한 컴포넌트나 페이지를 정해서 금주 내로 개발하기를 목표로 했다.

24.10.18. 2주차 중간 회의(오프라인)

지금까지 개발한 사항에 대해 공유하고 '똑똑한개발자' 측에서 제공해준 앱웹 레이아웃을 참고하여 레이아웃을 수정하였다.

나는 회원가입/로그인 페이지를 맡아서 개발하였다. 개발을 하다보니까 예전에 개발하던 습관이 남아있어서 하나의 pr에 모든 내용이 들어가게 되었고, 코드를 작성하는 부분도 기능을 중요시하는 개발을 했기 때문에 가독성이 떨어지는 부분이 많아서 코드리뷰에 어려움이 많았다. 이 부분에 대한 피드백을 받았고, 이후 피드백을 반영하여 코드를 수정했다.

다짐

다음 개발 부분이 검색 페이지인데 이전 개발방식 보다는 좀 더 가독성이 좋은 코드를 작성하는 것을 목표로 정했다. 그리고 개발사항을 세분화하여 코드 리뷰의 효율성을 높이고, 협업 과정에서의 혼란을 줄이며, 팀원 간의 커뮤니케이션이 원활할 수 있게 노력해야겠다.

드디어 사전직무교육이 끝나고 프로젝트 코스에 접어들었다.

프로젝트는 '똑똑한개발자'의 아마존 최저가 알람 서비스를 진행하게 되었다. 기본적인 피그마와 전체적인 설계가 되어있고 이미 출시된 앱이 있기 때문에 프론트엔드 개발에 집중할 수 있을 것 같아서 선택했다.

24.10.08 킥오프 회의.

'똑똑한개발자'의 멘토이신 서장원님과 똑똑한개발자 프로젝트 참여자들과의 킥오프를 진행하였다. 똑똑한개발자는 자체 라이브러리로 개발환경 등을 관리하고 있었다. 그래서 프로젝트 참가자들이 똑똑한개발자의 온보딩을 경험할 수 있게 1주차는 온보딩 위주로 진행한다고 하셨다.

24.10.09 프로젝트 첫 회의.

킥오프 후에 팀원들과 오프라인으로 회의를 진행하였다. 온보딩 관련 노션페이지와 프로젝트 피그마를 공유 받고, 프로젝트 분석과 역할 분배에 대해 의논하였다. 4주 동안 일정에 대해 대략적으로 정하였고, 진행 과정을 공유할 Jira와 Github 설정을 하였다. 이 후 코드 컨벤션과 커밋 컨벤션, 그리고 피그마를 기준으로 디자인 시스템을 구성할 역할을 분담하여 진행하기로 했다.

24.10.11 1주차 중간 온라인 회의.

각자 맡은 디자인 시스템 설정을 완료하였고, 1주차 추가 계획에 대해 회의하였다. 먼저 프로젝트 관련하여 공용 컴포넌트 제작을 진행하기로 했다. 개발해야할 공용 컴포넌트를 추려서 각자 분담하여 개발하기로 했다. 그리고 온보딩도 진행해야 하기 때문에 온보딩을 우선으로 진행하기로 정했다.

온보딩

온보딩은 간단하게 생각했지만 생각보다 내용이 많았다. 주로 똑똑한개발자에서 제작한 라이브러리를 사용해보는 내용이었다. 라이브러리를 통해서 개발환경을 관리한다면 공통적인 개발환경을 구축하고 협업 시 많은 도움이 될 것 같다고 생각했다.

사전직무교육 2주차에는 본격적으로 Next.js를 배웠다.

먼저 우리는 Tailwind CSS를 사용하기 때문에 Next.js에서 Tailwind CSS설정에 대해 배우고, Next.js에서 제공하는 Image 태그를 사용하여 이미지 불러오기, 최적화 에 대해 알아봤다.

그 다음으로는 Next.js 13부터 업데이트된 라우팅 방법인 App router에 대해 배웠다. app 이라는 폴더 아래 폴더와 page.tsx를 사용하여 라우팅이 되는 방법이다. React에서 따로 라우터를 설정해야 하는 것과는 달리 Next.js는 프레임워크인 만큼 사용자 편의성이 좋은 것 같다.

Next.js의 데이터 페칭은 조금 복잡했다. 자동으로 캐싱이 되는 기능이 있고, 클라이언트, 서버 두 곳에서 데이터 페칭이 가능하기 때문에 이에 따른 캐시의 라이프사이클에 대해 자세히 살펴봤다.

또한 Next.js 내에서 api endpoint에 대해서도 배웠다. app/api/*/route.ts 로 설정하여 GET, POST 등 api 함수를 만들면 /api/* 로 접근이 가능했다.

마지막으로 Vercel에 배포하고 소셜 로그인하는 방법을 배웠다. vercel에 배포하는 과정에서 애로사항이 많이 있었지만 성공적으로 배포할 수 있었다.

10/4에는 네카라쿠배 특강도 있었다. 카카오스타일 SRE에 DevSecOps로 재직하셨던 분이 강의를 해주셨다. IT산업 전반적인 내용에 대해 알 수 있는 유익한 시간이었다. 하지만 프론트엔드 프레임워크인 Next.js를 배우러온 신입 위주의 강의생들에게는 너무 난해하고 광범위한 내용이었다고 생각한다. 프론트엔드 취업에 관한 내용이 거의 없다시피해서 취업에 도움이 크게 안 될것 같았다. 이력서, 포트폴리오, 면접에 대한 특강이었으면 더 좋았지 않았나 하는 생각이 든다.

이제 사전직무교육이 끝났고 프로젝트 코스로 접어들었다. 강사님이 강의를 잘 해주셔서 Typescript와 Next.js의 기본적인 지식은 습득할 수 있어서 프로젝트를 진행하는데 많은 도움이 될 것 같다. 남은 4주동안 프로젝트에 열심히 임해서 좋은 결과를 이뤄내야겠다.

2024년 09월 20일 프로젝트 캠프 Next.js 3기가 시작됐다.

오리엔테이션에는 과정 소개와 앞으로 할 프로젝트에 대한 소개가 있었다.

사전직무교육에서는 강사님이 오셔서 강의를 해주셨다. 수코딩(김기수) 강사님으로 유튜브 운영, 책 출간 등 유명한 강사님이셨다.

강의는 JavaScript, TypeScript, React, Next.js 순으로 진행 된다. 이번 1주차에는 Next.js의 기본 정보까지 배웠다.

JavaScript는 역사부터 시작했다. 다른 곳에서 언어의 문법부터 배우는 것과는 달리 언어의 역사부터 가르쳐 주셔서 신선했고 좋았다. 몰랐던 자바스크립트와 웹 브라우저의 역사, ECMAScript 탄생 배경 등 유익한 정보가 많았다. React는 Vite를 사용하여 생성했다. Vite는 들어보기만 했지 사용해보지는 못했었는데, 지금까지 왜 안 썼는지 의문이 들 정도로 빠르고 좋은 빌드도구 같다.

강사님이 내주신 과제를 하면서 JavaScript에 대해 좀 더 공부해야 겠다고 느꼈고, 부족한 부분은 강사님이 추천해주신 책으로 해볼까 생각 중이다.

앞으로 Next.js 수업과 팀 프로젝트가 남았는데 팀 프로젝트에서 다른 팀원들에게 도움이 될 수 있는 팀원이 되기 위해 노력해야 겠다.