# daily mission
React Router는 Client-side renderer인가요?
1. React Router React Router는 라우터이기 때문에 정확히는 Client-side rendering이 아닌 Client-side routing을 지원합니다 Routing은 사용자가 웹사이트의 다른 페이지로 이동하는 과정, Rendering은 페이지를 화면에 그리는 과정을 의미합니다. Routing은 Rendering을 포함하는 과정이기 때문에 Client-side routing 과정에서 Client-side rendering이 이루어진다고 볼 수 있습니다. 2. Client-side routing React Router는 client-side routing을 지원합니다. 예전에는 웹사이트에서 브라우저는 페이지를 이동하면, 서버로 GET request를 보내 해당 URL 경로에 따른 적절한 페이지나 데이터를 리턴받는 server-side routing을 사용했습니다. `Client-
주소창에 www.naver.com을 입력하면 일어나는 일
1. 브라우저는 입력된 URI(”www.naver.com”)을 해석합니다. 프로토콜(Protocol) 추출 프로토콜을 생략했으므로 브라우저는 HTTPS와 같은 스킴을 자동으로 함께 전송합니다. 호스트명(Hostname) 추출: www.naver.com 포트(Port) 추출 HTTPS의 기본 포트인 443번 포트를 사용하므로, 포트 번호가 생략됩니다. 경로(Path) 추출 쿼리(Query) 추출 Fragment 추출 2. 브라우저는 해당 URI의 DNS(Domain Name System) 주소를 찾기 위해 로컬 캐시나 DNS 서버에 요청합니다. DNS 서버 인터넷에서 도메인 이름과 IP 주소를 매핑하는 역할을 담당하는 서버입니다. 브라우저는 로컬 DNS 캐시에 해당 호스트명의 IP 주소가 저장되어 있는지 확인합니다. 로컬 DNS 캐시는 이전에 접속한 사이트의 IP 주소를 저장하는 캐시 메모리
<Outlet>은 어떤식으로 렌더링 되나요?
1. 이란? react-router-dom에서 Outlet은 라우터의 중첩 경로에서 중첩된 라우트를 렌더링하기 위해 사용되는 컴포넌트입니다. 라우트 설정에서 해당하는 경로를 찾아 매칭된 중첩된 라우트 컴포넌트를 렌더링합니다. 예시 위 코드에서 App 컴포넌트에서는 Route 컴포넌트를 사용하여 "/" 경로에 대한 라우트 설정을 정의하고 있습니다. 이때 Dashboard 컴포넌트 내부에서 Outlet 컴포넌트를 사용하여 중첩된 하위 라우트를 렌더링합니다. 중첩된 라우트 / 경로에 접근하면 Dashboard 컴포넌트가 렌더링되고, /messages 경로에 접근하면 DashboardMessages 컴포넌트가 렌더링되며, /tasks 경로에 접근하면 DashboardTasks 컴포넌트가 렌더링됩니다. 이를 통해 여러 개의 컴포넌트를 하나의 라우트 설정으로 관리할 수 있습니다. ``
CSS-in-JS의 장단점
1. CSS-in-JS란? CSS-in-JS는 React나 다른 자바스크립트 프레임워크에서 스타일링을 할 때, CSS 코드를 자바스크립트 코드 안에 작성하는 기술입니다. CSS-in-JS의 핵심 개념은 스타일을 자바스크립트 객체로 만들어 컴포넌트의 props로 전달하는 것입니다. 이러한 자바스크립트 객체는 스타일 속성과 그 값들을 표현하는데, 키(key)와 값을 직접 정의할 수 있습니다. 이는 CSS의 클래스(class)와 선택자(selector)를 정의하는 것과는 다른 방식입니다. 2. CSS-in-JS libararies Styled Components Styled Components는 React에서 사용되는 CSS-in-JS 라이브러리로, 컴포넌트 스타일링을 더욱 쉽고 간편하게 만들어주는 도구입니다. Styled Components를 사용하면 컴포넌트와 스타일을 하나의 파일에서 정의할 수 있습니다. 컴포넌트의
React 생명 주기(life cycle)
1. React life cycle React 생명 주기(life cycle)란? React에서 컴포넌트의 생성, 업데이트 및 제거될 때 특정 시점에서 자동으로 호출되는 함수들을 정의할 수 있는 메서드입니다. 컴포넌트의 state 변화를 추적하고, 화면에 렌더링되는 요소들을 최적화해줍니다. 일반적인 life cycle 덜 일반적인 life cycle 클래스 컴포넌트에서 사용되는 생명 주기 메서드 Mounting 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다. -
리액트에서 배열을 렌더링할 때 key를 써야 하는 이유
1. 리액트에서 배열을 렌더링할 때, key를 써야 하는 이유 React에서 배열을 렌더링할 때 각 배열 요소에 key prop을 지정해야 합니다. key prop을 사용하는 이유는 React에서 엘리먼트를 업데이트할 때, 어떤 엘리먼트가 변경되었는지 알아내기 위함입니다. React에서 엘리먼트를 업데이트할 때, 변경된 부분만을 업데이트하기 위해 Virtual DOM을 사용합니다. React rendering의 재조정(reconciliation) 과정에서 각 요소에 key prop이 지정되어 있으면 React는 변경된 엘리먼트를 더욱 빠르게 찾을 수 있습니다. 예를 들어, 다음과 같이 배열을 렌더링하면 문제가 발생합니다. 이 코드에서는 key prop이 지정되어 있지 않기 때문에 배열의 state가 변경될 경우 React는 모든 엘리먼트를 새로 렌더링하므로 성능이 저하될 수 있습니다. 다음과 같이 key prop에는 고유한 값을 지정하여 Re
정적 배열과 동적 배열 비교
크기(Size) 정적 배열은 컴파일시 결정된 고정된 크기를 갖고 런타임 중에 변경할 수 없다. 동적 배열은 가변 크기를 갖고 런타임 중에 배열 크기를 변경할 수 있다. 접근 시간(Access time) 정적/동적 배열 둘 다 O(1)의 시간 복잡도를 갖는다. 삽입 및 삭제 시간 정적 배열 정적 배열은 삽입 및 삭제가 불가능하다. 동적 배열 끝 부분에 삽입: O(1) 시작 부분에 삽입: O(n) 임의 인덱스에 삽입: O(n) 끝 부분 삭제: O(1) 시작 인덱스에서 삭제: O(n) 임의 인덱스에서 삭제: O(n) 용도 정적 배열은 데이터 크기를 미리 알고 런타임 중에 변경되지 않고 속도와 메모리 효율성이 중요한 경우에 유용하다. 동적 배열은 데이터 크기를 알 수 없거나 런타임 중에 변경될 수 있는 경우에 유용하다.
해시 테이블과 해시 함수
해시 테이블(Hash table) 키-값 쌍을 효율적으로 검색, 삽입 및 삭제할 수 있는 데이터 구조 링크드 리스트의 배열로 구현되며, 여기서 각 링크드 리스트는 배열의 동일한 인덱스에 해시되는 키-값 쌍을 저장한다. 배열의 인덱스는 키를 배열의 고유 인덱스에 매핑하는 해시 함수를 사용하여 계산된다. 고유 인덱스 간의 충돌이 일어나면 chaining, open addressing 등의 방법으로 해결한다. 해시 함수(Hash function) 키를 입력으로 받아 해시 코드라고 불리는 고정 크기의 출력을 생성하는 함수 해시 코드는 해시 테이블의 어레이로 인덱싱하는 데 사용된다. 해시 함수의 목표는 서로 다른 두 키가 동일한 해시 코드를 생성하는 충돌 횟수를 최소화하면서 각 키에 대해 고유한 해시 코드를 생성하는 것이다. 충돌은 성능 문제뿐만 아니라 키를 덮어쓸 경우 잠재적인 데이터 손실로 이어질 수 있기 때문에 해시 함수의 품질이 중요
자바스크립트 실행 컨텍스트
실행 컨텍스트란(Execution context)? Execution context 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체 자바스크립트는 동일한 환경에 있는 실행 컨텍스트를 콜 스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다. 콜 스택에 실행 컨텍스트가 쌓이는 순서 전역 컨텍스트(Global context)를 콜 스택에 쌓는다. a의 실행 컨텍스트를 생성하고 콜 스택에 쌓고, 전역 컨텍스트와 관련된 코드의 실행을 일시적으로 중단하고 a 실행 컨텍스트의 코드를 실행한다. b의 실행 컨텍스트를 콜 스택에 쌓고, a와 관련된 코드의 실행을 일시적으로 중단하고 b 실행 컨텍스트의 코드를 실행한다. b 컨텍스트의 코드 실행이 종료되
시간 복잡도와 공간 복잡도
1. 시간 복잡도(Time Complexity) 알고리즘의 시간 복잡도 알고리즘의 시간 복잡도는 알고리즘이 실행하는 데 걸리는 시간을 입력 길이의 함수로 수량화합니다. 실행 시간은 입력 길이의 함수이며 알고리즘이 실행 중인 시스템의 실제 실행 시간이 아닙니다. Big O(Ordnung) notation을 통해 표현합니다. 원래는 Big O(O)는 시간 복잡도의 상한선, Big Omega(Ω)는 시간 복잡도의 하한선, Big Theta(Θ)는 Big O와 Big Omega 값이 일치할 때를 의미합니다. 학계에서 쓰는 Big Theta(Θ) 개념을 산업계에서는 그냥 Big O(O)로 사용합니다. Big O notation 인수가 특정 값 또는 무한대로 향하는 경향이 있을 때 함수의 제한 동작을 설명하는 수학적 표기법입니다. 어떤 함수 f(n)의 Big-O notation이 O(g(n))라는 것은, n의 값이 일
AJAX
AJAX 등장 배경 초창기의 웹은 일부분만 바뀌면 되는 경우에도 매번 새 페이지가 로드되는 방식이어서 효율적이지 않고 사용자에게도 좋지 않은 경험을 줬다. 그래서 2000년대 초부터는 웹의 이런 단점을 극복하기 위해서 AJAX라는 기술이 도입되었다. AJAX란? Asynchronous JavaScript And XML 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 JSON, XML, HTML 및 텍스트 파일을 포함한 다양한 형식으로 정보를 주고받을 수 있다 페이지를 다시 로드하지 않고 비동기적으로 서버와 통신하고, 데이터를 교환하고, 페이지를 업데이트할 수 있다 XMLHttpRequest란? 페이지를 다시 로드하지 않고도 URL에서 데이터를 검색하고 서버와 상호 작용하는 데 사용되는 객체 XML 뿐만 아니라 모든 유형의 데이터를 검색하는 데 사용할 수 있다 fetch
프로토타입 체인
프로토타입이란 프로토타입(Prototype)이란 단어는 원형이라는 의미를 가지고 있다. 자바스크립트에서 프로토타입은 객체의 원형이라 할 수 있다. 모든 객체들은 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다. 주어진 객체의 모든 속성을 콘솔에서 볼 수 있는 console.dir() 메소드를 활용하면, [[Prototype]] 이라는 숨어있는 속성을 확인할 수 있다. [[Prototype]] 은 해당 객체의 입장에서 자신의 부모 역할을 하는 객체를 가리킨다. [[Prototype]] , .proto , .prototype 알아보기 [[Prototype]] 개발자가 직접 접근이 불가하고 간접적으로 접근할 수 있는 내부 슬롯(intern
자바스크립트 this
this this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. 자바스크립트에서 this 는 호출방식에 따라서 동적으로 결정됩니다. binding binding이란 함수 또는 메서드를 호출한 대상에 실제 함수를 연결해주는 것입니다. 자바스크립트에서 this 는 어떤 환경에서 사용하는지에 따라 this 에 바인딩되는 객체가 달라진다. 전역 환경 웹 브라우저, 전역 환경에서 this 는 전역 객체인 window 가 바인딩됩니다. 함수 내부 단순 호출 전역에서 함수를 호출하면 this 는 전역 객체인 window 가 바인딩됩니다. 객체의 메소드 호출 함수를 어떤 객체의 메서드로 호출하면 this 의 값은 그 객체가 바인딩됩니다. Arrow Function Arrow Function은 렉시컬 스코프를 따릅니다. 기존 함수에서 `t
비동기 실행 함수의 실행 순서
자바스크립트의 특징 JavaScript 싱글 스레드 기반의 언어 thread 작은 단위의 실행 흐름 자바스크립트 엔진을 간단히 살펴보면 위와 같이 Memory Heap과 Call Stack으로 구성되어 있다. 하나의 스레드에서 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고, 다음에 어떤 함수가 호출되어야 하는지 등을 제어한다. 런타임(브라우저 또는 Node.js) 환경 위에서 확인한 것처럼 자바스크립트 엔진은 단일 Call Stack으로 요청이 들어온 순서대로 한 가지 일만을 수행한다. setTimeout 과 같은 비동기 요청은 자바스크립트 엔진을 구동하는 런타임 환경에서 담당한다. 와 깊은 복사(Deep Copy)
자바스크립트 자료형 자바스크립트에서 값을 복사할 때, 자료형에 따라 복사하는 값이 달라집니다. 기본형(Primitive type)은 Number, String, Boolean, Null, Undefined, Symbol, BigInt가 있고, 데이터 변경이 불가(immutable)합니다. 변수에 기본형을 할당하면 새로운 메모리 공간에 독립적인 실제값이 복사됩니다. 참조형(Reference type)에는 Object(Array, Function, Map 등 기본형을 제외한 모든 것)가 있고, 데이터의 내용 변경이 가능(mutable)합니다. 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사됩니다. obj2 가 obj1 객체의 메모리 주소값을 복사하기 때문에, obj1 의 값이 변경되면 obj2 도 동일한 메모리 주소에 있는 값을 가져 변경된
이벤트 버블링, 캡쳐링, 위임
이벤트 흐름 캡쳐링 단게(Capturing phase): 이벤트가 하위 요소로 전파되는 단계 타겟 단계(Target phase): 이벤트가 실제 타겟 요소로 전달되는 단계 버블링 단계(Bubbling phase): 이벤트가 상위 요소로 전파되는 단계 이벤트 버블링 이벤트 버블링(Event Bubbling): 자식 요소에서 부모 요소로 이벤트가 전파되는 것 stopPropagation 메소드로 버블링을 막을 수 있다 이벤트 캡쳐링 이벤트 캡쳐링(Event Capturing): 부모 요소에서 자식 요소로 이벤트가 전파되는 것 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 에 세번째 프로퍼티에 true 또는 `
브라우저의 동작 원리
브라우저란 웹 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다. 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현합니다. 인터넷에 접속하기 위해 사용하는 Chrome, Safari, Edge, Firefox 등이 브라우저입니다. 브라우저의 구조 사용자 인터페이스: 주소 표시줄, 각종 버튼(이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당합니다. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진입니다. 자료 저장소를 참조하며 로
var, let, const 키워드를 중복 선언 허용, 스코프, 호이스팅 관점에서 비교
중복 선언 허용 let, const 키워드는 중복 선언이 불가능하다 var 키워드는 중복 선언이 가능하다 이렇게 변수가 중복선언이 되면 코드의 안정성이 떨어진다 스코프 let, const 키워드로 선언한 변수는 if, for, function 등등 어떤 키워드와 관계없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 갖게 된다(block scope) var 키워드로 선언한 변수는 함수(function) 단위로만 scope가 구분되어 있다(function scope) let, const 키워드의 경우에는 중괄호로 감싸진 경우라면 모두 중괄호 밖에서는 지역 변수에 접근할 수 없다 let, const 키워드는 반복문의 조건식 안에서 선언된 경우에도 반복문 밖에서 지역 변수에 접근할 수 없다 var 변수는 함수(function) 스코프만을 갖기
렉시컬 스코프(Lexical scope)
렉시컬 스코프란 스코프란 식별자(변수, 함수 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름) 접근 규칙에 따른 유효 범위를 뜻합니다. 렉시컬 스코프란 식별자 유효 범위가 함수를 호출할 때 결정되는 것이 아닌, 선언할 때 결정되는 것을 뜻합니다. 정적 스코프(Static scope)라고도 합니다. 자바스크립트는 렉시컬 스코프를 따릅니다. 실행 결과 foo(); 실행 결과 foo 는 함수 단위에서 var x = ‘bar’; 를 통해 x 를 다시 정의하고, bar(); 를 실행합니다. 하지만, bar 함수 선언할 때 x 는 var x = 'foo'; 전역변수로 할당된 ‘foo’를 값으로 가집니다. 따라서 foo(); 실행 결과는 bar 함수 선언시 x 의 값인 ‘foo’ 를 콘솔에 로그로 남깁니다. bar(); 실
Git에서 branch merge 방법들과 각 방법의 특징
branch merge란 현재 branch에서 다른 branch를 합칠 때 사용합니다. 특정 branch로 합치게 해달라고 요청하는 pr(pull request)에도 아래와 같이 세 가지 merge 방법 중 하나를 선택할 수 있습니다. 왜 이렇게 다른 세 가지 방법 중 하나를 선택할까요? 커밋 메세지, 커밋 그래프를 어떻게 유지해야 할지와 연관되어 있기 때문입니다. 세 가지 merge 방법의 특징을 아래에서 살펴 볼게요. Merge 일반적으로 많이 사용하는 merge 방법이며, 커밋 이력을 모두 남길 때 사용합니