1. target.value 혹은 target.name의 보편적인 타입 지정 방법 일부 코드 const onChangeHandler = (e: React.ChangeEvent) => { const { name, value } = e.target; setTarget(pre => ({ ...pre, [name]: value })); }; 전체 코드 import { useState } from 'react'; export type TinitialValue = { userId?: string; password?: string; phoneNumber?: string; // necessary passwordConfirm?: string; nickname?: string; code?: string; dogname?:..
React
1. 🌟keyof를 활용한 key narrowing 만일 함수의 매개변수 key가 반드시 매개변수 obj의 제네릭 타입 T(객체를 받게되는)에 존재하여야 할때, keyof T 를 하면 객체의 key 값을 모아 유니온 타입으로 만들 수 있습니다. 이 때 유니온 타입은 literal type으로 이루어지게 됩니다. function getProperty(obj: T, key: K) { return obj[key]; } let x = { a: 1, b: 2, c: 3, d: 4 }; getProperty(x, "a"); // 성공 getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음. 2. 제너릭 자체에 리터럴 객체 타입 할당하기 // ..
1. Object index signature 1-1. Object index signature 다음과 같이 type을 한꺼번에 지정할 수 있는 방법을 index signature 라고 합니다. interface StringOnly { [key: string]: string } let user : StringOnly ={ name: 'kim', age: '20', location: 'seoul' } 그런데 만약 age는 number 타입이어야 한다면 어떻게 해야 할까요? 다음과 같이 해주면 됩니다. interface StringOnly { [key: string]: string|number; age: number } let user : StringOnly ={ name: 'kim', age: 20, lo..
1. class 키워드 1-1. public, private, protected, static 사용 용도 1. public 키워드 public 키워드는 사실 class 의 필드값 왼쪽에 보이지 않지만 자동으로 부여되는 속성입니다. class User { public name = 'kim'; constructor(a){ this.name = a } public 함수(){ // do something } } const variable1 = new User('park') console.log(variable1.name) variable1.name = 'john' console.log(variable1.name) 위 코드를 tsc -w 명령어로 일반 .js 파일로 변환시키면 다음과 같이 변환되는 것을 볼 수 있..
1. Overloading 일반적으로 함수에 대한 call signiture를 적는 방법은 다음과 같습니다. *call signiture: 우리가 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분 type Add = (a:number, b:number) => number 그런데 call signiture를 아래처럼 좀 더 길게 적는 방법이 있습니다. 이렇게 적어주는 방식이 있는 이유는 바로 오버로딩이라는 개념 때문인데요. type Add = { // 여러 개의 call signiture가 있다. (a:number, b:number):number (a:number, b:string):number } 오버로딩이란? 오버로딩은 함수가 서로 다른 여러 개의 call signiture를 가지고 있을 때..
1. type 과 interface 중 어떤 것을 써야 할까요? 1. intersection type | extends 2. type vs interface 1. intersection type | extends intersection type & 은 type에서, extends는 interface에서 씁니다. '두 타입을 전부 만족하는 타입' 이라는 뜻입니다. 같은 기능을 합니다. type Animal = { name : string } type Cat = { age: number } & Animal interface Student { name: string } interface Teacher extends Student { age: number } let 학생 : Student = { name : '..
📖 프로젝트를 진행하면서 CSS-in-JS 라이브러리 styled-components와 CSS framework tailwind CSS 두 가지를 경험해 보았습니다. 하지만 저는 CSS-in-CSS와 CSS-in-JS 차이점에 대해서 잘 알지 못하고 썼던 것 같습니다. 찾아보니 성능과 효율면에서 각자 장단점이 있다고 알게 되어서 이번 기회에 두 가지 방식 + CSS Framework(tailwind로...)에 대해 기록해두고자 합니다. 0. CSS 등장배경 HTML(HyperText Markup Language)이 처음 등장한 1991년에는 CSS(Cascading Style Sheet)가 없었습니다. 웹 이용자들이 늘어나면서 디자인에 대한 요구가 커졌고 HTML을 꾸며주는 언어의 필요성을 공감하게 되었..
0. concurrent Feature(동시성) - 원래 리액트 18 이전의 렌더링이란 개입할 수 없는 단 하나의 동기적인 처리였기 때문에 한 번 렌더링이 시작되면 이를 중단할 수는 없었습니다. - 리액트 18은 렌더링 자체에 개입하고 이를 중단하거나 재개하고 또는 폐기할 수 있게 되었습니다. 무거운 렌더링 작업을 하는 동안에 사용자가 원하는 동작(유저 인터렉션)에 따른 우선순위를 새로 부여하여 즉각적으로 hydration 순위를 바꿔서 더 빨리 반응할 수 있게 된 것입니다. concurrent rendering(동시성 렌더링)의 도입 덕분에 리액트 18에서는 suspense, streaming server rendering, transition 과 같은 새로운 기능이 소개될 수 있었습니다. 동시성 덕분..
푸댕 프로젝트에서는 JWT를 이용하였다. refreshToken은 accessToken을 재발급 받기 위한 토큰이며, accessToken에 실질적인 인증 정보가 담겨 있다. accessToken은 일정 시간이 지나면 만료되는 구조를 가지고 있다. 보안은 어떻게 뚫릴 수 있는 지 알아보고 싶었다. 1. XSS 공격(Cross Site Scripting) 게시판이나 웹 메일 등에 스크립트와 같은 코드를 심어서 개발자가 고려하지 않은 기능이 작동하게 하는 공격이다. 공격자의 코드가 내 사이트의 로직인 척 행동할 수 있다. 대부분의 웹 해킹 공격 기법과는 다르게 클라이언트 즉, 사용자를 대상으로 한 공격이다. XSS 공격으로 해당 페이지를 이용하는 사용자의 쿠키 정보나 세션 ID가 탈취당할 수 있다. 이 뿐만..
1. Optimistic Update의 개념 낙관적 업데이트가 무슨 뜻일까요? 낙관적?긍정적?인 업데이트? 비슷합니다. 서버와의 REST API 통신이 성공한다는 가정 하에 클라이언트 캐싱 데이터를 조작하고 UI를 업데이트 하는 것이 Optimistic Update 개념의 전부입니다. 쉽게 말하자면 내가 보낸 요청이 무조건 '성공'했을 거라는 가정 하에 UI를 업데이트 해주는 것입니다. react-query는 Optimistic Update를 지원해줍니다! 1-1. 왜 굳이 낙관적 업데이트를 할까요? 간단합니다. 사용자의 UI 를 개선시키기 위함입니다. 예를 들어서 사용자가 게시물 좋아요 버튼을 눌렀을 때 화면에서 즉시 좋아요 ❤️가 활성화되게 할 수 있습니다. 서버의 응답결과는 시간이 조금 걸릴 지라도..
