Search
Duplicate
🗃️

API에 대해 이해해보자 (상)

간단소개
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
React
Javascript
프론트엔드
Scrap
태그
개발지식
9 more properties

학습목표

리액트 Route 문법을 이용하고 사용할 수 있다.
axios를 사용하여 API를 호출할 수 있다.

React Router

Routing

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
리액트에 있는 많은 라우팅 관련 라이브러리 중 React Router를 가장 많이 사용
SPA (Single Page Application) : 새로운 페이지를 로드하지 않고 한 페이지 내에서 필요한 데이터만 가져오는 형태 → 리액트는 SPA 방식

React Router

각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리
사용자가 입력한 주소를 감지하는 역할
여러 종류의 컴포넌트 제공
BrowserRouter : HTML5를 지원하는 브라우저의 주소 감지
HashRouter : 해시 주소 감지

사용예시

1.
<BrowserRouter> 컴포넌트 사용하기
코드
2.
<Routes>, <Route> 컴포넌트 사용하기
<Routes> : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만 렌더링
<Route> : path속성에 경로, element속성에 컴포넌트를 넣어줌
여러 라우팅을 매칭하고 싶으면 URL 뒤에 * 사용
“/”로 접근시 메인페이지(Main.js) 보여줌
“/product/상품번호”로 접근시 상품상세페이지(Product.js) 보여줌
3.
<Link> 컴포넌트 사용하기
<a> 태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 X
<Link> 컴포넌트는 History API를 통해 브라우저 주소의 경로만 바꿈
<Link to=”경로”>링크명</Link>
JavaScript
복사
코드
4.
정의하지 않은 경로로 접근하는 경우 NotFound 페이지로 이동 처리
코드
5.
URL 파라미터와 쿼리스트링 사용하기
URL 파라미터 : 경로에 :를 사용하여 설정
예시) /product/:productId, /product/:productId/:productName
쿼리스트링
useLocation
hash : 주소의 #문자열 뒤의 값
pathname : 현재 주소 경로
search : ?를 포함한 쿼리스트링
state : 페이지를 이동시 임의로 넣을 수 있는 상태 값
key : location 객체의 고유값, 페이지 변경될 때마다 생성
코드
useSearchParams
코드
f.
useNavigate
<Link>를 사용하지 않고 다른 페이지로 이동해야하는 경우, 뒤로가기에 사용
replace 옵션 : 페이지를 이동할 때 히스토리를 남기지 않음
코드

API 호출

API

: Application Programming Interface
응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
UI (User Interface) : 어떤 사물(스마트폰, 컴퓨터, 인터넷 등)과 사용자 사이를 이어주는 다리 역할 ex) 스마트폰의 홈 버튼, 전원 버튼
비유적 표현
1.
손님(내가 만드는 프로그램)이 자리에 앉아 웨이터(API)에게 주문을 한다.
2.
웨이터가 내 주문 내역을 주방(API 제공자, 공공포탈 등)에 갖다준다.
3.
웨이터가 주방에서 요리를 받아 나에게 음식을 가져다준다.
→ API의 장점 : API가 갖다주는 걸 구현할 필요 없이 사용만 하면 됨
API 문서
private API은 API 제공자가 API를 공개하지 않음
사용법을 알려주지 않아 쓸 수 없음
→ API 문서가 바로 이 사용법과 규격을 제공하는 문서

ajax

: Asynchronous JavaScript And XML
JQuery와 함께 사용됨
promise 기반이 아니고, JQuery를 사용하지 않으면 쉽게 구현하기 어려움

fetch

promise 기반으로 만들어짐
내장 라이브러리임 - 별도의 모듈 설치 필요 X
안정적이지 않은 프레임워크에서 유용하게 사용
//fetch fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error));
JavaScript
복사
브라우저 호환성이 떨어지도, 기능적인 부분이 상대적으로 부족함
response timeout 처리 방법이 없음

axios

서버와 소통하는 과정
1.
서버에 요청을 보내고 (request)
2.
서버로부터 응답이 오면 (response) 제대로 응답이 왔을 때와 못 왔을 때를 구분하려 처리
응답이 오기까지 시간이 걸리므로 서버에 보내는 요청은 비동기 처리
이후에 응답을 바탕으로 처리하는 과정은 .then이나 await 이용
같이 보내는 정보들
어떤 메소드를 사용할 것인지 (method)
url 주소 (url)
data (선택)
params (선택)
axios({ //request method: "get", url: "url", responseType: "type" }).then(function (response) { // response Action });
JavaScript
복사
Axios를 사용하는 이유
요청 객체에 url이 있음
data 속성 사용
data는 object를 포함
status가 200이고 statusText가 ‘OK’면 성공
자동으로 JSON 데이터 형식으로 변환
요청을 취소하거나 response timeout 걸 수 있음
HTTP 요청 가로챌 수 있음 (인터셉트)
download 진행에 대한 기본적인 지원
브라우저 호환성 good (크로스 브라우징)

Axios Request Methods

GET

서버에서 어떤 데이터를 가져와서 보여줌
axios.get(url[,config])
JavaScript
복사
1.
단순 데이터 요청을 수행하는 경우
url만 파라미터로 넘김
코드
2.
사용자 번호에 따라 다른 데이터를 불러오는 경우
url과 함께 params:{} 객체도 파라미터로 넘김
코드

POST

서버로 데이터를 보냄
axios.post(url, data[,config])
JavaScript
복사
보내고자 하는 데이터를 message body에 포함시켜 보냄
코드

PUT

데이터베이스 내부 내용 갱신
axios.put(url,data[,config])
JavaScript
복사
POST 메소드와 비슷한 형식
코드

DELETE

데이터베이스 내부 내용 삭제
axios.delete(url[,config])
JavaScript
복사
1.
일반적으인 DELETE
body가 비어있는 형태
코드
2.
헤더에 정보가 많이 포함된 경우
→ 두번째 인자에 data 추가해줌
async function deleteData() { try { //응답 성공 const response = await axios.delete('url주소',{ //헤더에 포함된 정보들 data:{ post_id: 1, comment_id: 13, username: "foo" } }); console.log(response); } catch (error) { //응답 실패 console.error(error); } }
JavaScript
복사

비동기 처리

동기와 비동기로 작성한 코드의 가장 큰 차이점은 ..
런타임 시 발생하는 지연시간
동기적으로 작업하면 코드 파악이 쉬워지고 유지보수나 디버깅 쉬워짐
but 자바스크립트는 싱글스레드 방식이어서 문제 발생
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

비동기 사례

AJAX : 비동기방식의 통신기법
서버와 브라우저가 비동기 방식으로 XML 데이터 교환
전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터 로드
코드
setTimeout() : web API의 한 종류
코드

비동기 해결

Callback (콜백함수)
호출방식에 의한 구분
콜백함수가 실행됐다는 것으로 요청한 작업이 끝났음을 알림
문제점: 순차적 실행이 필요한 경우 중첩시켜 표현
→ 에러 or 예외 처리 어려움, 콜백지옥
Promise
비동기를 간편하게 처리할 수 있도록 도와주는 객체
성공과 실패를 분리해서 메서드 수행
Axios
node.js와 브라우저를 위한 Promise 기반의 HTTP통신 라이브러리
response 데이터 다루기 쉬움
코드
Fetch
서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드
XMLHttpRequest와 비슷하지만 Promise 기반
XMLHttpRequest : 웹 페이지 전부 로딩하지 않고도 일부만 갱신 가능
코드

참고자료

React Router
API 호출
비동기 처리