TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit)

TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drilling, state 끌어올리기 1. 프로젝트 생성 : npx create-re zerotonine2da.tistory.com Lv2 React + redux-toolkit를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소)가 가능해야 합니다. Lv1의 코드를 고쳐서 만듭니다. Keyword 전역 상태 관리, redux 1. props drilling과 us..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 15.
• textsms

TypeScript : 투두리스트 만들기 (1단계 - React Props)

TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drillin zerotonine2da.tistory.com Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drilling, state 끌어올리기 1. 프로젝트 생성..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 14.
• textsms

TypeScript 오류 : 'IntrinsicAttributes & BaseType & { children?: ReactNode; }' 형식에 선언된 'todos' 속성에서 가져옵니다.

[App.tsx] export type Todo = { id: string; title: string; content: string; isDone: boolean; }; function App() { const initialState: Todo = { id: uuid(), title: '제목1', content: '내용1', isDone: false, }; //데이터 : 배열 안 객체 const [todos, setTodos] = useState([initialState]); return ( My Todo List [InputForm.tsx] import { Todo } from '../App'; type Props = { todos: Todo[]; setTodos: React.Dispatch; }; f..

• format_list_bulleted TypeScript
• · 2023. 12. 14.
• textsms

TypeScript 오류 : InputHTMLAttributes 형식에 target 속성이 없습니다.

function App() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const inputTitle = (e: React.InputHTMLAttributes) => { setTitle(e.target.value); }; return ( 제목 ) 1. 오류 input 태그 onChange 이벤트 발생시, 타입 작성 : React.InputHTMLAttributes "InputHTMLAttributes 형식에 target 속성이 없습니다." 2. 해결 (1) input 태그의 타입 : onChange? 뒤에 있는 것 (2) 타입뒤에 Handler는 제외해야함 => 결론 : input 태그의 타입은 ..

• format_list_bulleted TypeScript
• · 2023. 12. 14.
• textsms

[프로그래머스 | JavaScript] 문자열 내 마음대로 정렬하기

(1) 내 코드 function solution(strings, n) { let arr=[]; let answer = []; //n번째 인덱스를 단어 앞에 붙여주기 strings.forEach(x =>{ x = x.charAt(n) + x; arr.push(x); }); console.log(arr); //앞글자에 따라 다시 정렬하기 arr.sort(); //앞글자 (n번째인덱스로 붙인 알파벳 1개) 제거 for( let i = 0 ; i s1[n] === s2[n] ? s1.localeCompare(s2) : s1[n].localeCompare(s2[n])); } 1) 내부 인덱스를 가지고 비교 2) 내부 character 가 같으면 전체 string 을 비교 3) 내부 character 가 다르면 내..

• format_list_bulleted 코딩테스트
• · 2023. 12. 14.
• textsms

TypeScript : JS / 리액트에서 타입스크립트 사용하기

★ 재상 튜터님의 TS + React Cookbook ★ (1) 함수에서 TS 사용하기 function sum(a: number, b: number): number { return a + b; } function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } 1) sum ( 타입 지정 해주기) : return 의 타입 지정 2) 객체의 타입 지정시 묶어서 지정. (2) 비동기 함수에서 TS 사용하기 type Person = { id: number; age: number; height: number }; async function getPerson(): Promise { const res = await fetch(`htt..

• format_list_bulleted TypeScript
• · 2023. 12. 13.
• textsms