메인 프로젝트- 2주차 멘토링 후기

Frontend 2주차 멘토링 후기 

• 현재 진행상황
  • 화면정의서 작성 완료 
    
    • BE공유 완료
  • API 작성 중

 

안건

1. 목업서버
   1. msw
   2. json-server 도입
      1. API 명세서 > json server > default url을 변경
2. server-fetching
   1. axios isntance
      1. https://axios-http.com/docs/interceptors (err handling)

      axios.interceptors.response.use(function (response) {
      }, (err) => {
        //err handling
      })
      

   2. graphql (optional)
   3. swr
   4. react-query

server : data

• store에 저장한다. (그 이후 필요한 순간에 사용한다)
• component에서 사용한다.

auth

Authorization: Bearer <token>

header : {
 Authorization : `Bearer ${accessToken}`
}

1. 데이터를 어떻게 사용하는가?
   1. state manage tool : redux-toolkit
      1. redux-thunk : axios
      2. rtk
2. request header를 조작할 수 있는가?
3. 해당 툴에 능숙한가?
   1. 해당 툴을 익히기 쉬운가? (러닝커브)

jwt : access_token이 만료 > refresh_token > access_token을 새로 발급

component.

axios.post("/endpoint", body)
.then((response) => /* todo */)
.catch((err) => {
  if(err == "access_token이 만료됨"){
    axios.post("/access_token 다시 발급해주세요~", {refresh_token}).then((res) => {
       원래하려던 api.post("/endpoint") //origin request
       // 발급실패 :: user : logout + login_page
    })
  }
})

// 1. component에 로그인한 유저만 접속 가능하다.
// 2. 로그인을 하면 userStore에 로그인 정보를 저장한다.

function component(){
   const user = React.useSelector(store => store.user)
   React.useEffect(() => {
    if(!user){ navigator.push("/login") }
   }, [user])
   return (<div>...</div>)
}

// 로그인이 필요한 모든 컴포넌트에서 해당 selector, effect를 사용해야 하는가...?
// >> 코드의 중복을 피하자.

//pshedo-code
function HOC(specificComponent){
   const user = React.useSelector(store => store.user)
   React.useEffect(() => {
    if(!user){ navigator.push("/login") }
   }, [user])
   return <specificComponent {...originProps} user={user} />
}

import HOC
function component(props){
   const user = props.user
   return (<div>...</div>)
}
export default HOC(component)

 

멘토에게 멘티가 질문 

• 소셜로그인을 위한 firebase 도입
• be분들이랑 소통하셔서 be멘토님 의견도 반영해주세요
  1. firebase에서 지원해주지 않는 인증업체의 소셜로그인이 필요하다면…? 어차피 각 인증업체 third-party lib / token 방식으로 구현해야 한다
     1. 카카오, 네이버 등
     2. custom token 방식이 있긴 한데 > 이거 개발 할 바에..firebase를 도입하는게 정신건강에 이로울 확률이 높습니다

1. dispatch / reducer(rt에서 slice)
   1. data flow 일원화 : flux 아키텍쳐

1. toptal : git ignore를 자동으로 해주는 사이트
   1. 충돌때문에 사용하는게 아니라, 보안상 공개할 수 없는 자료
      1. .env
      2. config
   2. 배포 시 사용되지 않는데 용량이 큰 파일
      1. pacakage.json
      2. nodemoudles 폴더
2. 로그인/회원가입 예외처리
   1. 회원가입
      1. 비밀번호가 8자리 이상이면서, 영어 소문자, 대문자, 숫자, 특수문자 포함
         1. 1차적으로 FE에서 봄.
         2. 조건이 충족되지 않는다면 애초에 회원가입 api를 부를 일도 없도록
      2. 중복된 이메일을 사용하려는 경우
         1. fe입장에서는 해당 이메일이 중복된 이메일인지…? 몰라요
            1. 이메일 중복확인 버튼 > api > true > 회원가입 버튼 활성화
            2. 회원가입 > 예외처리
   2. 결국 생각할 수 있는 예외처리
      1. 실패 (서버의 이슈로)
      2. (회원가입) 중복된 id
      3. (로그인) 없는 id
      4. (로그인) id는 있으나 비밀번호가 틀린 경우

api.post(/login, {id, password})
.then((response) => {
  if(response.status === false){
  // 로그인이 실패된 경우. 유저의 입력이 잘못된 경우
  // 어떤 이유로 로그인이 실패하였는지 알려줌.
  >> alert()
  >> idref.focus()
  }
})
.catch((err) => {
  //로그인이 실패된 경우. 에러!
})

 

과제아닌 과제..(다음 멘토링까지 학습해오기)

• memorization
  • memo
  • useMemo
  • useCallback

•