22_02_08_Tue.md

[22.02.08.Tue] - Day 11

Vanilla JS

• Object Literal Syntax Extension
  • object를 선언하면서 키를 동적으로 바인딩
• Spread Operator
  • 배열의 요소 하나하나 다 분해해서 만들어줌
  • 배열 합칠 때 꽤 많이 사용함
• Object Destructuring
  • 서버 노드 JS할 때 많이 사용
  • Vue 같은 프론트엔드 프레임워크 사용할 때도 많이 사용
  • 서버로부터 데이터 받아올 때 모두 가져오지 않고
    일부 데이터만 가져올 때 유용하게 활용 가능
  • 1~3개 정도 적은 데이터 가져올 때 유용
• Array Destructuring
  • 가독성 높음
  • 실무) 지리 정보 관련 라이브러리에서 위도, 경도 받아올 때 활용
• XMLHttpRequest
  • Ajax; 웹의 혁신
    • Asynchronous Javascript and XML
    • 동적인 웹페이지 만들기 위한 용도
    • 비동기 통신
    • 화면 전체 refresh 하지 않고도 서버로 데이터 요청하고 필요한 일부분만 가져와서
      어플리케이션의 부분적 갱신을 통해 동적인 웹 페이지 만들기 가능
    • 우선 서버로 데이터 요청 날리고, 그 사이 JS는 다른 일 할 수 있음
  • jQuery, fetch, axios, ...
  • HTTP method
    • GET; 리소스 요청 (데이터 가져오기)
    • POST; 리소스 생성 (신규 데이터 생성)
    • PUT; 리소스 수정
    • PATCH; 리소스 일부 수정
    • DELETE; 리소스 삭제
• fetch API
  • fetch 자체가 Promise 기능을 함
    • Promise; 데이터 받아올 때까지 보장 (약속)
      • js에서 비동기 처리할 때 사용
• async/await
  • 반드시 async/await 수행 이후 실행되는 코드가 있을 때 사용
  • 비동기가 마치 동기적으로 실행됨
• module
  • 모듈; JS 함수를 기능별로 다 쪼갬 (물리적인 파일로)
• class
  • 클래스; 틀 ex. 붕어빵 틀

[Note]

• 대다수의 지리정보 관련 외부 JS 라이브러리에서는 배열 형태로 위도, 경도 return
• 가상의 서버
  • 비동기 통신 동작 확인 위해서는 서버 필요함
  • ex. json-server (npm)
    • 반드시 global로 설치해야 함
    • 서버 없이 프론트엔드 개발 가능
• 상태 코드 200은 정상적으로 데이터 GET/PUT/DELETE
• 정상적 데이터 생성 201 status (POST)
• 최초의 웹은 서버로 요청을 보내면 서버가 응답해주고
  클라이언트가 요청하면 서버가 응답해줘야 함
• Ajax 추가된 이후의 웹은 클라이언트가 요청하고 아직 응답 안왔지만
  클라이언트가 여러 번 요청할 수 있음
• 정적인 화면과 동적인 화면 (동적으로 데이터 가져와서 화면 표현)

Source Code