Javascript

Hoisting (호이스팅) 이란?

Hoisting 이란? 공사장이나 엘리베이터 같은 곳에 사용되는 리프트 휠 등을 이용해서 물건을 들어올리거나 내리는 장치를 Hoist 라고 한다. 이 호이스트 장치를 사용하는 것 처럼 Hoisiting 이란 변수 선언과 함수 선언이 그 범위에 따라 선언된 위치에 상관없이 항상 최상위로 끌어올려지는 것 처럼 동작하는 것을 말한다. 대표적으로 var 키워드로 선언된 변수는 호이스팅이 발생한다. console.log(a); // undefined var a = 1; let, const 키워드로 선언된 변수는 호이스팅이 발생하지 않는 것처럼 보인다. console.log(a); // ReferenceError: a is not defined let a = 1; 발생하지 않는 것 처럼 보이는 이유는 TDZ 라는 ..

[ Redux ] Redux 란 무엇인가?

Redux 란? Redux 란 JavaScript 상태 관리 라이브러리 중 하나입니다. (Flux 아키텍처를 구현한 라이브러리) Redux = React + Flux Pattern Flux Pattern 이란? Flux Pattern 은 MVC 패턴의 단점을 보완하기 위해 Facebook 에서 만든 아키텍처입니다. MVC 패턴은 Model 에서 데이터가 정의되고, View 에서 데이터를 보여주고, Controller 에서 데이터를 조작합니다. 그런데 만약 어플리케이션이 규모가 커져서 이런 구조를 사용하게 되면, 데이터의 흐름이 복잡해지고, 데이터의 흐름을 추적하기 어려워집니다. 이러한 문제를 해결하기 위해 Flux Pattern 을 사용합니다. Flux Pattern 의 구조 Action : Action..

[ Javascript ] 객체 지향 프로그래밍이란?

객체지향이란? 프로그래밍 패러다임의 하나로, 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 자바스크립트는 class 문이 포함되지 않은, prototype 기반의 객체지향 프로그래밍 언어이다. 객체지향 프로그래밍의 4가지 특징 (OOP의 4대 특징) 캡슐화 (Encapsulation) 객체의 속성과 기능을 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉하는 것 캡슐 알약에 비유할 수 있다. 알약의 내용물을 보려면 알약을 깨야 한다. 즉, 알약을 깨지 않으면 알약의 내용물을 알 수 없다. 이처럼 캡슐화는 객체의 속성과 기능을 하나로 묶고, 그 중 일부를 외부에 감추어 은닉하는 것이다. 추상화 (Abstraction) 객..

[ JavaScript ] 크로스 브라우징

크로스 브라우징 크로스 브라우징이란, 다양한 브라우저에서 동일한 사용자 경험을 제공하는 것을 의미합니다. 글로벌 시장 조사 기관인 StatCounter 에 따르면, 2022년 12월 기준으로 전 세계에서 사용되는 브라우저는 다음과 같습니다. Chrome : 64.68% Safari : 18.29% Edge : 4.23% Samsung Internet : 3.05% Firefox : 3.01% Opera : 2.25% 대부분의 브라우저들이 Chrome 기반인 크로미움 엔진을 사용하고 있습니다. (크로미움 엔진을 사용하는 브라우저들은 크롬, 엣지, 오페라, 삼성 인터넷 등이 있습니다.) 크로미움 엔진을 사용하는 브라우저들은 크로스 브라우징을 고려하지 않아도, 대부분의 브라우저에서 동일한 사용자 경험을 제공할..

[ JavaScript ] Bundle 사이즈 줄이기

Bundle 사이즈 줄이기 React, Vue, Angular 등의 프레임워크를 사용하면, 번들 사이즈가 커질 수 있습니다. 이를 줄이지 않으면 사용자가 느끼는 페이지 로딩 시간이 길어져 사용자 경험이 떨어질 수 있습니다. 이를 해결하기 위해, 번들 사이즈를 줄이는 방법을 알아봅니다. Bundle 사이즈를 줄이는 방법 소스 코드 최소화 하기 : minify, uglify minify : 압축하기 불필요한 공백, 줄바꿈, 주석 등을 제거합니다. uglify : 난독화하기 변수명, 함수명 등을 알아보기 어렵게 변경합니다. 이름을 단순화해서 불필요한 데이터를 제거하면서, 외부인이 소스 코드를 읽기 어렵게 만들어 기초적 보안을 제공합니다. 코드 스플리팅 (Code Splitting) React 에서는 React..

SSR, CSR, SSG

SSR, CSR, SSG SSR, CSR, SSG 는 모두 렌더링 방식을 의미합니다. Server Side Rendering (SSR) SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식입니다. SSR 을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있습니다. 서버를 통해 페이지를 구성하기 때문에, CSR 보다 페이지를 구성하는 속도는 느리지만, 전체적인 사용자에게 보여주는 콘텐츠의 양이 많아지면, CSR 보다 빠른 속도를 보여줄 수 있습니다. 또 서버에서 첫 페이지를 서버에서 구성하기 때문에, 이미 완성된 페이지를 검색엔진이 수집할 수 있어서 검색 엔진 최적화(SEO)에 유리합니다. 서버 사이드 렌더링 (SSR) 의 장점 SEO..

[ JavaScript ] ESLint, Prettier

ESLint, Prettier ESLint ES 는 EcmaScript 의 약자입니다. ES6 이후로는 ECMAScript 라고 부릅니다. 표준화된 자바스크립트의 버전을 의미합니다. Lint 는 코드를 분석하여 문제점을 찾아내는 도구입니다. ESLint 는 자바스크립트 코드를 분석하여 문제점을 찾아내는 도구입니다. 코딩 컨벤션에 맞지 않는 코드나, 불필요한 코드, 버그의 가능성이 있는 코드를 찾아내는 도구입니다. Airbnb, Standard, Google 등의 코딩 컨벤션을 기본으로 제공합니다. Prettier 원본 스타일을 모두 제거하고, 코드를 일관된 스타일로 정리해주는 도구입니다. 줄바꿈, 들여쓰기, 따옴표 등의 스타일을 일관성 있게 정리해줍니다. ESLint 와 Prettier 를 함께 사용하면..

[ Javascript ] 콜스택과 힙

자바스크립트는 메모리 관리를 위해 콜스택과 힙을 사용합니다. 콜스택 콜스택은 원시타입의 데이터가 저장되는 공간입니다. 실행 컨텍스트를 통해, 변수 식별자, 스코프 체인, this, 코드 실행 순서등을 수행합니다. 힙 참조 타입의 데이터가 저장되는 공간입니다. Reference https://curryyou.tistory.com/276

[ Javascript ] 클래스란 무엇인가?

클래스 (Class) ES6 에서 추가된 문법으로, 클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 합니다. 클래스 선언 클래스는 class 키워드를 사용하여 선언합니다. class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello! My name is ${this.name}`); } } 클래스 사용 클래스는 new 키워드를 사용하여 객체를 생성합니다. const me = new Person("Lee"); me.sayHello(); // Hello! My name is Lee 클래스 표현식 클래스는 변수에 할당하여 사용할 수 있습니다. const Person =..

[ JavaScript ] 자바스크립트 메모리 관리

메모리 관리 자바스크립트는 메모리 관리를 위해 가비지 컬렉션을 사용한다. 가비지 컬렉션은 사용하지 않는 메모리를 자동으로 해제하는 기능이다. 메모리 생명주기 할당 : 변수에 값을 할당하면 메모리에 공간이 할당된다. 사용 : 할당된 메모리 공간을 참조하거나 접근한다. (Read, Write) 해제 : 사용이 끝난 메모리 공간을 해제한다. => 2번째 부분은 모든 언어에서 명시적으로 사용된다. 하지만 1번째와 3번째는 low-level 언어에서는 명시적으로 사용되지만, high-level 언어에서는 암묵적으로 사용된다. 자바스크립트의 메모리 관리 값 초기화 자바스크립트는 값을 선언할 때, 자동으로 메모리를 할당한다. // 정수, 문자열을 담기 위한 메모리 할당 var n = 123; var s = "azer..