뉴히의 개발 로그

import { createSlice } from '@reduxjs/toolkit'; import { Todo } from '../../model/todo'; import shortid from 'shortid'; const initialState: Todo[] = [ { id: shortid.generate(), title: '타입스크립트 lv2과제', contents: '리덕스 툴킷 사용 Todo 리스트 typescript로 만들기', isDone: false }, { id: shortid.generate(), title: '타입스크립트 lv1과제', contents: 'react lv1 과제 typescript로 만들기', isDone: true } ]; const todoListSlice = cr..

제네릭 타입 선언 type SuperPrint = (a: T[]) => T const superPrint : SuperPrint = (a) => a[0] const a = superPrint([1, 2, 3, 4]) const b = superPrint([true, false, true]) const c = superPrint(["a", "b", "c"]) const d = superPrint([1, 2, true, false, "hello"]) function superPrint(a: T[]){ return a[0] } const a = superPrint([1, 2, 3, 4]) // 안써주면 타입스크립트가 알아서 유추함 const b = superPrint([true, false, true]) co..

상위 컴포넌트에서 useState 함수를 넘길 때 마우스를 올리면 내려줘야할 적절한 타입을 제공해준다. 그럼 그대로 내려주면됨 깐깐하고 친절한 타입스크립트 ㅎㅎ React.Dispatch는 TypeScript에서 제공하는 제네릭(Generic) 타입으로, 상태를 업데이트하는 함수의 타입을 지정할 수 있도록 해준다. React.SetStateAction은 todos 상태를 업데이트하는 데 사용될 수 있는 다양한 값들의 유형을 정의합니다. 일반적으로 이 값은 새로운 상태를 나타내는 배열일 수 있지만, 타입에 따라 다른 값을 전달할 수도 있습니다. 예를 들어, 상태를 비우거나 초기값으로 되돌리기 위해 빈 배열을 전달하거나 이전 상태를 유지하기 위해 setTodos(todos)와 같이 현재 상태를 그대로 전달하..

새로 타입스크립트를 시작한주 처음에 음~ 타입만 선언해주면되는거네? 했는데 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ 완전 하나도 이해가 안가서 강의를 계속 보고보고 추가로 유튜브도 보고 ㅎㅎㅎ했는데도 생각보다 어렵따 어느정도 익숙해지고 이해하면 괜찮을것 같은데... 너무어렵네 ... ㅠㅠ 그리고 평소와 다르지 않게 생활하는데도 너무 피곤하고 못일어나겠고... 정신을 못차리겟다 체력관리 급급하다

react typescript로 todo app 만드는중... type 값이 들어갈 수 없다고 계속 오류가 난다. 아무리 오류메세지를 찾아봐도 안뜨고... 무슨 오류지 .. 다 넣어줬는데 왜그러징?ㅠㅠ 했는데.......... 알고보니 styledcomponents에 내가 태그를 잘못씀.... const StInput = styled.div` padding: 15px 25px; border: none; border: solid 1px #ddd; `; 찾으신분?????? 정말 어처구니....input 태그인데... div 태그로씀 정신똑디 차리자... 날아간 내시간 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 그리고 yarn add styled-components로 패키지를 설치했음에도 자동 import가 안되는것 styled-..

연습 코드들을 올리려하는데 간단한 내용들이라 하나하나 repository를 만들지 않고 .study 폴더에 폴더 별로 모아 넣고싶었다. 터미널에서 생성방법은 못찾았지만 일단은 브라우저에서 직접 생성할 수 있는방법을 찾아서 공유한당 첫번째 방법 새로운 레포지토리를 만들고 위에 Add file > Create new file 클릭 그럼 이렇게 파일 생성 할수 있게 뜨는데 여기서 만들 폴더(나는 prac-array-object)명을 쓰고 '/' 를 치면 자동으로 디렉토리가 생성된다 그리고 바로 커밋하면안되고 임의로 빈 파일이라도 만들어서 커밋해야 폴더 생성이 완료 된다. text로 일단 파일을 만들고 커밋!! 이렇게 생성완료! 두개의 폴더를 만들었는데.. 터미널에서 업로드 방법을 못찾아서 일단 Addfile해..

리액트 타입스크립트 프로젝트 생성 공식문서 https://create-react-app.dev/docs/adding-typescript/ // npx를 사용하는 경우 npx create-react-app my-app --template typescript // yarn을 사용하는 경우 yarn create react-app my-app --template typescript 기존 작업하던 리액트 프로젝트에서 시작 // npx를 사용하는 경우 npm install --save typescript @types/node @types/react @types/react-dom @types/jest // yarn을 사용하는 경우 yarn add typescript @types/node @types/react @ty..

enum과 object literal 비교 enum → 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건 이 있다 간단한 상수 값의 경우 적합 object literal → 멤버의 값이나 데이터 타입을 맘대로 변경 할 수 있어 복잡한 구조 + 다양한 데이터 타입이 필요한 경우에 적합 enum 열거형 데이터 타입 number, string 타입의 값만 대입 컴파일 시에 값이 할당되어 있지 않으면 자동으로 숫자 값으로 매핑 object literal(객체 리터럴) const obj = { a: [1,2,3], b: 'b', c: 4 } 키 + 값의 쌍(pair)으로 구성된 객체를 정의 enum과 매우 흡사 하지만 enum이라는 키워드가 아니고 const라는 키워드를 사용 (const / let 사용가..