실행 컨텍스트 소스코드의 타입 ECMAScript는 소스타입을 다음과 같이 구분. 각각의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드 전역에 존재하는 소스코드 전역에 정의된 함수, 클래스 등 내부 코드 포함 X 함수 코드 함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등 내부 코드 포함 X eval 코드 빌트인 전역함수인 eval함수에 인수로 전달되어 실행되는 소스 코드 모듈 코드 모듈 내부에 존재하는 소스코드 모듈 내부의 함수, 클래스 등 내부 코드 포함 X 전역 코드 전역 변수를 관리하기 위해 존재 var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하기 위해 전역 객체로 연결 함수 코드 지역 스코프를 생성하고 지역 변수, ..

문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/42746?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치..

전역 상태 관리는 왜 해야 할까? 일반적으로 React에서는 데이터는 부모로부터 props를 통해 전달된다. 그러나 컴포넌트를 나누다보면 하나의 어플리케이션 안에 여러 컴포넌트에 전달해줘야 하는 경우가 발생한다. 이러한 현상을 Props drilling 현상이라고 한다. Props Driling : props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 Props Drilling 현상을 막기 위해서는 전역 상태 관리 라이브러리를 사용해야 한다. 전역 상태 관리 도구에는 어떤 것들이 있을까? Redux 현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Re..

Recoil 선택 배경 상태관리 라이브러리에 대한 고민 너도 나도 쓰는 Redux "귀찮고 번거로워요... Recoil의 핵심 컨셉 오직 React만을 위해 React처럼 React 내부 상태만 이용 작은 Atom 단위로 관리 순수함수 Selector Re-Render 최소화 데이터 흐름을 따라서 곧 새로운 React 기능과 호환성 기본 활용법 예시로 상품 리스트 화면을 살펴보자. 데이터 흐름은 아래와 같다. Modal 팝업은 간단한 기능이지만 실제 열고 닫는 이벤트가 각각 다른 컴포넌트에서 이루어져야 하기 때문에 상태관리를 해야 하는 대표적인 예이다. List 역시 여러 곳에서 사용될 수 있기 때문에 상태 관리를 해보도록 하겠다. 해당 atom을 호출하는 방법은 React Hook와 유사하다. Reco..

비동기 통신과 전역 상태 관리의 최신 흐름 우리는 지금까지 아래의 행동들을 배웠다. API 호출하기 전역 상태 관리하기 API 호출하고 전역 상태에 Update 하기 🤷‍♀️ 그런데 API 호출하고 전역 상태를 update 해주는 게 어렵고 복잡하지 않는가? redux-toolkit의 createAsyncThunk 예시 하나의 API에 대한 코드가 위의 코드이다. 이 때, 여러 API를 호출하고 전역 상태 관리를 한다면....? 프로젝트의 크기가 커질 수록 API 호출 후 전역 상태를 업데이트 해줘야 하는 상황마다 작성해야 하는 코드가 많다. store의 크기도 비대해진다. 😭 전역 상태를 이렇게 관리하는 게 맞을까...? API 호출 후 응답 데이터 ➡ Se..

오류 평소와 같이 vite 프로젝트를 배포하던 도중, vite.config.ts 파일에서 에러가 발생했다. 에러 메시지는 다음과 같다. '{ plugins: PluginOption[][]; base: string; rewrites: { source: string; destination: string; base: string; }[]; }' 형식의 인수는 'UserConfigExport' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'UserConfigExport' 형식에 'rewrites'이(가) 없습니다. ts(2345) 분명 vite.config.js 에서는 잘 되던 코드가 .ts 에서 되지 않는 것이다. WHY? Vite config 인터페이스는 Vites..

📌 Type annotation const val: number = 123 Type annotation: 변수 뒤에 ': number'로 타입을 지정해주는 것 형식은 다음과 같다. value: type 🐵 원시 타입 Primitive (원시값) : 불변, 객체가 아닌 값들 String Number BigInt Boolean Symbol null undefined const str: stirng = 'STRING' const num: number = 123 const bool: boolean = true const big: bigint = 100n 자바스크립트에서 이런 간단한 타입들은 타입 추론을 할 수 있기 때문에 굳이 타입을 지정하지 않아도 된다. 오히려, 타입 추론을 유도하는 것이 더 좋다. 원시값은..

👵 과거의 TypeScript "TypeScript는 JavaScript의 Super Set이다" = typescript가 javascript를 포함하고 있다. 👩 현대의 TypeScript "TypeScript is JavaScript with syntax for types." 👉 타입 구문이 있는 JavaScript JavaScript and More A Result You Can Trust Safety at Scale ▪ JavaScript에 추가 구문 ▪ IDE와 통합 ➡ 오류 캐치 ▪ JavaScript로 변환 ▪ JavaScript가 지원되는 모든 곳에서 실행 (브라우저, Node.js, Deno 등) ▪ JavaScript를 이해하는 타입 추론을 사용 ▪ 추가적인 코드 없이도 훌륭한 도구를 ..