본문 바로가기

Front-End54

리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음.  작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영    Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex.. 2024. 7. 22.
설치(NPM , YARN , NPX) 일단 먼저 짚고 넘어가야 할 게 있다.보통 어떤 설치든, 관리하기 어렵기 때문에 전역으로 설치하면 좋지 않다.근데 node와 npm은 전역으로 설치하는 게 좋다.어떤 것을 사용하더라도 패키지는 버전이 있다.Major , Minor , Patch 라는 것이 있다. Major : 주요 릴리즈 1.패키지에서 엄청난 변화가 있을 경우에 해당 위치의 숫자를 증가시킴2. 주로 이전 버전과 호환성을 깨트릴 정도의 중요한 패치의 경우 변경됨 Minor:새로운 기능1.패키지에서 새로운 기능이 추가 되었을 경우에 해당 위치의 숫자를 증가 시킴2.이전 버전과의 호환성은 유지함 Patch : 버그 수정1.기존에 포함되었던 기능에 대한 버그 수정을 하였을 경우 해당 위치의 숫자를 증가시킴2.이전 버전과의 호환성은 유지함 옵셔널.. 2024. 7. 22.
Generic(제네릭) "타입을 미리 지정 안하고 , 사용 시 지정하는 꼼수" 1.개념설명 & 예제3.extends(제약)  1. 개념설명function firstElements(elements: number[] | string[]) { return elements[0];}대충 이런 함수가 있다고 하자.이 함수는 배열의 첫번쨰 놈만 뽑아 보여주는 함수다. 근데 이 함수에 1번 놈이 넘버,스트링 등등 자료형이 계속 바뀔 수가 있다.그럴 때 쓰는 놈이다. 방법은 생각보다 쓰기 쉽더라.1.= 넣어준다. (T가 관례임.)2.호출시 함수()그럼 이 가 "사용시 지정하는 타입 매개변수"가  되는 것이다. //1. 등호 오른쪽에 바로 써준다.const firstElements2 = (elements: T[]) => {return el.. 2024. 7. 22.
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.`); }};// 인터페이스를 사용하는 클래스.. 2024. 7. 22.
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.. 2024. 7. 21.
타입스크립트 중급(옵셔널 프로퍼티,인터페이스,타입) 옵셔널 프로퍼티(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.. 2024. 7. 20.

티스토리툴바