영벨롭 개발 일지

📌 들어가며...오늘 포스팅은 자바스크립트의 실행 컨텍스트(Execution Context) 입니다.대체 실행 컨텍스트는 무엇이고, 어떤 역할을 하며 어떠한 것들을 담고 있는지 살펴보겠습니다.🤔 자바스크립트의 실행 컨텍스트(Execution Context)실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 본격적으로 학습하기에 앞서 요약 내용부터 보고 들어가겠습니다.참고로 실행 컨텍스트는 공부할 내용이 엄청나기에 이번 포스팅은 상당히 길어질 것으로 보입니다...하지만 당장은 매우 어렵고 이해하기 힘드실지라도... 함께 으쌰으쌰! 반드시 할 수 있습니다!(이 포스팅은 '모던 자바스크립트 Deep Dive' 교재를 기반으로 작성되었습니다) 📌 ..

📌 들어가며...리액트는 가상돔(Virtual DOM)을 통해 효율적이고 빠르게 우리가 원하는 페이지를 브라우저에 그려줄 수 있습니다. 리액트를 사용하는 개발자시라면 Virtual DOM은 무조건 학습하셔야 합니다! (저 포함...)이번 포스팅에서는 DOM이 무엇인지, Virtual DOM이 무엇인지 그리고 그 작동원리에 대해 알아보겠습니다!📌 DOM (Document Object Model)우선 Document 란 각각의 HTML 요소(Elements)들을 담고 있는 웹페이지입니다. 브라우저는 이 Document를 분석하여 우리에게 웹 페이지를 띄워주게 됩니다.  DOM은 이러한 HTML 요소들을 Tree 형태로 표현한 것으로, 각 요소에 상응하는 Node를 가집니다. DOM은 HT..

📌 들어가며... 이 글을 작성하는 시점(2024.04.21)인 지금까지 나는 다양한 프로젝트에서 프론트엔드 개발자로 참여하며, React를 많이 사용해왔다. 하지만 "왜 React 를 사용했는가?"에 대한 질문을 받는다면, 단지 많은 기업에서 사용하는 기술 또는 프론트엔드 개발자라면 당연히 알아야 할 기술이라는 답변밖에 떠오르지 않는다. 적어도 왜 이 기술을 사용하며 어떠한 장단점이 있는지 분석해 볼 필요가 있다고 생각했다. 따라서! 이 글을 통해 왜 리액트를 사용하며, 리액트의 등장 배경, 장단점 등에 정리하고자 한다! 📌 React란? 리액트(React)는 페이스북(현재 Meta)에서 만든 오픈 소스 JavaScript 라이브러리입니다. 리액트는 사용자 인터페이스(UI) 개발에 초점을 맞춘 라이브러..

📌 Vue 란, Vue 는 사용자 인터페이스 개발, 즉 프론트엔드 개발을 위한 오픈소스 자바스크립트 프레임워크입니다. ✅ Vue 를 사용하는 이유 재사용을 통해서 개발 기간을 단축시키고, 양질의 코드를 생산할 수 있습니다. 안정적이고 체계적인 운영을 지원합니다. 컴포넌트 재사용성과 상태관리가 우수합니다. 직관적이고 배우기 쉽습니다. 국내 높은 점유율을 차지하고 있습니다. 리액트와 비교하여 성능이 대등합니다. ✅ Vue 의 특징 SPA(Single Page Application)을 구축하는 데 사용됩니다. MVVM(Model-View-ViewModel) 패턴에서 ViewModel에 해당합니다. Angular 의 양방향 데이터 바인딩의 장점을 수용했습니다. React 의 가상돔(Virtual DOM)의 장점..

📌 typeof 연산자 우리는 이미 자바스크립트에서 변수의 타입을 얻기 위해 typeof 연산자를 한 번 쯤은 사용해 봤을 것 입니다. const num: number = 1; const str: string = "Hello World"; console.log(typeof num); // number console.log(typeof str); // string 타입스크립트에서도 typeof 연산자가 사용되는데, 다음 3가지 상황에서 사용될 수 있습니다. 1. 객체 데이터를 객체 타입으로 변환 2. 함수를 타입으로 변환 3. 클래스를 타입으로 변환 ✅ 객체 데이터를 객체 타입으로 변환 객체 데이터에 대해 typeof 연산자를 사용하면, 해당 객체를 구성하는 타입 구조를 독립된 타입으로 가져와 사용할 수 ..

📌 타입 단언 Type Assertions 타입 단언은 타입스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우, 더 이상 추론하지 않도록 지시하는 것입니다. 즉, 개발자가 타입스크립트에게 '이 타입이 맞아!'라고 알려주는 것입니다. 런타임에는 영향을 미치지 않고, 오직 컴파일 과정에서 사용됩니다. 타입 단언은 강제 형변환과는 다른 개념입니다. 단지 컴파일러에게 타입을 주장할 뿐, 실제로 데이터 자료를 변환시키는 것은 아닙니다. 타입 단언을 하는 방법에는 as 문법과 꺽쇠문법이 있습니다. 다만, 꺽쇠 문법은 태그 엘리멘트와 헷갈릴 수 있어, TSX 파일에서는 사용이 불가능합니다. let val: any = 1.23; (val as number).toFixed(2); // as 문법 (va..