일안하고블로그

이번에 다룰 내용은 typescript interface /action / redux / reducer 을 통해서 counter 을 만드는 예제를 만들어 보겠습니다 . 이전에 react로 counter예제를 만들어 보셨으면 이해하기 편합니다. 타입스크립트하고 redux를 어느정도 이해하시면 내용은 조금 많지만 금방 이해하실수 있을거에요 . 1. 명령어를 입력해주세요 . yarn add redux next-redux-wrapper yarn add --dev redux-devtools-extension redux-logger next 와 react를 연결하기 위해서 next-redux-wrapper가 필요합니다. 나머지는 미들웨어 설정을 하면서 결과를 보기 위해 받습니다. 2. store 생성 import ..

개발 tool은 vsocde로 사용을합니다. 개발을 할때 eslint와 & prettier 적용을 안하면 정말 많이 불편합니다. 설정을 제대로 하면 개발 시간이 2배이상 증가 할 거라고 생각될 만큼 저한테는 정말 중요한 설정입니다. 1. yarn add 해주세요 . (제가 사용하는 것들입니다.) yarn add --dev eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser 2. 로컬에 .eslintrc 파일을 추가합니다. {..

프론트엔드 개발을 하면서 빠르게 개발하고 쉽게 유지 보수를 하기 위해서 여러가지 방법을 사용하다가 타입스크립트 / 리액트 / NextJs를 사용하는 경우가 많아 졌고 기존에 create-react-app에서 create-next-app 을 사용 해 볼 기회도 많아지고 여러가지 프로젝트를 하면서 정리의 필요성을 느꼈습니다. 일주일만에 빠르게 사이트를 개발 할때 정말 빠르게 개발을 할 수 있습니다. nextJs같은경우 최근에 버전업을 해서 사용법도 조금 달라진부분이 있어서 2021년 1월 최신버전을 사용해 보려고 합니다. NextJs - create-next-app 적용 방법 yarn global add create-next-app // create-next-app 글로벌 추가 create-next-app ..