[TIL/23] 06.21.Wed.

Today I Studied

• react숙련주차 1주차

  • 1-19, 20: React Router Dom
  • 1-21: 비동기프로그램 입문
  • 1-22: REST
  • 1-23: JSON과 비동기통신 실습

• PS

  • Programmers/코딩테스트 연습/연습문제/Lv1/자릿수 더하기, 짝수와 홀수

• TodoList Update

  • 버튼 오류해결
    working container: Complete!-> done container로 이동 // delete -> 삭제
    Done container: back to work -> working container 이동 // Delete -> 삭제

---

Today I Learned

• react router dom
  • yarn add react-router-dom 명령어로 설치
  • 새로고침 없이 SPA 안에서 페이지 이동이 가능
• Dynamic Route: Path에 유동적인 값을 넣어 특정 페이지로 이동
• 동기적 프로그래밍(Synchronous Programming): 순차적으로 진행
• 비동기적 프로그래밍(asynchronous Programming): 이전 요청이 끝나기 전에 다음 코드가 실행
  • setTimeOut()
  • Promise 객체와 비동기적 프로그래밍은 매우 밀접함: API를 통해 받아온 data가 promise 객체에 담김
  • 수행의 제어권을 제3자에게 넘겨준 후 작업이 완료되면 안내를 받아 제어권을 이양받는 식의 일 처리 방법
  • promise 객체에 담기는 주요 정보
    1: 대기 pending
    2: 이행 fulfilled
    3. 거부 rejected
• REST API: REpresentational State Transfer,
  • 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 요청을 보내는 것,
    이 때 요청을 위한 자원을 특정한 형태로 표현
  • URI로 정보의 자원을 표현하고, 자원의 행위는 HTTP Method로 명시.
    • 자원(Resource): URI
    • 행위(Verb): HTTP Method
    • 표현(REpresentations)
  • 예시) GET/users/3/profile
  • 규칙
    명사사용, 소문자 작성
    명사는 복수형
    URI 마지막 /포함 안함
    URI는 하이픈 사용
    URI는 파일 확장자 생략
  • Path variable: 전체 데이터에서 리소스 식별하기 위한 parameter
  • Query Parameter: data정렬 혹은 필터링 하는 경우 더 적합함
• JSON(JavaScriptObjectionNotation): 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교한 형식
  • 서버 <--> 클라이언트, JSON 형식으로 data를 주고 받음.
  • 구조: JS와 유사함, 큰 따옴표만 허용됨.
  • 메서드
    1. JS object ==> JSON: JSON.stringfy()
    2. JSON ==> JS object: JSON.parse()

-----

# 🕰️ 오늘의 공부시간: 8:51