2차 프로젝트 - 카페 홈페이지 클론 (공차) (3) 회고록

이렇게해서 나의 2차 프로젝트도 끝이났다.
해도해도 새롭긴하지만 이번 프로젝트는 더 새로운 과제였던 것 같다.
특히 타입스크립트랑 스타일 컴포넌트 사용하는 것이 기존 방식이랑 달랐다.

1. 새로운 기술 사용 후기

1) 스타일 컴포넌트

• 느낀 장점
  스타일 컴포넌트 방식은 이전에도 알고 있긴했지만 제대로 써본 것은 이번이 처음이었다. 그런데 쓰다보니 편하더라... 일단 별도의 scss 파일을 import하는 것이 아니고 컴포넌트화해서 사용하기 때문에 하나의 jsx 파일에 css를 같이 작업할 수 있어서 편리했다.
• 느낀 단점
  다만 단점도 있는데 만약 js파일과 scss 파일들 동시에 띄워서 같은 눈높이에서 확인하면서 작업하던 사람이라면 동시확인이 어려워 작업이 불편할 수도 있을 것 같았다. 나는 스타일 컴포넌트를 함수 위에 작성해놔서 스타일컴포넌트 부분이 길어질수록 밑에 함수 코드 작업하는 부분을 확인하기 어려웠다..
  어제 강의에서 언급이 되었던 부분이긴 한데,, 그래서 스타일컴포넌트는 아래에 작성한다고 하더라. 뫠 밑으로 뺄 생각을 못했을까 싶지만, 이것도 경험이 될 것 같다. 그래서 지금 작업하는 것은 밑으로 빼고 있다. 또 처음에 작성할 때는 스타일 컴포넌트 익스텐션을 사용안해서 css 작성 부분이 그냥 다 주황색 글씨 스타일이어서 확인하기 힘들었다. 중간에 코드 리뷰 중에 다른 분이 익스텐션이 있다고 하셔서 그 이후에는 익스텐션 설치하고 기존의 scss 파일처럼 색깔이 구분된 양식으로 작성할 수 있었다.
  styled-component 사용 필수 설치 : Prettier - Code formatter

2) 타입스크립트

타입스크립트를 사용하는데 정말 우여곡절이 많았던 부분이다. 뭐만 작성했다하면
오류가 나서 진행이 안되었다. 진짜 타입스크립트 사용하면서 만나볼 수 있는 관련 오류들 ts(****)은 거의 다 만나봤을 거다. 처음에는 너무 진도가 안나가서 힘들고 답답했는데 타입스크립트 오류자체에 힌트가 있더라. 예를 들어 타입지정을 안해줘서 undefined가 나오는 건 작업하다 에러나 날 수 있으니 타입을 지정하라 이런식으로 힌트를 주는 것이었다.
이번 과제하면서 타입스크립트 부분에서 많은 도움을 주신 다른 팀원분이 하는 말씀이 기존에 우리가 작업하는 react.js는 작성 기준이 모호하고 포괄적이라고 했다. 그래서 타입 지정을 안해도 예상을 해주는 건데, 타입스크립트를 사용함으로써 모호하게 예상했던 부분을 확실하게 지정해줘서 앞으로의 에러 발생을 미리 방지하는 느낌인 것 같았다.
내가 타입스크립트 사용하면서도 특히 어려웠던 부분은 이벤트핸들러에 타입을 지정하는 것이었다. 이전에 단순하게 타입스크립트에 대해 찾아봤을 때는 변수에 타입 지정하는 것만 봤었다. 그런데 이벤트에도 변수를 지정하더라. 심지어 이벤트 핸들러마다 타입지정하는 것이 달라서 애먹었다.
예를 들어 onChange에는 (event: React.ChangeEvent<HTMLSelectElement>)
onSubmit에는 React.FormEventHandler<HTMLButtonElement>이렇게 타입을 지정했다. 이부분은 React.Event를 검색하면 나오는 하위 리스트에서 맞는 이벤트타입을 지정해주면서 해결했다.

3) Axios

기존에는 통신할 때 fetch만 사용했었다. 이번에는 axios를 사용했는데
기존 fetch에서 사용했던 GET, POST, DELETE 메소드는 동일했다.
찾아보니 몇 개가 더 있는 것 같았는데 이번에 사용한 것은 위의 세가지 메소드였다.
사용하면서 신기했던 점은 try/catch 구문으로 에러처리를 할 수 있다는 점이었다. 그래서 에러 발생 시에 에러 모달창을 띄운다던가 비활성화를 한다던가 다양한 방법을 응용할 수 있어서 좋았다. 아직 타입스크립트를 적용하여 axios를 사용하는 것은 어렵지만 다음에도 fetch 말고 axios로 작업해봐야겠다는 생각이 들었다.

2. 코드 작성 후기

1) 잘했다고 생각한 코드 (매장 검색 부분)

코드 설명 리뷰에서도 언급하긴 했지만 매장 검색 부분 구현한 것이 만족스럽다.
Select box에서 도시를 선택하고 input box에 키워드를 검색하여 해당 키워드가 포함된 매장 이름을 가진 결과리스트를 조회되게 하는 기능인데, 처음에는 select box 필터링을 어떻게 구현해야할지 감이 안잡혔다. Select box에서 도시를 필터링 하려면 매장 주소랑 비교를 해야하는데 slice 메소드를 써도 생각했던 결과가 안나와서
결국 처음에는 도시 항목을 별도로 만들어 셀렉트박스와 1대1로 비교를 했었다. 이거만 붙잡고 있을 수는 없어서 어느정도 타협을 한 것이다. 그런데 그렇게 기능을 구현하고나서 시간이 지난 수록 좀 더 생각하면 원래 생각했던대로 구현이 될 것 같았다. 그래서 일단 모달 지도 창 부분을 완성하고 다시 수정하기 시작했다. 해결은 정말 갑자기 뜬금없게 되었다. 이 것은 코딩을 하면서 한 두번씩 겪은 경험인데, 정말 몇 시간을 매달려도 해결이 안나다가 갑자기 이동하다가 혹은 잠자기 전에 문뜩 '이렇게 해보면 어떨까?'라는 생각이 들 때가 있다. 정말 무심코 한 생각이 정답이었던 적이 있다. 이런 경험을 겪을 수록 진짜 몇시간씩 하다가 안되면 두뇌 리프레시가 방법일 수도 있겠다라는 생각이 든다. 이 코드 부분은 결국 하루정도 지나고 아예 새로운 마음으로 다시 처음부터 코드를 작성하고 원래 기재했던 것과 다르게 함수 위치도 변경해가며 코드 수정을 하니 원하는 대로 중첩필터 기능이 구현되었다. 구현하고 보니 사실 단순한 기능인데 그래도 포기하지 않고 재시도 끝에 원하는 결과가 나왔다는 것이 뿌듯했다. 내가 원하는대로 구현이 됐을 때 그 만족감이 정말 큰 것 같다.

  {!loading &&
      addressList
         .filter(val => {
            if (selectedOption == '시,도') {
               return val;
               }
            if (val.address.slice(0,2).includes(selectedOption.slice(0, 2))) {
               return val;
               }
              })
         .filter(val => {
            if (value == ' ') {
               return val;
               }
                if (val.name.toLowerCase().includes(value.toLowerCase())) {
                  return val;
                }
              })
         .map((add, i) => (
            <li onClick={() => onClickModal(add)} key={add.id}>
              <h4>{add.name}</h4>
                <p>{add.address}</p>
            </li>
              ))}

2) 아쉽다고 생각한 코드 (리뷰 작성 부분)

개인적으로 구현하는데 아쉬웠던 부분인 음료상세페이지에서 리뷰 기능 부분이었다.
axios통신함수 쪽에서 타입지정하는데도 도움을 많이 받았고, 별점 추가기능을 넣었는데 별점을 찍고 한줄리뷰평 작성하러 Input에 마우스를 클릭하면 그 별점 클릭했던 css효과가 사라졌는데 그 부분을 해결하지 못했다. 별점 클릭시 점수는 남아있는데 빨간색으로 변경된 별점이 사라졌다. 지금 이전 코드 남아있어서 확인해보니 checked랑 focus를 사용했는데 왜 clicked는 사용해보지 않았는지 후회가 된다. 좀 더 다른 방법을 생각했으면 해결을 할 수 있었을 것 같아서 아쉽다.

3. 느낀점 (정리)

이번 프로젝트도 역시나 많이 배울 수 있던 프로젝트였다. 부트캠프 들어오면서 0부터 시작한 것이라 사실 뭘해도 다 새롭게 배우는 것이긴 한데, 그럼에도 불구하고 처음보다는 많이 발전했다고 생각한다. 특히 이번 프로젝트에서는 인원이 원래도 프론트 한 명이 다른팀보다 부족했는데 중간에 백엔트 팀원 한 명이 빠짐으로서 팀 내부에 잠깐 혼란이 있었지만 각자 맡은 바 이상을 하려고 노력했고 그날 그날 진도사항을 세밀하게 공유하고 하루단위로 계획을 짜며 프로젝트를 진행했기 때문에 원활히 진행할 수 있었다. 심지어 막판에 첫 미팅 때 구현하고자했던 가까운 매장 찾기 기능도 구현할 수 있었다. 물론 그 부분은 내가 진행한 것은 아니지만, 대신 나는 막판에 단순 UI페이지 완성하느라 꽤 빠듯하게 달렸다. 프로젝트 총 결과물은 다른 팀원분들이 워낙 잘해주셔서 만족스러웠지만 개인적으로는 워낙 도움받은 것이 많아서 아쉽기도 했다. 특히 타입스크립트 부분은 추가로 많은 공부를 해야겠다고 생각했다.
역시나 이번 프로젝트에서도 팀원 분들 덕분에 무사히 마칠 수 있었고, 코드 리뷰나 실시간 소통도 서로 잘해서 잘 끝낼 수 있었던 것 같다.
이번에 나는 추가로 발표자료 준비를 맡았는데 자료 준비하면서 우리팀이 한 프로젝트에 대해 더 잘 이해할 수 있었던 것 같다. 발표 녹화할 때 말이 매끄럽지 않게 나왔던 것 같지만, 자료 pdf, 스크립트, 발표 모두 열심히 준비해서 결과적으로는 만족스러웠다.

아래는 다른 팀원분이 발표용으로 만들어 주신 유튜브 동영상이다.
프로젝트 구현한 거 확인할 수 있음😁