220308

🍒자바스크립트

• [#1] 바닐라JS로 웹 페이지 구현하기

로드맵 따라 채워넣기

• Ajax(Asynchronous JavaScript and XML): 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술 👉 서버로부터 웹 페이지를 반환할 때 화면 전체가 아닌 페이지의 일부만을 리프레시하여 퍼포먼스 속도를 높이고 화면 표시를 부드럽게 만듦

  • JSON, XML, HTML 등의 다양한 포맷을 주고 받을 수 있음
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업 수행

• XML Http Request(XHR): 브라우저가 Ajax 요청을 생성하고 전송하는 방법

  • 페이지를 일부만 업데이트하고도 url로부터 데이터 받아올 수 있음

• 브라우저 동작 원리: 웹상의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되기 때문에 브라우저 환경을 고려할 때 효율적인 프로그래밍이 가능

  • 핵심 기능: 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시
  • 동기적 처리
    1. HTML 파서가 script 태그를 만남
    2. DOM 생성 프로세스 중지하고 자바스크립트 엔진으로 제어 권한 넘어감
    3. 해당 엔진이 자바스크립트 코드 또는 파일을 로드하고 파싱하여 실행
    4. 실행이 완료되면 다시 HTML 파서로 제어 권한 넘어감
    5. DOM 생성 재개

• Strict 모드: 스크립트나 함수의 맨 처음에 "use strict";를 사용하여 선언하여 기존의 자바스크립트 문법보다 엄격하게 검사

  • 기존 자바스크립트 언어의 일부 기능을 제한한 문법 사용
  • 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진 최적화에 문제를 일으킬 수 있는 코드에 대한 강력한 오류 검사와 더불어 향상된 보안 기능 제공
  • Strict 모드와 Non-strict 모드를 혼용하면 에러가 발생할 수 있으므로 즉시실행함수로 감싼 스크립트 단위로 적용하는 것이 바람직

참고: MDN 홈페이지, https://ko.javascript.info, https://poiemaweb.com/js-ajax

---

🍒실용주의 프로그래머

• Topic 11. 가역성
  • 개념: 물질이 어떤 상태로 변하였다가 본래 상태로 되돌아갈 수 있는 성질 👉 진행하고 있는 프로젝트가 원하는 방향으로 흘러가지 않고 도중에 변화하거나 심하게는 원점으로 돌아올 수 있다는 뜻
  • 우리는 미래를 완벽하게 예측할 수 없기 때문에 내가 지금 세운 계획이 틀어질 수 있음을 염두에 두고 앞으로 나아가야 하고, 그러기 위해서는 중요하면서도 되돌릴 수 없는 결정의 수를 줄이는 것이 중요
  • 결정의 수를 줄이는 것과 더불어 도움이 되는 방법은 처음부터 바꾸기 쉽게 만드는 것