min

1. webpack optimistic에 정의 : webpack이란 웹 어플리케이션을 구성하는 자원들을(html , css , js , jsx , img , svg)을 각각의 모듈로 보고 "이 모듈들을 조합하고 병합해서 하나의 결과물로 나타내는 것을 도와주는 도구"라고 생각하면 된다. webpack을 통해 병합된 결과물의 번들 사이즈를 줄이면 줄일 수록 코드를 가동하는 가상 컴퓨터의 부담이 줄어들고 사용자들에게 좀 더 나은 퍼포먼스를 보여줄 수 있다. 그렇다면 어떻게 해야지 webpack을 통한 번들 사이즈 최적화를 할 수 있을까? 오늘은 그 방법 중에서 tree shaking에 대해서 알아볼려고 한다. 2. tree shaking의 정의 : tree shaking이란 사용되지 않는 코드를 제거하기 위해..

1. Optimistic Updates의 정의 : Optimistic Updates는 "요청을 보내기 전에 요청에 대한 결과를 예상 및 적용하고 요청을 보낸 후에 예상된 결과를 UI에 반영하는 것"을 의미한다. 이 문장을 보고 바로 이해되기에는 추상적으로 다가올 것이다. 그래서 이 과정을 크게 request 전 / 후로 나눠서 설명하고자 한다. request 전 : request 후에 결과를 예측해서 request 요청을 받기 전에 해당 요청 값을 미리 변화시키는 것이다. (새로고침시 없어짐) request 후 : request 후에는 request전에 적용한 값을 요청 받은 값으로 바꾼다. (새로고침시 유지됨) 여기까지 살펴본다면 Optimistic Updates의 대략적인 흐름은 이해가 될 것이다. ..

1. React.useEffect의 정의 : React.useEffect를 한 문장으로 정의하자면 "컴포넌트와 외부 시스템을 동기화"해주는 리엑트 훅이다. 여기서 이런 의문이 생길 수 있다. "외부 시스템"이 무엇인가? , "동기화"를 해준다는 것은 무엇인가? 그래서 쳅터 2에서는 이 2가지 키워드에 대해서 살펴보려고 한다. 2. synchronize(동기화) external system(외부 시스템) synchronize(동기화) : 동기화의 사전적인 의미는 "서로가 알고 있는 정보들을 일치시킨다는 것"이다. 이 의미를 컴퓨터 입장에서 생각해보면 "서로 다른 2개의 시스템에 데이터를 일치시킨다"는 의미로 해석할 수 있을 것이다. 그리고 여기서 서로 다른 2개의 시스템은 외부 시스템과 , 컴포넌트가 될 ..

1. 스코프의 정의 : 스코프를 한 문장으로 표현하면 "식별자(변수, 함수, 클래스 이름)의 유효범위"이다. 즉 식별자를 어느 범위까지 사용할 수 있는 지를 나타내는 개념이다. 그렇다면 실제로 식별자의 유효범위는 어떻게 될까? 쳅터 2에서는 스코프 실습을 통해 알아보도록 하겠다. 2. 스코프 실습 예를 들어 다음과 같은 코드가 있다고 하자 function a() { var text = "b"; console.log(text) // 1. } a() console.log(text) // 2. 먼저 1.에 찍히는 값은 무엇일까? 이 값에 대해서는 큰 고민 없이 b라고 대답할 수 있다. 하지만 2. 에 찍히는 값에 대해서 묻는 다면 대답하기 힘들 것이다. 그 이유는 2. 과정을 설명하기 위해 스코프라는 개념이 ..

1. React.useState에 정의 : React.useState를 한 문장으로 정의한다면 컴포넌트에 "상태변수"를 추가할 수 있는 훅이다. 여기까지 들었을 때 이런 궁금중이 생길 수 있다. "상태변수"라는 것은 어떤 것일까? 그래서 쳅터 2에서는 상태 변수에 대해서 작성해볼려고 한다. 2. state variable(상태 변수) : 상태 변수란 한 문장으로 정의하자면 컴포넌트의 메모리이다. 컴포넌트는 다음 예시와 같이 상호작용의 결과를 통해 화면이 바뀔 수 있다. input에 값이 변할 때마다 input field의 값을 변화시켜야 하는 상황 input에 값을 입력하고 button을 눌렀을 때 input의 값을 출력하는 상황 이 2가지 예시들에서는 공통적인 궁금중이 발생한다." input에 값을 입..

1. 변수의 생명주기의 정의 : 변수의 생명주기의 의미는 해당 변수가 메모리에 얼마나 존재하고 있는지를 나타내는 것이다. 정확하게 말하면 변수가 메모리에 들어가는 순간부터 시작해 사라지는 순간까지를 의미한다. 2. 지역 변수의 생명주기 : 지역 변수의 생명주기는 해당 지역변수를 담고 있는 함수의 생명주기와 동일시 된다. 실행 컨텍스트에서 variable environment와 lexical environment 정확히는 레코드에 식별자에 대한 정보가 들어간다. 그리고 이 식별자에 대한 정보는 실행 컨텍스트가 실행 컨텍스트 스택에서 없어질 때까지 메모리에 잔류하고 있다. 3. 전역 변수의 생명주기 : 전역 변수의 생명주기는 해당 전역변수를 담고 있는 전역 컨텍스트의 생명주기와 동일시 된다. 이 때 전역 컨..

1. 실행 컨텍스트의 정의 실행 컨텍스트를 한 문장으로 표현하자면 "실행과 관련된 요소들의 집합"이라고 볼 수 있다. 그럼 여기서 이런 의문이 들 수 있다. "그렇다면 실행과 관련된 정보들은 어떤 것들이 있는데?". 그래서 챕터 2에서는 실행 컨텍스트의 구성 요소에 대해서 알아볼려고 한다. 2. 실행 컨텍스트의 구성 요소 variable environment : variable environment는 크게 2가지로 이루어져 있다. 첫번째는 record로 "식별자" (변수 , 함수 , 클래스 등의 이름) 에 대한 정보가 담겨 있다. 두번째는 outer로 자기 자신보다 상위에 있는 실행컨텍스트의 lexical environment가 들어 있다. lexical environment : lexical envir..

1. loader와 action에 대하여 loader : 로더는 말 그대로 데이터를 가져다주는 것을 의미한다. 즉 우리가 어떤 페이지를 갈 때 그 페이지에 데이터를 로딩하고 그 데이터를 던져주는 역할을 한다. 그럼 여기서 이런 의문이 생길 수 있다. 만약 데이터가 로딩 되고 있으면? , 데이터는 어떻게 가져와? 그 역할을 하는 친구가 Suspense Await와 useLoaderData() 훅이다. // ./pages/root.jsx function Root() { const user = useLoaderData(); // data from } action : 액션은 말 그대로 데이터를 서버에게 던져주는 것을 의미한다. 즉 우리가 어떤 데이터를 폼을 통해서 전달할 때 바로 백엔드 서버에게 전달하는 것이 ..