<div id="readability-page-1" class="page"><div><blockquote>
<p><strong>Velopert</strong> 선생님의 강의를 보고 쓴 글입니다.</p>
</blockquote>
<p>** Redux로 만들어보는 TodoList **</p>
<blockquote>
<h3 id="액션-타입--액션-생성함수--액션의-ts-타입-선언">액션 타입 &amp; 액션 생성함수 &amp; 액션의 TS 타입 선언</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/88d1e801-d359-4761-999e-d653f409fea0/image.png"></p>
<p>** src/modules/todos.ts **</p>
</blockquote>
<blockquote>
<h3 id="타입-및-초기-상태-선언">타입 및 초기 상태 선언</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/987a19a7-b9e5-4e6a-a860-32944dde68c2/image.png"></p>
<p>** src/modules/todos.ts **</p>
</blockquote>
<blockquote>
<h3 id="리듀서-구현">리듀서 구현</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/273de3b5-6fe0-47d0-819a-4f080c678cde/image.png"></p>
<p>** src/modules/todos.ts **</p>
</blockquote>
<blockquote>
<h3 id="루트-리듀서-등록">루트 리듀서 등록</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/f199d290-e930-4673-80cf-10e8b6aae8dd/image.png"></p>
<p>** src/modules/index.ts **</p>
</blockquote>
<blockquote>
<h3 id="투두리스트-컴포넌트-구현하기--hooks-">투두리스트 컴포넌트 구현하기 ( Hooks )</h3>
<ul>
<li>** TodoInsert ** : 새 할일 등록하는 컴포넌트</li>
<li>** TodoItem ** : 할 일의 정보를 보여주는 컴포넌트</li>
<li>** TodoList ** : TodoItem의 정보를 하나씩 보여주는 컴포넌트</li>
</ul>
</blockquote>
<blockquote>
<h3 id="todoinsert">TodoInsert</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/640046c3-eeba-408f-bbc4-b31cd9098384/image.png"></p>
<p>** src/components/TodoInsert.tsx **</p>
</blockquote>
<blockquote>
<h3 id="todoitem">TodoItem</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/d17971ba-906d-491c-8460-fa64b748ed0e/image.png"></p>
<p>** src/components/TodoItem.tsx **</p>
</blockquote>
<blockquote>
<h3 id="todoitemcss">TodoItem.css</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/de967fc1-2da1-442c-ae33-f09620f28fc1/image.png"></p>
<p>** src/components/TodoItem.css **</p>
</blockquote>
<blockquote>
<h3 id="todolist">TodoList</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/50a42402-ca2e-4a21-b321-befeea1a21cd/image.png"></p>
<p>** src/components/TodoList.tsx **</p>
</blockquote>
<blockquote>
<h3 id="app-렌더링하기">App 렌더링하기</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/f92e1c94-9489-4d34-9fb8-c54400ab7620/image.png"></p>
<p>** src/App.tsx **</p>
</blockquote>
<blockquote>
<h3 id="custom-hook-만들기">Custom Hook 만들기</h3>
<ul>
<li>** useTodos ** : 할 일들을 조회하는 Hook</li>
<li>** useAddTodo ** : 새로운 할 일을 등혹하는 Hook</li>
<li>** useTodoActions ** : 할 일들 토글 및 삭제 하는 Hook</li>
</ul>
</blockquote>
<blockquote>
<h3 id="usetodos">useTodos</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/b7fce417-1851-45d3-bbcb-c9c879e154b6/image.png"></p>
<p>** src/hooks/useAddTodo.tsx **<br>
<img src="https://media.vlpt.us/images/jce1407/post/b805635b-5769-414a-8744-bc1525d164fe/image.png"></p>
<p>** src/components/TodoList.tsx **</p>
</blockquote>
<blockquote>
<h3 id="useaddtodo">useAddTodo</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/f86c397d-f9d0-4a93-8d70-d0fb72b42209/image.png"></p>
<p>** src/hooks/useAddTodo.tsx **<br>
<img src="https://media.vlpt.us/images/jce1407/post/e2052399-1b52-46d5-ac65-1b6f655bd6b1/image.png"></p>
<p>** src/components/TodoInsert.tsx **</p>
</blockquote>
<blockquote>
<h3 id="usetodoactions">useTodoActions</h3>
<p><img src="https://media.vlpt.us/images/jce1407/post/d3876239-3592-4106-b799-6f6ccf9779eb/image.png"></p>
<p>** src/hooks/useTodoActions.tsx **<br>
<img src="https://media.vlpt.us/images/jce1407/post/24e0291f-49c8-41cb-8e9e-52ae95acdfd6/image.png"></p>
<p>** src/components/TodoItem.tsx **</p>
</blockquote>
<blockquote>
<h3 id="마치면서">마치면서🎉</h3>
<p>** TS 찍먹시리즈 **가 이제 끝이 났습니다!<br>
학교 프로젝트와 동아리 코드 유지 보수를 위해 ** TypeScript ** 를 공부해야 했었고<br>
** Velog ** 로 정리도 하고 이것을 만드신 ** Velopert ** 선생님의 강의도 보았습니다.<br>
고퀄리티의 강의를 무료로 배포해 주신 선생님 정말 ** 감사합니다! 🙏 **</p>
<p>강의를 보며 여러 가지를 알게 되었고 또 직접 구현하면서 배우니까 더 빠르게 익힐 수 있었던 거 같아요!<br>
마치면서 기억에 남는 점 들을 정리해보려 합니다.</p>
<blockquote>
<ul>
<li>액션 타입 선언에서 ** <code>as const</code> ** 쓰기</li>
<li>액션 객체 타입 준비시 <strong><code>ReturnType</code></strong> 쓰기</li>
<li>** 컴포넌트 / 컨테이너 ** 구조 대신에 ** Hooks ** 사용하기</li>
<li>** useRef ** 쓸때는 타입을 모두 ** 제네릭 ** 으로 명시하기</li>
</ul>
</blockquote>
<h4 id="대략적인-redux-플로우">대략적인 Redux 플로우</h4>
<blockquote>
<p>** 1. 액션 타입 선언<br>
2. 액션 생성 함수 생성<br>
3. 액션 객체에 대한 Type준비<br>
4. 상태의 타입과 초기값 선언<br>
5. 리듀서 만들기<br>
6. index쪽에 다 설정 해주기<br>
7. 컴포넌트 와 컨테이너쪽 만들기<br>
8. App에 렌더링 해주기 **</p>
</blockquote>
</blockquote></div></div>

Clzzi.log

Clzzi

Velopert 선생님의 강의를 보고 쓴 글입니다.
** Redux로 만들어보는 TodoList **
액션 타입 & 액션 생성함수 & 액션의 TS 타입 선언
** src/modules/todos.ts **
타입 및 초기 상태 선언
** src/modules/todos.ts **
리듀서 구현
** src/modules/todos.ts **
루트 리듀서 등록
** src/modules/index.ts **
투두리스트 컴포넌트 구현하기 ( Hooks )
** TodoInsert ** : 새 할일 등록하는 컴포넌트
** TodoItem ** : 할 일의 정보를 보여주는 컴포넌트
** TodoList ** : TodoItem의 정보를 하나씩 보여주는 컴포넌트 
TodoInsert
** src/components/TodoInsert.tsx **
TodoItem
** src/components/TodoItem.tsx **
TodoItem.css
** src/components/TodoItem.css **
TodoList
** src/components/TodoList.tsx **
App 렌더링하기
** src/App.tsx **
Custom Hook 만들기
** useTodos ** : 할 일들을 조회하는 Hook
** useAddTodo ** : 새로운 할 일을 등혹하는 Hook
** useTodoActions ** : 할 일들 토글 및 삭제 하는 Hook
useTodos
 
** src/hooks/useAddTodo.tsx **
** src/components/TodoList.tsx **
useAddTodo
** src/hooks/useAddTodo.tsx **
** src/components/TodoInsert.tsx **
useTodoActions
** src/hooks/useTodoActions.tsx **
** src/components/TodoItem.tsx ** 
마치면서🎉
** TS 찍먹시리즈 *가 이제 끝이 났습니다! 
학교 프로젝트와 동아리 코드 유지 보수를 위해 * TypeScript ** 를 공부해야 했었고
** Velog ** 로 정리도 하고 이것을 만드신 ** Velopert ** 선생님의 강의도 보았습니다. 
고퀄리티의 강의를 무료로 배포해 주신 선생님 정말 ** 감사합니다! 🙏 **
강의를 보며 여러 가지를 알게 되었고 또 직접 구현하면서 배우니까 더 빠르게 익힐 수 있었던 거 같아요!
마치면서 기억에 남는 점 들을 정리해보려 합니다.
액션 타입 선언에서 ** as const ** 쓰기
액션 객체 타입 준비시 ReturnType 쓰기
** 컴포넌트 / 컨테이너 ** 구조 대신에 ** Hooks ** 사용하기
** useRef ** 쓸때는 타입을 모두 ** 제네릭 ** 으로 명시하기
대략적인 Redux 플로우
** 1. 액션 타입 선언
2. 액션 생성 함수 생성
3. 액션 객체에 대한 Type준비
4. 상태의 타입과 초기값 선언
5. 리듀서 만들기
6. index쪽에 다 설정 해주기
7. 컴포넌트 와 컨테이너쪽 만들기
8. App에 렌더링 해주기 **

타입스크립트 찍먹해보기4

댓글