개발 공부 시리즈/Redux-ToolKit10 [RTK] RTK-Query 공식문서보며 직접 사용해보기 RTK-Query 공식문서 보며 직접 사용해보기 RTK 공식문서에 있는 Query 예제를 따라 해 보면서 실습하겠다. 나는 빠른 진행을위해 타입 스크립트 rtk 템플릿을 다운로드하였다. // Redux + TypeScript template // 가운데 rtk-ts는 자신이 생성할 프로젝트 명이다. npx create-react-app rtk-ts --template redux-typescript 1. createApi 작성 /src 폴더 하위에 service 폴더를 만들고 pokemon.ts 파일을 생성한다. 생성 후 아래와 같이 작성한다. /src/service/pokemon.ts //pokemon.ts import { createApi , fetchBaseQuery } from '@reduxjs/t.. 2022. 11. 7. 18:05 [RTK] Typescript todoList 만들기 (6) - webpack 적용해보기 [RTK] Typescript todoList 만들기 (6) - webpack 적용해보기 webpack? 웹팩은 여러 가지 자원(.html ,.css,.js )의 파일을 단 하나의. js 파일로 모듈 번들링 시켜주는 도구이다. 내가 적용한 TodoApp에 webpack을 적용시켜보겠다. 아래는 웹팩 공식 문서 사이트 링크이다. https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any reso.. 2022. 11. 2. 01:32 [RTK] Typescript todoList 만들기 (5) - eslint, prettier 적용해보기- 2 이전 포스팅에 이어서 적용을 해보겠다. 다음과 같은 eslint 실행 명령어로 실행을 해보면 npm eslint . 다음과 같이 굉장히 많은 에러 사항들이 뜨게 된다. 이를 하나하나 제거해가며 진행해 보자. ESLint에서 설정된 규칙들은 굉장히 엄격한 것들도 있어서. .eslintrc 파일의 "rule" 부분에 예외들을 추가해나가면서 작성해야 한다. .eslintrc { "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "airbnb-typescript", "airbnb" ], "pars.. 2022. 11. 1. 12:03 [RTK] Typescript todoList 만들기 (5) - eslint, prettier 적용해보기- 1 ※ 해당글은 약간의 시행착오가 있어 모든 포스팅이 완료 된 후 따라해주세요. [RTK] Typescript todoList 환경에 eslint, prettier 적용하기 - 1 내가 만드는 TodoList 앱 RTK + Typescript 환경에 ESLint와 Prettier를 적용해 보겠다. ESLint? ESLint ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 정적 코드 분석 도구이다. 코드의 일관성을 높여주고 버그를 방지하는 것이 주목적이다. 쉽게 말하면 코드의 규칙을 적용하여, 문제를 사전에 방지할 수 있도록 하는 툴이다. 규칙을 커스텀할 수 도 있다. https://eslint.org/ Find and fix problems in your Jav.. 2022. 11. 1. 02:08 [RTK] Typescript todoList 만들기 - (4) 컴포넌트 분리하기 이전 포스팅 글 - 2022.10.25 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (1) - 2022.10.26 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기 - 2022.10.27 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (3) 삭제 기능 만들기 [RTK] Typescript todoList 만들기 - (4) 컴포넌트 분리하기 이번 포스팅에서는 RTK TODO APP의 컴포넌트 분리를 해보겠다. 컴포넌트 분리 기준은 개발자마다 각각 달라서 자신이 편한 대로 쓰는 게 가장 좋기는.. 2022. 10. 28. 02:00 [RTK] Typescript todoList 만들기 - (3) 삭제 기능 만들기 [RTK] Typescript todoList 만들기 - (3) 삭제 기능 만들기 이전 포스팅에서는 추가 기능, material UI를 사용하여 디자인 등을 만들었다. 간단한 TodoListApp에 여러가지 설정 및 기능 등을 적용하면서 계속 구현해 볼 계획이다. 이전 포스팅 - 2022.10.25 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (1) - 2022.10.26 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기 이번 포스팅은 삭제 기능을 구현하도록 한다. 현재 TodoList는 카드 형태로 구현이 되어있다. 휴지통 버튼을 누르면 삭제가 되도록.. 2022. 10. 27. 01:50 이전 1 2 다음 728x90
