본문 바로가기

전체 글

(74)
[6주차] 위클리 페이퍼 - useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명해 주세요. 이 Hook은 성능 최적화를 위해 사용하는 Hook으로, 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 수행한다.useMemo 의 기능과 차이점값의 메모이제이션 (연산 결과를 메모리에 저장) 기능을 제공하여, 동일한 연산을 반복하지 않고 계산 결과를 재 사용할 수 있도록 함.// computeExpensiveValue는 a와 b가 변경되지 않는 한, 재계산되지 않고 이전의 계산된 값을 반환const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback 의 기능과 차이점함수의 메모이제이션 (입력 값에 대한 실행 결과를 메모리에 저장) 기능을 제공, 전달된 함수를 다시 생성하지 않고 재 사용할 수 있도록 함.// doSo..
[6주차] 위클리 페이퍼 - React에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명하세요. React에서의 컴포넌트란?자체적인 로직이나 디자인을 가진, UI의 일부분을 의미한다. 작게는 버튼에서부터 크게는 전체 페이지가 될 수 있다. 컴포넌트의 이름은 대문자로 시작한다. 이는 HTML 태그가 소문자로 시작하기 때문에, 혼선을 방지하기 위함이다. 아래는 컴포넌트의 정의와 사용에 대한 예시 코드이다.// 컴포넌트의 정의function MyButton() { return ( I'm a button );}export default function MyApp() { return ( Welcome to my app );}함수형 컴포넌트와 클래스 컴포넌트의 차이점함수형 컴포넌트함수형 컴포넌트는 자바스크립트의 함수 형태로 정의된다. 함수형 컴포넌트는..
[5주차] 위클리 페이퍼 - 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. Virtual DOM의 개념UI의 가상 표현을 메모리에 저장, 실제 DOM과 동기화하는 개념Virtual DOM은 실제 DOM의 가벼운 복사본상태 변화가 발생할 때마다 새로운 Virtual DOM을 생성이전 Virtual DOM과 비교하여 실제 DOM에 반영Virtual DOM의 작동 원리초기 렌더링리액트 컴포넌트가 처음 렌더링될 때, JSX는 Virtual DOM으로 변환됩니다.Virtual DOM 트리는 메모리에 저장됩니다.상태 변화컴포넌트의 상태(state)나 속성(props)이 변경되면, 새로운 Virtual DOM 트리가 생성Diffing 알고리즘새로운 Virtual DOM 트리와 이전 Virtual DOM 트리를 비교두 트리 간의 차이점을 효율적으로 찾아내기 위해, 해당 알고리즘을 사용패치 과..
[5주차] 위클리 페이퍼 - React가 렌더링 하는 방식을 설명하세요. Virtual DOM이란?Virtual DOM은 실제 DOM의 가벼운 복사본으로, 메모리 내에서 이루어지는 DOM의 추상화 된 표현방식이라 보면 된다. 이것은 컴포넌트의 상태가 변경될 때마다 새로운 Virtual DOM 트리를 생성되며, 이전 Virtual DOM 트리외 비교(Differing)하기 때문에 실제 DOM 조작을 최소화할 수 있다는 특징이 있다. 이 구조는 주로 React에서 사용하게 된다.다만, DOM을 복사하였기 때문에, 메모리와 CPU 오버헤드가 발생할 수 있다. 따라서, 성능이 중요한 일부 환경 (예: 임베디드 등)에서는 사용을 하지 않는 것이 나을 수도 있다고 한다. (이 경우 Vanilla JS 를 사용하는게 나을 수도 있다고 한다.) 일반적인 환경에서는 Diffing 알고리즘이나..
[4주차] 위클리 페이퍼 - 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명해 주세요. 렉시컬 스코프란?변수와 블록의 스코프(범위)가 코드의 구조에 따라 결정되는 것을 의미한다. 이는 함수나 블록이 정의된 시점의 외부 환경을 기준으로 결정한다. 즉, 함수가 실행될 때가 아니라, 선언될 때 결정되는 것을 의미한다.렉시컬 스코프의 작동 방식스코프 결정 시점함수가 정의된 위치를 기준으로 스코프가 결정한다.스코프 체인함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾는다.이 과정을 스코프 체인이라고 한다.상위 스코프 참조내부 함수는 자신이 정의된 외부 환경(상위 스코프)을 참조 가능하다.이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지.렉시컬 스코프의 예시outerFunction은 outerVar 변수를 참조할 수 있으며, ..
[4주차] 위클리페이퍼 - 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명해 주세요. this 키워드란?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수this가 가리키는 과정을 바인딩(binding)이라고 한다.엄격모드 여부/함수의 호출 방식/this 값이 결정되는 상황에 의해 동적으로 결정되게 된다.this를 가리키는 값이 결정되는 경우전역 실행 컨텍스트: → 전역 실행 컨택스트 (windows 객체 혹은 undefined) 비엄격모드console.log(this); // 브라우저에서는 window 객체 엄격모드console.log(this); // undefined 함수 호출: 일반 함수에서 this → 함수 내에서의 컨텍스트에 따라 다름비엄격모드function regularFunction() {console.log(this); // window 또는 glob..
[3주차] 위클리 페이퍼 - var, let, const 를 서로 비교해 설명해 주세요. 한 줄 요약var: 전역 변수(코드 전체에서 작동하는 변수)를 선언하는 키워드let: 지역 변수(블록 안에서 작동하는 변수)를 선언하는 키워드const: 지역 변수(블록 안에서 작동하는 변수)이면서, 값이 변하지 않는 변수를 선언하는 키워드코드 예시varvar a = 1function testFunc(){ a = 2 console.log(a) // 출력: 2}console.log(a) // 출력: 2letfunction testFunc(){ let a = 1; if(true) { let a = 2; // 새로운 블록 스코프의 a console.log(a); // 출력: 2 } console.log(a); // 출력: 1}constconst a = 1function testFunc(..
[3주차] 위클리 페이퍼 - 브라우저가 어떻게 동작하는지 설명해 주세요. 브라우저란?브라우저는 웹 상의 컨텐츠에 접근할 수 있도록 도와주는 소프트웨어, 웹 페이지를 해석하여 이미지/비디오/문서 등을 지정된 위치에 출력하는 소프트웨어이다. 간단히 말해, 웹 페이지와 이용자를 이어주는 역할을 하는 소프트웨어라 할 수 있다.브라우저의 구성 요소User Interface사용자와 브라우저가 상호작용을 하는 영역. 예를 들어, 북마크를 보여 준다던지, 주소바를 보여 준다던지 등.이 부분은 사용자가 브라우저를 사용할 수 있도록, 직관적인 기능을 담당한다.Browser Engine브라우저의 핵심 부분으로, 사용자의 명령을 처리하거나, 다른 컴포넌트와의 통신을 담당하기도 한다.이 부분은 사용자의 명령이 동작을 보장하는 역할을 수행한다.Rendering Engine웹 페이지를 브라우저에서 볼 ..