전체 글
-
-
-
React hook (useState)카테고리 없음 2023. 3. 11. 16:09
React hook : functional component에서 state를 가질 수 있게 해줌 functional programming (함수형 프로그래밍 )스타일이 ) => app을 react hook으로 만든다면 class component, did mount, render 등 이런 것들을 안해도 됨 배울 hook 요약 useTitle : react document의 title을 몇개의 hook과 함께 바꾸는 것 useInput : 그냥 input역할 usePageLeave : 유저가 page를 벗어나는 시점을 발견하고 함수 실행 useClick : element를 클릭하는 시점을 발견함 useFadeIn : 어떤 Element든 상관없이 애니메이션을 Element 안으로 서서히 사라지게 만듬 us..
-
typeScript 기초(7) 개발환경설정,declaration file,JSDocTS 2023. 2. 27. 20:10
개발 환경 설정하기 일단 typeChain이라는 폴더를 만들고 vs코드로 열어서 새 노드파일을 만들어줬음 터미널에 를입력하면 json 파일이 하나 생성되는데, "main" : "index.js" 타입스크립트 프로젝트로 설치할 때 src라는 새폴더를 만든 후 안에 index.ts 파일 생성 const hello = () => "hi" ; // 컴파일 하기위한 코드 이 ts 파일을 실행해서 js파일로 받기를 원함 (typescript는 컴파일러니깐 파일들을 일반적인 자바스크립트로 컴파일 시켜줌) 새파일 tsconfig.json 생성 (이름 바꾸면 안됨) => 이 파일이 있으면 vsc가 우리가 ts파일로 작업한다는 것을 알게되고 자동완성 기능을 제공해줌 json 파일이니까 당연히 json으로 작성 { "inc..
-
TypeScript 기초(6) : PolymorphismTS 2023. 2. 23. 18:40
Polymorphism(다향성) : 다른모양의 코드를 가질 수 있게 해줌 ---> 다향성을 이루려면 generic을 사용해야하는데 ---> 이때 제네릭은 placeholder 타입을 사용할 수 있게 해줌 로컬스토리지 API와 비슷한 API 타입 시뮬레이션 해보 : 제네릭,다향성,클래스,인터페이스 합쳐서 작업해보기 interface Storage { } class LocalStorage { private storage : } private을 가지는 storage를 만들고 타입을 Storage로 정한다 했을 때, 이때 interface Storage가 이미 정의가 돼 있다고 나오는데, 이건 타입스크립트에 의해 선언된 자바스크립트 웹 스토리지 API를 위한 인터페이스임 위와 같이 하게되면 Storage에 새 ..
-
TypeScript 기초(5) type, interfaceTS 2023. 2. 18. 17:56
type은 내가 원하는 대로 타입을 정의할 수 있는데 type Player = { nickname:string, healthBar: number } string type의 name과 number type의 healthBar을 가짐 const yang : Player = { nickname : "yang" healthBar : 10 } ==> 첫번째는 type은 property 이름과 그 타입이 뭔지에 대해 정의 할 수 있게 해줌 오브젝트 모양을 설명해 줄 수 있음 또 다른 방법은 아래와 같이 Food 는 string이어야 한다고 선언 할 수 있음 type Food = string const kimchi:Food = "delicious" 타입 alias(대체명)을 사용할수도 있음 type Nickname ..
-
TypeScript 기초 (3) abstract class, methodTS 2023. 2. 6. 21:18
Class Player { constructor( private firstName:string, private lastName:string, public nickName:string ){} } //ts ver "use strict"; class Player { constructor (firstName, lastName) this.firstName = firstName ; this.lastName = lastName; } } //js ver ts에서는 파라미터들을 써주면 알아서 Constructor 함수를 만들어줌 => private 혹은 public 으로 만들 수 있는데 보다싶이 js로 컴파일 돼서 private가 보이지 않음 ==> ts에서 private은 ts에서 보호해주기 위한 것일 뿐 js에선 사..
-
Typescript 기초 (2) polymorphism, generic, call signatures, over loadingTS 2023. 2. 2. 17:53
call signatures : 함수 위에 마우스를 올렸을때, 보게 되는 창 => 함수 호출 방법과 인자(argument),리턴 타입 을 알려줌 call signature 타입 만들기 type Add = (a:number, b:number) => number ; 아래와 같이 사용 가능 const add:Add = (a,b) => a + b => 타입을 선언하는 과정에서 코드를 구현하는 것과 타입을 선언하는 과정을 생략 할 수 있다 overloading (오버로딩) : 함수가 서로다 여러개의 call signatures를 가지고 있을 때 발생 ex) type Add = { (a:number , b: number) : number (a:number , b: string) : number } const add..