협업

주차에 배운 것들

• styled-components 숙달
  defaultProps, 컴포넌트 내 선택자 사용, 컴포넌트 속성 재정의, 컴포넌트 재활용, 조건부 컴포넌트 출력, 글로벌 스타일
• 'react-cookie'를 활용한 로그인, 회원가입 기능 구현
• axios 인스턴스, 인터셉트
  baseURL 인스턴스로 만들고 env적용
  인스턴스와 인터셉트를 활용한 토큰 보내기

 

---

트러블 슈팅

 

- styled-components 사용에 대한 문제 -

버튼과 인풋창, div를 컴포넌트화하는 작업에서 컴포넌트 하나로 전부 돌려쓰겠다는 생각을 하다보니 선택자, 속성 props 등 라이브러리 사용에 대한 어려움을 겪은 문제

 

해결 과정 및 해결

(1) 평소대로 구글링해봤지만 원하는 결과를 얻지 못함.

(2) 찾다가 찾다가 못 찾아서 styled-components 공식 문서를 찾아가보니 공부가 필요할지 언정, 원하던 정보들에 더해 추가적인 정보들까지 접할 수 있었음.

(3) 앞으로 공식 문서 보는 걸 생활화 하자

 

추가적으로 해결해야할 과제

범용성을 생각해 이것저것 전부 props를 준 결과 defalutProps를 줬음에도 결국 하드코딩으로 이어지게 됨

다음에는 컴포넌트를 재활용하고, theme provider 등을 활용해 불필요한 컴포넌트화는 최소화하고, 컴포넌트화하지 않은 것들에 대해서는 선택자 등을 활용해 무게를 줄여보고자 함.

 

 

-  첫 협업에서 겪은 문제  -

로그인 과정에서 토큰 말고도 userId가 필요한데 response에 토큰만 있어서 어떻게 해야할지 모르는 상황이 발생

 

해결 과정 및 해결

(1) 어떻게 해도 userId는 필요한 상황이라 결국 토큰을 디코딩하는 방법을 찾기 시작

(2) jwt 공식 문서로 찾아 들어가 알아보다가 결국 백엔드도 토큰을 넘겨받으면 그걸 디코딩해야 한다는 것을 깨달음.

(3) 백엔드한테 찾아가 디코딩하는 코드를 넘겨받다가 그냥 userId만 추가로 넘겨달라고 하면 된다는 것을 추가로 깨달음

(4) 그동안 서버없이 코딩 하다보니 문제 해결을 프론트딴에서만 찾으려 했었던 사고를 고치고 백엔드와 적극 소통하기 시작함