용어정리 TTV(Time To View): 유저가 사이트를 볼 수 있는 타이밍 TTI(Time To Interact): 유저가 인터렉트 할 수 있는 타이밍 SEO(Search Engine Optimization): 검색 엔진 최적화. → 홈페이지가 검색엔진에 더 잘 노출되어 더 많은 유저가 접속할 수 있도록 합니다. 렌더링 방식 CSR: Client Side Rendering 동작 방식 서버에서 브라우저로 응답(빈 HTML(만 있음) + 연결된 JS 링크(리액트 코드))을 보냅니다. 브라우저에서 (연결된)JS를 다운로드 받습니다. 브라우저가 JS(리액트) 코드를 실행합니다. 페이지가 보이고 상호작용 할 수 있습니다.(TTI === TTV) 특징 클라이언트에서 전적으로 웹 렌더링(라우팅, 연산 등)을 책임..

이벤트 단계(Event Phase) 표준 DOM 이벤트 흐름은 3가지 단계가 있습니다. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계 타겟 단계 - 이벤트가 실제 타겟 요소에 전달되는 단계 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계 캡쳐링 단계 브라우저에서 이벤트가 발생하면, 가장 먼저 이벤트 발생 지점을 찾습니다. 이벤트가 하위 요소(element)로 전파되는 단계입니다. window → document → html → body → … 순으로 해당 자녀까지 내려갑니다. 이 과정 중 만나는 모든 자녀의 ‘캡쳐링’ 이벤트 리스너를 실행합니다. 타겟 단계 이벤트가 실제 타깃 요소에 전달되는 단계입니다. 버블링 단계 이벤트 발생 지점에서 DOM Tree를 따라 다시 window까지 올라갑니다. ..

함수형 프로그래밍을 배워야 하는 이유 자바스크립트의 탄생 javascript를 창시한 Brendan Erich는 언어를 개발할 당시 유행하던 객체지향에 한계를 느끼고 함수형 프로그래밍의 형태로 언어를 만들고 싶어 했습니다. 하지만 Netscape의 그의 상사는 당시 개발자들이 제일 많이 쓰던 Java와 같은 문법 으로 만들기 요구했기 때문에 결국 둘의 혼종의 형태로 세상에 나오게 되었습니다. ⇒ 요약: javascript 언어는 함수형 프로그래밍의 개념과 동시에 객체지향의 개념도 가진 언어입니다. *그래서 multi-paradigm language라고도 합니다. 따라서, javascript 자체를 잘 하기 위해서는 함수형과 객체지향을 둘 다 잘 알아야 합니다. Scope 관점에서 이해하는 프로그래밍 패러..

번들러(Bundler)란? 대표적으로 Webpack, Rollup, Parcel 등이 있습니다. React 프로젝트 생성을 위해 CRA(Create-React-App)를 사용하면 Webpack과 Babel같은 설정들이 세팅되어져 있습니다. 웹 애플리케이션을 구성하는 여러개의 자원들을 하나로 병합, 압축해주는(번들링) 도구입니다. 번들러가 필요한 이유 초기 웹서비스는 규모가 크지 않아 이를 구성하는 파일(HTML, CSS, JS등)의 크기도 지금에 비해 작아 번들러 없이도 서비스를 유지 하는데 무리가 없었습니다. 하지만 웹서비스의 복잡도가 증가하면서 수십 수백개의 JS 파일을 다루면서 문제들이 발생했습니다. 문제들은 다음과 같습니다. 중복된 이름으로 인한 에러 자바스크립트의 변수는 기본적으로 전역 범위를 ..

자바스크립트에서의 동기 처리 자바스크립트 코드는 한번에 한줄 씩 차례로, 동기식으로 처리됩니다(콜스택에서 순차적으로 실행). 한 작업이 실행되는 동안 다른 작업은 멈춘 상태로 차례를 기다린다는 것입니다. console.log(1); console.log(2); console.log(3); // 출력 순서: 1 -> 2 -> 3 // 코드가 적힌 순서(위에서 아래)대로 찍힙니다. 자바스크립트에서의 비동기 처리 특정 코드(setTimeout, addEventListener, ajax)들은 기다리지 않고 바로 다음 코드를 실행합니다. 다음 예시에서는 1을 출력한 후 1초 뒤에 2를 출력해 보겠습니다. console.log(1); setTimeout(() => {}, 1000); console.log(2); 1..

프로토타입이란? 자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반의 언어에 있는 상속과 다르게 객체 하나를 원형(prototype)으로 삼아 이를 복제하는 방식으로 상속을 흉내냅니다. *복제한 객체를 다시 복제해서 사용할 수 있습니다. 이처럼, 상속되는 정보를 제공하는 객체를 ‘프로토타입’이라고 합니다. 프로토타입의 사용 어떤 생성자 함수를 new 키워드와 함께 호출하면 생성자(부모)에서 정의된 내용을 바탕으로 새로운 인스턴스(자녀)가 생성됩니다. function parent(name, age){ this._name = name; this._age = age; } var child = new parent('Kim', 15); // parent에서 정의된 내용을 child가 그대로 쓸 수 있음 con..

자바스크립트 자료형은 크게 2개로 분류(Primitive / Reference data type)됩니다. 💡 원시(Primitive) 타입: 데이터의 실제 값 할당 (String, Number …) 💡 참조(Reference) 타입: 데이터의 위치 값 할당 (Array, Object …) 원시(Primitive) 타입 변수에 할당이 될 때 메모리 상에 고정된 크기로 저장이 되고 해당 변수가 원시 데이터 값을 보관합니다. 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접 접근합니다. *변수에 새 값이 할당이 될 경우, 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경합니다. 종류: boolean, number, string, null, undefined 각 변수 간에 원시 타입 데이터를 복사..

얕은 복사 (Shallow copy)주소 값을 복사하기 때문에 참조하고 있는 실제 값이 같음 깊은 복사 (Deep copy)실제 값을 독립적인 새로운 메모리 공간에 복사, 참조를 공유하지 않음 참조할당 얕은 복사에 해당합니다. const human1 = { arm: 2, leg: 2, }, //참조 할당 const human2 = human1; human1.arm = 3; console.log(human1.arm); // 3 // human2의 arm 값을 변경하지 않았음에도 변했다. console.log(human2.arm); // 3 human2에 human1을 할당할 때, 주소 값이 할당되는 것이므로, 해당 주소의 객체값을 수정하면 동일하게 변경 됩니다. *human2의 값을 변경할 때에도 huma..

모듈이란 프로그램을 구성하는 구성요소의 일부를 말합니다. *큰 애플리케이션을 구성하는 코드로 이루어진 작은 파일들 각각이라고 보면 됩니다. 모듈의 장점은 다음과 같습니다. 유지보수성 : 모듈화가 잘 된 기능들은 의존성이 낮아, 기능 개선 및 수정이 용이합니다. 네임스페이스화 : 네임 스페이스가 모듈 단위로 나뉘어져 변수나 함수명이 겹쳐서 발생하는 문제를 해결할 수 있습니다. *네임스페이스: 이름공간으로, 여기서 같은 변수명을 가지면 같은 개체를 가리킵니다. 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다. CommonJS(CJS) 서버사이드 및 데스크탑 어플리케이션에서 JS를 지원하기 위해서 탄생했습니다. *즉, Node.js 환경을 위해 만들어졌습니다. 모듈을 ..

일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다. 다시 말해, 다음과 같은 조건을 충족하면 일급객체입니다. 변수에 할당할 수 있다. 다른 함수를 인자로 전달받는다. 다른 함수의 결과로서 리턴될 수 있다. 자바스크립트 함수는 일급객체 일급객체의 조건을 자바스크립트 함수에 대입해 본다면, 1. 변수에 할당할 수 있다. const addTwice = function (num) { return num + num; } 2. 다른 함수를 인자로 전달받는다. function addTwice(num) { return num + num; } function calculator(func, number) { return func(number) } calculator(addTwice,..