원티드 프리온보딩코스 3주차 회고-1

3주차 과제 -1 : 모바일웹 구현

📋 구현 내용

✔ OptionBox, CategoryList 컴포넌트 구현

✔ Items 페이지 구현

💡 새로 알게 된 내용

✔ nextJs

- pages폴더에 들어가는 파일이 각각 렌더링 되는 페이지, 파일명이 경로
- 페이지 이동시 a링크 대신 Link 컴포넌트 이용, Link내부에 a태그 사용하기, styled-component이용시에는 Link 태그 안에 passHref 속성을 추가해줘야 자식 컴포넌트로 href 속성을 전달해준다.
- CSR, SSR 더 공부하기

✔ 오류가 있으면 배포 불가능

- 타입지정하는게 아직 익숙치 않기도 하고 기능 구현하는데 급급해서 빨간줄이 있는지 없는지 일단 작동되면 넘어갔는데 그게 나중에 폭탄으로 돌아왔다..
- 배포할 때는 오류가 한 가지라도 있으면 안되는데 내가 구현한 파일들에 오류가 많아서 아예 주석처리 하고 배포를 시작했다..
- 코드 짜면서 타입 쓰는 습관을 들이자, 빨간줄 잘 확인해서 해결하고 넘어가기

✔ 반응형디자인

- 디자인시안은 정적이지만 구현해야하는 것은 반응형이다.
- 이번 Category 컴포넌트를 구현하면서 디자인시안을 그대로 적용하다보니 스크린사이즈에 따라 유연하게 대처하지 못하고 레이아웃이 망가지는 오류가 발생했다.
- 이번에는 다른 팀원들이 발견하고 알려줘서 수정했지만 다음부턴 구현하면서 미리미리 확인해야겠다.

✔ 폴더 구분 명확히 하기

- 가장 작은 단위의 컴포넌트는 base 폴더, 상위 컴포넌트는 domain, page
- 자주 사용되는 함수는 utils/function , hook은 hook 폴더
- 한 개의 컴포넌트 안에서 여러가지를 처리하려 하지 말자. custom hook을 만들어 이용하거나 컴포넌트를 분리하자.

✔ String 데이터 분리하기

let notice = ['등록된 데이터가 없습니다.'];
  let refund = ['등록된 데이터가 없습니다.'];

  if (warning) {
    const warningData = warning.split('[환불규정]');
    notice = warningData[0].split('\n').filter((e) => e[0] === ' ');
    refund = warningData[1].split('\n');
  }
 
  {notice &&
    React.Children.toArray(notice.map((el) => <S.Contents>{el.replace('-', '')}</S.Contents>))}

- waring 데이터를 받아와서 유의사항, 환불규정으로 나누어 등록해야 했는데 생각보다 처리해줘야 하는 부분이 많아서 시간도 오래 걸리고 타입오류가 해결이 안되서 로직을 수정해야 했다.

- 처음에 짰던 로직은 구조분해 할당으로 바로 값을 넘겨준 뒤 다시 split을 적용했더니 타입이 맞지않다는 오류가 발생했었다. 아마 split을 하면서 문자열배열이 됐는데 다시 split을 사용해서 오류가 났던것 같다. 그래서 warningData에 값을 넣어준 뒤 인덱스로 조회해서 사용했더니 오류없이 구현할 수 있었다.
--- 그런데 로컬에서는 잘 뜨는 메세지가 배포사이트에서는 뜨지않는다.. 잘못된 로직인걸까..

- 내가 고민하면서 구현했던 부분이라그런지 다른사람들이 어떻게 구현했을지 궁금해 다른팀이 구현한 것도 찾아봤다.
- 하드코딩으로 내용을 넣은 곳도 있었고 split, ChartAt, trim 함수를 이용해 구현한 것을 확인할 수 있었다.
-- split('\n')을 이용해 문단을 나누고 ChartAt()을 이용해 '['를 포함할경우 타이틀로, trim함수를 이용해 공백일경우엔 return, 이외의 문자는 contents로 등록하는 방식
- 모든 팀들의 코드를 확인하진 못했지만 내가 구현했던 부분은 이해하기도 더 쉬운 것 같고 다른 사람의 코드를 통해서 배울 수 있는게 많은 것 같다.
- 배열관련 함수에 대해서 정리 해보는 시간이 필요할 것 같다.

✨ 느낀점

✔ 빨리 하려고하기보다 제대로 하자. 충돌나는 코드가 있을 때도 합치기 전에 제대로 파악하고 수정해서 합치기

✔ 제대로 말하기. 내가 구현한 기능이라도 구체적으로 뭘 구현했는지 어떻게 작동하는지, 제대로 설명을 못하고 있다. 머릿속에 정리가 안되어 있는 느낌.. 질문하기 전에도 항상 먼저 검색해보고 충분히 생각하고 고민한 뒤에 글로 정리해보자. 그 다음 질문하기. 발표하기 전에도 먼저 정리해보기.

✔ 커스텀훅을 만들어봤다! 모달창 만들 때 참고해서 만들었던 경험이 있어서 이번에도 만들어서 사용하면 좋을 것 같아 시도해보았다. 함수를 따로 분리해서 사용하다보니 코드가 훨씬 깔끔해졌다.

✔ 처음 과제할 때만 해도 아무것도 모르겠어서 멘붕이었는데 지금은 그래도 간단한 작업들이라도 담당하고 있는걸 보니 스스로 성장한 것 같은 기분이 든다. 멘토님이 성장하는건 스스로 잘 안 느껴진다고 했었는데 나 너무 거만한건가..ㅎㅎ 아직 어렵지만 기능 구현을 끝냈을 때 후련하고 뿌듯하고, 구현하면서 배우고 성장하는게 큰 것 같다.