[Project]스택오버플로우 클론코딩 2주차 회고

😸주간 요약

컴포넌트 구현을 하다보니 순식간에 지나가버린 일주일이었다. 원래는 기록을 매일 하다가 바빠진 탓에 제대로 하지 못했더니 뭔가 했지만 뭘 했는지 잘 모를 정도로 빠르게 흘러간 것 같다. 나중에 회고를 작성하려면 다 기억을 해내야 하기 때문에 다음주 부터는 간단하게라도 TIL을 작성하도록 해야겠다.

 

멘탈 관리를 위해서 일상과 프로젝트 사이에 간격을 두고 과몰입(?) 하지 않으려고 많이 노력하고 있다. 자기 자신을 잘 알고 있기 때문에.. 뭔가 이것도 하고 싶고 저것도 하고 싶은 욕심이 많지만 생각만큼 따라주지 않는 것이 좀 아쉽고 또 그동안 많이 공부했다고 생각했는데 기억이 나지 않는 부분도 많아서 좀 회의감이 든다. 

 

긍정적인 부분은 프로젝트 하면서 깃플로우에 많이 익숙해졌다는 것. 그리고 이번주 내내 테일윈드를 사용해서 컴포넌트 구현을 했기 때문에 역시 테일윈드에 익숙해졌다는 것...? 다음주에는 지금까지 배웠던 로직을 적용하면서 익숙해지도록 해봐야지. 이번주동안 좀 덜 열심히 달린 것 같아서 많이 아쉬운데, 다음주는 진짜 열심히 해봐야겠다. 

💛Facts

✔️project

• 화면 정의서 작성
• 컴포넌트 구현 (header, 로그인,회원가입 Form 등등...)
• git flow 활용
• Cors 에러와 ngrok

✔️개인공부

• DFS, BFS 알고리즘 훑기(스윽..) 
• 리코일 깔짝

💛Feelings & Finding

✔️화면 정의서 작성, 컴포넌트 구현

업무 분담을 위해 구현할 사이트의 각 페이지별로 화면 정의서를 작성하고, 컴포넌트를 분담해 구현을 진행했다. 일주일 보단 덜 걸릴 것이라고 생각했는데, 예상보다 시간이 오래 걸렸다. 

 

이유를 생각해보자면 일단 나는 header 바를 구현하는데 시간이 생각보다 오래걸렸다. 반응형과 드롭다운 메뉴를 만드는게 테일윈드로는 처음 해보는거라 좀 어려웠고, 코드가 복잡해지니까 컴포넌트를 분리하고 적용하는데 자잘하게 시간이 많이 소요되었다. 컴포넌트 구현 전에 설계와 분석을 제대로 거치지 않아서 한 번 엎고 다시 만들기도 했는데, 익숙하지 않다면 어떻게 만들 것인지 꼭 꼼꼼하게 계획을 세워야겠다고 다짐했다 ㅋㅋ

 

그리고 나도 모르게 반응형을 데스크탑 화면 먼저 만들고 있었는데, 테일윈드 반응형이 잘 먹지 않아서 왜 그런가 봤더니 mobile first 라서 그런거였다. 먼저 모바일 화면에 맞춰 스타일 작업을 하고 md, lg 이렇게 분기를 나눠서 진행해야 매끄러운 반응형을 만들 수 있었다.

 

아 그리고 적다보니... Airbnb Style Guide 를 적용했는데 정말 생각치도 못한 곳에서 에러가 펑펑 터져서 살짝 당황스러웠다. 가장 놀랐던 부분이 props type 검사 해주는 부분. 마치 타입스크립트처럼 props 로 넘어오는 값에 대한 타입 검사를 실시하는데, 타입 스크립트와 다른 점은 컴파일이 된 이후 런타임에서 확인이 된다는 것. 이번 프로젝트에서 여기까지 신경쓰려면 일이 커질 것 같아서 아래 설정을 .eslintrc 파일에 추가해서 해결했다.

"rules": {
    "react/prop-types": 0
  }

생각해보니 이번 주에 만났던 에러가 대부분 EsLint에 대한 에러였던 것 같다.

 

컴포넌트와 이미지 등을 import 하고 난 뒤 다른 분의 로컬 환경에서 실행했을 때 unable to resove path 이런 에러가 떴었는데, 이 때 export default 대신 export 를 사용하고, 컴포넌트 작성을 함수 선언문 대신 화살표 함수를 사용해서 해결할 수 있었다. 솔직히 관련이 있다고 생각되지는 않는데, 이 문제 해결을 위해 여러가지를 찾다가 팀원분이 이 글([번역] 자바스크립트 모듈에서 default export는 끔찍합니다) 을 공유해주셨다. IDE를 사용할 때 default 로 export 된 모듈의 경우 이름을 바로 찾을 수 없어서 개발자 경험이 형편없다는 것임. 이름또한 마음대로 불러올 수 있기 때문에 혼란스러우니 여러가지 면에서 default export 대신 그냥 export를 쓰는 것이 낫다는 내용이다. 

✔️git-flow 활용

우리 팀에서는 git-flow 라는 확장 도구를 설치하여 git을 활용하고 있다. feature 브랜치를 만들고 관리하는 것을 조금 쉽게 도와주는 도구인데, flow를 끝내기 위해서 사용하는 git flow feature finish 명령어가 어떤 이유인지 초반에 conflict를 일으켜서 현재는 finish는 사용하지 않고 깃허브에서 merge 후 직접 브랜치를 삭제하는 방식으로 운영중이다.

# git-flow 설치 (우분투 기준)
sudo apt-get install git-flow

// main, dev, feature 로 브랜치를 운영한다고 할 때
git branch # 현재 브랜치가 dev인지 확인

git flow init 
# 나오는 항목에 대해 엔터 치다가, feature 항목이 나오면 <feature/myname/> 입력 후 엔터
# 이렇게 설정해두면 나중에 feature 브랜치를 생성하면서 
# 그 옆에 작성한 myname이 함께 브랜치 이름으로 등록된다.]
# (누가 작성중인 브랜치인지 확인이 편리하다.)

# 작업 시작 전 origin/dev => dev(local) pull 필요함!
git pull <origin dev>

# feature 브랜치에서 작업 시작
git flow feature start <브랜치이름> 

# 커밋이 완료되었다면 푸시하고 깃허브로 넘어가서 pr 및 merge

여러가지 방식을 사용해볼 수 있겠지만 현재로써는 이 방법이 가장 안정적이고 쓰기 쉬운 것 같다. 

✔️Cors 에러와 ngrok

본격적인 로직 작성 전에 api 테스트를 하고 싶어서 연결을 시도했다. 1차 문제는 역시 cors... pacakge.json 에서 proxy 설정해서 우회를 했고, 서버쪽에서도 Access-Control-Allow-Origin 헤더를 설정해주셔서 이 부분은 해결했는데, ngrok으로 요청을 보내니 아래와 같은 응답을 받을 수 있었다.

ngrok 무료 버전에서 접속하기 위한 관문(?) 같은 느낌인데, 관련해서 내용을 검색해보니 https://devforum.zoom.us/t/issues-with-ngrok/72678 이런 게시글이 있었다. (ngrok ERR_6024) 결론적으로는 유료 버전으로 구매하여 해결했다는 내용인데... 이 부분을 조금 더 파보려다가 어차피 aws 서버가 올라가면 ngrok은 필요가 없어지는 부분이라 다른 더 급한일을 해결하러 갔었다. 어떤 내용으로 구글링을 해도 이것에 대한 해결 방법을 찾을 수가 없었는데... 시간이 허락한다면 어떻게 해결할 수 있는지 꼭 좀 알고싶다 ㅜ.ㅜ 

💛Feedback

• 기술 스택, 타입스크립트 공부 => 솔직히 게을렀다. 유튜브 조금만 덜 보고 잠 조금만 덜 자면 충분히 할 수 있었을텐데. 체력이 안따라주는건지~ 다음주는 더 분발해야지..
• sns 알림은 정해진 시간에만 확인 => 할 일이 많아지니 자연스럽게 카톡이고 뭐고 안보게 되었다. 유일하게 유튜브는 끊지 못했다...
• 긍정적인 마인드 유지하기 => 서두에 주간 요약을 보면 알겠지만 회의감과 약간의 자괴감(?) 으로 스트레스 지수가 살짝 높은 상태이다. 잘 하지 못하더라도 좀 즐거운 마음으로 임해보려고 노력해야지. 근데도 에러를 만나고 씨름하다보면 기운이 스르륵 빠지는 건 어쩔 수 없는 것 같다. 

💛Future Action

• 기능 구현에 집중하기! 너무 어려워도 포기하지말자. 늘 열린 마음으로 소통하기
• 매일 기록하기
• 쉬는 시간 정해놓고 그 시간에는 걱정 하지 말기.