WoohyunKing의 개발 성장일지

38.0) 서론 구글의 V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경인 ‘Node.js’의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 JS가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션의 클라이언트 사이드이다. 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 JS 프로그래밍이 가능하다. 이를 위해서 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 해석(Parsing)하여 브라우저에 렌더링하는지 살펴보자 ! 💡 파싱(Parsing) : 작성된 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서..

1) SPA의 등장 배경 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율적인 방법'으로 페이지를 렌더링하고 있었던 것입니다. 이런 비효율적인 통신은 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어나게 되고, 서버의 부담도 클 수 밖에 없습니다. 즉, 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 되는 것입니다. 이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재의 SPA의 토대가 마..

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() 메..

Javascript Module 이란? 개발을 하면서 애플리케이션의 규모가 커지다보면 파일을 여러 개로 분리해야 하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(Module)이라고 부릅니다. 모듈은 대부분 하나의 Class나 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 하나의 파일, 하나의 스크립트라고 할 수 있는데, 모듈에 import/export를 적용하면 다른 모듈을 불러와서 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈은 크게 두 종류로 나뉩니다. 복수의 함수가 있는 라이브러리 형태의 모듈 개체 하나만 선언되어있는 모듈 대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다..

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..

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)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 ..

JSON : JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용되는 Data Format. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있습니다. JSON 내장 객체 : 자바스크립트에서는 JSON 포멧의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있습니다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다. ..

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 1. setInterval() 메소드 The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. (출처 : MDN web ..

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값(key-value) 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있게 됩니다. 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다. setItem(key, value) : 키-값 쌍을 보관합니다. getItem(key) : 키에 해당하는 값을 받아옵니다. removeItem(key) : 키와 해당 값을 삭제합니다. clear() : 모든 것을 삭제합니다. key(index) : 인덱스(index)에 해당하는 키를 받아..

Event 인터페이스의 preventDefault() 메소드는 어떠한 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 해주는 역할을 한다. 예를 들어 submit 이벤트는 Form을 제출할 때 트리거(새로고침)되는데, 이런 경우에 트리거를 방지하기 위해 사용할 수 있다. 을 클릭하거나 input 필드에서 엔터 키를 눌렀을 경우에 발생하는 submit의 기본 동작인 트리거를 방지하는 코드는 다음과 같다. const loginForm = document.querySelector(".loginForm"); function onLogin(event) { event.preventDefault(); } loginForm.addEventListener("submit", onLogin);