비주얼 스튜디오 코드 다운로드 개발 환경 설정

코딩 왕초보 니 해피가 필요한 웹을 만들어 보기 위해서 코딩 알려주는 누나가 알려주는 데로 비주얼 스튜디오 코드를 다운로드하고 개발 환경 설정을 따라한 과정을 공유하였다. 전문 개발자가가 아니더라도 웹 개발에 관심을 가지고 있다면 코딩 시작 첫걸음을 시작할 수 있을 것이다.

 

비주얼 스튜디오 코드 설치

개발자 환경 확장자 설정

프로젝트 시작 방법

 

비주얼 스튜디오 코드 다운로드 개발 환경 설정

 

 

1. 비주얼 스튜디오 코드(visual studio code) 설치

비주얼 스튜디오 코드는 마이크로소프트에서 제공하는 무료 편집기로서 본인 운영 체제(windows, MacOs, Linux)에 맞춰 무료로 설치할 수 있다. 구글 검색창에서 'Visual studio code'를 검색하여 설치를 진행하면 된다.

 

설치방법

• 사용자 라이선스 동의 : '동의합니다/동의하지 않습니다'에서 동의합니다에 체크 후 다음을 누른다.
• 설치 시작 화면에서(설치 위치를 다른 폴더를 선택하려면 찾아보기 선택) 다음을 누른다.
• 시작 메뉴 폴더 선택화면이 나오면 별도 바로가기 위치 폴더를 만들지 않는다면 다음을 누른다
• 추가작업 화면에서 필요내용에 체크 후 다음을 누른다. 바탕화면에 바로가기 아이콘 만들기에 체크, 기타는 원하는 바에 체크하거나 그대로 체크되어 있는 대로 놔두고 넘어간다.
• 설치가 완료되면 Visual studio code 설치 마법사를 종료한다.

microsoft visual studio code(user) 설치 후 첫 화면은 다음과 같다.

Start

New File : open a new untitled text file, notebook, or custom editor(ctrl+alt+windows+N)

Open File : open a file to start working(ctrl+O)

Open folder : open a folder start working(ctrl+K CTRL+O)

Connect to : connect to remote developement workspaces(ctrl+alt+O)

 

Recent

 

Videos

watch getting started tutorials

learn vs code's must-have features in short and practical videos

 

Walkthroughs

get started with vs code

get started with gitlens

learn the fundamentals

 

시작(Start)하기 위해서 새 파일을 만들고 파일 폴더를 연다음에 작업을 한다는 것이고, Recent에는 사용자가 작업한 파일이 표시된다. 비디오를 보면서 사용 방법을 익힐 수 있을 것이다.

  

2. 비쥬얼 스튜디오 코드(VSC) 열기

VSC 메뉴 한국어 전환 : 필요하다면 왼쪽 상단 검색창에서 한국어 메뉴로 전환할 수 있다.

 

Activity bar : 장 좌측에 세로로 구성되어 있는 메뉴이다.

• Explore : 폴더 파일 아이콘
• Search : 텍스트 검색, 또는 찾아서 수정
• Source control : 깃 허브 안의 코드변경 사항 확인
• Run and debug : 코드 실행 및 디버깅
• Eetension : 코드 에디터에 필요한 기능을 추가

비주얼코드를 열고 작업 수행 전에 기본적으로 extension marketplace에서 설치하면 도움이 되는 것을 코딩을 알려주는 누나는 다음과 같이 추천하고 있다.

1. code spell checker : 오타를 찾아준다/ spelling checker for source code
2. liver server : html 결과를 웹사이트로 보여준다/launch a development local server with live reload feature for static & dtnamic pages
3. prettier-code formatter : 코드 정렬을 알아서 해 주는 역할을 한다 /code formatter using prettier
4. ES7 React/redux/graphql/react-native snippets : 추후 react JavaScript 배울 때 대비 미리설치해 놓는다/ simple extensions for react, redux and graphq in js/ts with ES7 syntax(forked from dsnajder) rodrigovallades
5. auto rename tag : 태그 수정시 짝꿍 태그 자동 완성해 준다 auto rename paired html/xml tag
6. auto close tag : 태그시 닫힌 태그를 자동으로 만들어 준다 automatically add html/xml close tag, same as visual studio ide or sublime text
7. GitLens-Git supercharged : git로 작업 시 commit보고 코드비교할 수 있어서 매우 편하다/supercharge git within vs code -visualize code authorship at a glance via git blame annotations and code..
8. 추가 설치 : ctrl + shift + p한 (맥은 ctrl 대신에 cmd임) 다음에 shell을 검색하여 ⓐ 'shell command: install 'code' command in path // ⓑ shell command: uninstall 'code' command from path 중에서 ⓐ 를 설치하여 준다.

하단 상태바 : 좌측 하단에서는 에러 주의 횟수를 알 수 있고, 우측하단은 현재코드가 몇 번째 라인인지, 무슨 프로그래밍 언어인지를 알려 준다. 하단 상태바 바로 위에는 아웃풋 디버그 에러 정보 등을 확인할 수 있는 터미널이다.

코딩의 시작은 상단 뉴파일을 선택한 다음에 시작하면 된다.

 

3. 프로젝트 시작하는 방법

프로젝트 코드 작성하기 전에 폴더를 만들어 파일 이름을 지정하고, 저장하여야 한다.

 

새 파일 만들기 : 파일 메뉴에서 새 파일 클릭 폴더 파일 이름 지정하고 프로젝트폴더를 생성한 다음 미리 파일(index.html, CSS, JavaScript.js)을 만들어 저장한다.(하단과 같이 명령프롬프트를 이용하면 편하다) 폴더를 하나 만들어 저장하면 우측하단에 문서표시가 HTML로 나타난다. 이것은 비주얼 스튜디오 코드가 이 파일을 html이라는 언어를 인식했음을 의미한다.

 

작업시작하기 : 비쥬얼 스튜디오 코드는 원하는 언어 html CSS JavaScript 를 지원하여 ht만 치더라도 html 태그를 지원한다.

html : 5를 선택한다.탭키를 누르면 자동으로 기본 코드가 완성되어 나온다. head와 head사이에 링크 속성을 <link rel="stylesheet" href="style.css">를 추가하고, body와 body 사이에 스크립트 속성 < "script.js"> </script>을 추가한다. 기본 코드에 CSS와 자바스크립트 코드는 제공하지 않기 때문이다.

 

저장하기 : 코드 작성후 또는 문서 작성 후 파일 <> index.html옆에 ○ 가 표시되어 있으면 저장이 안 되어 있음을 나타내므로 저장 (ctrl + s)을 해야 한다. 자동 저장 기능이 없기 때문에 반듯이 저장해야 작업한 내용이 사라지지 않는다.

 

사진배경=오색계곡

 

다른 방법으로 CMD로 폴더를 만들고 자동으로 비주얼 코드에 입장하는 방법으로 윈도 검색창에서 컴맨드(맥은 터미널)를 입력하여 CMD '명령 프롬프트'를 이용하면 편하다.

검색창 → cmd → 명령프롬프트 창 [C:\Users\Users>] →descktop →new project folder →projecting folder

 

dir : 현위치 내 파일이 무엇이 있는지 확인할 때 사용하는 명령어

cd : 경로상에서 파일 등 어디로 이동할 때 사용하는 명령어

mk : 폴더 마들때 사용하는 명령어

오타 또는 탭을 누르면 자동 완성 된다

 

C:\Users\Users> dir(맥은 ls) enter : 현재 내 위치 확인 desktop

C:\Users\Users> cd desktop enter : 작업을 위해'cd desktop'데스크톱으로 가기 위하여 enter

C:\Users\Users>\Desktop> dir : 데스크톱에 무엇이 있는지 확인

C:\Users\Users>\Desktop> mkdir nproject enter : 폴더를 만들기 위해 mkdir '폴더 이름(nproject)'을 만들고 엔터

C:\Users\Users>\Desktop> : 바탕화면에 ' nproject enter'폴더가 만들어져 있음을 볼 수 있다.

C:\Users\Users>\Desktop> cd jkproject : nproject폴더로 가기 위해 엔터

C:\Users\Users>\Desktop\nproject> : 각각의 프로젝트를 위해 폴더를 만든다

C:\Users\Users>\Desktop\nproject> mkdir secondproject

C:\Users\Users>\Desktop\nproject> : 폴더안에 'second-project' 폴더가 만들어져 있다

C:\Users\Users>\Desktop\nproject> code.: 코드 스페이스 닷 엔터하면 비주얼 코드 창이 열린다. 아이콘 누르지 않고 비주얼코드로 자동으로 입장하게 된다.

 

 

이상 비주얼 스튜디오 코드를 다운로드하고 앱을 연다음 프로젝트 시작하는 과정에 대하여 간략하게 알아보았다. 비주얼 스튜디오 코드를 설치 한 다음 각각의 기능을 숙지하는 데는 시간이 좀 더 필요할 수 있다. 어느 정도 사용방법을 숙지한 후 작업을 해 보면서 점차 실력을 늘려 나간다면 곧 웹사이트를 만들 수 있다고 확신하는 바이다.