Front-End (55) 썸네일형 리스트형 children props는 값을 내려주는 건데, 칠드런은 뭐하는 놈인가..props만 있으면 되는거 아닌가? 라고 생각을 했다. 말그대로 자식이라 생각하면 편하다. app.tsx내에서 , props는 내려주면 이렇게 썼다. children은 (자식) 이 사이에 있는 자식이 ! (자식) = 어떤 것이던 다 해당 컴포넌트로 내려준다는 거다. 예제를 보겠다.//Container.tsx (Children 컴포넌트)import { ReactNode } from "react";interface TChildren { children: ReactNode; id: string;}export default function Container({ children, id }: TChildren) { return ( .. 리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음. 작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영 Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex.. 설치(NPM , YARN , NPX) 일단 먼저 짚고 넘어가야 할 게 있다.보통 어떤 설치든, 관리하기 어렵기 때문에 전역으로 설치하면 좋지 않다.근데 node와 npm은 전역으로 설치하는 게 좋다.어떤 것을 사용하더라도 패키지는 버전이 있다.Major , Minor , Patch 라는 것이 있다. Major : 주요 릴리즈 1.패키지에서 엄청난 변화가 있을 경우에 해당 위치의 숫자를 증가시킴2. 주로 이전 버전과 호환성을 깨트릴 정도의 중요한 패치의 경우 변경됨 Minor:새로운 기능1.패키지에서 새로운 기능이 추가 되었을 경우에 해당 위치의 숫자를 증가 시킴2.이전 버전과의 호환성은 유지함 Patch : 버그 수정1.기존에 포함되었던 기능에 대한 버그 수정을 하였을 경우 해당 위치의 숫자를 증가시킴2.이전 버전과의 호환성은 유지함 옵셔널.. Generic(제네릭) "타입을 미리 지정 안하고 , 사용 시 지정하는 꼼수" 1.개념설명 & 예제3.extends(제약) 1. 개념설명function firstElements(elements: number[] | string[]) { return elements[0];}대충 이런 함수가 있다고 하자.이 함수는 배열의 첫번쨰 놈만 뽑아 보여주는 함수다. 근데 이 함수에 1번 놈이 넘버,스트링 등등 자료형이 계속 바뀔 수가 있다.그럴 때 쓰는 놈이다. 방법은 생각보다 쓰기 쉽더라.1.= 넣어준다. (T가 관례임.)2.호출시 함수()그럼 이 가 "사용시 지정하는 타입 매개변수"가 되는 것이다. //1. 등호 오른쪽에 바로 써준다.const firstElements2 = (elements: T[]) => {return el.. interface , Type alias(타입별칭) interface 객체 타입명시 템플릿주로 객체의 구조를 정의하는 데 사용된다."변수에 마우스를 올리면 툴팁으로 어떤 타입인가를 안보여준다던데"==> 커맨드 누르고 마우스 갖다대니 보이네..class를 예로 들어보겠다.// 인터페이스 정의interface Person { name: string; age: number; greet(): void;}// 인터페이스를 사용하는 객체const person: Person = { name: 'Alice', age: 30, greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }};// 인터페이스를 사용하는 클래스.. as const 사전적 의미를 아무리 해봤자 어려워서 이렇게 외우기로 했다."const처럼"자. const와 let의 차이점이 뭐였더라?그렇다. "값이 안변한다"let hi = "hi";//타입을 string으로 추론let hi2 = "hi" as const;//타입을 "hi"밖에 못쓰게 된다. as const를 쓰게 되면 ,string으로 타입으로 추론 => "hi"로 타입추론이 된다.즉, 글자면 다 됩니다! => "hi"만 됩니다! 예시를 넣어 놓겠다.const person = { name: 'Alice', age: 30} as const;// 타입: { readonly name: 'Alice'; readonly age: 30; }person.name = 'Bob'; // 오류: 읽기 전용 속성 'n.. 타입스크립트 중급(옵셔널 프로퍼티,인터페이스,타입) 옵셔널 프로퍼티(optional property) :객체 안에서 name? 이렇게 쓰는 것이다.요소를 필수요소가 아닌 옵션인 요소로 만들 수 있다. 병합(Interface merging)interface User { name: string; age: number; gender: string; height: number;}const obj6: User = { name: "김과장", age: 50, gender: "몰루", height: 12,};똑같은 인터페이스 이름이 정의가 되면 , 인터페이스는 합쳐지게 된다.interface User , interface User 이렇게 두개가 있으면 두개 조건들이 합쳐지는 거임. 확장(extneds)기존에 선언한 interface를 확장시킬 수 있다.//extends.. class , 생성자 함수 , 프로토타입 메서드 사실 class는 두개 담은 바구니다.생성자 함수 = 변수만드는 함수(constructor) +프로토타입 메서드 = 만든 변수 가지고 할 함수(protoype method) 생성자함수 : 자바스크립트에서 객체를 만들고 초기화하는 특별한 함수다.생성자함수는 일종의 템플릿으로 , 여러개의 유사한 객체를 쉽게 만들 수 있게 해준다.즉 , "변수집합을 만드는 함수"인 것이다. 생성자 함수 사용법 1 1.대문자로 시작하는 이름 (파스칼케이스)생성자 함수의 이름은 보통 대문자로 시작한다. 2.this 키워드 사용생성자 함수 안에서 'this'라는 키워드는 개로 생성된 객체를 가르킨다. 3.new 키워드와 함께 사용생성자 함수는 'new'키워드와 함께 호출되어야 한다.'new' 키워드를 사용하면 새로운 객체가 생성.. 이전 1 2 3 4 5 6 7 다음
