![]()
https://codesmoothie.tistory.com/27 지난번 포스팅에서 자바스크립트의 엔진과 런타임에 대해서 알아보았다. 이번 포스팅에서는 자바스크립트의 실행 컨텍스트와 콜 스택이 어떻게 동작하는지 살펴보자. 실행(Execution) 컨텍스트(Contexts)란 무엇인가? 이제 막 컴파일링 끝난 기계 코드가 있다고 가정해보자. (컴파일에 대한 개념은 지난 포스팅 참조) 그 직후 코드는 실행(Execution)할 수 있는 준비를 마치게 되며, 상위 레벨 코드(top-level code)를 위한 Global execution context를 생성한다. 여기서 상위 레벨 코드란 어떠한 함수에도 들어가지 않는 코드를 의미한다. 다시 말해, 자바스크립트 엔진이 코드를 실행할 때 처음에는 함수 밖에 있는..
![]()
https://codesmoothie.tistory.com/26 [Javascript] 자바스크립트란 어떤 언어인가? 자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하 codesmoothie.tistory.com 지난 블로그에서 자바스크립트란 어떤 언어인지 전체적으로 알아보았다. 그렇다면 자바스크립트 엔진이란 무엇일까? 자바스크립트 엔진(Engine) 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램이다. 모든 브라우저 자체에 자바스크립트 엔진이 존재한다. 가장 잘 알려진 ..
![]()
자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하다. 조금 더 자세하게 정의하자면 아래와 같다. Javascript is a high-level, prototype-based, object-oriented, multi-paradigm, interpreted or just-in-time compiled, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non..
![]()
NextJS vs 순수 React 페이지 소스코드 비교 NextJS 14 프로젝트를 생성하고 'npm run dev'로 실행해보자. 그 후 페이지 소스를 확인해보면 아래의 스크린샷과 같이 실제 소스 콘텐츠를 볼 수 있다. 이는 화면에 표시는 정보가 그대로 NextJS에 나타난 다는 것이다. 하지만, 순수 React 앱에서는 이렇게 나오지 않는다. CRA 후 소스코드를 검사해보면 아래와 같이 빈 페이지와 스크립트만 나오며 실제 콘텐츠를 나타나지 않는다. 이러한 차이점이 발생하는 이유를 알기 위해서는 NextJS와 순수 React간의 랜더링 과정 차이를 이해해야 한다. 순수 React의 랜더링 과정 순수 React는 클라이언트 사이드 랜더링을 활용한다. 즉, React는 클라이언트 사이드 자바스크립트 라이브..
![]()
NextJS 프로젝트 생성 NextJS의 공식 홈페이지에 접속하면 최신 버전의 NextJS를 생성할 수 있는 명령어가 나온다. 터미널에서 프로젝트 생성을 원하는 폴더로 이동 후 'npx create-next-app@latest'를 입력하자. 입력하면 아래의 그림과 같이 Project 이름을 설정하는 화면이 나타난다. 원하는 이름을 설정하자. 프로젝트 설정을 하면 Yes or No로 몇가지 질문이 나타난다. 다음 타입스크립트 설정을 할 것인가 물어본다. (Yes) ESLint를 설정 할 것인가 물어본다. (Yes) Tailwind CSS를 설정할 것인가 물어본다. (NextJS 자체에 다양한 스타일이 존재하여 Tailwind에 전문가가 아니라면 비추천, Yes) 'src/' directory를 사용할 것인..
