[TIL] 모던 자바스크립트

오늘의 나는 무엇을 잘했을까?

1. 80 챕터가 넘는 모던 자바스크립트를 뿌셨다..😭 복습은 필수!! 주말에 복습할 예정이다.

2. JS의 동작 원리로 CallStack과 Task Queue에 대해 공부했다.
   케니가 공유해준 콜스택, 이벤트 루프 동작 원리에 대해 시각적으로 잘 볼 수 있는 사이트

오늘의 나는 무엇을 배웠을까?

모던 자바스크립트.zip

• 모듈, 각종 메소드

AJAX란? - 데일리 미션

• 비동기 통신!

Asynchronous JavaScript And XML의 약자로, 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내는 response를 받아서 새로운 페이지를 로드하지 않고 변화를 줄 수 있게 해주는 기술입니다. 즉, Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.

따라서 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

• 대표적으로 구글 맵을 확대하거나 축소, 위치를 옮길 때 리로드가 되는 것이 아니라 현재 페이지가 유지되면서 변화가 되는 것을 생각하면 됩니다.

이때 서버와는 JSON, XML, HTML, 텍스트 파일 등의 데이터를 주고 받습니다.

JavaScript에서는 Fetch API를 이용한 HTTP 요청으로 Ajax 통신이 가능합니다. ES6 이전의 자바스크립트에서는 XMLHttpRequest() 객체를 통해 Ajax 통신을 수행했습니다. (물론 지금도 사용 가능 but OLD JS!)

• XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.

• fetch API는 Promise 기반으로 동작합니다.

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리인 Axios를 사용하여 Ajax 통신을 수행할 수도 있습니다.

원리

1. 브라우저가 사이트에 접속하면 서버는 사이트의 템플릿을 전달합니다,

2. 브라우저는 수신 받은 HTML과 CSS를 해석해 화면의 기본 모양을 그립니다.

3. 계속해서 서버는 데이터의 요청 방식과 수신 받은 데이터를 어떻게 가공해야하는 지를 기술한 JavaScript 파일을 전달합니다.

4. 브라우저는 JavaScript 파일을 해석해 파일에 기술된 방식대로 서버에 추가 데이터를 요청합니다.

5. 서버는 순수 데이터를 응답으로 되돌려줍니다.

6. 브라우저는 수신한 데이터를 해석해 템플릿의 적절한 위치에 삽입합니다. 데이터 가공 방식에 따라 변경 삭제 등을 할 수도 있습니다.

장점

장점은 Ajax가 생겨난 원인과 작동 방식과 일맥 상통 합니다.

1. 웹페이지 전체를 다시 로딩하지 않고도 웹페이지의 일부분만을 갱신할 수 있습니다.

2. 웹페이지가 로드된 후 서버로 데이터 요청을 보낼 수 있습니다.

3. 웹페이지가 로드된 후 서버로부터 데이터를 받을 수 있습니다.

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

단점

1. Ajax는 동적 페이지 렌더링을 하기 때문에 자바스크립트를 해석하지 못하는 검색 엔진에서는 내용이 검색되지 않는다는 문제가 있습니다. 만약 브라우저에서 자바스크립트를 꺼버리면 Ajax 기반 사이트는 화면 일부만 그려집니다.

2. 또한 레이아웃이 너무 복잡한 사이트는 웹브라우저가 렌더링 하는데 힘겨워할 수도 있습니다. 만약 빠른 로딩이 필요한 경우에도 Ajax는 최소 두번의 데이터 요청 (일반적으로 4회 이상, HTML, CSS, JS 로딩 후 Ajax call 1회)을 해야한다는 문제가 있습니다. 이로 인해 속도 저하가 필연적으로 발생합니다. 이런 경우에는 의도적으로 “서버 사이드 렌더링”이라는 옛 방식으로 서버가 모든 페이지를 그려서 전달합니다.

3. Ajax는 클라이언트가 서버에 데이터를 요청하는 client pooling 방식을 사용하기 때문에 server push 방식의 실시간 서비스는 만들 수 없습니다.

   • clinet pooling 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식입니다.
   • server push 방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미합니다.
     • web Socket 등의 있습니다.
   • 더 많은 정보 : https://show-me-the-money.tistory.com/entry/서버에서-클라이언트로-푸시하는-방식에-대하여

4. Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.

출처s

• HTTP Requests – ES6, ES5, jQuery
• (MDN Web Docs)Fetch API
• [JavaScript] 비동기 HTTP 통신 종류 (ajax, fetch,axios)
• fetch
• 나무위키 - Ajax

오늘의 나는 어떤 어려움이 있었을까?

1. forEach, map, filter, find, some, every, reduce, sort 등.. 다양한 메소드를 한번에 익히다 보니 개념이 헷갈렸다. 특히 각 메소드를 적는 형식이 헷갈려서 아직까지는 안보고 쓰기 어려운 것 같다. 복습이 필수!

내일의 나는 무엇을 해야할까?

• 자바스크립트 객체 지향 완강
• 알고리즘 1문제
• 모의 기술 면접