728x90 스나이퍼팩토리3 [스타이퍼팩토리] 2일차(2)_리액트 돔(DOM), 컴포넌트, JSX, CSS 스타일링 1. 리액트 프로젝트 생성 -npx//설치npx create-react-app my-app//실행npm run start - npmnpm install -g creact-react-appcreate-react-app my-app - vite최근에는 npx, npm보다 vite를 사용해서 프로젝트를 생성하는게 주목받고 있다.//설치npm create vite@latest //실행npm run dev 다음으로, React와 TypeScript+SWC를 선택해주면 된다. 2. 돔(DOM)과 가상돔(Virtual DOM)돔(DOM)DOM(Document Object Model)은 문서 객체 모델을 의미한다. 이때 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 .. 2024. 9. 24. [스나이퍼팩토리] 2일차(1)_타입 오퍼레이터, Enum, 제네릭 1. 타입 오퍼레이터유니언 타입 (|) -> OR인터섹션 타입 (&) -> AND 유니언 타입유니언 타입은 연결된 타입 중 1개만 만족하면 된다.const returnValue=(value:string|number|boolean)=> value;console.log(returnValue("A"));console.log(returnValue(10));console.log(returnValue(true)); 함수 오버로드.유니언 타입 사용 시, 함수 내부에서 유니온 타입의 매개 변수를 사용하면 타입을 좁혀주는 과정이 필요하다. 많은 경우의 수가 발생하여 오류가 발생할 수 있기 때문이다. 이때, typeof, instanceof 를 사용해서 좁혀준다.const add=(n1:number|string, n2:.. 2024. 9. 23. [스타이퍼팩토리] 1일차_타입스크립트 기본&함수 타입 타입스크립트는 자바스크립트의 확장 언어이다. 즉, 자바스크립트에서 다루는 값에 타입을 부여하는 것이다. 1. 기본 타입stringnumberbooleanobjectArray (대문자 주의)tupleanynullundefined 기본 자료형let str:string="A"; //기본 타입let str2:String="A"; //String이라는 인스턴스 객체let num:number=10; //기본 타입let num2:Number=10; //Number라는 인스턴스 객체let bol:boolean=true;let und:undefined=undefined;let nul:null=null;let sym:symbol=Symbol(); 배열Array 타입은 배열 타입, tuple 타입은 특정 형태를 갖는 .. 2024. 9. 22. 이전 1 다음 728x90
