[코딩온] 프론트엔드 입문 Day 54~55 (3차 프로젝트 7, 발표)

3차 프로젝트와 관련한 마지막 주간기록.✍

이번주에는 작업을 마무리하고, vercel로 배포하고 오류를 수정하고, 최종 발표와 시상까지 있었다.

---

13일 월요일 - Day 54

새벽부터 컨디션이 너무 안 좋아져서, 이런 상태로는 수업에 나가는게 힘들다는 판단을 내리고 얼른 리더님과 팀장님에게 연락했다. 집에서 노션 회의록에 실시간으로 업데이트 되는 회의 내용을 확인하고, 팀장님과 통화로 이번주 일정을 공유받았다. 프로젝트 마지막 주간이라 되도록이면 자리를 비우지 않았어야 했는데 아쉽다.

💻 기본적인 작업은 끝난 상태여서, 이 날은 미세먼지 위젯의 세부 디자인과 날씨/미세먼지 위젯의 미디어쿼리를 수정했다. 디자인의 경우에는 결과가 '보통'인 경우에만 border가 출력되어야 하는데 3종 디자인 모두에 border가 있어서 그 부분을 수정했고, 미디어쿼리는 Break Point를 설정해서 크롬 브라우저의 F12 켜고 늘였다 줄였다를 반복하면서 작업하다가, 나 혼자 계속 보자니 이상한 것 같아서 녹화한 화면을 팀원들에게 공유해서 팀장님 피드백도 들었다. 결국은 BP를 3개 설정해서 미디어쿼리 작업까지 끝냈는데, 나에게는 그게 최선이었다.😂

---

14일 화요일

전날 수업에서 팀원들이 룰렛을 돌려서 발표준비 업무분담을 했다고 알려줬는데, PPT 준비를 담당하게 된 팀원에게 아직 작업이 남아있어서 이미 작업이 끝난 내가 담당업무를 서로 바꾸자고 제안했다. 마침 노션에 이번 프로젝트의 최종 기획안을 내가 계속 정리하고 있었기 때문에, CANVA 열어서 발표 PPT의 기본 구성을 금방 만들 수 있었다. 우리 팀의 메인컬러들을 활용해서 디자인했지만 내 눈에는 어딘가 이질적으로 느껴졌는데, 팀원들이 괜찮다고 해줘서 다행이었다.🙂

💻 메인 페이지를 담당하시는 팀원분이 해당 페이지에 들어가는 요소들의 scss 파일을 하나로 합치는게 좋다는 리더님 조언을 들었다며, 내가 작성한 날씨/미세먼지 위젯의 scss 파일도 합쳐야하는데 괜찮겠냐고 물어봐서 자초지종을 듣고 승낙했다. 오후에 코드를 합치는 작업이 끝났는데 위젯의 반응형이 제대로 되지 않는다는 얘기를 듣고, 얼른 pull 받아서 코드를 수정했다. 반응형 사이즈를 확인하며 기존에 만들었던 BP 중에 쓸모없는 것 하나를 삭제하고, root.scss로 불러온 변수를 잘 사용했는지 전체적인 코드도 확인하고 push했다.

---

15일 수요일

catch((error) => setError('오류 수정!'));

이 날의 일을 한 줄로 요약하자면 위 코드와 같다.😂

배포하기 전에 디렉토리에서 파일의 위치 변경, 디자인 파일에서 변수 설정, 선택자 중복으로 인한 디자인 깨짐 등 각종 오류들을 발견하여 팀원들과 카톡으로 의견을 공유하며 함께 해결하고 push, merge, pull하는 과정을 반복하다보니 저녁이 되었다. 원래는 이날 오후에 배포를 진행하려고 했는데, 작은 오류들이 계속 발견되어서 배포하지 못했다.

개인적으로도 내가 만든 위젯들이 반응형으로 페이지 크기를 줄였을 때 화면 왼쪽에 너무 붙어버리는 문제가 있어서 그 부분을 수정했다. 나는 계속 수정해서 push하는데 팀원들이 날씨 위젯의 정보가 제대로 출력되지 않는다고 해서 뭐가 문제일까 고민하다가, 이게 현 위치를 받아와서 정보를 출력하는거라 혹시 해당 팀원들이 브라우저에서 위치 권한을 허용하지 않아서 그런게 아닐까 생각했다. 그리고 실제로 위치를 허용하니까 정상적으로 출력되었다.

---

16일 목요일

catch((error) => setError('오류 수정!'));

이 날도 전날처럼 오류를 수정하다가 하루가 갔다.

오전부터 새싹 캠퍼스에 팀원들과 모여서 배포하기 전에 최종적으로 모든 오류와 디자인적으로 보완할 부분들을 수정했는데, 갑자기 미세먼지 위젯에 결과가 안 뜨는 문제가 생겼다!😭 console.log(data)로 전체 데이터를 불러봤더니, 강동구의 미세먼지 결과만 빈 문자열로 보내고 있어서 급하게 중구 데이터로 변경해서 push했다.

그러나 이건 이날 우리 앞에 놓여졌던 수많은 오류들의 '빙산의 일각'에 불과했다.

눈에 보이는 부족한 부분들을 최대한으로 수정해놓고, 팀원들이랑 점심 먹고 돌아와서 vercel로 배포했는데 이번에도 미세먼지 위젯이 말썽이었다. 위 사진처럼 지역이랑 결과가 전부 안 나오고 'ERROR'만 띄워주고 있어서, 크롬 브라우저 콘솔에 찍힌 에러메시지를 복사해서 chatGPT에게 물어봤다가, 프록시 서버를 사용하라고 해서 살짝 어이가 없어졌다. 그걸 안 쓰려고 일부러 API를 변경했던거지만, 지금 다른 방법이 없으니 chatGPT가 시키는대로 코드들을 입력하고 API key도 배포주소 기준으로 새로 받아서 적용하고 push했다.

프록시 서버 쓰라고 알려주는 chatGPT

그런데 vercel에서 지난 2시간 동안 팀원들이 작업해서 올린 코드가 전부 반영이 안 되어서, 재배포하고 한참 기다리며 팀원들과 대화하다가, 어떤 이야기가 나와서 그랬는지 배포한 페이지를 새로고침했더니 미세먼지 위젯이 정상적으로 작동했다!😱 수정한 코드가 그제야 반영이 됐던 모양인데, 위젯이 정상적으로 뜨는걸 본 순간 나는 소리쳤다.

"이게 왜 되지?"

근데 그건 잠깐이었고.. 다른분들 다 정상적으로 보이는데 나만 안 나오거나, 팀원 한 분만 보이고 다른 분들 모두 안 나오거나, 몇 명만 보이거나 등등.. 이게 계속 말썽이어서 팀장님이 리더님께 메시지를 보냈고, vercel.json을 만들라는 조언을 듣고, 만들어서 push했는데 이번에는 모두 미세먼지 위젯을 정상적으로 볼 수 없었다. 모바일 버전에서는 그전부터 계속 안 나오고 있었고..🤔

알고보니 내가 fetch()에서 chatGPT로 작성했던 url이 문제였어서, 리더님 조언대로 수정하니까 나를 포함한 모든 팀원들이 미세먼지 위젯을 정상적으로 볼 수 있게 되었다.

그리하여 오전 10시에 만나서, 오류 수정하느라 하루가 가고, 오후 7시반에 해산했다.

하루종일 오류수정한 결과..

---

17일 금요일 - Day 55

💻 오전에는 팀원들 모두 교실에 모여서 디자인 측면에서 보완할 부분을 수정했고, 나는 아이폰에서만 날씨 위젯의 아이콘이 보이지 않는 문제를 리더님과 함께 수정했다. 애플이 보안이 엄격한 편이라, API로 아이콘을 불러오는 URL의 http를 https로 변경하여 push하니까 정상적으로 출력되었다. 이제 마음 놓아도 되겠다고 생각했는데, 이번에는 미세먼지 위젯이 말썽이었다.😅 또 결과가 출력되지 않아서 console.log(data)를 입력하고 npm start로 확인했더니, 결과값으로 빈 문자열을 보내고 있었다. 어제와 똑같은 상황이라, 콘솔로 확인한 데이터 중에 강동구는 정상 출력되고 있어서 다시 강동구의 데이터로 변경했다. 수정을 완료한 미세먼지 위젯의 코드를 작업하던 브랜치에서 push했는데 GitHub에서 자동으로 PR 메시지가 뜨지 않아서, 급하게 다른 브랜치로 이동해서 다시 push하고 merge했다.

📷 부족한 부분들은 점심시간까지 최대한 수정하고, 발표하기 전에 단체사진과 팀별 사진을 찍었다. 그리고 2시 정각에 우리 팀부터 발표를 시작했는데, 순조롭게 흘러가다가 시연 도중 특정 페이지에서 레이아웃이 깨져있는걸 발견했다. 순간 발표자와 PPT를 넘겨주던 발표 도우미, 그리고 자리에 있던 팀원들까지 모두 놀랐다.😱 발표 전에 나는 해당 페이지에서 오타를 발견해서 수정했었고, 옆자리 팀원은 가운데 정렬 문제로 디자인을 수정했는데, 나는 내가 건드려서 저렇게 됐나 하는 생각에 놀라서 옆자리 팀원을 쳐다봤다가 눈이 마주쳤다. 그거 하나 아쉬웠던걸 제외하고는 멋진 발표였다.👍

🏆 우리 팀은 발표가 끝나고 다음 팀 발표하기 전에 얼른 가방을 챙겨서 '강동구 매칭데이' 행사에 참석했고, 집으로 돌아오는 길에 슬랙을 통해 이번 프로젝트의 수상 결과를 받았다. 우리가 그동안 노력하고 고생했던만큼 괜찮은 결과를 얻은 것 같고, 모두가 얻어가는게 있는 느낌이라 다행이라는 생각이 든다.👏

---

💡 그리고 이번 팀플을 진행하며 느낀 점을 기록해보자면,

React는 이번 교육과정에서 처음 배운거라 그리 익숙하지 않아서 작업 초기에 약간 헤맸고, React 자체가 JS를 기반으로 하는 라이브러리인데 내가 JS를 그리 잘하는 편은 아니라 스스로의 부족함을 제법 느꼈다. 2차 프로젝트에서 API를 다뤄보긴 했지만 fetch()로 데이터를 불러와서 출력하는 과정은 이번이 처음이라 직접 경험해보며 고생을 많이 했고, 향후 프론트엔드 개발을 하더라도 백엔드 분야의 기본적인 지식은 알아야겠다고 생각했다. JS는 프론트엔드와 백엔드 양측 모두에서 사용하는 프로그래밍 언어이기 때문에, 개인적인 욕심일 수도 있지만 이번 교육과정이 끝나도 JS 하나는 제대로 마스터해서, 누군가 JS의 특정 기능(?)에 대해 질문하면 바로 대답 가능한 수준은 되어야겠다고 생각했다.🤔

또한 이미 1차 팀플에서 깨달은거지만, '기획'은 언제든지 상황에 따라 변할 수 있다는걸 이번 팀플에서도 크게 느꼈다. 특히 기획 초기에 OPEN API 사용 가능성에 대한 문제로 최종적으로 결정했던 아이템을 포기하는 과정을 반복하면서 "아이템 변경을 이렇게 많이 할 수도 있나" 싶었을 정도였다. 그런 고난과 역경 속에서도 묵묵히 자신의 위치를 지켜준 멋진 팀원들과 함께 이번 프로젝트를 무사히 마쳤다는 사실에 감사하다.🙏

마지막으로, 어젯밤 팀원들에게 단톡방에서 따로 얘기했지만, 지난 4월말부터 3주간 프로젝트 진행하느라 수고했습니다! 각자 개성이 뚜렷한 여러분들과 이번 팀플 함께 해서 감사했고 즐거웠어요!🙂

누가 뭐래도 B팀 최고!👍