공부하자

3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. Next.js 세팅 가이드 👉 https://nextjs.org/docs/getting-started Docs | Next.js Using App Router Features available in /app nextjs.org Next.js Github 레포지토리 👉 https://github.com/vercel/next.js/ GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel/ne..

호이스팅 호이스팅은 코드가 실행되기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것을 말한다. 변수 호이스팅 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않은 것처럼 동작한다. var 키워드로 선언한 변수는 선언문 이전에 참조를 하면 undefined가 뜨지만, let 키워드로 선언한 변수는 선언문 이전에 참조를 하면 ReferenceError가 뜬다. 마치 호이스팅이 발생하지 않은 것처럼 동작한다. 하지만 그렇지않다. 이를 설명하기 위해 간단히 변수가 생성되는 3단계를 보자. 선언 단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 초기화..

25.8 상속에 의한 클래스 확장 [ 클래스 상속과 생성자 함수 상속 ] 상속에 의한 클래스 확장은 지금까지 살펴본 프로토타입 기반 상속과는 다른 개념이다. 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. [ extends 키워드 ] 상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의한다. // 수퍼(베이스/부모) 클래스 class Base {} // 서브(파생/자식) 클래스 class Derived extends Base {} extends 키워드의 역할은 수퍼클래스와 서브클래스 간의 상속 관계를 설정하는 것이다. 클래스도 프로토타입을 통..

모듈패턴 자바스크립트는 원래 모듈이라는 개념이 없고 하나의 파일에 모든 코드를 담았다. 하지만 그러기에는 코드 양이 방대해지기도 하고, 가독성도 떨어지고 무엇보다 웹 애플리케이션이 예전보다 훨씬 복잡하고 고도화되어져서 모듈패턴이 생기게 된 것이다. 모듈 패턴은 전체 애플리케이션의 일부를 독립된 코드로 분리한 것을 말하는데, 이 방식도 한계가 있다. 프로그램이 커질수록 세분화된 파일이 많아지므로 각 변수들의 스코프나 호출 시 발생하는 네트워크 비용에 더 신경써야 하는 것이다. 모듈의 문제점을 보완하기 위해 나온것이 번들링이다. 기능별로 모듈화된 파일을 다시 하나로 묶어주는 것이다. Webpack 번들링 기능이 있는 번들러에는 여러 가지가 있지만 대표적으로 웹팩이 있다. 가장 많이 사용되는 번들러이기도 하고..

브라우저의 동작 원리는 면접에서 많이 나오는 질문이기도 하고 반드시 알아야 할 기본 개념 중 하나이기도 하다. 딥다이브 책에 자세히 서술되어 있어서 공부할 겸 정리해보았는데, 브라우저의 동작 원리를 파악하고 나니 index.html의 코드 로직에 대해서 잘 이해할 수 있었다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다. 이를 위해 브라우저는 서버로부터 HTML, CSS Javascript, 이미지 파일 등을 응답받는다. HTML, CSS HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. [ HTML 파싱과 DOM 생성 ] 브라우저의 요..

25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체 지향 프로그래밍 언어다. 하지만 기존 클래스 기반 언어에 익숙한 프로그래머들에게는 프로토타입 기반 방식에 혼란을 느끼고 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. 그래서 ES6부터 클래스가 도입되었는데, 기존의 프로토타입 기반 객체지향 모델을 없애고 클래스 기반 객체지향을 제공하는게 아니라 클래스 기반 객체 지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수..

React.js나 Next.js로 프로젝트를 시작하면 한번쯤은 고려해보게되는 CSR과 SSR. SSG와 함게 대표적인 웹 페이지를 렌더링하는 방식인데, 둘의 차이점과 추가적으로 알아두면 좋을 정보들을 정리해보았다. 웹 페이지를 렌더링하는 방식 초창기때만 하더라도 모든 웹페이지가 정적 페이지였다. 그래서 페이지를 이동하거나 어떠한 변화가 보일때마다 서버로부터 새로운 HTML을 받아 리렌더링을 해야했다. 매번 전체 페이지를 재생성해야 했기때문에 당연히 부담이 가고, 사용자 경험에 있어서도 좋지 못했다. 그래서 탄생하게 된 것이 Ajax(Asynchronous Javascript and XML)이다. Ajax는 자바스크립트를 통해서 브라우저와 서버가 비동기로 데이터를 주고받을 수 있게 해주었다. 그래서 매번 ..

위의 오류는 git pull을 할 때 만난 오류이다. 에러를 잘 살펴보면 파밀명에 :(콜론)이 들어있는 것을 알 수 있다. Window 운영체제의 파일 시스템(NTFS)과 MAC OS(MAC OS 표준 파일시스템)에서 관리하는 파일의 특징이 다르다보니 파일명의 제한도 달라서 생기는 오류이다. 여러 사람들이 한 브랜치에 코드를 올리다보니 MAC OS를 사용하는 분이 맥에서는 되지만 윈도우에서는 안되는 문자를 파일명에 사용을 하셨고, Window를 사용하는 내 컴퓨터에서는 쓸 수 없는 파일명이라 git pull을 할 때 오류가 발생했다. 난 간단하게 저 파일명을 쓰신분께 :를 다른 문자로 변경해달라고 요청드렸다. 쉽게 해결 완료..!! 윈도우에서 파일명으로 쓸 수 없는 문자는 다음과 같다.