[항해99] 5주차 회고

한 주에 대한 정리

항해의 5주차는 앞서 배운 리액트와 상태 관리를 파이어스토어와 함께

사용하여 간단한 인스타그램 서비스와 비슷한 것을 만들었습니다.

 

프로젝트를 진행하다 보니 작은 프로젝트에도

어려가지 신경을 써야하는 것들이 많다는 것을 느꼈습니다.

어느 컴포넌트에서 서버의 데이터를 받아올 것인지, props를 전달할 것인지 등

간단해 보였던 것들이 생각보다 많은 오류를 일으켰습니다.

 

프로젝트가 끝난지금은 조금 익숙해 졌지만 이후 다른 프로젝트를 진행하면서

더 익숙해져야 겠다고 생각했습니다.

 

다음주에는 클라우드 서비스가 아닌 실제 백엔드 분들과 같이 프로젝트를 진행하게 됩니다.

아래에서는 서버와 통신하기 위해 사용하는 axios를 간단히 알아보겠습니다.

 

axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 

 

특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원

 

axios 사용법

 

다음은 axios의 간단한 사용법을 알아보겠습니다.

먼저, 설치 방법입니다.

npm install axios

yarn add axios

 

아래는 간단하게, get요청을 통해 데이터를 받아오는 방법입니다.

axios.get('api/user')
.then((res)=>{
    console.log(res.data);
}).catch((err)=>{
    console.log(err);
})

 

post요청의 형태는 아래와 같습니다.

axios.post('api/user', {
    name: 'kim',
    age: '21'
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (err) {
    console.log(err);
  });

 

이외에도 put, delete 등의 요청이 있습니다.

 

백엔드 없이 요청하기

실제 API를 가지고 서버 통신을 하고 싶은데 백엔드 개발자가 없을 경우

간단하게 테스트하는 방법이 있습니다.

 

• mock api 이용하기
• fake 서버 이용하기

저는 mock api를 만들어 사용했는데, 아래의 github을 이용했습니다.

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

 

정리

항해를 점점 진행하면서 어려워지는 것을 느끼고 있고,

배워가는 것도 많아지고 있다는 것을 느끼고 있습니다. 

 

다음 주는 백엔드와 실제 소통하고 진행하는 것을 기대하고 잘 준비해 보려고 합니다.