본문 바로가기

리액트31

[TS] TS연습하기5 //class 문법과 ts class Persona { personaName:string // 위에서 변수를 미리 만들어놔야 생성자를 사용할 수 있다. constructor(name:string){ this.personaName = name } 메소드(param:string):void{ console.log(this.personaName + param) } } let 사람1 = new Persona('이땡땡'); let 사람2 = new Persona('김땡떙'); console.log(사람1) 사람1.메소드('은 가나다') // interface 문법 : extends가 가능하다. 중복선언이 가능하다. // 장점 : type을 & 속성으로 연결할 때 중복속성이 발생하면 사용할때만 나중에 에러가 나는데,.. 2023. 4. 12.
[TS] TS연습하기4 //함수 type 저장해서 사용하는 법 (Type Alias) type 함수타입 = (a:string) => number; const 뻥션1:함수타입 = (a) => 3 //Object 자료 const obj1:{name:string, count:number, func:()=>void} = { name : 'kim', count: 1, func : ()=>{ obj1.count++ } } //TypeScript를 사용하면서 DOM조작할 때 주의할 점 const 제목 = document.querySelector('#title') if(제목 instanceof Element){ //instanceof 를 이용한 narrowing을 해준다. (좋은방법) 제목.innerHTML = 'ㅇㅇㅇㅇ' } if(제목?... 2023. 4. 12.
[TS] TS 연습하기3 //엄격한 type 지정 : literal Type let 이이름 : 'lee' = 'lee'; //'lee' 만 들어갈 수 있다 let 납니다 : '대머리' | '솔로' = '대머리'; //'대머리' 혹은 '솔로' 만 들어갈 수 있다. //함수에서 사용 function 뻥션(a:'hello'):1 | 0{ //파라미터는 'hello'만 받을 수 있고, 1|0 만 출력할 수 있다. return 1 } // 리터럴 연습하기 type rsp = ('가위'|'바위'|'보')[] const 가위바위보 = (a:'가위'|'바위'|'보'):rsp => { return ['보','가위'] } // 리터럴 타입의 문제점 : 값이 타입이다. const 자료 = { name : 'lee' } function 예시함수(a:.. 2023. 4. 12.
[TS] TS 연습하기2 //변수에 type 넣어서 사용하기 (type Alias) //PascalCase로 타입이름을 지정하는 게 국룰 type Animal = string|number|undefined type Animal2 = {name:string, age:number}; const 동물 : Animal = '스트링/넘버/언디' ; const 동물2 : Animal2 = {name:'강아지', age:2} //reference data type 락걸기 (ts파일 안에서만 그럼) type Gf = {readonly name:string, age:number} // type에 readonly라고 지정해주면, 내부 수정이 불가능하다. const 여친:Gf = {name : '경아', age:30}; // 여친.name = '누.. 2023. 4. 12.
[TS] TS 연습하기1 //Primitive Variable const 이름:string = 'Lee'; //Array let 어레이:string[] = ['어레이1', '어레이2'] //Object let 오브젝트:{name : string, name2 : number} = {name : 'Lee', name2 : 123}; // 중요한 것은 온 갖 곳에 다 ts 타입질을 안해도 된다. // 타입스크립트는 대부분 알아서 자동으로 해준다구요. let 테스트 = '테스트라구'; // 테스트 = 123; 이거 에러난다구요 ts가 자동으로 테스트:string 해주기 때문이다. // 연습 let project:{member : string[], days : number, started : boolean} = { member : ['k.. 2023. 4. 12.
React - 19장 : 코드 스플리팅(완) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 2.
React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 1.
1장-디자인 패턴) MVC 패턴 1. MVC 패턴이란 ? - Model, View, Controller 로 이루어진 디자인패턴이다. - 앱의 구성요소를 세가지로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있다. - 재사용성과 확장성이 용이하지만, 복잡할 수록 모델과 뷰의 관계가 복잡해지는 단점이 있다. 2. 모델 - model은 앱의 데이터인 DB, 상수, 변수 등을 뜻한다. - 박스모델에서 박스의 위치, 글자, 포맷, 모양 등에 관한 정보들을 가지고 있어야 한다. - 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다. 3. 뷰 - inputbox, checkbox, textarea 등 사용자인터페이스(UI)를 나타낸다. - 모델을 기반으로 사용자가 볼 수 있는 요소 및 화면을 뜻한다.. 2023. 2. 27.

티스토리툴바