time to wander

(docs에 재밌는 게 보일 때마다 계속 업데이트하고 있습니당..ㅎ) State Management React에서 데이터는 단방향으로 흐르는 구조를 가지고 있다. 데이터가 위에서 아래로, 단방향으로만 흐르게 되면 동일한 상태를 여러 컴포넌트에서 구독해야 할 때(전역에서 상태를 관리해야 할 때), 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 때 등의 상황에서 Props Drilling 같은 이슈가 발생하거나 상태 관리가 어려워질 수 있다. React 에서는 Context API 라는 전역으로 상태 관리를 할 수 있게 해주는 자체적인 API를 제공하고 있지만 보다 다양한 상태 관리 관련 인터페이스들을 제공하는 Redux, MobX, Recoil 같은 상태 관리 라이브러리들이 계속해서 등장하고 있다. 위와 ..

정재남님의 무근본 무계획 쇼핑몰 프로젝트 만드는 걸 따라하면서 새로운 것 투성이라 신기했다. 하나하나 차근차근 찾아보려고 우선 Vite의 공식문서부터 열고 가이드의 가장 첫 번째 섹션인 Vite를 사용해야 하는 이유부터 보는데 첫 문장부터 이해가 잘 되지 않았다...! 생각해보니 프로젝트 하면서 너무나 당연하게 export 와 import 를 사용했고, 이게 ES6 부터 지원하는 모듈이라는 건 알고 있었는데 자세히 알아본 적이 없어서 단어들이 생소하게 느껴진 거였다. 그럼 ES Module에 대해서 살펴보자! ES Module이란? ES Module은 ES6부터 도입된 모듈 시스템이다. export 및 import문을 사용하여 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어준다. ES Mod..

타입스크립트 유니온 타입(Union Type) 유니온 타입(Union Type)이란? 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자 (||)와 같이 'A 또는 B이다' 라는 의미의 타입이다. 아래의 코드에서 logText()함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있다. 이처럼 | 연산자를 이용하여 여러 개의 타입을 연결하는 방식을 유니온 타입 정의 방식이라고 한다. function logText(text: string | number) { // ... } 유니온 타입의 장점 any 타입 대신 유니온 타입을 사용하면 추론하는 타입이 확정되어 있기 때문에 해당 타입과 관련된 API를 작성할 때 자동 완성되어 오탈자로 인한 에러 발생을 현저히 감소시킬 수 있다...

타입스크립트 인터페이스 인터페이스는 상호 간 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 일반적으로 아래와 같은 내용에 대한 약속을 정의할 수 있다. ◦ 객체의 스펙 (속성 및 속성 타입) ◦ 함수의 파라미터 ◦ 함수의 스펙 (파라미터, 반환값 타입 등) ◦ 배열과 객체를 접근하는 방식 ◦ 클래스 let person = { name: 'zubetcha', age: 29 }; function logAge(obj: { age: number }) { console.log(obj.age); // 29 } logAge(person); // 29 위의 예시에서 logAge() 함수는 age라는 속성을 가지고 있는 객체를 파라미터로 받는다. 이렇게 파라미터를 받을 때에는 단순히 파라미터의 타입뿐..

Today I Learned 오늘은 타입스크립트의 타입과 인터페이스에 대해서 공부했다. 타입스크립트의 기본 타입 타입스크립트의 기본 타입에는 크게 12가지가 있으며, 타입을 정의할 때는 콜론(:)과 함께 타입을 선언하는 타입 표기(Type Annotation)라고 하는 방식을 사용한다. - Boolean - Number - String - Object - Array - Tuple - Enum - Any - Void - Null - Undefined - Never String let str: string = 'hello' Number let num: number = 10 Array Array는 타입을 선언할 때 아래의 두 가지 표기 방식을 사용할 수 있다. 두 방식 모두 타입은 Array이며, Array의..

Today I Learned 타입스크립트 공부를 시작했다! 사실 며칠 전부터 쫌쫌따리로 공식 문서를 보기 시작하기는 했는데 역시 빠르고 효율적으로 공부하기에는 강의만 한 게 없을 것 같아서 오늘 인프런에서 강의를 결제했다. 무작정 문법부터 알려주는 게 아니라 타입스크립트를 쓰면 어떤 장점이 있는지, 어떤 배경이 있는지부터 알려줘서 좋았다. 타입스크립트를 사용하면 좋은 점 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 superset 이라고도 한다. 이러한 타입스크립트를 사용하면 1) 사전에 에러를 방지하고, 2) 코드 가이드 및 자동 완성을 통해 코드의 품질을 높이고 개발 생산성을 향상시킬 수 있다. 1) 에러 사전 방지 아래와 같은 데이터를 받아와서 각각의 name, email, ..