[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 2회차 미션

챌린저스 2회차~

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 2일차입니다!

작심삼일이 아니라 작심오십일을 해야 환급도 받고 실력도 쑥쑥 높일 수 있는 챌린저스 프로그램...! 아자아자 😂

이대로라면 한 달간 HTML, CSS, JS 강의 듣고 마지막 이십 일 동안 리액트 관련 강의 들을 것 같은데,

아무렴 어때요. 꾸준히 하자!

VS Code 입문자용 설명 듣고 메모! 📝

오늘은 Visual Studio Code 설치 및 입문자용 설명 강의를 수강했어요.

(04. 에디터소개 / 05. VS code 설치 및 설정 / 06. VS code 한글패치 / 07. Beautify & LiveServer / 08. 그 외 확장 프로그램과 알아두면 좋은 단축키)

저는 이미 VS Code를 사용하고 있지만, 강사님이 중요한 단축키와 편리한 확장 프로그램을 소개해주셔서 좋았답니다.

특히 Beautify 부분...! 구글링해서 찾아보면 다들 Ctrl + Alt + L 키를 누르면 자동 정렬이 된다고 하는데 안 되어서 골머리를 썩였었죠. 하지만 알고보니 단축키를 먼저 설정해줬어야 했네요. 😂

Wrapping을 쉽게 하는 법도 배울 수 있어서 유익했어요. 더 자세한 공부 내용은 아래에서 ⬇⬇⬇

---

웹 개발 툴 (VS Code)

◾ 웹앱 디자인과 달리 웹 개발은 툴에 대한 종속성이 거의 없음. 하지만 메모장 코딩은 좀 무리...!

➡ Sublime Text, Atom, Brackets, VS Code, Webstrom 등의 툴을 사용하여 개발해보자.

(전 회사에서 같은 팀 선배님은 Sublime Text를 쓰셨고 최근에 들은 클론코딩 강의 강사님은 Webstorm 사용하심)

◾ '파일 > 폴더 열기' 대신 '파일 > 최근 항목 열기' 를 통하면 더 빨리 원하는 폴더를 찾을 수 있을 지도!

◾ HTML 기본 세팅:  ! 을 입력하고 나타나는 자동완성 팝업에서 Enter를 입력하면 HTML 기본 구조가 세팅됨.

◾ (Window OS) 파일 > 기본 설정 > 바로가기 키 를 통해 유용한 바로가기 키가 무엇인지 보고 개인 단축키도 등록.

 

확장 프로그램

◾ Beautify 설치 후 단축키 등록할 때: Beautify Selection만 설정! ➡ Ctrl + Alt + L 로 설정하기.

◾ Live Server 설치: 아래 상태바의 Go Live를 누르면 바로 개발 중인 웹 화면이 열림.

 

단축키

◾ 단어 찾아서 바꾸기: Ctrl + H

◾ 화면 분할: Ctrl + \ (백슬래쉬)

◾ Wrapping 단축키:

  ① 안에 넣을 부분을 모두 드래그

  ② Ctrl + Shift + P 입력

  ③ Wrap 검색 후 Emmet: 약어로 래핑 선택

  ④ div 또는 div.class 등 원하는 태그 입력

---

강의 링크: https://bit.ly/3m0t8GM