엘리스_이론

23.10.06(js프로젝트 만들기,axios)

하루_st 2023. 10. 6. 22:53

행맨게임 구조

컴포넌트 - 특정 ui의 영역을 담당하는 코드 / 상태를 직접 변경해선 안됨 > 상태를 받아 사용하고 상태 변경을 요청함

  상태변경은 상태 관리 코드에서 작업 

앱 초기화

   처음 게임 실행 시 app코드 실행 (app은 상태 초기화) app에 이미지를 미리 로드하여 저장 > 화면 그리기

게임 상태

   state - 게임의 상태를 담는 객체

   gameStatus - 게임의 현재 상태 > lose, win, ready, start 등

   timer - 게임이 끝날 때 까지 남은 시간

   wordLoading - 단어 로딩 유뮤를 불린으로 체크

   chancesLeft - 알파벳 선택 남은 기회

   enteredCharacters - 선택한 알파벳을 객체로 저장

   charMap - 정답 단어를 객체로 저장

   wordArr - 화면에 그릴 단어를 배열로 저장

   charsLeft - 몇 개의 알파벳을 더 맟추어야 할 지의 정보 저장

게임 시작

   start버튼 > 키보드를 누르면 단어 안에 있는 알파벳인지 검사 >

   if(단어 안에 있음) { charsLeft와 enteredCharacters 등 변경하고 게임 종료 검사} left -1 / char에 하나 추

   else(단어 안에 없음) { chancesLeft와 enteredCharacters 등을 변경하고 게임 종료 검사}

   > 시간이 지날 때 마다 게임 종료 검사 > 모든 상태 변경 때마다 컴포넌트 다시 그림 

게임종료 와 재시작

   모든 알파벳을 맞췄거나 시간 종료, 모든 기회가 끝나면 게임 종료 > 더이상 키보드 누를 수 없도록

   재시작 시 상태를 다시 초기화후 ui다시 그림

 

 

Axios

   웹 브라우저와 node.js를 위한 http 비동기 통신 라이브러리 

   사용법은 간단하지만 별도의 설치 필요 / fetch보다 브라우저 호환성이 뛰어남

   json자동 변환, 응답 시간 초과 설정 기능 등 포함

   crud > create(post) / read(get) / update(put) / delete(delete)

   사용법 - index.html에 axios라이브러리 추가

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

post - axios.post(url, data객체); > 새로운 자원 생성 시 사용

get - axios.get(url) > 자원 요청 시 사용

put - axios.put(url, data객체) > 자원 갱신 시 사용

delete - axiox.delete(url) > 자원 삭제 시 사용

Ajax

   비동기 자바스크립트 > 브라우저가 가지고 있는 xml httprequest객체를 이용해 전체를 새로고침 하지 않고

   변경된 일부 데이터만 로드하는 비동기 처리 가능  >> api통신 때 주로 사용

Api

   다양한 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 

   인터페이스로 프로그램 간 사이의 다리 역할을 함

HTTP 

   어떤 정보를 요청하면 요청한 정보를 다시 전달해주는 규칙

   hypertext - 전자기기에서 볼 수 있는 데이터이며 다른 데이터와 연결할 수 있는 주소 참조함

   transfer - 브라우저 등을 통해 확인하는 웹 상의 데이터는 http에 의해 전달됨

   protocol - 규칙 / 규약

   데이터를 요청하고 보여주는 것은 브라우저의 역할 > 요청 받은 데이터를 가져오는 것은 웹 서버의 역할

   >>클라이언트와 서버 간의 규칙 = http  (클라 요청 = http request / 서버 응답 = http response )

 

   http method 

   get - 암호화 안 된 형태의 데이터를 서버로 전송하는 일반적인 방법

   head - get과 유사한 방법으로 response body를 포함하지 않고 사용

   post - 특정 양식의 데이터를 암호화해 서버로 전송하는데 사용

   put - 특정 대상의 데이터를 갱신(update)하는데 사용

   delete - url에 지정된 대상을 삭제하는데 사용

 

   http status code

   응답 상태 코드 = 특정 http 요청이 성공적으로 완료되었는지 알려주는 코드

   응답 - 100 / 성공 응답 - 200 / 리다이렉트 - 300 / 클라이언트 에러 - 400 / 서버 에러 - 500

 

post 실습

  1. axios.post()에서 삽입할 데이터인 이미지와 패스워드가 포함된 객체를 선언하세요.
  2. axios.post(요청할 url, 삽입할 데이터 객체)를 호출하세요.
  3. .then을 이용하여 요청 시 반환되는 토큰인 response.data.token을 token 변수의 innerHTML로 설정하세요
function axiosPost() {
  const token = document.getElementById("token");
  // 삽입할 데이터 객체를 선언하세요.
   const login = { email:  "eve.holt@reqres.in", password: "cityslicka"}
  // axios.post를 호출하고 반환되는 토큰 값을 token의 innerHTML에 저장하세요.
  axios.post("https://reqres.in/api/login",login).then((response) => {
      let res = response.date.token;
      token.innerHTML = res;
  });
}

get 실습

  1. axios.get(요청할 url)을 호출하세요.
  2. .then을 이용하여 요청 시 반환되는 데이터인 response.data.data를 확인하세요.
  3. 확인한 데이터의 first_name과 last_name을 조합하여 이름을 출력하고, email을 이용하여 이메일을 출력하세요.
function axiosGet() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");
 
  // axios.get을 호출하고 반환되는 데이터를 확인하세요.
  // 확인한 데이터에서 이름과 이메일을 출력 결과와 같이 출력하세요.
  axios.get("https://reqres.in/api/users/2").then((response) => {
      let res = response.data.data;
      name.innerHTML = res.first_name + " " + res.last_name;
      email.innerHTML = res.email;
  });
}

put 실습

  1. 수정할 데이터 객체를 선언하세요.
  2. axios.put(요청할 url, 수정할 데이터 객체)을 호출하세요.
  3. .then을 이용하여 요청 시 반환되는 데이터인 response.data에서 이름, 이메일, 업데이트 일시를 화면에 출력하세요
function axiosPut() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const updateDate = document.getElementById("update_date");
 
  // 수정할 데이터를 선언하세요.
  const login = {first_name: "White", last_name: "Rabbit", email: "alice@elice.io"};
 
  // axios.put을 호출하고 result에 반환되는 사용자 데이터를 저장하세요.
  axios.put("https://reqres.in/api/users/2",login).then((response)=>{
      let res = response.data;
      name.innerHTML = res.first_name + " " + res.last_name;
      email.innerHTML = res.email;
      updateDate.innerHTML = res.updatedAt;
     
  })

delete 실습

  1. axios.delete(요청할 url)을 호출하세요.
  2. .then을 이용하여 요청 시 반환되는 응답 코드인 response.status를 화면에 출력하세요.
function axiosDelete() {
  const status = document.getElementById("status");
 
  // axios.delete를 호출하고 반환되는 status를 확인하세요.
  axios.delete("https://reqres.in/api/users/2").then((response)=>{
      console.log(response);
      status.innerHTML = response.status;
  })
}