[코딩온] 프론트엔드 입문 Day 49~51 (3차 프로젝트 2~4)

지난 두 번의 프로젝트 기간과 마찬가지로, 이번에도 프로젝트를 진행하면서 있었던 일주일의 기록을 한 번에 작성하려고 한다.

이번주는 굉장히 많은 우여곡절이 있었던 한 주였다.

---

4월 29일 월요일 - Day 49

이번 프로젝트의 아이템으로 게임(LOL)과 포켓몬을 보여주기로 했었는데, 이날 오프라인 회의에서 포켓몬은 LOL에 비해 보여줄 수 있는 요소가 적다는 이슈로 인해, 서브 아이템을 '메이플스토리'로 변경했다. 서브 아이템을 변경한 이후, 이번 프로젝트는 리액트를 기반으로 하기 때문에, 각 아이템마다 나올 수 있는 컴포넌트 종류부터 브랜드 이름과 디자인 시스템까지 모두 결정했다. 기획 단계에서 필수적으로 의논해야할 부분들이 모두 결정되어서 이제 개발만 시작하면 되려나 했었는데, 수업 끝나고 2시간 후에 팀 단톡방에 메시지가 왔다.

"API 사용 불가여서 긴급 회의 모집합니다!"

수업이 끝나고도 교실에 남아서 회의하던 팀원들이 API를 실험해보고 사용이 불가하다는걸 알게 되어 메시지를 보낸거였다. 나는 당시에 약속이 있어서 회의에 참석하지 못하고 밖에서 저녁식사를 하고 있었던터라, 메시지를 확인한 순간 굉장히 당황스러웠다.😱

팀장님의 긴급 공지..

팀장님의 긴급 공지를 읽고 API가 왜 사용 불가인지, 누가 실험했는지 물어봤다.

남아서 회의하던 팀원들이 리더님이랑 같이 실험했는데, '메이플스토리'는 코드값이 개발자만 알 수 있도록 작성되어 있어서 완전하게 이해하지 못하면 사용하기 어렵고, 넥슨에서 공식 제공하는 API는 캐릭터 정보를 하나씩 가져와서 직접 집어넣어야 하는 번거로움이 있다고 했다. LOL도 메이플이랑 비슷한 상황인데 고유값 자체가 암호화가 되어있어 볼 수가 없다고..

팀원분의 상황설명을 듣고, 이건 우리가 어쩔 수 없다는게 이해는 됐지만 앞으로 어떻게 해야할지 막막했다.

---

4월 30일 화요일

이 날 오후, 새싹(캠퍼스) 라운지에 나를 포함해 긴급회의에 참석 가능한 팀원 4명이 모였다.

나는 API를 사용할 수 없어서 아이템 자체를 아예 다른 것으로 바꾸려고 생각하는줄 알고, 기획 단계에서 나왔던 아이템들의 장/단점을 이날 아침에 정리해갔다. 캠퍼스에 도착해서 전날 추가 회의에 참석했던 팀원에게, 포켓몬은 API 사용이 가능해서 이걸 메인 아이템으로 진행하면 어떨지 생각했었다는 얘기를 들었다. 일단 내가 정리한 내용부터 보면서 자유롭게 이야기를 주고받다가, 다른 OPEN API는 뭐가 있는지 구글링을 했고, 스마트팜 관련 API를 발견했다. 스마트팜이라는 아이템 자체는 굉장히 신선한 것 같아서, 이걸 어떻게 풀어갈 수 있을까 고민하다가 내가 '도시농부' 이야기를 했고, 결국 우리의 진짜 최종 아이템은,

→ 주말농장에서 농작물을 키우는 모든 도시농부들에게 정보를 제공해주는 사이트로 결정되었다.

아이템이 결정된 후에는 디자인 시스템, 브랜드 이름, 페이지 종류까지 결정했는데, 이 모든 과정이 3~4시간만에 이뤄졌다. 집단지성의 힘이 이런거구나 느꼈던 하루였다.👍 그리고 이날 저녁에는 팀장님이 열어준 팀 피그마에서 각자 담당한 파트에 대해 와이어프레임을 제작했다.

---

5월 1일 수요일 - Day 50

이 날은 아주 긴 하루였다..😭

전날 긴급회의에서 분배한 업무에 대해 부담을 느끼는 팀원이 있어서, 이날 회의에서 업무를 재분배했다. 전날 저녁에 각자 만들어온 와이어프레임을 확인하고, 더 나은 디자인이 없을지 고민하여 최종 시안을 결정했다. 그 후에는 페이지 크기(1200px)와 종류, 각 페이지마다 들어가는 효과, 로고 및 파비콘, 폰트 사이즈까지 결정했다. header와 footer는 모든 페이지에 들어가는 컴포넌트여서 팀원 한 분이 먼저 제작을 시작했다. 이제서야 제법 순조롭게 흘러가나 싶었는데, 그건 굉장히 오만한 생각이었다.😂

---

기획 단계에서 필수적으로 정해야하는 부분들이 모두 결정되었으니, 이제 components 폴더에 각자 페이지 이름별로 폴더를 만들고, pages 폴더에는 이번 팀플에서 나올 페이지들의 tsx를 만들어야 했다. 이걸 한 사람이 작업해서 github에 올리면 나머지 팀원들이 pull 받는게 편하다는 리더님 조언을 들었고, 팀장님이 네이버에서 룰렛을 돌려서 내가 당첨되었다. 작업하려고 폴더구조를 봤는데, TS를 쓰기로 했음에도 루트에 tsconfig.json 파일이 없었다. 설치하려고 터미널에서 명령어를 입력했는데 ERROR가 떠서 급하게 리더님을 찾았고, 첫번째 ERROR는 무사히 해결했다.🙌

이제 나는 당첨된 작업만 완료하면 귀가할 수 있을거라고 생각했는데, 다음 ERROR가 연달아 등장해서 우리팀만 교실에 남아 리더님과 함께 고생을 했다. → 팀원 모두 node 버전 똑같이 맞춰야된다고 해서 확인하고.. json 파일에서 설치버전 모든 팀원 전부 똑같은지 확인하고.. gitignore는 자동으로 만들어져야 하는 파일인데 왜인지 없어서 github에 node_modules 폴더랑 ds.store가 업로드되어 리더님한테 gitignore가 왜 없냐는 얘기 듣고.. components 폴더 내부에 만든 페이지별 폴더에 gitkeep이 없어서 github에서 폴더가 안 보여서 gitkeep 넣어서 다시 푸시하고.. 그럼에도 다른 팀원들에게 계속 오류가 발생해서, 결국 기존의 레포를 통째로 버리고 새로 만들었다.

---

수업은 오후 5시에 끝났는데, 오류를 해결하느라 2시간이 걸렸다.

집에 돌아오니까 너무 피곤해서 밤 10시가 조금 넘어 잠이 들었는데, 우리팀 단톡방 카톡알림을 듣고 30~40분만에 깼다. 단톡방에서는 나와 팀장님을 제외한 모든 팀원이 sass 확장자와 scss 확장자를 헷갈려하고 있었고, 나는 자다깨서 당황한 정신으로 두 확장자의 차이점에 대해 설명했다..😅

---

5월 2일 목요일

저녁에 팀장님이 전체 팀원들에게 TS를 JS로 바꾸자고 제안했다.

솔직히 날씨 API를 불러오는 방법을 연구하면서 예시를 보려고 구글링을 했지만, React+TS에서 날씨 API를 성공적으로 불러왔다는 사례는 나오지 않아서 내가 참고할게 없었다. 그렇다면 이제 공부를 시작한 내가 제로베이스부터 작성해야한다는 얘기 같아서, 뭘 어디서부터 어떻게 작업해야할지 막막했다. React가 JS 기반이고 모든 코딩의 기본은 JS를 잘해야한다고 생각해서 변경에 동의했고, 과반수 찬성으로 TS를 포기하기로 결정했다. 추가적으로 SASS 스타일링 기법도 사용 여부를 논의하는게 좋을거 같아서, 다음날 회의에서 논의하기로 했다.

---

5월 3일 금요일 - Day 51

이날 오전 회의에서 SASS 스타일링 기법의 사용여부를 논의했고, 최종적으로는 사용하기로 결정했다. → SASS를 이해하는 사람들은 바로 SASS를 사용하고, 그렇지 않은 사람들은 CSS로 작성해서 chatGPT를 이용해 변환하는 것으로 결정 완료.

팀원 한 분이 바빠서 팀 프로젝트 참여가 어려울 것 같아 개인 프로젝트로 변경하겠다고 알려왔다. 담당업무를 재분배하려다 모두 자신이 맡은 페이지를 구현하는데 정신이 없어서, 일단 각자 현재 담당하는 것부터 개발하고, 빠진 팀원분이 담당하셨던 파트는 가능하다면 가장 마지막에 최소한으로 개발하기로 결정했다.

💻 그리고 드디어 각자 개발을 시작했다.

나는 메인 페이지에서만 보여지는 날씨와 미세먼지 위젯을 담당하는데, 일단 날씨 API부터 실험했다. 구글링해서 예시를 살펴보고 코드를 작성해서 API로 현재 위치 기준으로 날씨 불러오기는 성공했는데, 이걸 열심히 뜯어보고 작성하면서 2차 팀플 당시에 사용했던 로그인 API보다 훨씬 어려운 것 같다는 느낌이 들었다. 아무래도 JS를 배우면서 공부했던 fetch(), promise를 다시 봐야할 것 같다.😅

현재 위치 기준으로 날씨 정보 불러오기는 성공

---

여기까지가 이번주에 진행된 내용이었다.

최종 아이템을 결정하기까지, 몇 개의 아이템을 포기하고 새로 선정했는지 모르겠는데, 그만큼 프로젝트 하나를 진행하는데 다양한 고난과 역경이 발생할 수 있다는 의미인 것 같다.

앞으로도 어떤 고난이 발생해도 팀원들과 함께 즐겁게 잘 헤쳐나가보자!

그 전에 1인분부터 제대로 하자!