이것저것 기록장

Functions call signature function의 type을 미리 지정해줄수있음 type 지정과 function 지정을 분리시킬수있다. 만약 react.js 로 function을 짜고 props로 보내줄때, 이 call signature 을 보내줘야한다. const Add = (a: number, b:number) => number const add: ADD = (a, b) => { } Over loading 오버로딩은 함수가 여러개의 call signature 을 가질때 발생한다. polymorphism 여러가지 다른 구조들 여러 타입이 들어올 가능성을 열어둘수있음 —> Generic 을 받음 Generic은 기본적으로 placeholder 을 사용해서 내가 사용한 코드를 기준으로 type..

Javascript vs Typescript 자바스크립트의 타입 안정성을 보완해서 나온게 타입스크립트이다 런타임 에러를 자바스크립트는 잡아내지 못함 —> 타입의 안정성이 없음 but, 타입스크립트는 애초에 코드의 런타임 전에 에러를 감지함 —> 타입의 안정성 높다 let a = [1,2,3]; a.push = "4"; // 이경우에 js 에서는 에러가 x // but, typescript에서 array가 number array로 지정되기때문에 string은 push 될수 x —> 이 예시가 js 와 ts 의 차이다 Typescript type optional primitive ex) const player = { name: string, age: number, // player의 타입 지정 } = { n..

1. html 템플릿 자동 완성 : ! 누르고 엔터누르기 => 기본 템플릿 생성 2. 중첩 태그 생성 : 태그>태그>태그 ex) div>li>ol 3. 인접 태그 생성 : 태그+태그+태그 4. 아이디설정 div.#name // 클래스 + 아이디 : name #name // 아이디 : name 5. 클래스 설정 div.job // 클래스 : job .job // 클래스 : job 6. p태그로 감싸기 p{텍스트 입력} // 텍스트 입력 7. 태그*(숫자) = 태그 반복 가능 8. 줄바꿈 태그^^태그2 //태그 태그 9. tab 키 이용 → 태그 끝으로 이동

1. href =” “ 태그로 외부 css 파일을 불러올때 사용 태그에 홈페이지 등의 주소를 입힐 때 사용 2. src = “ “ 태그로 외부 JS 파일을 불러올때 사용 태그에 파일 디렉토리 경로의 특정 이미지를 지정할때 사용 3. url ( ) css코드 또는 html의 에서 특정 파일을 불러올때 사용

DOM 요소에만 이벤트 설정이 가능하다. 직접 만든 리액트 컴포넌트에는 이벤트를 자체적으로 설정할수없다. 등 DOM요소에만 이벤트 적용 가능하다. // 이렇게 사용하지 못한다. {console.log("test");}} /> onClick onChange onKeyDown , onKeyUp , onKeyPress (키보드 입력이 일어났을때) onDoubleClick (element 더블클릭했을때) onFocus (element 에 focus될때) onBlur (element 가 focus 잃었을때) onSubmit (form element에서 submit 했을때)

Router 사용법 Router 로 url 경로를 설정할수있다. 위에서 부터 거르고 걸려져 404 에러페이지로 보내버리는 형태로 자주 쓰임 version 5 기준으로 switch가 쓰임 → version 6 기준으로 routes가 대신 쓰임 exact path=”” 를 쓰면 정확한 경로로 설정 *주의점 ⇒ 코드가 위에서부터 읽히기 때문에 만약에 아래와 같은 코드에 exact를 붙이지 않으면 모든 페이지가 home으로 보내지는 현상이 발생함 따라서, 코드를 작성할때 exact를 붙이지 않는것을 고려할때는 걸러지는 순서를 예상하여서 코드를 위에서부터 써내려가야한다. function App() { return ( ); } 새창으로 넘어가지 않고 링크 이동시기는 방법 Link 이용하기 import { Link ..

버튼 2개를 만들어서 각 버튼마다 다른 내용이 뜨게 만들고싶은 컨셉 import { useState } from "react"; import "./styles.css"; const content = [ { tab: "section 1", content: "I'm the content of the section 1" }, { tab: "section 2", content: "I'm the content of the section 2" } ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = u..

react hook의 역사 훅의 역사는 reccmpose에서 시작되었다. recompose 라이브러리(지금의 함수형 컴포넌트, state와 흡사) 는 리액트 팀에 의해 인수됨. input 안에 많은 실행조건 넣는 방법 예를들어 input 의 태그 안에 입력값을 띄어주고, 입력 기본값을 지정해주고, 입력값의 길이를 제한해주는 등의 기능들을 넣고 싶다고 하자. —> 1. 한 변수 안에 useInput을 정의해준다. ex) const name = useInput("mr.", maxvalue); 만약 useInput 을 내가 직접 만들때, useInput의 받은 인자로 무엇을 실핼시킬수있는지 고려해야한다. 위의 예시로는 첫번째로 받은 인자 "mr. " 로 기본값을 지정할것이고, 두번째로 ..