일안하고블로그

개발 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 ..

vscode에서 많은 snippets Extention을 이미 제공합니다. 하지만, 최근에 타입스크립트를 많이 사용하고 있어서 만들고 싶은 형태의 타입스크립트를 사용하는데 많은 한계가 있어서 간단하게 Snippets을 만들어 사용 방법을 남깁니다. 1. vscode를 띄우고 캡쳐 화면의 경로로 들어갑니다. 2. 다음으로 New Global Snippets file을 클릭합니다. 3..클릭을 하시면 이름을 정해야하는데 이름은 편하신대로 정하시면 됩니다. 4. 파일이 만들어지면 양식에 맞춰서 형태를 만들어주면 됩니다. 제가 간단하게 만든것을 보고 참조해서 만들면 됩니다. { "Typescript for Props": { // snippets이름 "prefix": ["dh1"], // 약어입니다. 편하게 본인..