프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트
크롬 익스텐션
user agent switcher: user agent 변경 (PC에서 모바일 화면을 볼 수 있음)
awesome screenshot: 스크롤 캡쳐, 부분 캡쳐 및 녹화 등 가능 (가입 필요)
svg export: 해당 사이트의 svg 이미지를 다운로드 할 수 있게 함
image downloader: 해당 사이트의 이미지를 가져와 다운로드 할 수 있게 함
openwax: 접근성 테스트, 문제가 있는 부분을 알려주고 경고함
React developer Tool: React로 개발된 사이트에 접속할 시 아이콘에 색이 생김
vue devtools: vue로 개발된 사이트에 접속할 시 아이콘에 색이 생김
윈도우 응용 프로그램
SVG Viewer Extension for Windows: 윈도우 탐색기에서 svg 이미지를 미리보기 하게 함
vs code 익스텐션
Atom One Dark Theme: 화면의 코드 컬러를 보기 좋게 변경함
live server: 새로고침을 하지 않아도 저장할 시 바로 사이트에 반영됨
beautify: html, css formatter
prettier: 코드 formatter. 자바스크립트 코드 포멧 자동 변경
beautify 기본 설정
beautify selection 단축키지정(alt+b)
join lines 단축키지정(alt+j)
prettier 기본 설정
default formatter → prettier로 변경
settings → format on save 체크
prettier.singleQuote(default:false)
체크, 문자열은 홑따옴표로 통일 (변수에 html이 있을 경우 쌍따옴표가 포함됨)
css, html파일에서도 prettier가 적용되어 한줄로 작성이 불가능하다.
이 경우 오히려 가독성이 떨어짐.
javascript를 위해서 사용한다고 생각하면 됨.
위 문제를 해결하기 위해 .prettierignore 파일을 프로젝트 루트 폴더에 만들고 무시 규칙을 작성.
무시 규칙
#Ignore all HTML files:
\**/**.html#Ignore all css files:\**/**.cssvs code 단축키
f2 : 파일명 변경
ctrl+/ : 주석으로 변경
alt+shift+A : 부분주석
alt+shift+방향키 상하 : 해당 줄 복사
shift+del : 해당 줄 지우기
alt+방향키 상하 : 해당 줄 옮기기
alt+shift+방향키 좌우 : 확장 선택
tab, shift+tab : 들여쓰기, 내어쓰기
ctrl+alt+방향키 상하 : 멀티 커서
ctrl+D : 다음 같은 단어에 멀티커서
alt+클릭 : 멀티 커서
사이트
유용한 사이트
[디비컷]: 웹디자인 참고 사이트
[can i use]: 크로스브라우징 도움 사이트
[닷홈]: 무료 호스팅 사이트 (유료 호스팅 가능)
[Sprite Cow]: 스프라잇 이미지의 범위를 알려줌
[yesviz]: 기기들의 viewprot를 모두 확인할 수 있음
Flex, Grid 설명
[이번에야 말로 CSS Flex를 익혀보자]: Flex 설명 - 1분 코딩
[이번에야 말로 CSS Grid를 익혀보자]: Grid 설명 - 1분 코딩
연습 게임
[CSS Dinner]: CSS 선택자 연습 사이트
[Flexbox Frog]: flex 연습 게임 사이트
기타 팁
닷홈 서버에 올릴 때는 html(루트 폴더)에만 넣어야함.