차근차근

번들러(Bundler)란 무엇이며 왜 필요한가? 다이나믹한 상호 작용이 많은 대규모 웹 서비스들이 생겨나면서 수백 개의 JS 파일을 관리하기 어려워 다음과 같은 문제가 있다. 전역 범위를 갖는 수백 개의 자바스크립트 파일의 중복 선언 많은 자바스크립트 파일로 인한 로딩 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등) 이러한 문제를 해결하기 위해 번들러(Bundler)가 등장했다. 번들러(Bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(버들) 도구를 의미한다. 번들러를 사용하면 모듈 단위의 코드 작성 네트워크 병목 완화(최적화) 웹 개발 작업 자동화 번들러는 웹팩(Webpack), Rollup, Parcel, Browserify 등이 있다. 웹..

사용자가 브라우저 주소창에 URL을 입력한다. 브라우저는 해당 URL의 도메인 부분을 DNS 서버에서 검색하고, DNS 서버에서 해당 도메인과 매칭되는 IP 주소를 찾아 URL 정보와 함께 전달한다. URL 정보와 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지 생성한다. 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 URL 정보로 변환되고 웹서버는 URL 정보에 해당하는 웹 데이터를 검색한다. 검색된 웹 데이터는 또 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성하고 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송된다. 도착한 HTTP 응답 메시지는 HTT..

1. 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다. 선언 단계: 변수 이름을 실행 컨텍스트에 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다. 초기화 단계를 거치지 않으면, 확보된 메모리 공간에는 이전에 사용했던 쓰레기 값이 남아있을 수 있다. 자바스크립트 엔진은 암묵적으로 초기화를 수행하기 때문에 이러한 위험으로부터 안전하다. 2. 변수 선언은 소스코드 평가 과정에서 완료된다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되는데, 소스코드가 한 줄씩 순차적으로 실행되는 시점을 런타임이라고 한다. 변수 선언은 런타임 이전 단계에서 먼저 실행된다. console.log(..

var, let, const의 차이점은 중복 선언, 재할당, 스코프, 전역 객체 프로퍼티, 호이스팅으로 크게 5가지로 나눌 수 있습니다. 1. 중복 선언 가능 여부 var : 변수의 중복 선언이 가능 var로 선언한 변수는 중복 선언이 가능합니다. 중복 선언 시 가장 나중에 할당된 값이 변수에 저장됩니다. var name = 'kevin'; console.log(name); // name var name = 'matt'; console.log(name); // matt => var를 사용할 경우 이미 사용하는 변수를 중복 선언하여 기존 값을 변경하게 되는 실수가 발생할 수 있습니다. let, const : 변수의 중복 선언이 불가능 let과 const로 선언한 변수는 중복 선..

우테코 지하철 노선도 미션 코드 작성 중에 this 바인딩 문제를 발견했다. 평소 'this 바인딩은 쓸 일이 별로 없지 않을까?'라고 생각하며 this 바인딩에 대해 깊게 생각해보지 않았는데 문제를 직접 겪어보니 상당히 당혹스러웠다. 평소에 짜던 코드와 전혀 이질감을 못 느꼈는데 계속 오류가 나서 한참을 헤맸다. class StationManager { constructor() { this.station = []; this.newListId = 1; this.stationList = document.querySelector('#station-add-list'); this.stationNameInput = document.querySelector('#station-na..

자바스크립트의 비동기 처리를 살펴보면 다음과 같다. 비동기 흐름을 예측하기 어렵다. // #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello Again'); // 'Hello' // 'Hello Again' // 3초 뒤에 // 'Bye' 의도치 않게 동작한다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = respon..

동기와 비동기 동기는 한가지 작업의 완료 시점과 다른 작업의 시작 시점이 같은 동작 방식을 말한다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고한다. 비동기는 한가지 작업이 끝나는 시점과 다른 작업이 시작하는 시점 관계없이 다음 동작을 실행할 수 있는 방식. 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다. blocking & non-blocking blocking은 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"이다. non-blocking은 하나의 작업이 끝나지 않아도, 이어지는 작업을 하는 것이다. Javascript는? Javascript는 synchronous, blocking..

객체 지향 프로그래밍(Object Oriented Programming) 객체 지향 프로그래밍은 프로그램(OOP) 설계 철학 중 하나로 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론이다. 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식이다. 즉, 데이터와 기능이 별개로 취급되지 않고, 한번에 처리할 수 있는 방식이다. OOP의 모든 것은 객체로 그룹화되며 아래의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다. 1. 캡슐화 Encapsulation 데이터와 기능을 하나의 단위로 묶는 것 캡슐화는 데이터(속성)와 기능(메소드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것이다. 데이터(속성)과 기능(메소..

React에서 TodoList에 새로운 todo를 추가하는 기능을 구현하고 있었는데, input에 내용을 입력하고 추가를 위해 버튼을 클릭하니 내용이 추가되는 즉시 페이지가 reload 되는 문제가 생겼다. return ( Add todo );확인해보니 submit 이벤트는 이벤트가 발생하면 창이 reload 되는 특성을 가지고 있었던 것이다. 그래서 이벤트의 전파를 막지않고 이벤트의 동작을 취소하기 위해 preventDafault를 사용했다. 그 결과 창이 reload 되지 않지만 새로운 todo는 list에 추가된 것을 확인할 수 있었다. const handleSubmit = (e) => { onSubmit(inputText); setInputText('') e.preventDefaul..

HTMLCollection과 NodeList는 DOM을 사용하다 보면 볼 수 있는 컬렉션이다. 둘 다 배열처럼 보이지만 배열이 아닌 유사배열이고 각각 특징이 다르기 때문에 자세하게 살펴본다. 아이디 텍스트노드 4~20자의 영문 소문자, 숫자만 사용 가능합니다. 이미 사용하고 있는 아이디입니다. HTMLCollection HTMLCollection은 문서 내에 순서대로 정렬된 요소(Element)의 컬렉션이며 유사배열이다. children 프로퍼티를 이용해 접근할 수 있다. const collection = document.body.children console.log(collection); // HTMLCollection(4) [label, input#username, div.failure-message..