본문 바로가기

분류 전체보기141

[Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 [Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 Next.js에 대해 공부해보면서 알게된 내용들을 간단히 정리해 보고자 한다. 먼저 React는 라이브러리이고, Next.js는 프레임워크이다. 학습하면서 차이가 있었던 것은 리액트는 라이브러리 이기 때문에 폴더 구조, 이름, 라우팅, CSS, 하나부터 열까지 모든 선택과 결정을 내가 해야 했었다. 어떻게 보면 하나 하나 전부 고민해야 하고 여러가지를 공부하고 선택해야 하는 번거로움이 있었지만 내가 원하는 대로, 필요할 때 원하는 패키지와 개발 방식으로 자유롭게 개발할 수 있다는 장점이 있었다. Next.js같은 경우는 프레임워크기 때문에 그들이 정해놓은 룰과 규칙이 있었고, 라우팅 방식이나 폴더구조,.. 2024. 3. 15.
CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점 1. 브라우저 렌더링 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업을 말한다. Chorme 같은 경우, 브라우저 엔진 내부에 렌더링 엔진(Blink)과 자바스크립트 엔진(V8) 이 존재한다. 렌더링 엔진에서는 HTML, CSS를 해석하고 비트맵 형식으로 웹 페이지를 화면에 그리는 역할을 하고, 자바스크립트 엔진에서는 자바스크립트 코드를 해석(*인터프리터)하고 실행하여 웹 페이지에 동적인 기능을 추가하고 상호작용 가능하게 한다.(자바스크립트=인터프리터, 타입스크립트=컴파일) *참조 : JavaScript는 인터프리터 언어? #00. JavaScript는 인터프리터.. 2024. 3. 14.
[TypeScript] 타입스크립트란 무엇인가? 타입스크립트 동작 원리에 대하여 TypeScript 란 무엇인가? 1. Javascript의 한계 모든 언어에는 타입 시스템이 존재하며, 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉘어 진다. 각각의 특징은 다음과 같다. 1) 동적 타입 시스템 = JavaScript, Python - 타입을 미리 검사하지 않는다. - 개발자의 의도치 않은 타입 실수로 인해 치명적인 오류가 발생할 가능성이 높다. -> 타입을 미리 검사하지 않기 때문에 타입 오류 시에도 실행이 바로 중단되지 않는다. 때문에 개발자의 타입 실수 시 런타임 중 하루뒤, 한달 뒤 등 예기치 못할 때 갑작스럽게 에러가 발생하는 등 잘 돌아가던 프로그래밍이 갑자기 실행이 안된다던지 치명적인 오류가 발생할 수 있고 디버깅이 힘들다. 2) 정적 타입 시스템 = C, Java -.. 2024. 3. 8.
[Deep Dive] 클로저(Closer)란 무엇인가? 먼저 클로저를 알아보기 전에 이해해야 할 개념은 실행 컨텍스트와 렉시컬 환경이다. 이 개념을 다시 한번 되새기며 클로저에 대해 알아보도록 하자. [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실 junvelee.tistory.com 실행 컨텍스트와 렉시컬 환경을 이해했다면, 클로저라는 것은 무엇일까? 클로저(Closer)와 렉시컬 환경 먼저 기억해야 할 것은 렉시컬 환경의 특징이다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.. 2023. 8. 13.
[Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다. *스코프 : 식별자에 대한 유효범위 코드의 평가와 실행 모든 소스코드는 평가와 실행 과정으로 나누어 처리되고, 실행 컨텍스트를 통해 실행되고 관리된다. - 코드 평가 : 실행 컨텍스트 생성 및 변수, 함수 등의 선언문의 식별자를 실행컨텍스트의 렉시컬 환경(Lexical Environment)의 환경 레코드(Environment Record)에 등록, 스코프 체인 형성, this값 설정 - 코드 실행 : 런타임 시작, 변수나.. 2023. 8. 10.
자바스크립트 엔진과 런타임 환경 1. 자바스크립트 엔진과 런타임 환경 자바스크립트 런타임이란? JavaScript가 구동되는 환경을 말한다. JavaScript의 런타임 환경으로는 웹 브라우저 또는 Node.js 환경이 있다. 우선 대표적인 웹 브라우저 Chome을 기준으로 브라우저의 구성과 자바스크립트 런타임 환경에 대해 알아보자. Chrome 브라우저는 Chromium이라는 브라우저 엔진을 기반으로 동작한다. 이 브라우저 엔진에는 Blink라는 렌더링 엔진이 탑재되어 있다. 이 Blink라는 렌더링 엔진 내부에는 V8이라는 자바스크립트 엔진을 내장하고 있으며, 자바스크립트 코드는 이런 브라우저 내부에 탑재된 V8 엔진을 통해 브라우저 환경에서 해석되고 실행되게 된다. 각 브라우저 마다 탑재되어 있는 렌더링 엔진과 자바스크립트 엔진은.. 2023. 8. 4.
728x90
반응형