Week1_Day4_회의록

진행사항

• 10:00 ~ 12:00
  • 데일리 스크럼 및 코드 리뷰
  • 오늘 할일 분배
    • 동현, 상경: Github OAuth 요청시 발생하는 CORS 에러 해결
    • 예진, 예지: context api 공부 및 구현
• 17:00 ~ 19:00
  • 예진 & 예지: context api 공부 및 코드 수정
• 20:30 ~ 21:30
  • 서버 배포 (v0.0.1)
    • 이걸 사용해 도메인 등록하기
  • 잡담
    • 상경님이 알고리즘 스터디 만들기❗
    • 로딩 gif 예쁜걸 적용하자 ㅎ
• Github Wiki 정리

회의 안건

• Context API 폴더 구조 고민 - 학습 필요
• Context API 적용 -> 월요일에 같이 의논
• webpack에서 proxy 설정하고 utils에 axios.create로 코드 간단히 만들기

문제 해결

• GitHub OAuth 요청시 cors 문제 발생
  • jwt를 session으로 변경하고 해결
  • 로그인 성공 시 res.send()를 사용해 main page로 redirection
• api 받아오는 중 문제 발생
  • 응답 구조 수정 후 해결

논의할 점

• 현재 oAuth를 세션방식으로 변경, cookie에 저장 뒤 res.send로 클라이언트에 리다이렉트하여 쿠키값을 유지하였음. 해당 방식에서 개선할 점은 없는지 논의할 필요 있음.
• userState를 어떻게 상태관리 할것인지 논의할 필요 있음 (현재 useEffect를 사용하여 쿠키값으로 유저 상태를 업데이트 시도했으나 오류발생)
• GitHub oAuth의 Cors 이슈 해결방법은 따로 없는지 고민해보면 좋을 것

Issue

React Router에서 특정 URL 접속 시(url 입력) 페이지를 찾을 수 없는 문제 원인 및 해결 방법

• webpack.config.js에서 historyApiFallback:true 추가하기
• 브라우저가 해당 Router를 서버에 먼저 요청을 보내기 때문!

// webpack.config.js
devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 8080,
    publicPath: 'http://localhost:8080/dist/',
    hotOnly: true,
    open: true,
    historyApiFallback: true,
  },

React에서 async/await 사용하기

• 아래와 같이 babel-polyfill 설치
• webpack.config.js에서 **entry: { app: ['babel-polyfill', './src/index.js'] }** 추가하기
• 이후 별다른 import 없이 async/await 문법 사용 가능

npm i install babel-polyfill

// 기존
entry: { app: './src/index.js' },
// 수정 후
entry: { app: ['babel-polyfill', './src/index.js'] },

axios 사용 시, catch구문에서 Response Date 받는 방법

→ 보통 서버에서 원하는 결과나 상태를 얻지 못할때 then()이 아닌 catch()로 넘어가게 된다

→ 이때 error.response 를 통해 해당 데이터를 사용할 수 있음!

axios
    .get('http://localhost:3000/api/auth/test', {
      headers:{
        Authorization: token
      }
    })
    .then((result) => {
      console.log("성공: ",result.data)})
    .catch((error) => {
      console.log("실패: ",error.response)
    })