kohigowild

호이스팅(Hoisting)은 자바스크립트에서 변수 및 함수 선언이 해당 스코프의 최상위로 끌어올려지는 것을 의미한다. 즉, 변수나 함수가 선언되기 전에도 참조할 수 있다. 호이스팅은 코드의 구조를 파악하기 어렵게 만들 수 있으므로 코드의 가독성과 유지보수성을 해칠 수 있다. 예를 들어 다음과 같은 코드가 있을 때, 실제로는 아래와 같이 해석된다. console.log(x); var x = 10; -- var x; // 변수 x가 호이스팅되어 선언됨 console.log(x); // x는 undefined x = 10; // 할당이 이루어짐 var와 function은 호이스팅이 발생하는데, 변수나 함수가 선언되기 전에도 참조할 수 있게 된다. 이때 변수는 undefined로 초기화되고, 함수는 전체가 끌어..

Problem 타입스크립트 환경에서 env 변수 사용 시 import.meta.env에서 타입 오류 발생 Property 'env' does not exist on type 'ImportMeta'. Reference https://github.com/vitejs/vite/issues/9539 Property 'env' does not exist on type 'ImportMeta' in 3.0.0 · Issue #9539 · vitejs/vite Describe the bug In vite 3.0.0 it still exists, even if it was previously closed. Can be recreated using react-ts template. Try to use env variabl..

string, number, boolean string "Hello, World!" number 29, Infinity, NaN boolean true, false object object 속성(Property) 키(Key), 값(Value) interface PersonType { name: string; age: number; isStudent: boolean; studentNum?: number; } const person:PersonType = { name: "박주경", age: 27, isStudent: true } const getPersonAge = (person: PersonType) => { console.log(person.age) } array, tuple, enum array str..

👽 Observer Pattern 옵저버 패턴(Observer Pattern)은 어떤 이벤트가 일어나는 것을 감시하는 패턴을 의미한다. 함수로 직접 요청한 적 없지만 시스템에 의해 발생하는 동작들을 이벤트라 하는데, 이러한 이벤트들을 감시하여 이벤트가 발생할 때마다 미리 정의해 둔 어떠한 동작을 즉각 수행하게 해 주는 프로그래밍 패턴을 옵저버 패턴이라 한다. 예시로 A 버튼이 클릭될 때마다 화면에 '안녕'을 출력하는 동작을 들 수 있다. 옵저버 패턴을 활용하면 다른 객체의 상태 변화를 별도의 함수 호출 없이 즉각적으로 알 수 있기 때문에, 이벤트에 대한 처리를 자주 해야 하는 프로그램이라면 매우 효율적인 프로그램을 작성할 수 있다. Model의 상태가 변경되면 이를 구독하고 있는 View의 렌더링 함수(..

👽 컴포넌트란? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 웹 컴포넌트를 이용하여 코드를 작성하면 Vue나 React와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. 👽 바닐라 JS로 웹 컴포넌트 구현 index.html src > app.js import Items from "./components/Items.js"; class App { constructor() { const $app = document.querySelector("#app"); new Items($app); } } new App(); src > component > Item.js import Comp..

🛰️ Synchronous VS Asynchronous Synchronous(동기) 요청 시 시간이 얼마가 걸리든 요청한 자리에서 그 결과가 주어진다. 소요 시간과 관계없이 결과가 나올 때까지 기다렸다가 그 다음을 실행한다. 설계가 매우 간단하고 직관적이다. Asynchronous(비동기) 결과가 주어지는 소요 시간 동안 다른 작업이 가능하다. 동기 방식보다 설계가 복잡하지만 자원을 효율적으로 쓸 수 있다. fetch API는 비동기 방식이다. 🛰️ fetch API fetch API는 Promise를 기반으로 동작한다. let promise = fetch(url, [options]) url ⇒ 접근하고자 하는 URL options ⇒ 선택 매개변수, method나 header 등을 지정할 수 있음 op..

💡 DOM (Document Object Model) XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 자바스크립트에서 HTML을 접근하기 위해 DOM 사용 🛰️ DOM 브라우저의 렌더링 엔진은 텍스트 파일로 생성된 웹 문서를 브라우저 화면에 보이도록 하기 위해서 이 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올리는데 이를 DOM이라 한다. DOM은 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의한다. => 문서 전체는 document 객체, 이미지는 image 객체, 이미지 속성(Attribute)인 alt, src는 image 객체의 속성(Proper..

🧐 모듈이란? 프로그래밍에서 모듈이란 프로그램을 구성하는 구성 요소의 일부이다. 프로그램의 크기가 커지면 확장성과 유지 보수 측면에서 파일을 여러 개로 분리하는 시점이 오는데, 이때 분리된 파일 각각을 ‘모듈’ 이라 부르고, 보통 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 프로그램을 잘게 쪼개어 모듈화하는 이유는 다음과 같다. 프로그램의 효율적인 관리 및 성능 향상 전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소 소프트웨어 디버깅, 테스트, 통합, 수정 시 용이 기능의 분리가 가능하고 인터페이스가 단순 오류의 파급 효과를 최소화 모듈 재사용으로 개발과 유지 보수 용이 🧐 모듈의 종류 자바스크립트는 CommonJS, AMD, UMD, ESM과 같은 모듈 ..