프로그래머스 2차 프로젝트

프로그래머스 2차 팀프로젝트는 공공API를 이용해 플랫폼을 만드는 것이다. 이번 프로젝트 기간은 한달에 걸쳐 진행이 됐다.

사전 회의 📝

사전 회의는 수업이 끝난 후에 주제 선정에 대해 팀원들과 이야기를 나누었다. 영화 검색 및 예매 사이트, 쇼핑 트랜드 분석 사이트, 문화재 소개 사이트 3개의 아이디어가 나왔다. 강사님의 피드백 후에 문화재 소개 사이트를 만드는 것으로 결정이 됐다.

사전 작업

UI 작업을 하기 전 기능 리스트와 사이트 맵을 제작했고 UI 작업을 하기 위해 여러 문화재 페이지를 참고했다. 각자 맡은 페이지를 제작 후에 서로에게 피드백을 주는 방식으로 진행이 됐다. UI 작업을 마친 후에는 강사님께 피드백을 받는 시간이 왔다. 우리는 나름 잘 했다고 생각을 했지만 강사님께 다시 해보는게 좋을거 같다는 피드백과 다른팀이 한것을 본 후에 막막해졌다. 거의 클론을 하듯이 UI 작업을 진행했고 우리만의 특별한 기능을 내세워 차별성을 두는 방향으로 진행을 했고 다시 강사님의 피드백 후에 개발을 시작할 수 있었다.

프로젝트 시작 👨🏻‍💻

이번 프로젝트에서는 Next.js를 활용해 진행이 되었다. 나는 CSS 프레임워크로는 MUI를 사용해 본 경험이 전부라 Tailwind를 사용해 보는 것이 좋은 경험이 될거 같다고 생각되었다.

Header & Footer 작업

저번 프로젝트 에서는 node.js에서 라우팅을 하는것에 많은 애를 먹었었다. 하지만 이번에는 Next.js 폴더 구조에 따라 자동으로 라우팅이 되어서 수월했었다. 프레임워크는 이런 맛에 쓰는 것인가를 경험할 수 있었다. Header와 Footer를 작업할때는 큰 어려움 없이 빠르게 작업을 마칠 수 있었다.

메인페이지

메인 페이지에서는 문화재와 문화재 행사를 보여주는 섹션이 있다. 해당 부분에 공공API를 불러와서 렌더링을 시켜주어야 한다. API를 사용하는 것이 첫 경험이라 PostMan을 활용해 key 값을 줬을때 xml의 형태로 데이터가 들어와서 Json의 형태로 바꿔줘서 진행을 하였다. xml 형식을 Json의 형태로 어떻게 바꾸지 하는 막막함이 있었는데 팀장인 영민님이 참고하라고 맡은 페이지에서 사용한 코드를 보여주셔서 잘 해결할 수 있었다. quiz 부분에서는 정답 버튼을 useState를 통해 관리했는데 useRef를 통해서 변경해 본것,
동영상 부분에서는 썸네일을 보여주고 재생 버튼을 누르면 동영상이 재생 되게끔하는 좋은 경험을 할 수 있었다.

회원정보 수정

회원정보 수정은 개발 시작 전부터 살짝 겁을 먹었었다. 왜냐하면 axios를 통해 update를 하는 것에 대해 잘 익숙치 않아서 시간을 많이 잡아 먹을까 하는 두렴이 있었다. 하지만 생각보다 수월하게 진행이 되었다. 영민님이 로그인을 담당 하셨는데 로그인된 유저의 정보를 redux로 관리를 해서 유저 정보를 쉽게 가져와 update를 할 수 있었다.

404 페이지

404 페이지 처리를 어떻게 할지 몰라서 구글링 해봤는데 app 폴더에 not-found.tsx 파일읆 만들어 작성하면 존재하지 페이지에 접근할때 해당 컴포넌트를 렌더링 시키는걸 알 수 있었. 또 한번 프레임워크의 편리함을 느낄 수 있었던 순간이었다.

마침 🎬

1차 프로젝트를 마친 후에 다음 프로젝트에서는 서버와의 통신 이해, 클린 코드 작성을 해보는것을 다짐했는데 2차 프로젝트에서 서버와의 통신은 60% 정도 이해한것 같고 클린 코드를 작성하는 것은 여전히 잘 되지는 않는것 같다. 이번 프로젝트에서는 개발 하기 전의 사전작업이 힘들었다. 그 중에서 특히 UI를 디자인 하는 것이 제일 힘들었다. 강사님도 처음에는 우리 팀의 디자인을 보고 걱정이 되셨지만 개발 한 것들을 보고 개발은 정말 잘하는 팀이라고 디자인을 할 줄 아는 팀원이 없는게 아쉬웠다고 하셨다. 마지막 발표할때 다른팀의 디자인을 보니까 디자인을 잘 하는 것이 매우 부러웠다. 그래도 이번 프로젝트를 진행하면서 많은 것을 배울 수 있어 좋았고 다음 프로젝트에는 보너스 요구사항까지 충족해서 프로젝트를 마치고 싶다.