본문 바로가기

React58

React5일차-lint-staged lint-staged 오늘은 husky와eslint prettier을 연결 하는것을 해보겠다 빈폴더에 우클릭 하고 vscode열어주세요 (하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ ) code(으)로 열기 클릭 들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ) 새터미널 열기 npx create-react-app 폴더명 치고 엔터(create-react-app 생성) cd 만든폴더명 치고엔터(만들 폴더로 이동) code . -r 치고 엔터 하면 새vscode 창이 뜰겁니다(해당폴더 vscode 로 열기) 여기서 새터미널 열어주세요 npm init -y 치고 엔터 npx husky install 치고엔터(husky 도움되는 도구 설치).. 2022. 1. 24.
React5일차-husky husky 는 git 에 올리기전에 처리해줄것을 설정해주는 것입니다. 올리기전에 미리 검사 받는거라고 생각하시면 편해요 빈폴더에 우클릭 하고 vscode열어주세요 (하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ ) code(으)로 열기 클릭 들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ) 새터미 널 열기 npm inint -y 하고 엔터 엔터치기전 엔터 치고나서 package.json파일 생성 됬을겁니다 git init 치고 엔터(git 기본설정) npm i husky -D 치고 엔터 npx husky install 치고 엔터 package.json 에 script 내부에 "prepare": "husky install", 추가 하고 .. 2022. 1. 24.
React5일차-prettier prettier 에 대해서 알아보겠습니다.이것도 eslint와 비슷한 역할을 합니다. 빈폴더에 우클릭 하고 vscode열어주세요 (하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ ) code(으)로 열기 클릭 들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ) 새터미 널 열기 npm inint -y 하고 엔터 엔터치기전 엔터 치고나서 package.json파일 생성 됬을겁니다 npm i prettier -D 치고 엔터 이제 index.js라는 폴더 만들어주겠습니다. 클릭 이렇게 해서 index.js 파일을 만들어주세요 그럼 저희는 이렇게 파일목록이 될거입니다 그다음 index.js켜서 console.log("hi)입력 ;찍지 말아주세요 n.. 2022. 1. 24.
React5일차-eslint 오늘은 쉽게설명해서 우리의 코딩을 도와주는 프로그램 중하나인 eslint를 배워보겠습니다. 이해를 위해 게임을 하시는분들은 애드온 같은거라고 생각하시면 편하고요 게임을 안하면 카카오톡 자동완성 같은거라고 보시면됩니다 즉 저희가 코드가 오류가 나지않게 문법을 지키도록 교정해주느 프로그램입니다. 시작하겠습니다. 빈폴더에 우클릭 하고 vscode열어주세요 (하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ ) 들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ) npm inint -y 하고 엔터 package.json파일 생성 됬을겁니다 npm i eslint -D치고 엔터 npx eslint --init 치고엔터 선택하는게 나올텐데 보고 자기 상.. 2022. 1. 24.