타입스크립트 시작하기 1. 타입 정의하기 몇 가지 기본 타입 const(let) 변수명: 타입 = 값; const one: number = 1; const isTrue: boolean = 1 > 0; const text: string = "텍스트"; const arr: number[] = [1, 2, 3]; const arr2: Array = [4, 5, 6]; - 오류 arr2.push("가"); 자바스크립트 내에서 array는 object로 인식을 한다. 타입스크립트를 사용함으로 array와 같이 자바스크립트로 관리하기 어려운 타입들을 관리할 수 있다. 또한 null과 undefined 도 관리가 가능한데 아래와 같이 유니온 타입을 선언할 수 있다. | 로 사용하는 union 타입은 교집합이고 & 로..

타입스크립트 시작하기 1. 타입스크립트란? 타입스크립트 / 자바스크립트 자바스크립트 - 동적타입언어 - 변수의 타입이 런타임에 결정 - 코드의 양이 적을 때 생산성이 높다. - Python, PHP 타입스크립트 - 정적타입언어 - 자바스크립트의 모든 기능을 지원하면서 정적 타입 또한 지원 - 변수의 타입이 컴파일 타임에 결정 - 코드의 양이 많을 때 생산성이 높다. - Java, C++ 2. 타입스크립트 설치부터 컴파일까지 타입스크립트 설치하기 1. 우선 node.js를 설치한다. 2. 폴더에 npm init -y 하여 package.json 파일을 생성한다. 3. npm install typescript를 입력하여 타입스크립트를 설치한다. 4. npx tsc --init 을 입력하여 tsconfig.j..

📌 들어가며 리액트 라우트 패키지의 기본인 react-router-dom을 이용해 리액트 페이지에 라우팅을 만드는 방법을 알아보자. 📌 react-router-dom란 리액트 라우터 돔은 클라이언트에서 페이지 라우팅을 가능하게 한다. 서버 사이드에서 보내지는 페이지들은 일반적으로 디렉터리에서 파일 단위로 이동하게 되는데 리액트와 같은 클라이언트 사이드 렌더링(Client-Side-Rendering)의 경우는 하나의 파일에서 화면만 변경되는 구조이기 때문에 url에서 보여지는 경로를 변경한다고 해서 화면이나 파일이 변경되지 않는다. 하지만 필요에 의해 (구글 등에서 검색, 딥 링크 등의 필요) url에서 페이지를 지정해주어야 하고, 유저도 그것으로 화면의 변화를 인지하는 경우도 있기 때문에 라우팅이 필요하..

드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다. 📌 들어가며 리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다. 이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다. State를 사용하는 범위에 따..

서버에서 통신으로 받아온 객체 형태의 값을 다룰 때 자주 사용해야 하는 객체 다루기 방법들을 정리 📌 객체 안에 키, 값 쌍 더하기 (수정도 방법 동일) food라는 객체 안에 description이라는 키와 'Very cheesy vegetarian pizza' 이라는 값를 추가하려고 한다. const food = { id: 1, cost: "12,000", name: "Vegan Pizza", }; 🔸객체.키 or 객체[키] 사용하기 객체명에 점을 찍고 삽입할 키 이름을 작성한 다음 값을 할당해준다. 동일한 방법으로 대괄호에 키를 넣을 수 있다. 포인트는 대괄호에 key를 따옴표를 붙여 문자 처리를 해주어야 한다. key는 객체명을 따옴표로 묶 못하기 때문에 key명이 숫자나 .이 있는 경우, 공백이..

이 예제는 Udemy의 React 완벽 가이드 강의에서 발췌하였습니다. 📌 들어가며 상태를 관리하다보면 상태를 변경하는 핸들러 함수가 무한히 많아지는 현상이 일어나고 그에 따라 상태도 같이 늘어난다. 그때마다 useState를 호출해서 하나씩 상태를 관리하기란 쉽지 않다. 이를 위해 리액트에게는 useReducer라는 강력한 무기가 있는데, 강력한 만큼 useState처럼 쉽게 쓸 수 없는 만만치 않은 훅이라 별도로 공부를 해본다. 📌 useReducer란 리액트의 상태 관리를 위한 훅(Hook) 중 하나로, 복잡한 상태를 관리하거나 상태 변경 로직을 별도로 분리할 필요가 있는 경우에 사용한다. useState로 많은 상태를 관리하는 것보다 useReducer로 상태를 묶어 관리하면 가독성 있는 상태 관..