[한입챌린지] 1일차 - JavaScript와 VSCode 환경설정

 

JavaScript 기초 개념

---

JavaScript(JS)는 무슨 역할을 하는 언어일까?

- Web 페이지를 개발하기 위해 만들어진 언어 (JS, HTML, CSS)

- 현재는 웹 서버, 데스크탑 어플리케이션, 모바일 어플리케이션, 기타 등등 넓어졌다.

 

JavaScript는 어떻게 실행할까?

- 웹 브라우저에 있는 JavaScrip 엔진을 통해 직접 실행해 볼 수 있다.

GitHub 저장소 생성

---

새로운 github 저장소를 만들고 로컬 폴더와 연동하기

- REAMD.md 파일도 생성하도록 설정했으면 git clone 명령어로 쉽게 끝나는데.. 체크하는 걸 깜빡했다.

GitHub 신규 레포지토리 생성

- GitHub에서 알려준 대로 첫번째 코드블럭에 있는 예제를, VSCode 터미널에서 따라한다.

로컬 폴더와 GitHub 레포지토리 연결관련 Git 명령어

VSCode 환경 설정

---

VSCode 확장 프로그램 Korean Language Pack 설치

- VSCode에 한국어 팩을 설치하고 싶은 경우

Koean Language Pack for VSCode

 

VSCode 확장 프로그램 Prettier 설치하고 설정(Windows: Ctrol+쉼표, MacOS: Cmd+쉼표) 하기

- 저장만 해도 코드 정렬되도록 하기

- prettier 설정에서 format on save 설정을 활성화한다.

- 나는 팀 프로젝트를 하면서 다른 설정을 건드렸는지, console.log에서 . 이후를 줄바꿈해도 다시 안붙는다...

Prettier

format on save for Prettier

 

VSCode 확장 프로그램 Material Icon Theme 설치

- 직관적인 파일 아이콘으로 변경해주는 확장 프로그램 설치

- 설치 후 파일 아이콘 테마 선택에서 Material Icon Theme를 선택

Material Icon Theme

 

VSCode 확장 프로그램 Error Lens 설치

- 오류 발생 시 하이라이트가 되며, 오류 메시지까지 코드상에서 알려주는 플러그인

Error Lens

Error 표현 예시

 

VSCode 확장 플그램 Live Server 설치하고 실행하기 (실습 환경 설정)

- JavaScript 코드 실습을 진행하기 위해 꼭 필요한 플러그인

Live Server

- VSCode에서 제공하는 기능을 검색을 통해서 실행할 수 있음
(live server 검색 > Live Server: Open with Live Server 선택)

- Windows: Ctrol+Shift+P, MacOS: Cmd+Shift+P 를 누르고 검색창을 통해 Live Server 실행하기

- Live Server를 실행할 때는, JavaScript 파일이 아닌 index.html 파일로 이동(탭 선택)하고 실행시켜야 한다.

- Live Server 는 단축키 Alt + L + O를 통해 실행할 수도 있음

Live Server 실행 명령어 탐색창 (Ctrol + Shift + P)

- Live Server 플러그인 기능을 통해서 JavaScript 작성 결과를 저장(Ctrol+S) 하기만 해도 바로바로 출력 결과를 확인할 수 있는 실습 환경을 만듦

- Live Server 를 종료하는 방법은 하단의 "Port: xxxx" 을 누르면 된다.

- Live Server 를 종료하면 웹 브라우저에서 접근할 수 없게된다. (새로고침 해보면 접속 안됨을 확인할 수 있다)

Live Server 중단 Icon