캠프 2주 4일차

Day-11

처음 개발을 할때 셋팅과 폴더 구조 오늘 알아본 도구들은 모두 실무에서 사용 되며 여러 사람들이 개발 할때 편 좋은 도구들이다.
지금은 사용하기 힘들지 몰라도 적응 되면 실보단 득이 많으니 실무에 맞는 폴더 셋팅을 배워서 적용 후 적응하자!

1.프로젝트 전체 새롭게 셋팅하자

1.프로젝트 전체 새롭게 셋팅하자 (eslint, prettier, husky)

1-1 eslint

eslint는 여러 사람이 함께 개발할 때, 사용하지 않는 변수 없애기, camelCase/snakecase 결정하기 등 문법적인 규칙 부분에 통일성을 부여해주는 도구
_ex)누군가는 ''를 쓰고 누구는 ""를 쓰는 것을 통일 해줌

설치 과정중 몇 가지 질문이 있는데, 상황에 맞게 설정 하면된다.
추가적으로ESLint Extention 를 vs코드 extension에서 설치를 해줘야 한다

1-2 prettier

Prettier는 띄어쓰기, 줄바꿈 등 화면에 보이는 부분에 통일성을 부여해주는 도구
말 그대로 저장 하면 알아서 줄바꿈, 띄어쓰기를 자동으로 해준다.

또한 추가적으로 VSCode Prettier Extention 를 설치 해준다.
eslint 와 Prettier 연결 시켜줘야한다.
.eslintrc.js 파일 안에서 "extends" 배열에 "prettier"를 추가해줍니다.

{
  "extends": [
    "plugin:react/recommended", 
		"standard",
    "prettier"
  ]
}

1-3 husky

husky는 소스코드를 git에 commit 하기 전에, 기존의 규칙(typescript, eslint, prettier 등)을 지켜가면서 코딩을 진행하였는지 검증해 주는 도구 규칙에 어긋나는 코드가 있다면 commit을 강제로 거절한다. 실무적으로 더 안정적인 협업을 할 수 있다.

package.json 파일에 husky와 lint-staged 내용을 작성해줍니다.

{
	...
	...
"devDependencies" : {
	...
	...
},
"husky": {
    "hooks": {
      "pre-commit" : "lint-staged"
    }
  },
"lint-staged": {
	"**/*.{ts,tsx}" : [
			"npx eslint ."
	  ]
	}
}

오늘은

개발 공부는 혼자 단기간에 취업을 하기에 상당히 힘든 일 일것 같다.
안그래도 알아야 할 것들이 투성인데 실무에서 사용 되는 폴더 구조, 도구 등을 알아야하니 전공생도 아닌데 혼자 해 보려고 생각만 한게 다행이다..