Study
[TypeScript] TypeScript & React SyntheticEvent(합성이벤트)
* [참고] https://ko.reactjs.org/docs/events.html import React, { useState } from "react"; import "./App.css"; function App() { const [value, setValue] = useState(""); const handleValue = (e: React.FormEvent) => { setValue(e.currentTarget.value); }; const onSubmit = (e: React.FormEvent) => {}; const onClick = (e: React.MouseEvent) => {}; return ( Click ); } export default App; React.event이름.이벤트를 발생..
[React_study] styled-components를 이용한 dark/light모드
* Theme를 이용한 dark/light모드 만들기 index.js파일에 기본 셋팅을 해준다. darkTheme와 lightTheme를 만들어준다. property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다. ThemeProvider를 통해서 App을 감싸준다. 그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다. theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다. // index.js import { ThemeProvider } from "styled-components"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { tex..
[TypeScript_study] Pick & Omit & Exclude & NonNullable
* Pick T에서 원하는 K만 골라서 사용한다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Omit - 특정 property를 생략하고 사용 가능 - age, gender property는 제외되고 나머지가 사용된다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Exclude - T1의 type들 중에서 T2 type과 겹치는 부분을 제외하고 사용하는 ..
[TypeScript_study] Record
Record K : key T : type - TypeScript는 Version 2.1부터 Utility Type인 Record Type을 도입했습니다. Record Type은 Record 형식으로 키가 Key이고 값이 Type인 객체 타입입니다. * Record를 활용하기 전 interface Score { "1" : "A" | "B" | "C" | "D" "2" : "A" | "B" | "C" | "D" "3" : "A" | "B" | "C" | "D" "4" : "A" | "B" | "C" | "D" } const score:Score { 1 : "A", 2 : "C", 3 : "B", 4 : "D", }; * Record를 활용한 코드 type Grade = "1" | "2" | "3" | "4..
[TypeScript_study] 함수 오버로딩(Function Overloading)
* 함수 오버로딩이란? TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다. * 매개변수의 개수는 동일하지만, 타입이 다른 경우 interface User { name: string; age: number; } function join(name: string, age: number|string):User|string { if(typeof age === 'number') { return ( name, age, ); } else { return "type number"; } } const kim:User = join("kim", 30); const par..
[TypeScript_study] Typescript 설치와 셋팅 & 간단 사용법(Vue, React 포함)
* 타입스크립트 쓰는 이유 - TypeScript는 JavaScript의 타입부분을 업그레드해서 사용하고 싶을 때 사용하는 일종의 JavaScript의 일종의 확장판이다. 완전 다른 언어가 아니라 JavaScript문법 그대로 이용가능한대 타입 문법을 업그레이드 해서 사용할 수 있다. - JavaScript는 타입에 관대하다. 따라서 숫자와 문자를 연산해도 아무런 문제 없이 정상적으로 작동한다. 혹은 숫자로 바꿔주는 함수에 이상한 값을 넣어도 아무런 오류가 없다. 언어 자체에서 알아서 타입을 변경해준다. (JavaScript는 Dynamic typing를 지원하는 언어이기 때문이다.) ex) 5 - "3" 혹은 parseInt([1, 2, 3]) - Dynamic typing은 간단한 기능을 개발할 때는..