실행 컨텍스트(execution context)란? 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체. 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다. 실행 컨텍스트는 언제 생성될까? 하나의 실행 컨텍스트를 구성할 수 있는 방법은 다음과 같다. 전역공간 - 자동으로 전역 실행 컨텍스트 생성 함수 - 함수 실행 컨텍스트는 함수의 선언이 아닌 실행될 때 생성된다 eval() 함수 ES6+에서의 블록({}) 실행 컨텍스트와 콜스택 const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); } bar(); }..
문제 11053번: 가장 긴 증가하는 부분 수열 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = {10, 20, 10, 30, 20, 50} 이 www.acmicpc.net 풀이과정 1차시도 const memo = new Array(n).fill(1); for (let i = 0; i < n - 1; i++) { const start = numbers[i]; for (let j = i + 1; j < n; j++) { memo[j] = start < numbers[j] ? memo[i] + 1 : memo[i]; } } 이 점화식은, i가 이전보다 낮..
Effective Typescript 7장, 8장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 7장 요약 링크 8장 요약 링크 인터뷰질문 Q. 타입스크립트에서의 enum이란? 사용해야 하는지? A. 여러 관련된 상수 값들을 한 곳에 모아서 정리할 수 있도록 하는 타입. 숫자 enum은 재할당 가능, 문자열 enum은 구조적 타이핑이 아닌 명목적 타이핑을 사용한다는 단점이 있고, const enum은 런타임에 완전히 제거된다는 단점이 있다. enum대신 리터럴 타입의 유니온을 사용하는 것이 좋다. Q. JS/TS에서 정보를 감추기 위해 효과적인 방법? A. 클로저, 비공개 필드(#접두사) TS의 private접근 제어자는 런타임에는 아무런 효과가 없다. 회고 지금까지 내 타입스크립트는 진짜 얼..
Node.js란? Node.js is an open-source and cross-platform JavaScript runtime environment. Node.js는 JS 런타임 환경이다. Node.js runs the V8 JavaScript engine, Node.js는 V8 JS 엔진을 실행한다. JS 런타임이란? 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 뜻한다. 브라우저, Node.js, RN, 일렉트론 등이 있다. 따라서 Node.js는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 환경이다. JS 엔진이란? 컴퓨터가 JS 언어를 이해할 수 있도록 기계어로 번역하고 실행시켜주는 엔진 JS 엔진의 코드 실행 과정 파싱(parsing) ⏩️ 컴파일링(compili..
당근에서 진행한 세션을 참고해 디자인 시스템을 구축하는 과정을 적었습니다. 졸업프로젝트 기획을 시작했다. PC 웹 + 모바일 웹 + iOS 앱 디자인이 필요하다. 그런데 어떻게 각각의 플랫폼에서 UI 컴포넌트를 일관성 있게 구성할 수 있을까? 또 어떻게 우리 서비스의 PC버전에 익숙한 사람들이 모바일을 접했을 때, 혹은 반대의 경우에 어색하지 않도록 일관된 UX를 설계할 수 있을까? 지금까지는 네이밍 통일을 통해 피그마의 디자인 시스템을 그대로 코드로 옮기는 식으로 구성을 했었으나, 디자인을 바꾸게 된다면 어떻게 될까? 웹개발자(나)와 iOS 개발자 모두 자신의 코드를 수정해야 한다. 우리끼리 같은 디자인을 공유한다고 믿을 수 있을까...? 디자인 시스템의 필요성이 느껴지는 순간이었다. 어차피 디자인부터..
Effective Typescript 5장, 6장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 5장 요약 링크 6장 요약 링크 인터뷰질문 Q. any 타입 대신 어떤 방법을 써볼 수 있을까? A. any타입의 범위 좁히기 함수의 매개변수 - 매개변수 그 자체에 any타입 단언 객체 - 객체 전체가 아닌 문제가 되는 부분만 any타입 단언 @ts-ignore사용하기 any 보다는 any[], {[key: string]: any}, ()=>any등의 표현 사용하기 모르는 값에는 any보다 unknown사용하기 npm type-coverage 패키지를 이용하여 any추적하기 Q. object vs Object vs {} vs {[key: string]: any} A. {} null과 undefin..
2025. 03. 06 블로그 A/S 프로젝트🚧 로 업데이트한 글입니다.1. 브라우저 렌더링 과정사용자가 브라우저를 통해 웹사이트에 접속하고, 브라우저가 리소스를 다운받으면서 시작된다. (HTML, CSS, JS 등)Parsing: 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦Style: 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦. 다양한 상대적인 값들이 px로 치환되어 계산.DOM 트리 + CSSOM 트리 = Render 트리 구축.Layout: 각 요소의 배치 결정Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 (이때 그리는건 아니다)Layerize: Paint 결과물을 사용해서 특정한 레이어들로 쪼갬Commit: Layerize 결과물을 ..
위와 같이 참고자료 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com
