❓실행 컨텍스트란 실행 컨텍스트는 자바스크립트가 동작하기위해 필요한 환경으로, 모든 코드는 실행 컨텍스트를 통해서 실행되고 관리된다. 지난 포스팅에서 알아보았던 스코프, this 또한 모두 실행 컨텍스트 내에서 관리되고 코드의 실행 순서는 실행 컨텍스트 스택에 의해서 관리된다. 1️⃣ 소스코드의 평가와 실행 실행 컨텍스트에 대해서 알아보기 전에 소스코드가 동작하는 과정에 대해서 알아보자. 모든 소스코드는 평가와 실행과정으로 나뉜다. 각각 소스코드 평가와 소스코드 실행은 다음과 같은 역할을 담당한다. 🔘 소스코드 평가: 실행 컨텍스트 생성하고 선언문을 먼저 실행하여 변수 또는 함수 식별자를 생성된 실행 컨텍스트가 관리하는 스코프에 등록 🔘 소스코드 실행: 선언문을 제외한 소스코드가 순차적으로 실행. 즉, ..
❓this란 this는 자기 참조 변수를 의미하는 식별자이고, this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키며 해당 프로퍼티 또는 메서드를 참조하는 것이 가능하다. 간단한 예제를 먼저 보자. console.log(this)// window 브라우저 환경에서 위의 코드를 입력하면 this는 전역 객체인 window를 참조한다. 그렇다면 this는 전역객체만을 가리키냐? 그건 아니다. const user = { name: "kim", getName() { return this.name; } } console.log(user.getName())// kim 객체 리터럴에서는 this가 자신이 속한 객체를 바인딩 하는 것을 알 수 있다. function User(name) { this.name..
❓빌트인 객체란 일단 빌트인(built in)의 사전적 정의는 "내장"이다. 그렇다면 빌트인 객체는 내장되어 있는 객체라고 이해할 수 있을텐데, 실제로 빌트인 객체는 자바스크립트에서 기본적으로 제공하는 객체를 의미한다. 그렇다면 빌트인 객체의 종류로는 어떤 것들이 존재할까? 그 이전에 자바스크립트에서의 객체 구분에 대해서 알아보자. 1️⃣ 표준 빌트인 객체: 위에서 설명한 자바스크립트에서 기본적으로 제공하는 객체로 ECMAScript 사양에 정의되어 있는 객체이기 때문에 자바스크립트의 실행환경 즉, 브라우저든 node.js든 상관없이 언제나 사용이 가능하다. 표준 빌트인 객체는 전역 객체의 프로퍼티로 제공된다. 2️⃣ 호스트 객체: 표준 빌트인 객체가 실행환경에 상관없이 제공되는 객체라면 호스트 객체는 ..
❓프로토타입이란 자바스크립트는 원시값을 제외한 거의 모든 것이 객체라는 사실은 들어봤을 것이다. 프로토타입은 자바스크립트에서 객체지향을 구현하는데 중요한 매커니즘으로 객체간의 상속을 위해 사용되는 개념이다. 다음 코드를 살펴보자. function Fruit(num) { this.num = num this.price = function () { return this.num * 500 } } const fruit1 = new Fruit(10) const fruit2 = new Fruit(20) Fruit 생성자 함수를 통해 생성된 인스턴스들은 모두 각각 num과, price라는 프로퍼티를 갖는다. 하지만 살펴보면 각각의 인스턴스가 다른 num을 가지는 것은 문제가 없지만, price 메서드는 각 인스턴스가 ..
❓스코프란 스코프는 사전적 정의로 범위라는 의미를 가진다. 말그대로 스코프는 변수 또는 함수가 유효한 "범위"를 나타낸다. 사실 변수 이름, 함수 이름, 클래스 이름과 같이 모든 식별자는 어디에서 선언되었는 지에 따라 범위가 결정되고 식별자를 참조할 때 어떤 식별자를 참조해야 하는지를 스코프를 통해 정하게 된다. 실제로 우리는 컴퓨터를 사용하면서 스코프에 대해서 간접적으로 경험하고 있었다고 해도 과언이 아니다. 특정 파일의 이름을 "a"라고 했을 때 같은 폴더 내에서 두개의 파일 이름이 "a"일 수는 없지만, 다른 폴더내에서는 각각의 파일이 "a"라는 이름을 가질 수 있다. 1️⃣ 스코프의 종류 프로그래밍 공부를 해본 사람이라면 다들 전역 변수와 지역 변수에 대해서 들어본 적이 있을 것이다. 이 때 변수..
❓호이스팅이란 hoisting을 번역해보면 '끌어올리다'라는 뜻을 가진다. 기본적으로 코드는 위에서 아래로 순차적으로 실행되지만, 사전적 정의와 마찬가지로 자바스크립트에서 호이스팅은 모든 선언문을 해당 스코프의 최상단으로 끌어올리는 동작을 말한다. 실제로 코드가 끌어올려지는 것은 아니고 자바스크립트 엔진이 런타임 이전에 모든 선언들을 렉시컬 환경이라고 하는 자바스크립트 내부 데이터 구조에 저장하는 것으로 선언문이 끌어 올려진 것처럼 동작하는 것이기 때문에 오해하는 일이 없길 바란다. 변수 호이스팅 변수는 var, let, const 키워드를 사용하여 선언을 진행한다. 이 때 var과 let, const와의 호이스팅에는 차이가 존재하기 때문에 구분해서 알아보도록 하자. 1️⃣ var var과 let, co..
이번 포스팅은 진행중인 프로젝트의 핵심 기능들의 개발이 끝나면서, 프로젝트를 출시하게 됐을 경우 많은 사용자들이 알 수 있게 검색 엔진에 노출될 수 있도록 하는 과정은 필수적이기 때문에, 해당 프로젝트의 SEO를 최적화하는 과정에 대해서 소개하려고 한다. SEO란? 해당 웹사이트가 구글, 네이버, 다음과 같은 검색 엔진에서 높은 순위를 차지하여 잘 노출될 수 있도록 최적화 하는 프로세스 검색 엔진은 사용자의 특정 키워드 검색을 결과로 반환하는데, 이 때, 웹 사이트를 검색 엔진에게 더 잘 이해시키고 노출시키는 방법 head 태그 일반적으로 html 파일 내의 ); } next/head 서버 측에서 실행되는 _document.tsx 파일에서는 애플리케이션의 공통적인 html 구조를 정의하면서 next/do..
폴더 구조 수정과 리팩토링이 조금 남아있지만 이제 네컷지도 프로젝트가 막바지로 향해가고 있다. 기본적인 핵심 기능들은 구현이 완료되었고, 이번에는 FAQ 페이지를 구현하면서 문의할 사항들을 프로젝트 측에 유저가 전달할 수 있도록 이메일 링크를 걸어주는 작업을 하면서 몇가지 헷갈렸던 사항들을 정리하고자 한다. Nextjs의 Link 컴포넌트의 내용과 함께! Link 컴포넌트 일단 Nextjs의 Link 컴포넌트에 대해서 살펴보자. Nextjs는 pages 폴더내에서 애플리케이션의 라우팅이 구성되고, Nextjs의 Link 컴포넌트는 페이지 전환을 위한 컴포넌트로 클라이언트 측에서 페이지를 전환하기 때문에, 새로고침이 일어나지 않는다. Link 컴포넌트의 대표적인 props는 다음과 같다. Link 컴포넌트..
