항해99 5기 (정규 트랙)_5주차 WIL
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 속성에 삼향연산자같은걸 이용해서 구현해본다면 코드중복을 줄일수있는 방법이 될 수도 있을것 같네요 🙂
-> 이 부분도 처음에 삼항연산자를 사용하여 좋아요의 버튼 색을 조절하는 코드를 작성했었다가, 첫 번째 코멘트의 코드를 짜면서 로직들을 나누는 과정에서 나누고 그대로 두었었다. - 코드를 구현하실때 같은 기능을 구현 하더라도 여러가지 방식으로 구현할 수 있습니다. 그래서 한 가지의 방식만 생각해보는게 아니고 여러가지 경우를 생각해보시고 생각해낸 여러가지 방식중에서 본인이 생각했을때 효율적인 방식으로 구현해나가신다면 좋을것 같습니다 😎
-> 당연한 말이지만 가장 중요한 코멘트여서 항상 마음에 새기고 코딩해야겠다.
- redux에서 좋아요기능 구현시에 like와 dislike가 2가지로 분리되어 있는데 같은 파라미터를 받고있는데 좋아요 기능 자체를 1개의 미들웨어 함수로 만들어보면 어떨까요? 그렇다면 컴포넌트에서 like와 dislike 함수를 따로 만들지않고 1개의 함수를 통해서 사용할 수 있겠죠?
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
2. How I felt
skip
Author And Source
이 문제에 관하여(항해99 5기 (정규 트랙)_5주차 WIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ne_ol/항해99-5기-정규-트랙5주차-WIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)