memo-app 클론코딩 2

 

🥥 REST API, Ajax, axios

🥝 REST ( Representational State Transfer )

http uri를 통해 자원을 명시하고, http methods(post, get, put, delete)를 사용해서 자원에 대한 CRUD를 구현한다.

서버와 클라이언트 사이의 통신 방식 중 하나로 http 프로토콜을 그대로 사용한다.

# REST 구조

 

1. 서버와 클라이언트 구조

서버는 api를 제공, 클라이언트는 사용자 인증 또는 세션, 로그인 정보 등을 직접 관리한다.

2. 무상태

클라이언트의 세션, 쿠키 등을 서버에 저장하지 않는다.

서버는 각각의 요청이 별개의 것으로 인식하고 처리한다.

3. 캐시 처리 가능

웹 표준 http 프로토콜의 캐싱을 그대로 사용 할 수 있다.

캐시를 이용하면 대량의 요청을 효율적으로 처리 가능, 응답시간이 빨라진다.

4. 계층화

클라이언트는 RestApi Server만 호출한다. 그리고 Server는 로직 처리 뿐 아니라 보안, 암호화, 로드밸런싱, 사용자 인증 등을 추가하여 유연한 구조로 바꿀 수 있다.

5. 인터페이스 일관성

특정 언어나 기술에 종속되지 않는다.

 

🥝 Api ( Application Programming Interface )

데이터와 기능의 집합을 제공, 서로 정보를 교환

스웨거나 포스트맨을 통해 서버 개발자로부터 정리된 api들을 받을 수 있다

 

🥝 Ajax ( Asynchronous JavaScript And Xml )

비동기 자바스크립트와 xml

서버와 통신하기 위해 XMLHttpRequest 객체를 사용할 수 있고 JSON, XML, HTML, 일반 텍스트 등 다양한 포맷을 주고 받을 수 있다.

비동기를 이용하여 페이지의 일부분만 업데이트 할 수 있다.

 

🥝 axios

http 클라이언트 라이브러리로 XMLHttpRequest를 다루지 않고 Ajax 호출을 할 수 있다.

import axios from 'axios'; const memoAPICore = axios.create({ baseURL: 'http://localhost:8000/api/memos' }); export function fetchMemos({ commit }) { memoAPICore.get('/') .then(res => { commit(FETCH_MEMOS, res.data) }) } export function addMemo({ commit }, payload) { memoAPICore.post('/', payload) .then(res => { commit(ADD_MEMO, res.data) }) } export function deleteMemo({ commit }, id) { memoAPICore.delete(`/${id}`) .then(() => { commit(DELETE_MEMO, id) }) } export function updateMemo({ commit }, payload) { const { id, content } = payload; memoAPICore.put(`/${id}`, { content }) .then(() => { commit(EDIT_MEMO, payload) }) }

 

---

🥥 vuex에 상태 저장

actions > mutations > state 의 방향으로 서버로 부터 상태를 받아서 저장시킨다.

# actions import axios from 'axios'; import { FETCH_MEMOS } from './mutations-types'; const memoAPICore = axios.create({ baseURL: 'http://localhost:8000/api/memos' }); export function fetchMemos({ commit }) { // commit을 이용하여 mutation 호출, res.data를 파라미터로 넣는다 memoAPICore.get('/').then(res => { commit(FETCH_MEMOS, res.data) }) } export default { fetchMemos, }

 

# mutations import { FETCH_MEMOS } from './mutations-types'; export default { // actions에서 commit으로 호출되는 mutation [FETCH_MEMOS] (state, payload) { // state는 mutation에서만 바꿀 수 있따 state.memos = payload; } }

 

# states export default { // 배열로 초기화 되어있고, 뮤테이션이 실행되면 메모에 값이 할당된다. memos: [], editingId: 0, }

 

 

예림의 기더브

이미지 썸네일 삭제

kangyerim/js-clone-basic

자바스크립트, vue, react 클론 코딩하기. Contribute to kangyerim/js-clone-basic development by creating an account on GitHub.

github.com