HTML&CSS&Javascript 📚/JS40 [JS Deep Dive] 38. 브라우저의 렌더링 과정 38.0) 서론 구글의 V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경인 ‘Node.js’의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 JS가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션의 클라이언트 사이드이다. 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 JS 프로그래밍이 가능하다. 이를 위해서 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 해석(Parsing)하여 브라우저에 렌더링하는지 살펴보자 ! 💡 파싱(Parsing) : 작성된 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서.. 2023. 3. 1. SPA(Single Page Application)의 개념과 장단점 1) SPA의 등장 배경 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율적인 방법'으로 페이지를 렌더링하고 있었던 것입니다. 이런 비효율적인 통신은 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어나게 되고, 서버의 부담도 클 수 밖에 없습니다. 즉, 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 되는 것입니다. 이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재의 SPA의 토대가 마.. 2023. 2. 13. [JS] Array.prototype.map() 함수 알아보기 map() 함수의 역할 const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32] 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다. 이 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공하는 Array.map() 메소드를 사용하면 됩니다. 이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다. 즉, map() 메.. 2023. 2. 13. [JS] Module의 개념 및 import/export 정리 Javascript Module 이란? 개발을 하면서 애플리케이션의 규모가 커지다보면 파일을 여러 개로 분리해야 하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(Module)이라고 부릅니다. 모듈은 대부분 하나의 Class나 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 하나의 파일, 하나의 스크립트라고 할 수 있는데, 모듈에 import/export를 적용하면 다른 모듈을 불러와서 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈은 크게 두 종류로 나뉩니다. 복수의 함수가 있는 라이브러리 형태의 모듈 개체 하나만 선언되어있는 모듈 대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.. 2023. 2. 9. fetch() API 의 사용법 fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); fetch 함수는 XMLHttpRequest 객체보다 최근에 나온, HTTP 요청 전송 기능을 제공하는 Web API다. fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다. 따라서 프로미스의 후속 처리 메서드인 then()을 사용하여 resolve한 객체를 전달받을 수 있다. (물론 catch, finally도 마찬가지) fetch 함수로 받은 Response 객체에는 HTTP 응답을 나타내는 프로퍼티들이 있다. 그 중 json() 내장 함수가 있는데, response.. 2023. 2. 5. 콜백 함수(Callback Function)의 개념 및 사용법 1. 콜백 함수(Callback function)란 ? A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. 콜백 함수란 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다. (출처 : mdn web docs) 콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 .. 2023. 2. 5. 이전 1 ··· 3 4 5 6 7 다음
