라이브러리3 redux toolkit 라이브러리 설치 및 세팅 *아래의 프로젝트는 타입스크립트를 사용합니다. ts 를 사용하지 않는다면 js 파일로 만들어 주세용* 참고로 아래처럼 폴더를 만들어 파일을 넣어두는 것은 그저 편한 관리를 위한 것으로 공식 문서에서 권장하는 것이므로, 굳이 저렇게 안해도 제대로 로직만 잘쓰면 잘 돌아가긴 한당 그럼 일단 yarn으로 라이브러리 설치부터 하자 아래의 코드들을 터미널에 입력하여 라이브러리를 설치하자 yarn add @reduxjs/toolkit yarn add redux react-redux yarn add --dev @types/react-redux 그 후 프로젝트 폴더 내의 src 폴더에 store 폴더를 만든다 store 폴더 안에 hooks.ts 파일을 만들고 아래의 코드를 붙여 넣어주자 import { TypedUs.. 2022. 12. 14. react / typescript 프로젝트에 eslint, prettier 세팅하기 프로젝트를 진행하며, 리액트와 타입스크립트를 사용하는 프로젝트에 eslint와 prettier 를 세팅하는 방법을 정리하려 한다 1. 아래의 코드를 터미널에 입력하여 CRA (create-react-app) 로 타입스크립트 기반의 리액트 프로젝트를 생성한다 npx create-react-app 프로젝트폴더명 --template typescript 2. 터미널에 'cd 프로젝트폴더명' 을 입력하여 프로젝트 폴더로 이동하여 아래와 같이 eslint 라이브러리를 설치한다 (npm 말고 yarn 쓰자 npm 별로당) yarn add eslint 3. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.eslintrc.js' 파일을 생성하고 아래의 코드를 붙여넣어주자 module.expor.. 2022. 12. 14. classnames 사용법 classnames 모듈은 html요소에서 클래스를 조건부로 넣거나 빼줄때 따로 조건문 필요없이 쉽게 작성하게 해주는 라이브러리다 만약 내가 돈이 있을때만 'can-buy' 라는 클래스명을 추가하고, 돈이 없을때는 클래스를 빼고 싶다면 아래와 같이 조건문을 사용해서 클래스를 추가하는 방법을 사용할 수 있지만 export default Tok = () => { let hasMoney = true; const myClasses = [sleepy, hungry]; if (hasMoney) { myClass.push('can-buy'); } return ( Hello Tokkissi ) } classnames 라이브러리를 사용하면 자바스크립트 조건문을 사용하지 않고도 같은 의미를 말할수 있다. 아래와 같이 사용.. 2022. 11. 26. 이전 1 다음
