티스토리

가치투자자

검색하기

블로그 홈

가치투자자

valueengine.tistory.com/m

미주민 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

D3 라이브러리 D3.js 1. svg로 가지치기 import React from "react"; const App = () => { const width = 400; const height = 200; const line1 = [{ x: 50, y: 100 }, { x: 150, y: 50 }]; const line2 = [{ x: 250, y: 100 }, { x: 350, y: 150 }]; const renderLine = (points) => ( ); const renderDottedLine = (point) => ( ); return ( {/* 그래프 선 그리기 */} {renderLine(line1)} {renderLine(line2)} {/* 각 꼭지점에서의 점선 (범주 가지치기) */} {line1.ma.. 공감수 0 댓글수 0 2023. 8. 19.
[JS/기술면접] 동기와 비동기 프로그래밍 동기 vs 비동기 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택 을 가지고 있다. 이는 창구가 하나 뿐이라 한 번에 하나의 함수만 실행할 수 있다는 것을 의미한다. 즉, 자바스크립트 엔진은 한 번에 하나의 태스크(task)만 실행할 수 있는 싱글 스레드(single thread) 방식 으로 동작하므로, 이미 어떤 태스크를 실행 중일 때 다른 일은 블로킹(blocking, 작업 중단)이 된다. 이러한 환경에서 코드를 어떤 방식으로 실행할 지 결정하는 것은 중요하다. 이와 관련된 개념인 동기와 비동기에 대해 살펴보자. * 기술면접 질문은 맨 아래에 적혀 있습니다 1. 동기식 처리 모델 동기식 처리 모델 은 태스크를 순차적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크.. 공감수 2 댓글수 0 2023. 4. 24.
[JS/기술면접] 타이머와 디바운스 및 스로틀 * 기술면접 질문은 맨 아래에 적혀 있습니다 타이머 1. 호출 스케쥴링 일정 시간이 지난 이후에 함수를 호출하도록 하고 싶다. 이때 사용하는 함수가 타이머 함수 이며, 함수를 명시적으로 호출하지 않고 일정 시간이 지난 후에 호출하도록 함수 호출을 예약하는 것을 호출 스케쥴링 (scheduling a call) 이라 한다. 이러한 호출 스케쥴링을 구현하는 타이머 함수에는 setTimeout과 setInterval이 있다. 2. 타이머 함수 1) setTimeout / clearTimeout 먼저, setTimeout 함수 는 특정 시간(delay)이 지난 후에 콜백함수 func를 1번 실행한다. 이때 특정 시간은 ms(1/1000초) 단위로 적어줘야 하며, 적지 않을 경우 기본값으로 0이 할당된다. del.. 공감수 3 댓글수 0 2023. 4. 23.
[JS/기술면접] 이벤트 (Event) (1) * 기술면접 질문은 맨 아래에 적혀 있습니다 이벤트 (Event) 1. 이벤트란? 이벤트 (Event) 는 사전적 의미처럼 어떤 "사건"을 말한다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력 등 브라우저창에서 어떤 상황이 발생했을 때 나타나는 사건을 이벤트라 한다. 그리고 어떤 이벤트가 발생했을 때 어떤 결과물을 호출할지 그 내용을 담은 함수가 이벤트 핸들러 (event handler) 이며, 브라우저에 의해 호출된다. 이때 브라우저에게 특정 이벤트 핸들러(특정 함수)를 호출하도록 권한을 위임해주는데 이를 이벤트 핸들러 등록 이라 한다. 아래의 예시를 살펴보면, loginButton이란 클래스명을 가진 로그인 버튼이 있다. 저 버튼을 클릭하면 "로그인이 되었습니다!"라는 알람창이 뜨도록 하는 함.. 공감수 4 댓글수 0 2023. 4. 7.
[JS/기술면접] 스코프(scope)란? 스코프 (scope) 변수와 더불어 모든 프로그래밍 언어에서 가장 기본적인 개념 중 하나가 스코프(scope)이다. 그만큼 중요하기에 완벽하게 자신의 것으로 만들 필요가 있다. * 기술면접 질문은 맨 아래에 적혀 있습니다 1. 스코프란? 공식 문서를 살펴보면, 스코프는 '변수와 표현식을 식별하거나 참조할 수 있는 현재 실행 컨텍스트'를 의미한다고 나와있다. 좀 더 쉽게 설명해보자면, 스코프 (scope) 는 식별자(identifier, 변수, 함수, 클래스의 이름)가 유효한 범위를 말한다. 서울에 A라는 사람이 살고 있을 때, 서울이라는 범위 내에선 A의 존재를 찾을 수 있고, 서울 밖에서는 A를 찾을 수 없다. 이때 서울이 스코프인 것이다. 만약 서울 외 지역에서 A를 찾게되면, A를 찾을 수 없다며 .. 공감수 5 댓글수 0 2023. 4. 4.
[JS/기술면접] 객체지향 프로그래밍 및 프로토타입(prototype) 객체지향 프로그래밍 지금 자바스크립트를 공부하고 있거나, 혹은 자바스크립트를 공부할까 고민하고 있지만, 과연 자바스크립트가 어떤 특징의 언어인지 제대로 알고 있을까? 자바스크립트(JavaScript) 는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 프로그래밍 언어이다. 하지만 객체지향이 무엇인지, 프로토타입은 또 무엇인지 제대로 알지 못하고 공부를 시작하는 사람이 많다. * 기술면접 질문은 맨 아래에 적혀 있습니다 1. 객체지향 프로그래밍 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하는 프로그래밍을 말한다. 좀 더 쉽게 설명하자면, 하나의 상자가 있다. 그리고 그 상자는.. 공감수 5 댓글수 0 2023. 4. 3.
[JS/기술면접] var, let, const와 TDZ var, let, const 변수를 선언할 때 사용하는 키워드에는 var와 let, const가 있다. 2015년 ES6가 등장하기 이전에는 var 키워드로 변수를 선언해왔는데, let과 const라는 키워드가 새로 등장했다. 이러한 키워드들로 선언된 변수들이 어떻게 다른지 살펴보고자 한다. * 기술면접 질문은 맨 아래에 적혀 있습니다 1-1. 변수 생성 과정 변수는 총 3단계를 거쳐 생성된다. 선언 단계 (declaration phase) : 변수를 (실행 컨텍스트의) 변수 객체에 등록한다. 즉, 변수가 등록(선언)된 것이다 초기화 단계 (initialization phase) : 변수에 값을 넣기 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다. 할당 단계 (assi.. 공감수 4 댓글수 0 2023. 4. 2.
[JS/기술면접] 호이스팅(hoisting)이란? 호이스팅 (Hoisting) 공식문서를 살펴보면, 호이스팅(hoisting)은 '인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것'을 의미한다고 나와있다. 역시 공식 문서의 용어들은 초보자가 공부하기에 쉽지 않다. 좀 더 쉬운 말로 호이스팅에 대해 설명해보고자 한다. * 기술면접 질문은 맨 아래에 적혀 있습니다 1. 호이스팅이란? 호이스팅은 변수가 선언된 시점보다 먼저 실행되는 현상이다. 좀더 쉽게 설명해보자면, 변수가 어디에 적혀있든지(선언된 시점) 상관없이 맨 위로 끌어와 먼저 실행하는 것을 말한다. 여기서 var, let, const, function, function*, class 키워드를 사용해 선언된 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다. 아래의 예제를 통해.. 공감수 4 댓글수 0 2023. 3. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.