대가는 결과를 만든다

맨날 햇갈려서 메모겸 기록한다. const test1 = value || '1'const test2 = value ?? '1' || 는 value가 falsy한 값(null, undefiend, 0, '', NaN, false 등)인 경우 모두 '1' 출력??는 value가 null, undefined일 경우에만 '1'출력

브라우저에서 비동기 처리가 필요한 이유: Single Thread구조인 Javascript는 하나의 작업이 오래걸리는 경우 Signle Thread Blocking 이슈가 발생하게 되어 Freezing 현상을 초래할 수 있음. 이 한계를 보완하기 위해 Background로 비동기 작업을 처리하고 Main Thread의 일반적인 동작은 blocking되지 않도록 처리한다. 브라우저의 구조는 크게 아래와 같이 구성되어 있다.  1. Javascript엔진1-1. Call Stack : 함수가 호출될 시 실행 컨텍스트가 순차적으로 push되고 순차적으로 실행1-2. Heap : 객체가 할당되는 메모리 공간 2. Web API- Background에서 처리- DOM Event, ajax, timer 등의 브라우..

SOLID원칙이란 객체 지향 설계 프로그래밍의 유지보수성을 높이고, 유연하고, 확장이 쉽게하기 위해 마틴 아저씨가 만든 원칙이다.패턴보다 작지만 표준화 작업, 아키텍처 설계에 이르기까지 다양하게 적용될 수 있는 원칙이다. 1. SRP(Single Responsibility Principle) 단일 책임의 원칙2. OCP(Open Close Principle) 개방 폐쇄의 원칙3. LCP(The Liskov Substitution Principle) 리스코브 치환의 원칙4. ISP(Interface Segregation Principle) 인터페이스 분리의 원칙5. DIP(Dependency Inversion Principle) 의존성역전의 원칙 1. SRP - 단일책임의 원칙1-1. 정의- 작성된 클래스..

Redux, Vuex 등 상태 관리 라이브러리의 필요성에 대한 내용은 굳이 정리 하지 않고, Redux의 구성요소와 Flow, 사용 패턴을 위주로 정리한다.다만, ContextAPI라는 동일한 역할을 수행할 수 있는 내장 기능이 있음에도 불구하고 Redux라는 상태 관리 라이브러리를 별도로 사용하는 이유에 대해선 한번 정리하고자 한다. Index0. ContextAPI 대신 Redux가 필요한 이유1. Redux의 4가지 구성 요소2. DataFlow3. Middleware 0. ContextAPI 대신 Redux가 필요한 이유- 규모가 크지 않고 단순한 어플리케이션의 경우 ContextAPI로 전역 상태 관리를 개발 가능하긴 함.- 상태 관리에 대한 구조화되고 예측가능한 코딩이 가능 (action, s..

1. input Event- 사용자가 값을 수정할 때마다(되자마자) 이벤트 발생- 키보드가 아닌 다른 수단을 사용하여 값을 변경할 때도 발생함-  ⇦, ⇨ 키와 같이 값을 변경시키지 않는 키보드 입력에는 이벤트 발생하지 않음- event.preventDefault()를 사용해도 아무런 효과가 없음 2. change Event- 기본적으로는 요소의 변경이 끝날 때 발생하지만,  input text 에서는 포커스를 잃을 때 이벤트가 발생- select, input checkbox/radio는 선택값이 변경된 직후에 이벤트가 발생함 참고 https://ko.javascript.info/events-change-input

목차 1. 번들러 2. Webpack 3. Rollup 4. Esbuild 5. Vite 간단 정리: 기존 브라우저에 모듈 기능이 없었던 시절을 위해 존재하는 번들링 과정 때문에, 개발과정에서 개발서버 실행 및 수정 코드 반영이 비효율적으로 느리다. 현재 네이티브 모듈 기능을 지원 하게된 모던 브라우저에 맞춰 개발서버 실행 시 번들링없이 빠르게 작업할 수 있도록 개발자 경험을 향상 시키고자 Vite가 등장했다. 1. 번들러 - 배경: ES Module(ES6 import) 미지원 -> 웹서비스 규모 커짐에 따라 코드 방대해짐 -> 분리(전역객체를 사용) -> 모듈 시스템 필요! - 기본 역할: 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할 - 추가적인 역할: ..

1. Intro 어댑터란? 가장 가까이 볼 수 있는 어댑터의 예 - 충전기 타입이 micro usb-b인데 스마트폰의 usb-c라면, 충전기에 usb-c타입으로 전환하기 위한 어댑터를 끼워주어야 한다. 2. 어댑터 패턴 - 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해준다. - 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 사용하기 위해 사용하는 패턴 - 이미 존재하는 타입/인터페이스/구조에 다른 인터페이스에 적응 시켜주는 역할을 하는 adapter를 사용한다. - 다른 추상/인터페이스 유형의 인스턴스를 생성자에서 받는다. 어댑터가 그의 메서드들에 대한 호출을 수신하면,..

개발자 경험 개선이라는 목표를 가지고 출시된 웹프론트엔드 빌드 툴 esbuild, Vite에 대해 정리해본다. 개발자가 로컬에서 개발서버를 실행할 때, 기존에 사용하는 Webpack, Rollup, Parcel 같은 툴들은 개발자가 작성한 소스코드와 node_modules 폴더의 전체 코드 베이스를 번들로 묶고, 빌드 프로세스(Babel, Typescript 트랜스파일링 또는 PostCSS)를 통해 번들된 코드를 브라우저에 제공한다. 수정할 때마다 매번 새롭게 빌드 되야했다. 이 모든 작업은 캐싱과 최적화를 하더라도 개발서버를 느리게 만들 수 있다. 번들러? 어플리케이션에서 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할을 한다. 자바스크립트에도 모듈 개념이 등..