[카카오 테크 캠퍼스 2기] 프론트엔드 협업을 위한 개발 환경 세팅

카카오 테크 캠퍼스 2기 카테톡에서 발표한 내용입니다.
발표 영상은 해당 링크를 통해 확인할 수 있습니다.
https://www.youtube.com/watch?v=CaQQjNuG-vU

Transcript

1. 협업을 위한 개발 환경 세팅 ESLint, Prettier, Husky로 코드 자동으로 청소하기 카카오 테크 캠퍼스 2기 강병현 + + +
2. 일관된 코드스타일과 규칙?
4. 강제?
5. 목차 Prettier ESLint Husky lint-staged
6. Prettier
9. 정해진 규칙에 따라 코드 스타일을 자동으로 정리해주는 도구
10. Code Formating
11. Prettier 설치
15. Prettier Playground
17. 사용자 룰 정의
18. .prettierrc
19. Prettier 실행
21. 명령어 실행
23. --write => 포맷팅 후 파일 덮어쓰기 --cache => 포맷팅으로 변경된 부분만 확인
25. 단축어 지정
26. package.json
28. ESLint
30. ES ECMA Script의 약자 Javascript를 표준화하기 위해 만들어진 규격 Lint 소스코드를 분석하여, 오류, 버그, 코딩 스타일 검사하고, 에러로 표시
31. 문법 오류와 스타일 문제를 분석해서 에러로 표시하는 도구
32. Prettier vs ESLint
33. 코드 포맷팅 문법 오류, 스타일 검사 + 코드 포맷팅
34. ESLint 설치
35. ⚠️
36. 코드 포맷팅 문법 오류, 스타일 검사 + 코드 포맷팅
37. eslint-config-prettier
41. eslint-config-prettier 적용
43. .eslintrc
44. 사용자 룰 정의
45. .eslintrc
46. 명령어 실행
47. --cache => 변경된 부분만 확인
48. .gitignore
49. 단축어 지정
50. package.json
52. 일관된 코드스타일과 규칙
54. 강제?
55. Husky
56. Git Hooks
57. Git 이벤트 발생시 자동으로 실행되는 스크립트
58. commit push
59. .git/hooks/pre-commit
61. Git Hooks 설정을 간편하게 해주는 라이브러리
62. Husky 실행
64. Hook 추가
68. lint-staged
69. 스테이징 영역에 있는 파일들만 린트 작업 수행 도구
70. lint-staged 설치
72. lint-staged 설정 및 초기화
76. 강제
77. 마무리
78. Prettier 코드 스타일을 자동으로 정리하여 일관성을 유지하는 도구 룰을 통한 일관된 코드 스타일과 품질 유지 강제를 통한 높은 효율성 Husky Git Hooks를 통해 코드 검사를 자동화하여 코드 품질을 유지하는 도구 ESLint 코드 문법 오류와 스타일을 검사하여 품질을 유지하는 도구 lint-staged 변경된 파일에 대해서만 린트 작업을 수행하여 효율성을 높이는 도구
79. 감사합니다