뉴히의 개발 로그

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-..

리액트 타입스크립트 프로젝트 생성 공식문서 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 사용가..

JavaScript의 약점 JavaScript는 원래 웹 페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어이다. 동적 타입 언어는 예기치 않은 버그가 나올 확률이 매우 높다. JavaScript는 변수의 타입이 실행시에 결정된다. 그렇기 때문에 변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시간에 변수의 값과 타입을 모두 확인해야하는 번거로움이있다. JavaScript는 let, const 같이 변수/상수를 구분하는 정도의 키워드만 지원된다. JavaScript에서는 프로그래머가 마음만 먹으면 객체의 성질을 수시로 변화시킬 수 있어 자칫하면 실수로 엉뚱한 값이 나오거나 큰 오류가 날 수 있다. 그래서 TypeScript를 쓰면 좋다!! TypeScript의 특/장점 Type..

리액트 툴킷과 비동기통신, 미들웨어, 쓰로틀링, 디바운싱, 쿠키, 세션, 토큰 등등 많은걸 배웠고 내용도 어려워서 강의를 몇번이나 듣고 이해가 되었던 지난 3주간의 스터디 !!! 그리고 API를 이용한 새로운 팀 프로젝트도 진행했다. 팀원분 모두 너무 좋은 분들이었어서 같이 으쌰으쌰하며 많이 배우고 프로젝트도 화목?하게 무리없이 매우 잘 진행했다! 지난 3주간의 KTP 회고 Keep 팀원들과 매일 아침인사도하고 계획도 세우고 매일 3문제씩 정해서 알고리픔 풀이 공유도했다. 특히나 알고리즘 풀이 공유는 처음 해봣는데 너무 좋았다! 매일 꾸준히 하자고 하지만 막상 강의듣기 급급하고, 프로젝트 진행하기 급급하니 미루기 일수였던 알고리즘 풀이! 팀원들과 공유를 위해서 꾸준히 하니까 정말 좋았던것 같다. 그리고 ..