자바스크립트 1일차 - vscode 및 snippet설정하기 (중요)

1. VS Code 다운로드 및 설치. 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

여러 자바스크립트 중 VS Code를 사용하는 이유는 다른 편집기에 비해 상대적으로 가볍고 확장기능이 뛰어나다.

그외 편집기로는 아톰Atom  에디트플러스, 노트패드 등이 있다. 

특히나 VS Code의 경우 나중에 다른 언어를 하는 경우에도 유용하게 사용할 수 있으며, beutifiy나 ES Lint라던지 다양한 패키지를 사용할 수 있다.  무료인점도 큰 장점 중  하나라고 생각든다. 

 

2. 새로운 파일 생성하기 

먼저 VS Code를 키고 나서 왼쪽을 보시면 사이드바를 확인 할 수 있따. 

이 사이드 바에서 내가 생성한 폴더에 새로운 파일을 추가하고 싶다면 

JAV... 의 맨 왼쪽 아이콘을 클릭한다.

그러면 아래 이름을 입력할 수 있는 칸이 나온다. 

 

이번 시간은 연산자를 공부할 것이기 때문에 연산자.html을 입력해준다. 

참고로 .html은 html 확장자며, 이 확장자에 따라서 다양한 포맷을 사용할 수 있다.

 

3. html:5 확장어 사용해보기

VS Code를 사용하는 이유중 하나는 자동완성 기능을 사용하기 편하기 때문이다. 

아래와 같이 html:5라고 입력한 후 엔터를 누르면 자동으로 body를 제외한 html의 기본뼈대가 작성되는것을 확인할 수 있다. 

아래와 같이 입력이 된다.  

 

이처럼 일일이 css나 html을 입력하지 않고 미리 설정한 부분을 입력 할 수 있다. 

스니펫(Snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. - 위키백과

 

사용방법은 아래와 같다. 

File -> Preferences -> User Snippets 클릭 여기서 직접 만들거나

 

 

 

 

 

 

 

 

 

 

 

또는 해당 사이트에서 만들 수 있다. 

https://snippet-generator.app/

snippet generator

내가 만든 코드를 복사한후에 아래 사이트 왼쪽측에 붙여넣기하면  아래와 같이 우측편에 vscode용 snippets를 생성해준다. 

 

저는 siran's html5 라고 이름 지었고 트리거는 html-siran이라고 임의로 지었습니다. 

 

그리고 나서는 copy Snippet을 클릭합니다. 

 

그리고 나서 아까의 File -> Preferences -> User Snippets 클릭한 후 아까 복사한 snippet을 붙여넣는다. 

주의할 점은 { 중괄호 안에 복사한 내용을 붙여넣어야한다. } 

 

 

이제 완성! 

이런식으로 자주 사용하는 snippet을 활용할 수 있다.