[개발 공부 16일차] 팀 프로젝트 4일차: 팀 프로젝트 완성!

 

 

자바스크립트가 좀 어려워서 이번 프로젝트는 난항이 좀 있었다. 그래도 개인 과제 때 진짜 팀 프로젝트에 누가 되지 않으려고 밤새워가며 공부하고 몰두한 보람이 있었다. 음... 그리고 이번엔 내가 많은 게 그래도 가장 어려울 것 같아서 맡았는데 다 하고 나니 가장 쉬운 거였나?.... 하는 생각이 많이 든다. 발표 이후, 리액트 강의 시작되면 리액트 강의 들으면서 팀 프로젝트 코드를 다시 봐야겠다. 처음부터 끝까지 어떤 코드로 구성되어 있고 로직이 어떻게 되는지 이해하는 시간을 가져야겠다.

 

 

< 목차 >

1. 막혔던 부분과 해결  [CSS 디버깅]

2. 드디어 팀 프로젝트 끝!

3. 금일 소감

 

 

1. 막혔던 부분과 해결  [CSS 디버깅]

CSS 충돌 떄문에 여러모로 문제가 생겨버림

 

 

프레디의 피자가게부터 밑 요약 내용까지 행간이 다닥다닥 붙어있고 아래 글자들도 조금씩 다 깨져있다. API 연결하시는 팀원분과 내 코드를 병합했더니 이런 문제가 생겼다. CSS의 경우, 충돌이 나든 뭘 하든 문제가 생겼을 떄 console처럼 딱 뭐가 문제인지 알려주지 않아서 어떻게 할까 하고 CSS 하나하나 코드를 봤는데 답이 안 나왔다.

 

진짜 '에라 모르겠다' 하고 싶었지만 계속 물고 늘어진 결과, 답을 알아냈다.

 

 

reset CSS와의 충돌

 

 

개발자 도구로 CSS 충돌난 부분의 원인을 파악하려고 하나하나씩 커서 기능으로 대서 보고, 체크되어 있는 CSS를 해제해서 어떤 게 문제인지 세세하게 해보았다. 그러던 중, 바로 위 사진처럼 본 적 없는 CSS가 있어서 저걸 코드에서 추적했다. HTML, CSS 모두 보다가 reset CSS라는 코드에서 발견됐다.

 

reset CSS는 API를 연결해주기 전에 브라우저 상관없이 되게 하려고 한 번 CSS를 초기화 시키는 CSS다. 근데 폰트랑 다른 디자인 요소가 겹쳐서 충돌이 난 듯하다. 저 밑줄 쳐져 있는 부분을 삭제했더니 원상복구되었다.

 

 

감격한 나

 

 

엄청 고민하다가 해결한 거라서 정말 너무 기분 좋았다. 다른 동기분들도 다들 모르겠다고 해서 난감하던 차였기 때문이다. 그래서 해결하자마자 같은 팀원 단톡에 보내서 해결됐음을 알렸다. 

 

 

이외에도 이래저래 일이 많았다. 당장 내일이 발표라 발표 자료 준비도 해야 하는데 팀원 한 분이 오늘도 어떻게 해야 할지 전혀 갈피조차 잡지 못하셔서 결국 함께 해결하다가 22시 정도에야 완성이 되었다. 일단 필수 기능은 다 완성됐지만 코드를 좀 더 다듬고 싶어서 팀원들과 더 남아서 해서 23:30 즈음에 끝났다. 발표 때 필요한 부분과 팀원 각자에게 물어보고 끝나자마자 얼른 돌아가서 자라고 말한 뒤 ZEP에서 파하였다. 다들 열심해줘서 너무 고마웠다.

 

 

 

2. 드디어 팀 프로젝트 끝!

드디어 팀 프로젝트 코딩은 끝이 났다. 정말 CSS도 자바스크립트도 모두 더 수정하고 향상시키고 싶은데 마감 기한을 지키는 것이 향상시키는 것보다 중요하기에 일단 코드 제출하였다.

 

나는 팀원들과 파하고 02시 30분?쯤까지 PPT랑 시연 영상 녹화까지 모두 마친 뒤 잠들었다. 낼 발표만 끝나면 일단 당장은 한숨 돌릴 것 같다. 다른 팀 어떻게 했을지 너무 궁금하고 나도 잘 해내야 하는데 수면 시간이 더 중요하기 때문에 발표 연습까지는 못하고 잤다. 내일 일어나서 해야겠다..

 

 

 

3. 금일 소감

다 하니까 매우 뿌듯했다. 정말 프로젝트 진행 내내 '오늘 한 것의 반만이라도 할 수 있을까?', '필수 기능 구현조차 못하는 것 아닌가?' 하는 생각이 너무 많이 들었다. 하지만 해냈다. 휴.. 일단 뭔가 자바스크립트 배운 것의 많은 부분을 적용할 수 있는 것의 내가 맡은 기능이 아니었다는 생각이 들어서 이번 주에 React 들어가긴 하지만 자바스크립트 공부도 병행해서 해야겠다 싶다. 휴 나만 진도가 늦는 건,,,, 아니야,, 열심히 하면 된다!!!! 약한 소리 노노 해