Nuxt3 프로젝트에 ESLint, Prettier 적용하기
·
⚙️ 개발 팁 & 노하우/프론트엔드
📍prettier 설치prettier 설치eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음 yarn add -D prettier 루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다 { "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "printWidth": 90, "useTabs": false, "endOfLine":"auto"} 사용중인 IDE에서 prettier 설정을 켜준다 📍eslint 설치원래는 cli 를 통해 간편하게 eslint를 설치했지만..yarn create @eslint/config 터미널에서 Vue.js를 선..
Webstorm 단축키 for Mac
·
⚙️ 개발 팁 & 노하우/기타
같은 파일을 우측에서 열기 (설정에서 split right 검색 후 새로 설정해줘야 함)cmd + opt + \
vscode 단축키 모음
·
⚙️ 개발 팁 & 노하우/기타
파일 내의 특정 단어(변수) 모두 선택: cmd(crtl) + shift + L 파일 내 특정 단어 하나씩 선택: cmd(crtl) + D - 단축키 1번씩 누를 때마다 선택됨 탭 이동: crtl + tab 라인 삭제: cmd + shift + K 라인 복사: shift + option(alt) + 위/아래 방향키 - 위로 복사하거나 아래로 복사할 수 있음 파일명 찾기: cmd + P 현재 탭을 우측에 똑같이 열기: cmd + \ 콘솔 빠르게 찍기: crtl + option(alt) + L
Chrome DevTools의 각 탭 살펴보기
·
⚙️ 개발 팁 & 노하우/프론트엔드
Elements 탭Styles- 특정 DOM element에 적용되고 있는 스타일을 확인할 수 있다- 가장 상단의 element.style 에 입력하는 스타일이 우선 적용된다- 우선 적용되는 이유는 inline style로 적용되기 때문이다. 따라서 !important로 이미 적용된 스타일에 영향을 끼치지 않는다 (아래 사진 참조) - ahoy 클래스에서 red !important 로 최우선 효과로 지정했기 때문에, element.style 에서 background를 blue로 변경하려고 해도 취소선이 그어지고 color는 여전히 red로 유지된다 Computed- 최종적으로 적용되는 스타일 확인 가능 Event Listeners- element에 적용된 이벤트 리스너 확인 가능 Console 탭- re..
webstorm 자주 쓰는 단축키 (for Windows)
·
⚙️ 개발 팁 & 노하우/기타
Jetbrain 계열 에디터는 공통으로 작동할 듯..? 📍다중 커서 ✅원하는 곳에 커서 만들기 alt + 원하는 위치 클릭 ✅수직으로 드래그하면서 커서 만들기 alt + shift 누르고 아래로 드래그 📍라인 복사, 제거 등 ✅한 라인 아예 날리기 crtl + Y ✅라인 위 아래로 이동 crtl + shift + ↑↓ ✅한 라인 통째로 아래로 복사하기 crtl + D 📍기타 ✅자동 정렬 crtl + alt + L ✅텍스트 대문자로 만들기 crtl + shift + U ✅터미널 띄우기 alt + F12 ✅모두 바꾸기 crtl + R
깃허브 이슈와 커밋 연결해서 사용하기
·
⚙️ 개발 팁 & 노하우/기타
📍이슈를 만들고 사용하는 이유 프로젝트에서 어떤 작업(버그 수정 or 기능 추가 등)을 시작하려면, 구성원과의 소통에 다음과 같은 것들이 필요할 것이다 - 작업의 필요성 : 왜 이 작업이 필요한지.. - 작업 상세 : 어떤 파일을 수정하거나 생성하게 되는지.. 이를 이슈로 만들고 팀의 이슈 템플릿에서 포맷을 미리 지정할 수 있다 ⭐또한 커밋과 이슈를 연동할 수도 있다 (이슈 넘버를 활용) 📍이슈 템플릿 사용 방법 1. 레포 세팅 > 제너럴 > 이슈 템플릿 - 디폴트 설정 가능 : placeholder, 라벨, 담당자 - 개요, 상세, 기타 등을 정리 - 이슈 제목은 그냥 feat: ~ 이렇게 해도 될듯 2. 커밋 시 이슈 넘버 붙이기 - 커밋 메시지 뒤에 #이슈 번호 붙이면 됨 - 예시 : feat: 새..