전체 글 썸네일형 리스트형 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는 인터프리터.. 더보기 [TypeScript] 타입스크립트란 무엇인가? 타입스크립트 동작 원리에 대하여 TypeScript 란 무엇인가? 1. Javascript의 한계 모든 언어에는 타입 시스템이 존재하며, 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉘어 진다. 각각의 특징은 다음과 같다. 1) 동적 타입 시스템 = JavaScript, Python - 타입을 미리 검사하지 않는다. - 개발자의 의도치 않은 타입 실수로 인해 치명적인 오류가 발생할 가능성이 높다. -> 타입을 미리 검사하지 않기 때문에 타입 오류 시에도 실행이 바로 중단되지 않는다. 때문에 개발자의 타입 실수 시 런타임 중 하루뒤, 한달 뒤 등 예기치 못할 때 갑작스럽게 에러가 발생하는 등 잘 돌아가던 프로그래밍이 갑자기 실행이 안된다던지 치명적인 오류가 발생할 수 있고 디버깅이 힘들다. 2) 정적 타입 시스템 = C, Java -.. 더보기 [Deep Dive] 클로저(Closer)란 무엇인가? 먼저 클로저를 알아보기 전에 이해해야 할 개념은 실행 컨텍스트와 렉시컬 환경이다. 이 개념을 다시 한번 되새기며 클로저에 대해 알아보도록 하자. [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실 junvelee.tistory.com 실행 컨텍스트와 렉시컬 환경을 이해했다면, 클로저라는 것은 무엇일까? 클로저(Closer)와 렉시컬 환경 먼저 기억해야 할 것은 렉시컬 환경의 특징이다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.. 더보기 [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다. *스코프 : 식별자에 대한 유효범위 코드의 평가와 실행 모든 소스코드는 평가와 실행 과정으로 나누어 처리되고, 실행 컨텍스트를 통해 실행되고 관리된다. - 코드 평가 : 실행 컨텍스트 생성 및 변수, 함수 등의 선언문의 식별자를 실행컨텍스트의 렉시컬 환경(Lexical Environment)의 환경 레코드(Environment Record)에 등록, 스코프 체인 형성, this값 설정 - 코드 실행 : 런타임 시작, 변수나.. 더보기 자바스크립트 엔진과 런타임 환경 1. 자바스크립트 엔진과 런타임 환경 자바스크립트 런타임이란? JavaScript가 구동되는 환경을 말한다. JavaScript의 런타임 환경으로는 웹 브라우저 또는 Node.js 환경이 있다. 우선 대표적인 웹 브라우저 Chome을 기준으로 브라우저의 구성과 자바스크립트 런타임 환경에 대해 알아보자. Chrome 브라우저는 Chromium이라는 브라우저 엔진을 기반으로 동작한다. 이 브라우저 엔진에는 Blink라는 렌더링 엔진이 탑재되어 있다. 이 Blink라는 렌더링 엔진 내부에는 V8이라는 자바스크립트 엔진을 내장하고 있으며, 자바스크립트 코드는 이런 브라우저 내부에 탑재된 V8 엔진을 통해 브라우저 환경에서 해석되고 실행되게 된다. 각 브라우저 마다 탑재되어 있는 렌더링 엔진과 자바스크립트 엔진은.. 더보기 자료구조 - 스택(Stack)과 큐(Queue) 1. 스택(Stack)이란 무엇인가? 어떤 데이터의 구체적인 구현 방식은 생략한 채, 데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(Abstract Data Type) 혹은 추상 자료형이라고 한다. 그 중 널리 사용되는 스택(Stack) 과 큐(Queue)가 있다. 이 두 자료구조는 자바스크립트(JavaScript)에 내장되어 있기 않지만, 배열(Array)과 내장함수들을 이용하여 스택(Stack)과 큐(Queue)를 흉내낼 수 있다. 대부분의 알고리즘 문제를 풀어야할 경우 배열을 이용하더라도 통과하는 편이지만, 시간 복잡도를 매우 세세하게 관리한다던가, 데이터의 양이 매우 큰 경우에는 이 같은 방식으로는 통과할 수 없는 경우가 있다. 이럴 경우에는 연결리스트(Linke.. 더보기 자료구조 - 해시 테이블(hash table)이란 무엇인가? 1. 해시와 해시 테이블(hash table)이란 무엇인가? 1) 해시 테이블이란? 해시 함수에 의해 얻어지는 값을 해시라고 부른다. 해시 함수에 key를 줄 경우, key에 해당하는 숫자 index주소를 반환하고, 그 숫자 index에 value를 저장하는 원리로 해시 테이블을 생성한다. 해시 테이블은 키(key)와 값(value)으로 데이터를 저장하는 비선형 자료 구조로, 각 키(key)에 대해 고유한 해시 값(hash value)을 생성하고, 이 해시 값을 배열의 인덱스로 사용하여 값을 저장하고 검색하는 방식이다. 매우 빠른 데이터 검색을 위한 컴퓨터 소프트웨어 에서 사용된다. 해시가 매우 빠른 데이터 검색을 할 수 있는 이유는 데이터를 검색할 때 사용할 key와 실제 데이터의 값(value)이 한.. 더보기 [기술 면접 스터디-10일차] Redux 상태 관리의 주요 개념들과 연결 관계 / HTML 의 inline 요소와 block 요소의 차이점 1. Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요 💡 Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리입니다. Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다. Store: Redux의 상태를 저장하는 객체입니다. 애플리케이션에서 발생하는 모든 상태 변화는 이 Store에서 관리됩니다. Action: 상태를 변화시키기 위한 객체입니다. 액션은 type과 payload라는 두 가지 속성을 가지며, type은 액션의 종류를 나타내는 문자열입니다. 필요에 따라 payload.. 더보기 이전 1 2 3 4 5 ··· 18 다음 목록 더보기
