ansui

또래코칭을 진행하던 한 학생분이 이 오류가 발생한다고 하셔서 찾아본 후 해결하였다.리액트 프로젝트에서 props를 전달받을 때 ‘props 명’ is missing in props validation이라는 오류가 발생했다. 오류 원인props의 타입을 지정해주지 않아 생기는 오류.오류가 나더라도 웹은 잘 작동하기 때문에 큰 문제는 없다. 해결 방법1️⃣prop-types 설치npm install -D prop-types 2️⃣props 사용하는 컴포넌트에서 type 정의해주기앞서 설치한 PropTypes를 import한 후 List 컴포넌트 바깥쪽에 propTypes 지정. 예시 코드src> components > List.jsximport TodoItem from "./TodoItem";import P..

함수 타입💡함수를 설명하는 가장 좋은 방법 JS - 어떤 매개변수를 받고 어떤 결과값을 반환하는 지 이야기 TS - 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는 지 이야기// 함수 타입 정의function func(a: number, b: number): number { // 반환값의 타입은 없어도 추론 가능 return a + b;}// 화살표 함수의 타입을 정의하는 방법const add = (a: number, b: number): number => a + b; 1️⃣함수의 매개변수function introduce1(name = "안수이", tall: number) { console.log(`name: ${name}`); console.log(`tall: ${tall}..

타입 단언❗타입 단언을 사용하면 타입 체크를 할 수 없다.타입 선언은 할당되는 값이 해당 인터페이스를 만족하는 검사하는데, 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것 → 타입 단언(as Type)보다는 타입 선언(: Type)을 사용하기// 타입 단언 (Type assertion)type Person = { name: string; age: number;};// name, age가 없어서 오류 발생let person1: Person = {};person1.name = "안수이";person1.age = 24;let person2 = {} as Person;type Dog = { name: string; color: string;};let dog: Dog = {..

대수 타입여러 개의 타입을 합성해서 새롭게 만들어낸 타입.합집합 타입과 교집합 타입이 존재한다. 1️⃣ 합집합 타입 (Union 타입)// 합집합 타입 (Union 타입)let a: string | number | boolean; // 추가할 수 있는 타입의 개수는 무한대a = 1;a = "hello";let arr: (number | string | boolean)[] = [1, "hello", true];type Dog = { name: string; color: string;};type Person = { name: string; language: string;};type Union1 = Dog | Person;let union1: Union1 = { name: "", color: "",..

타입은 집합이다❗타입은 동일한 속성과 특징을 갖는 집합이다. 1️⃣수퍼타입(부모타입) ⊃서브타입(자식타입) 타입은 값들을 포함하는 집합이고 서로 부모와 자식 관계를 지니며 계층도로 만들어 표현 가능하다. 예) number Type ⊃ number  literal Type 🔄타입 호환성어떤 타입을 다른 타입으로 취급해도 괜찮은 지 판단하는 것 ⭕업캐스팅: 서브타입(작은 타입)을 슈퍼타입(더 큰 타입)에 넣는 것 → 가능❌다운 캐스팅: 슈퍼타입(더 큰 타입)을 서브타입(작은 타입)에 넣는 것 → 불가능let num1: number = 10; // number 타입let num2: 10 = 10; // literal 타입num1 = num2; // 업캐스팅(가능)num2 = num1; // 다운캐스팅(불가능..

any 타입특정 변수의 타입을 우리가 확실히 모를 때 어떤 타입이던지 넣을 수 있다.모든 타입의 값을 할당 받을 수 있고 모든 타입의 변수에 넣을 수 있다. // any 타입let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase(); // 런타임 시 오류 발생하므로 최대한 사용하지 않는 것이 좋다.anyVar.toFixed();let num: number = 10;num = anyVar;unknown 타입any 타입과 비슷하지만 함수, 연산이 불가능하고 변수에 넣는 것을 불가능하다.// unknown 타입let unknownVar: unknown;unknownVar = "hello..

타입 별칭과 인덱스 시그니처1️⃣ 타입 별칭반복에 사용하기 좋다.tsc로 컴파일 해보면 js파일에서 타입은 모두 사라진다.// 타입 별칭type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};// 중복 이름 안됨 - 오류 발생type User = {}// 함수 안과 밖은 별개의 타입이므로 중복 이름 가능function func() { type User = {};}let user1: User = { id: 1, name: "안수이", nickname: "수1", birth: "2001.02.18", bio: "안녕", location: "서울시",};l..

원시 타입: 하나의 값만 저장하는 타입➡ number, string, boolean, null, undefined 1️⃣ number 타입: number 주석을 사용한다 (annotation)❗number 타입에 string 관련 함수를 사용할 수 없다.// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN;num1.toFixed(); // number 타입에 적용 가능하면 ok/* 오류 발생 */num1 = "hello";num..

기본 설정⚙ 실습 시작 전 기본 설정1️⃣npm을 초기화하여 모두 기본으로 세팅한다. → package.json이 생성된다.npm init 2️⃣types/node 설치npm i @types/node 3️⃣컴파일러 옵션 설정 → tsconfig.json을 생성한다.{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"]} "include": ["src"] 자동으로 배열안의 경로에 있는 모든 파일을 컴파일한다. 예)..

1. 리액트 폴더 생성2. 라우팅 설정3. 자주 사용하는 함수 구현4. UI 설정5. 공통 컴포넌트 구현6. 페이지 별 기능 구현7. 최적화8. 배포 1. Button Component- text, onClick, type을 props로 받아서 사용import "./Component.css";const Button = ({ text, onClick, type }) => { return ( {text} );};export default Button; - type별로 css를 다르게 설정하여 구분 (className을 type별로 구분)/* Button */.Button { border: none; cursor: pointer;}.Button_posit..