본문 바로가기

개발 언어

 (30)
번들링과 웹팩 웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초기의 방식을 사용하게 되면 변수 이름의 충돌 가능성 많은 js 파일 다운로드로 인한 네트워크 부하 수동적인 반복 작업 (파일, 이미지 압축 등) 위와 같은 부작용이 발생하였습니다. 그래서, 번들링이 등장하였습니다. 번들링이란 여러 자원들을 하나로 묶는다는 뜻입니다. 이로 인한 장점은 다음과 같습니다. 코드의 모듈화 리소스 최적화 반복 작업의 자동화 그러면, 번들러의 대표 주자인 웹팩에 대해 알아보겠습니다. 웹팩은 모듈 단위의 코드 작성을 가능하게 합니다. 여기서 모듈이란, 어플리케이션을 구성하는 특정 기능에 기여하는 자원 전부를 일컫습니다. Javascript, css, image, icon, font 등이 모..
DOM의 개념과 조작 방법 DOM (Document Object Model)은 HTML 요소를 Object처럼 다룰 수 있는 Model입니다. 우리는 Javascript를 사용한다면 DOM으로 HTML을 조작할 수 있습니다. DOM을 조작할 수 있는 주요 메서드와 개념을 살펴보도록 하겠습니다. Node vs. Element Node는 DOM API 상에 존재하는 모든 것들입니다. Element는 Node의 부분 집합으로 div나 span 같은 특정한 태그가 포함된 요소를 뜻합니다. document.createElement(>) const newDiv = document.createElement('div'); 새로운 element를 만드는 메서드입니다. DOM에 새로운 element가 생성되었지만 붕 떠 있는 상태입니다. 즉, DO..
타입스크립트에서 클래스와 인터페이스 체스 엔진을 만드는 예를 들어보겠습니다. 먼저 가장 기본적인 타입부터 정의하여야 합니다. class Game {} // 체스 게임 class Piece {} // 체스 말 class Position {} // 체스 말의 좌표 집합 체스에는 여섯 가지의 말이 있습니다. class King extends Piece {} class Queen extends Piece {} class Bishop extends Piece {} class Knight extends Piece {} class Rook extends Piece {} class Pawn extends Piece {} 체스 말에는 색깔로 상대를 구분하고 체스판의 좌표는 x축이 왼쪽에서 오른쪽으로 A부터 H까지이고, y축이 아래에서 위로 1부터 8까지입..
타입스크립트에서 함수란 자바스크립트 (이하 JS)에서 함수는 일급 객체입니다. 함수를 변수에 할당 함수를 다른 함수로 전달 함수에서 함수를 반환 함수를 객체와 프로토타입에 할당 함수에 프로퍼티를 기록 함수에 기록된 프로퍼티 읽기 따라서, 위와 같은 작업을 할 수 있습니다. 타입스크립트 (이하 TS)는 이 모든 것을 타입 시스템에 녹여냈습니다. function add (a: number, b: number) { return a + b; } 보통 함수 매개변수의 타입은 명시적으로 정의합니다. TS는 항상 함수의 본문에서 사용된 타입들을 추론하지만 특별한 상황이 아니라면 매개변수 타입은 추론하지 않습니다. 반환 타입은 자동으로 추론하지만 원하면 명시할 수 있습니다. 실무에서는 TS가 반환 타입을 추론하도록 하는 게 일반적이라고 합니..
타입스크립트에서 타입의 모든 것 타입이란 값과 이 값으로 할 수 있는 일의 집합입니다. Boolean 타입은 모든 bool (참과 거짓 중 하나)과 bool에 수행할 수 있는 모든 연산 (||, &&, ! 등)의 집합입니다. number 타입은 모든 숫자와 숫자에 적용할 수 있는 모든 연산 (+, -, *, /, %, ||, &&, ? 등)의 집합입니다. string 타입은 모든 문자열과 문자열에 수행할 수 있는 모든 연산 (+, ||, && 등)과 문자열에 호출할 수 있는 모든 메서드 (.concat, .toUpperCase 등)의 집합입니다. 어떤 값이 T 타입이라면, 이 값을 가지고 어떤 일을 할 수 있고 어떤 일을 할 수 없는지도 알 수 있습니다. 여기서 중요한 것은 타입 검사기를 이용해 유효하지 않은 동작이 실행되는 일을 예방..
타입스크립트란 타입스크립트 (이하 TS)는 자바스크립트 (이하 JS)의 불완전성을 보완해주는 언어입니다. TS는 흔히 발생하는 실수를 방지하며, 문서화를 제공하고, 리팩터링을 쉽게 만들며, 단위 테스트의 숫자를 반으로 줄임으로 더 안전한 프로그램을 구현할 수 있게 보장해줍니다. 여기서, '안전한'이란 타입의 안정성을 뜻합니다. 타입 안정성은 타입을 이용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지합니다. 숫자와 리스트의 연산 객체에 존재하지 않는 멤버 함수 호출 다른 곳으로 이동된 모듈을 임포트하기 위의 사례들이 그 예입니다. JS는 이런 실수가 있는 코드라도 최대한 실행하려 시도합니다. 유효하지 않은 작업이라도 개발자가 실제로 의도한 것이 있을 거라고 짐작하기 때문입니다. 3 + []; // "3" let..
자바스크립트에서 제너레이터와 async/await 자바스크립트 (이하 JS)에서는 이제껏 당연히 일단 함수가 실행되기 시작하면 완료될 때까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없었습니다. 하지만, ES6부터 이러한 완전 실행 법칙을 따르지 않는, 제너레이터라는 전혀 새로운 종류의 함수가 등장하였습니다. var x = 1; function *foo() { x++; yield; console.log("x: ", x); } function bar() { x++; } var it = foo(); it.next(); console.log(x); // 2 bar(); console.log(x); // 3 it.next(); // x: 3 함수 이름 앞에 * 표시를 붙이게 되면 JS 엔진은 이 것을 제너레이터로 인식합니다. 제너레이터를 이 제..
자바스크립트에서 프라미스란 프라미스가 나오기 이전에는 콜백으로 비동기성을 다뤘습니다. 하지만 콜백으로 프로그램의 비동기성을 표현하고 동시성을 다루면 순차성과 믿음성이 결여되는 중요한 결함이 있습니다. 그리고 제어의 역전이라는 치명적인 문제가 있습니다. 이런 콜백의 치명적인 단점, 즉 프로그램의 진행을 다른 파트에 넘겨주지 않고도 개발자가 언제 작업이 끝날지 알 수 있고 그 다음에 무슨 일을 해야 할 지 스스로 결정할 수 있게 하는 것이 바로 '프라미스'입니다. var x, y = 2; console.log(x + y); // NaN 우리는 x + y 연산을 할 때 당연히 x, y 모두 값이 세팅되어 있다고 가정합니다. 이를 더 체계적인 용어로 바꾸면 '귀결됐다'고 할 수 있습니다. 하지만 위의 경우에는 x는 아직 값이 세팅되지 않..

티스토리툴바