전체 글

[ 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..