Code/JavaScript
번들러 파헤치기 3 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel)
본 글은 번들러 파헤치기 시리즈의 마지막인 3부로, Rollup을 통해 리액트 컴포넌트 라이브러리를 직접 구성하고 배포하는 과정에 대해 설명하려고 합니다. 번들러 파헤치기 1부 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule) 2부 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, exbuild, vite, turbopack) 3부 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel) 3부는 구현에 집중하여 작성할 예정으로 구성과 관련된 기술적 배경에 대한 자세한 설명없이 진행할 예정으로, 본격적인 구성에 들어가기에 앞서 1부, 2부를 읽고오시는 것을 추천드립니..
번들러 파헤치기 2 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, esbuild, vite, turbopack)
본 글은 번들러 파헤치기 시리즈의 2부로, 번들러의 발전 및 역사를 주제로 각 번들러에 대한 설명을 진행하려고 합니다. 2부에서도 CommonJS(cjs), esmodule, ESM (mjs)에 대한 내용이 등장하기 때문에 이전 포스팅을 가볍게 읽고 오시는 것을 추천드립니다. 번들러 파헤치기 1부 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule) 2부 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, exbuild, vite, turbopack) 3부 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel) 2부 번들러의 발전과 역사 자바스크립트에서의 빌드 환경은 ..
번들러 파헤치기 1 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)
개인적으로 클라이언트 환경에서 가장 진입장벽이 높게 느껴지는 부분은 빌드 환경인 것 같습니다. 다른 부분은 사실 실무에서도 자주 다루고 접하다 보니 금방 익숙해지는 반면, 프론트엔드의 경우 한 번 구성해 놓으면 직접 수정 할 일이 적다 보니 유난히 어렵게 느껴지기 쉬운 듯 합니다. 번들러 파헤치기 포스팅은 모듈 시스템의 역사, 번들러의 역사, 빌드 환경 구성으로 나누어 포스팅을 하려고 합니다. 각 시리즈는 이전 내용들에 의존하고 있는 부분이 있으니 길더라도 환경 구성 전 모든 시리즈를 훑어보시는 걸 추천드립니다. 빌드 환경 자체가 모듈 시스템, 번들러, 컴파일러 등 많은 부분이 서로 의존성이 높고, 공통점, 차이점, 특징도 워낙 다양한 부분이다 보니 선수 이해가 있어야 번들러를 이해하고 알맞은 구성을 할..
자바스크립트 / this 바인딩의 5가지 패턴 정리 (메소드 호출, call, apply ...)
아직도 코린이지만 정말 배운 지 얼마 안 된 코코코린이 시절에 this를 처음 접했을 땐 당최;; call ? apply? 생성자? 응? 머리에 남는 게 없었다. 그러다 과제를 계속 진행하면서 실제로 this를 사용하고 구체화시키면서 this에 대한 감이 조금은 잡혔으나, 개념적으로 부족한 부분이 있는지 되짚어보고자 오늘은 this에 대해 포스팅을 하려고 한다. 우선 자바스크립트의 경우에는 this가 명확하게 딱 이것이다!로 정의되어 있는 것이 아니다. 사용 패턴에 따라 바인딩 되는 this가 다르다는 것을 알고있어야 한다. Execution Context 자바스크립트 내에서 함수를 실행 시 execution context 마다 this가 생성된다. 이때의 this는 함수를 실행 할 때 호출 방법에 따라..
자바스크립트(javaScript) Instantiation Patterns / 객체 지향 언어 / 인스턴스를 만드는 과정, class, instance
자바스크립트는 ES6에서 class 키워드가 추가되었다. ES5 자바스크립트를 사용했을 때 사용자 입장에서 아쉬운 부분들에 대해 보완되어 나온 게 ES6라고 생각하면 된다. class 키워드를 사용하여, 이전보다 간단하고 원활하게 객체의 재사용이 가능하다. 그렇다면 class 키워드의 추가가 있기 전까지 어떠한 방식으로 인스턴스를 만들었는 지에 대해 정리하고자 한다. four Instantiation Patterns - Functional - Functional Shared - Prototypal - Pseudoclassical 1. Functional // ES6 이전 변수 선언 시, var 키워드 사용 var Test = function() { var someInstance = {}; someInst..
OOP(Object Oriented Programming)
오늘은 OOP에 관해 공부한 내용을 포스팅 해보고자 한다. OOP (Object Oriented Programming) 무엇인가를 해결하기 위한 논리적 사고의 단계들을 알고리즘이라고 한다. 코드를 작성하고, 논리를 구체화하여 구현하는 과정이 필요한 모든 컴퓨터 프로그래밍 또한 알고리즘이라고 볼 수 있다. 컴퓨터 프로그래밍 언어는 크게 3가지로 구분 할 수 있다. - 기게어 (Machine languages) - 어셈블리어 (Assembly languages) - 고급언어 (High-Level languages) 1. 기계어 (Machine languages) 기계어는 근본적인 컴퓨터의 언어라고 볼 수 있다. 0과 1로 되어있으며, [ ex) 1010110101010, 0001100011 ] 사람이 보기..
JavaScript Rest 파라미터, Spread 연산자, arguments 정리 / 차이
rest 파라미터와 spread syntax는 '...'을 사용하기 때문에 명칭에 차이만 있을 뿐, 기능적 차이에 대해서 정확히 인지하지 못했던 부분이 있었다. 이를 정리해보고자 한다. 1. Rest 파라미터 (rest parameters) ES6 - 함수 실행 시, 전달인자 (arguments)를 함수에 함께 전달한 후, 함수 선언 시 확인 할 수 있는 매개변수 (parameters)에 전달 받은 인자를 사용할 수 있다. 만약, 전달인자(arguments)의 길이가 유동적이라면? 하드코딩으로 모두 적용을 할 순 없는 노릇일 것이다. 이를 보완하기 위해 rest parameters를 사용 할 수 있다. 함수 매개변수 앞에 '...'을 작성하여 매개변수 지정이 가능하다. 매개변수가 배열의 형태로 전달 되며..
JavaScript 호이스팅 (Hoisting), let 과 var를 통한 예제
호이스팅이란? ( Hoisting ) 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다. -출처 MDN mdn에 의하면 호이스팅이란 위 내용과 같다. 간단하게 말하자면, 어디에 선언했는 지에 상관없이 선언을 제일 위로 끌어 올려주는 것처럼 실행된다는 의미로 해석할 수 있을 것 같다. 예제로 이해를 도와보자면, var 키워드를 사용할 수 있다. // var (don't ever use this!) // let 추가 전까지는 var가 사용 되었음 // var hoisting (move declaration from bottom ..
Javascript 클로저(Closure)의 개념 및 유용한 사용 예
클로저 (Closure) : 외부함수의 변수에 접근할 수 있는 내부 함수 또는, 이러한 작동원리를 일컫는 용어 정확한 정의는, 함수와 함수를 둘러싼 어휘적 환경의 조합 function outerFn() { let outerVar = 'outer'; console.log(outerVar); function innerFn() { let innerVar = 'inner'; console.log(innerVar); } } let globarVar = 'golbal'f; outerFn(); 위 코드에서 inner 함수에서 접근 할 수 있는 Scope는 총 3개이다. 함수의 리턴 function outerFn() { let outerVar = 'outer'; console.log(outerVar); function..
Javascript 스코프(Scope)의 개념 / var, let, const 키워드, window 객체
Scope : 변수 접근 규칙에 따른 유효 범위 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다. 변수와 그 값이, 어디서부터 어디까지 유효한 지를 판단하는 범위이다. Javascirpt는 기본적으로, 함수가 선언되는(lexical) 동시에 자신만의 Scope를 가진다. let greeting = 'Hello'; function greetSomeone() { let firstName = 'Josh'; return greeting + ' ' + firstName; } greetSomeone(); // 'Hello Josh' firstName; // ReferenceError 함수 내에 선언된 firstName 변수를 함수 밖에서 호출을 시도했더니 참조 에러..
Javascript 객체(Object) 값 추가, 삭제 및 키 찾기 방법
우리는 앞서 Dot notation과 Bracket notation의 차이와 작성법에 대해 알아 보았다. let user = { firstName: 'Steve', lastName: 'Lee', email: 'steve@abcdefg.com', city: 'Seoul' } user.firstName === user['firstName']; // true 위와 같이 표현할 수 있음을 알 수 있었다. 그럼 객체(Object)에 값을 추가, 삭제 및 키를 찾는 방법은 무엇일까? dot notation, bracket notation 를 모두 사용하여 활용해보겠다. 객체 값 추가 let user = { firstName: 'deemmun', } user['city'] = 'Seoul'; user.age = 10..
Javascript 객체(object) 사용법, Dot notation, Bracket notation
객체를 사용하는 이유 let userFirstName = 'Steve'; let userLastName = 'Lee'; let userEmail = 'steve@abcdefg.com'; let userCity = 'Seoul'; let userFirstName = 'Jason'; let userLastName = 'Jeong'; let userEmail = 'jason@abcdefg.com'; let userCity = 'Busan'; 개인 주소록을 만든다고 했을 때, 매번 이런 방식으로 여러 개의 변수를 선언해야한다면 상당히 불편할 것이다. let user = [ 'Steve', 'Lee', 'steve@abcdefg.com', 'Seoul' ] let user2 = [ 'Jason', 'Jeong',..
Javascript 배열의 타입, Array.isArray(), 배열의 시각화
우리는 이전에 typeof를 통해 타입 확인하는 방법을 익혔다. 그럼 배열에 typeof를 사용해보자. 콘솔을 통해 배열의 타입을 검사할 경우 "object" 값이 확인되기 때문에 typeof로는 배열 여부를 정확히 확인할 수 없다. 배열 여부를 정확하게 알 수 있는 방법은, 불린 타입의 함수 또는 콘솔 내 시각화를 통해 알 수 있다. Array.isArray() 값을 불린타입으로 반환하여, true 또는 false로 배열 여부를 확인 할 수 있다. console.table(arr) 배열을 시각화하여 파악하고 싶다면, 콘솔 내에서 확인 또한 가능하다
Javascript 배열 (Array)의 기본 개념, 인덱스(index)와 메소드(method)
일단 배열은 순서가 있는 값이라고 생각하면 된다. 배열 내에서의 순서는 인덱스라고 칭하며, 1이 아닌 0부터 시작한다. [0] [1] [2] [3] [4] [5] [6] 84 49 34 45 43 39 94 위의 표에서 인덱스(Index)는 검정 박스이고, 그 밑은 요소(element)이다. 배열은 대괄호(square bracket)을 통해 만들 수 있으며, 각각의 원소(element)는 쉼표(comma)로 구분이 가능하다. let number = [84, 49, 34, 45, 43, 39, 94] 위의 코드에서 대괄호 안에 있는 45는 number라는 배열의 3번째 인덱스 값은 45라고 표현할 수 있다. let number = [84, 49, 34, 45, 43, 39, 94] number[3]; //..
Javascript 탬플릿 리터럴(Template literals), 내장 표현식 허용
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) 을 이용하며, 중괄호를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다. 중괄호 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달된다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜준다. 표현식 삽입법 (Expression interpolation) 표현식(expression)을 일반 문자열(normal strings)에 삽입할 경우에는 아래와 같은 코드를 작성하게 된다. var a = 5; var b = 10; console.log("Fifteen ..
Javascript 스트링 메소드(String Method)와 문자열 기본 사용법
자바스크립트 내의 모든 string method는 immutable 이다. 즉, 원본이 변하지 않는다. 문자열 기본 사용법 str[index] car str = 'mouse'; cosole.log(str[0]); // 'm' cosole.log(str[2]); // 'u' cosole.log(str[10]); // undefined index로 접근은 가능하지만 쓸 수는 없다. (read-only) str[0] = 'G'; console.log(str); // 'mouse' not 'Gouse'; 문자열 연결 ( Concatenating Strings ) + 연산자 사용이 가능하다. string 타입과 다른 타입 사이에 + 연산자를 사용하면, string 형식으로 변환 (toString) var str1..
Javascript 조건문 if, 비교 연산자, 논리 연산자
우선, 조건문을 사용하려면 boolean 타입에 대한 이해가 필요하다. let isAdult = true; // 또는 false; let isStudent = false; // 또는 true; 조건문은 어떠한 조건을 판별하는 기준을 만드는 것이며, 조건문에는 반드시 비교 연산자(comparison operator)가 필요하다. 비교 연산자 (comparison operator) 3 > 5; // false; 9 < 10; // true; 'hello' === 'world'; // false; 비교의 결과는 늘 Boolean, 즉 true 혹은 false이다. 자바스크립트(JavaScript)는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있다. 엄격(일치) 비교(===)는 두 피연산자가..
Javascript 타입(type)에 따른 작동 방식의 차이 // String(), Number()
타입에 대한 이해 자바스크립트의 모든 값(value)는 각자 타입을 가지고 있다. 평소에 우리는 무의식적으로 숫자와 문자를 구분하지 않고 이야기하지만, 우리는 이를 무의식적으로 구분할 수 있을 만큼 똑똑합니다. 하지만 컴퓨터는 상황과 문맥을 이해하는 능력이 없습니다. 컴퓨터가 명확하게 표현하기 위해서는 모든 값에 타입을 정해주고, 그에 맞게 행동하도록 규정을 정해줘야 했습니다. let person = '혜선'; let date = '일요일'; let quantity = 1; letsGoGetFood('혜선', '일요일', 1); 문자열은 ', " 따옴표로 둘러 쌓아 표시해주고, 숫자열은 그대로 숫자를 입력하여 구분할 수 있습니다. 타입에 따른 코드 작동 방식의 차이 let word = 'hello' + ..
Javascript 함수(function), return 명령문, 함수선언 및 개념
1. 함수 (function) 함수는 입력(input)을 받아, 출력(output)을 하는 하나의 작은 기능 단위이다. 함수는 함수의 몸통(function body)이라고 하는 구문(statement)으로 구성된다. javascript에서 함수는 다른 객체와 같이 속성(property) 및 method를 가질 수 있기에 일급 객체로 볼 수 있다. 여기서 함수와 객체의 차이를 설명하자면, 함수는 호출될 수 있기 때문에 함수는 Function 객체이다. 함수 선언 ( function 문 ) 함수를 사용하기 위해서는, 함수를 선언해야 한다. function name([param[, param[, ... param]]]) { statements } name : 함수명 param : 함수에 전달되는 인수의 이름,..
Javascript // 타입 (type)과 종류
변수에는 다양한 타입이 있다. 타입의 종류는 크게 6가지로 볼 수 있다. let string = 'string'; // 문자형 : '', "" 따옴표로 구분 let number = 1; // 숫자형 // 변수 number에 숫자 1을 할당 let fruits = [ 'banana', 'apple', // 배열(자료형) : 문자형, 숫자형 등을 혼합할 수 있는 배열 'orange' ] let person = { name: 'deemmun'; // 객체(자료형) : 위 타입이 모두 섞인 타입 age: 23; isStudent: true; } function name(parameter) { // 함수 (statements) } 이 외에도 할당이 없는 변수일 경우 노출되는 undefined, 참 거짓을 판단하는..