항해99 5주차(리액트 심화) 회고
5주차가 접어들었고 4주차에 진행하였던 TODO LIST를 Redux와 Axios를 사용하여 리팩토링 하였다. 처음엔 AXIOS 개념이 잡히지 않아 무너졌지만 재욱님의 특강과 여러 자료를 접해 성장할 수 있었다 문제는 6주차가 시작됐는데 로그인과 회원가입에 너무 큰 어려움을 겪고 있다 ..자그마한 강의라도 제공해줬다면 틀을 잡을텐데 갑자기 등장하는 세션과 로컬스토리지, 쿠키의 사용으로 같은 반 리액트 주특기 전원이 힘들어하고 있다.
주말내내 철야를 지속하고 있지만 개념도 잡히지 않고 여태껏 배웠던 방식에 외부자료들을 통해 학습한 것들을 적용하려면 너무 방법이 달라 굉장히 스트레스를 받고 있다.
학습내용
- Json Server
- Axios
- Redux-toolkit
- react-router-dom
좋았던 점
첫 서버와의 통신
부족한 점/아쉬운 점
1)리덕스 툴킷과 Axios의 사용법
2)Axios를 통한 서버 데이터 수정과 스토리지 수정
다음주 목표
- 이미 6주차에 접어들었지만 너무 지치다.
방향을 도저히 못잡겠다 너무 방치한다는 느낌을 받는다
금주 주제
- Axios란 ?
Axios API : 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리. Promise 객체를 기반으로 만들어짐.
Ajax 처럼 API를 이용한 비동기 통신을 할 때 주로 사용한다.
Ajax ( 비동기 자바스크립트 ) : 브라우저의 XMLHttpRequest객체를 이용하여 화면 전체를 새로고침하지 않고 일부 변경된 데이터만 로드하는 비동기 처리.
React에서 OpenAPI를 이용할 때 Axios를 주로 사용한다.
Fetch와 Axios의 차이점
Fetch API : HTTP 요청을 처리하기 위한 라이브러리.
① Fetch는 내장함수이고 Axios는 설치해야한다.② Axios의 브라우저 호환성이 더 좋다.③ Axios는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 더 지원한다.
- API란 ?
= Application Programming Interface다양한 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.여기서 인터페이스는 프로그램과 프로그램을 연결해 주는 다리 역할을 하는 것을 의미한다.
- HTTP란 ?
= HyperText Transfer Protocol
HyperText : 링크 주소를 참조하는 문서로 전자기기에 있는 데이터
Transfer : 전달
Protocol : 규약, 규칙
사용자는 URL을 입력한다. 브라우저는 해당 데이터를 서버에 요청(Request)하고, 서버는 요청에 응답(Response)해 데이터를 브라우저에 가져온다. 브라우저가 받아온 데이터를 화면에 보여준다.
HTTP Request : 클라이언트의 요청
HTTP Response : 서버의 응답
즉, 클라이언트의 요청에 서버가 응답하는 방식, 세부적인 방법을 규약으로 정해놓은 것을 HTTP 라고 한다.
HTTP에는 Methods 와 Status code 등이 있다.
- Axios와 CRUD
CRUD = Create Read Update Delete, 기본적인 데이터 조작 방식
CRUD와 HTTP Method 매치
Create 생성 - POST
Read 조회 - GET
Update 수정 - PUT
Delete 삭제 - DELETE
Axios 사용법
POST
axios.post(url, data 객체)
then( ) 으로 post가 성공했을 때 response객체를 받아와서 data 를 추출한다.
response객체에는 status 정보와 data 정보등이 있다.
axios.post(url, data 객체)
.then( response => {
if (response.status == 200){
console.log(response.data)}})
GET
axios.get(url)
post처럼 get도 url을 넣고, 결과를 then( ) 으로 받아와서 데이터를 추출한다.
PUT
axios.put(url, data 객체)
DELETE
axios.delete(url)
