항해99 5기 (정규 트랙)_5주차 WIL

ne_ol·2022년 2월 13일

WIL 부트캠프 코딩 항해99

[항해99 5기] WIL

목록 보기

5/8

1. What I did

1. Chapter 3-3. 주특기 심화 주차

기간: 2022년 2월 4일 (금) @ 09:00 ~ 2022년 2월 10일 (목) @ 21:00
도메인: https://magazine-site-ab9c1.web.app/
Github 주소: https://github.com/nevergettingold/React_magazine_site
항해 전 기수 선배님's Comment:
- redux에서 좋아요기능 구현시에 like와 dislike가 2가지로 분리되어 있는데 같은 파라미터를 받고있는데 좋아요 기능 자체를 1개의 미들웨어 함수로 만들어보면 어떨까요? 그렇다면 컴포넌트에서 like와 dislike 함수를 따로 만들지않고 1개의 함수를 통해서 사용할 수 있겠죠?
  -> 사실 처음 like/dislike 로직을 짤 때, 하나의 미들웨어 함수로 실행했었다가 구현 도중에 에러가 조금 생기면서 그냥 두 개로 나눠 진행했었다. 에러를 해결하고 나서 그대로 두었었는데, 다시 합칠 수 있었다는 것을 인지하고 있기 때문에 선배님의 피드백을 단 번에 수긍할 수 있었다.
- 그리고 좋아요일떄와 아닐경우를 component에서 esls if 조건부 렌더링으로 2가지 경우를 작성하셨는데 이 부분도 하나로 통합하고 예시로 color 속성에 삼향연산자같은걸 이용해서 구현해본다면 코드중복을 줄일수있는 방법이 될 수도 있을것 같네요 🙂
  -> 이 부분도 처음에 삼항연산자를 사용하여 좋아요의 버튼 색을 조절하는 코드를 작성했었다가, 첫 번째 코멘트의 코드를 짜면서 로직들을 나누는 과정에서 나누고 그대로 두었었다.
- 코드를 구현하실때 같은 기능을 구현 하더라도 여러가지 방식으로 구현할 수 있습니다. 그래서 한 가지의 방식만 생각해보는게 아니고 여러가지 경우를 생각해보시고 생각해낸 여러가지 방식중에서 본인이 생각했을때 효율적인 방식으로 구현해나가신다면 좋을것 같습니다 😎
  -> 당연한 말이지만 가장 중요한 코멘트여서 항상 마음에 새기고 코딩해야겠다.

2. Chapter 4. (주특기) 미니 프로젝트

기간: 2022년 2월 11일 (금) @ 09:00 ~
프로젝트 "지금 뭐해?" Wireframe, API 설계 및 역할 분담 완료
메인페이지, 상세페이지, 마이페이지 View 완료
Github JSON mock server에 Post get 요청 완료

3. This week's Keyword

1. Axios

정의
- 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
특징
- Promise 기반의 API
- HTTP 요청과 응답을 JSON 형태로 자동 변경
- fetch와 다르게 별도 설치 필요
- data 속성을 사용하며 object를 포함
문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

파라미터 문법

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
    responseType: 'json', // default
    
    maxContentLength: 2000, // http 응답 내용의 max 사이즈
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
    httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
    // response Action
});

응답(res) 스키마

{
  data: {}, // 서버가 제공한 응답(데이터)

  status: 200, // `status`는 서버 응답의 HTTP 상태 코드
  
  statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지

  headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공

  config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)

  request: {}
  // `request`는 응답을 생성한 요청
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
}

GET: axios.get(url[, config])

axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공했을 때
    console.log(response);
  })
  .catch(function (error) {
    // 에러가 났을 때
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 함수
  });

POST: axios.post(url, data[, config])

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

DELETE: axios.delete(url[, config])

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

PUT: axios.put(url, data[, config]), 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

출처: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9, https://publizm.github.io/posts/javascript/Axios