Vite

들어가며, 리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다. 본론 일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다. 1. CRA + typescript 설치하기 npx create-react-app --template typescript 이렇게 프로젝트를 만들어주면 루트에 tsconfig.json 파일이 생긴다. 이때, "baseUrl" : "./src" 코드를 추가해준다. 추가해주는 이유는 기본 절대 경로를 사전에 설정해 추후 ..

ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!! 일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자. npm i -D prettier eslint-config-prettier 그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다. extends: [ // ... 'prettier', ], 그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다. { // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a) arrowParens: 'always', // 닫는 괄호(>) 위치 설정 // ex: htmlWhitespaceSensitivity: 'css', br..

초기 환경설정에이어 이제 ESlint 설정을 해보려고 한다. 1. ESLint 구성 파일 ESlint 구성 파일을 npm 초기화 명령을 사용해 생성한다. npm init @eslint/config 그러면 파일구조에 .eslintrc.cjs 라는 파일이 생성된다. 2. ESLint 린팅 제외 파일 특정 파일 또는 디렉토리의 경우 린팅을 수행하지 않도록 ESlint에 지시할 수 있다. .eslintignore 파일을 생성하고 린팅(linting) 검사에서 제외할 디렉토리를 작성하자. .eslintignore build coverage dist 3. ESLint 플러그인 구성 ESLint가 제공하는 다양한 플러그인 중 React 개발과 관련된 항목 구성에 대해 살펴보자. 1) eslint-plugin-reac..

이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다. Vite로 환경설정 시작하기 먼저 터미널창을 열어서 Vite를 설치해보자. npm create vite@latest 그다음 순서대로 눌러줘야하는데 1. React 2. JavaScript (원하는 걸로 고르면 된다.) 그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다. 이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다. 위에서 나온 명령어 그대로 따라치면 된다! 만약 npm run dev 까지 잘 진행했다면 이런 새창이 뜨게된다! 만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다. 나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나..

-프로젝트를 배포 후 리팩토링 및 추가작업을 위해서 test 브랜치의 것들을 새 브랜치에 pull 받고 실행시켰더니 이런 오류가 발생했다..! 이럴 때 경우는 여러가지가 있는 것 같다. 1. node 버전 최신화하기 - node -v 로 버전 확인 후, 최신 버전으로 올려준다. 2. npm 버전 최신화하기 - node 버전과 동일하게 최신화 시켜줘야 한다. 그래서 최신화를 시켜줬지만.... 동일하게 오류가 해결되지 않았다. 여기서 다시 드는 의문.. 에러이긴 한데 나는 `Cannot find package 'vite-plugin-svgr' ~` 가 나온다는 것. 이때 우리가 사용하기 위해 설치한 vite-plugin-svgr 이 불러와지지 않는다는 말인 것 같았다. 아까 npm i 로 다 설치해줬지만 혹..