20 :: Ajax, Axios, 코드 입력 기계

엘리스 SW 엔지니어 트랙 20일차

프로젝트날

 

 

프로젝트를 하기전에

FetchAPI와 같은 비동기 통신에 대해 알아봤다

 

 

Ajax(Asynchronous JavaScritp and XML)

비동기 자바스크립트라는 의미

화면 전체 새로고침 없이 일부 데이터만 로드 가능(비동기)

비동기를 사용한 자바스크립트를 Ajax라고 부른다!!

 

알고나면 컨셉은 참 쉬워~

근데 XMLHttpRequest를 사용할 때만 Ajax라고 부를라나?

 

Axios

웹 브라우저랑 Node.js에서

비동기 통신을 위한 라이브러리

 

Ajax 기법 중 하나라고 아니라

Ajax처럼 사용된다고 써있다

 

 

Fetch vs Axios

• Fetch 장점
  • 자바스크립트 내장 => import, 별도 설치 필요 없음
• Fetch 단점
  • 예전 익스플로러 버전에서 지원안하는 경우도 있다
• Axiox 장점
  • JSON 자동 변환
  • 응답 시간 초과 설정
  • 브라우저 호환성 좋다
• Axios 단점
  • 외부 모듈 => 패키지 설치 필요

 

이렇게 보니

패키지 설치 습관 들이면

Axios를 사용안할 이유가 없어 보인다

 

개발 상황에 따라 사용하면 된다고 한다

 

 

Axios CRUD

Axios 이용해서 CRUD 앱을 만든다면

C: Create(생성) - axios.post(url, data 객체)

R: Read(조회) - axios.get(url)

U: Update(수정) - axios.put(url, data 객체)

D: Delete(삭제) - axios.delete(url)

 

 

이후 

지금까지 배운 내용으로

프로젝트를 만드는 날

프로젝트는 행맨이다

 

행맨 게임은 이런 식으로

구성을 하나보다

• 상태 관리
• 컴포넌트
  • 메시지 컴포넌트
  • 키보드 그리는 컴포넌트
  • .... 컴포넌트 등 여러가지
    • 각 컴포넌트에 세부 컴포넌트가 있다
  • 상태 변경하면 안된다
  • 상태만 받아서 상태 관리 코드로 전달만
• 게임 로직
  1. App 코드 실행
  2. App 상태 초기화
     • state: 게임 상태 답는 객체
     • gameStatus: 게임 현재 상태(LOSE, WIN, READY 등)
     • timer: 남은 시간
     • wordLoading: 단어 로딩 유무 (boolean)
     • chancesLeft: 알파벳 선택 남은 기회
     • enteredCharacters: 선택한 알파벳 객체로 저장
     • charMap: 정답 단어를 객체로 저장
     • wordArr: 화면에 그릴 단어를 배열에 저장
     • charsLeft: 몇 개의 알파벳을 더 맞춰야 되는지 정보 저장
  3. 게임 시작
     • 단어 안에 있으면 charsLeft, enteredCharacters 변경
     • 단어 안에 없으면 chancesLeft, enteredCharacters 변경
     • 시간 지날 때마다 게임종료 검사
     • 모든 상태 변경시 컴포넌트 다시 그린다
  4. 게임 종료 & 재시작
     • 모든 알파벳, 시간 종료, 모든 기회 끝나면 게임 종료
     • 게임 종료 시 키보드 누를 수 없다
     • 재시작시 상태 초기화 다시 UI 그린다

 

 

코드 입력 기계

이미 짜여져 있는 코드를 이해하기도 어려웠고

어떨 때 뭐가 필요한지에 대해 이해도가 부족했다

 

결국 강의를 들으며

코드를 따라 적는 코드 입력 기계가 되어버렸다

 

fetch를 사용해서 어떤 API에서

데이터를 가져왔고,

 

각 부분별로 컴포넌트를 나눠서 정리를 하고

데이터(인자)를 주고 받으면서

함수를 작동하고

실행을 했다

 

이 느낌을 가지고 내가 만들 것을 생각해보자

 

 

왠지 모르게 axios를 검색하니 나온 이미지 by Dimitris Pantos #unsplash