vscode 생활코딩

https://youtu.be/K8qVH8V0VvY

 

=======================================

강의를 할 때 메모장으로 실습을 합니다. 파일이 커지고 많아질수록 불편함이 고조됩니다. 불편함이 극에 달했을 때 스윽 코드 편집기를 선물로 알려주면 그렇게 행복해 할 수가 없습니다. 반면에 처음부터 코드 편집기로 실습을 하면 그냥 배울 것이 많은 어려운 도구일 뿐입니다. 아~ 행복의 배후에는 불행이 있구나. 이런 생각이 들곤합니다. 제가 요즘 주로 학생들에게 선물하는 에디터에 대한 수업을 만들어봤습니다. Microsoft Visual Studio Code 입니다. 이 수업은 아래의 내용을 다루고 있습니다.

00:00 수업소개 00:22 설치 00:42 언어설정 00:59 단독 파일 편집 02:40 언어지원 04:49 편집 07:58 프로젝트 폴더 관리 09:09 화면분활 10:03 파일찾기 11:40 내용으로 파일 찾기 12:30 설정 15:17 명령어 팔레트 17:17 실행 20:03 확장기능

 

=======================================

ms에서 만든 코드편집기

무료

오픈소스

거대한 확장기능 생태계

 

=======================================

설치 : 

https://code.visualstudio.com/

 

언어설정 : 

설치하고 뭐 뜨는데 설치하면 한글판됨

 

=======================================

단독 파일 편집 : 

메모장으로 코드치다가 지쳐서 전문적인 도구를 샀다고 생각

파일 > 새파일 > 폴더 만들고 거기다 index.html로 확장자까지 해서 저장 

 

원래 저 부분이 일반 텍스트 라고 써있었는데 HTML로 바뀜.

vscode가 이 파일을 html이라는 언어로 인식했다는 뜻. 클릭해서 원하는 언어로 바꿔도 됨. 그러면 그 언어에 맞는 여러가지 똑똑한 지원들을 해주게 될 것

 

=======================================

언어 지원 : 

어떤 똑똑한 언어 지원?

ht까지만 쳐도 뭔가 추천이 나옴

하고 탭을 누르면

대박

이러고 탭키 누르면

장난 아니죠?

 

vscode가 이 파일을 html로 인식하고 있기 때문에 html을 편집하는 여러가지 똑똑한 지원들을 해주고 있는 것

 

 

lorem치고 탭은 어디다 쓰냐

쓰다보면 샘플 text가 필요할 때가 있는데 그때

Lorem ipsum이라는 기능. 라틴어다 그럴듯한 샘플 텍스트

 

=======================================

편집 : 

코드 편집할 때 많이 사용하는 기능

 

들여쓰기 !

선택하고 탭을 누르면 저기 공백 옆에 적혀있는 숫자만큼 들여쓰기

shift+탭 도 저만큼 내어쓰기

 

주석처리 !

어떤 언어를 쓰든간에 마찬가지, 드래그로 블록잡고

옆 단축키, 윈도우는 Ctrl + /

그 언어에 맞는 주석이 만들어짐

다시 단축키를 실행하면 주석 사라짐

 > 그 언어의 주석을 몰라도 어떤 언어든 되는 대박기능~

 

 

찾기 !

편집 > 찾기

단축키는 Ctrl + f

페이지에 있는 모든 그 단어를 강조해서 보여줌

또 그게 어디쯤에 위치하는지도 스크롤에 표시해줌

화살표로 위아래 다음거 선택됨

 > 이 상태에서 바꾸기 하려면 

저부분 > 를 클릭하면 됨

화살표로 선택한 뒤 첫번째 버튼으로 그것만 바꾸기

두번째 버튼은 다 바뀜

 

vscode는 자동으로 저장해주지 않는다

이렇게 동그라미가 있다면 저장을 안했다는 말

 

=======================================

프로젝트 폴더 관리 : 

 

프로젝트 하다보니까 파일이 많아졌다? 관리하기가 쉽지가 않다?

좀 더 체계적으로 프로젝트가 저장돼 있는 폴더를 관리하면 얼마나 좋을까?

 

왼쪽 아이콘들 첫번째는 파일탐색기 

거기서 폴더 열기를 눌러도 되고

 

파일 > 열기(윈도우는 폴더 열기라는 항목이 따로 있음) 해도 됨

우리가 관리하려는 폴더로 들어가서 (폴더 더블 클릭하면 뭔가 실행됨)

이렇게 WORK라는 폴더를 vscode가 열여서 그 안에 소속돼 있는 모든 파일을 체계적으로 관리할 수 있게 됨

메모장 쓰던 때랑 비교하면 정말 좋아졌죠?

 

=======================================

화면 분할 : 

두번째 파일 추가

이거 눌러도 되고

우클릭 후 새파일도 됨

 

코드를 작성할 때 다른 파일 코드를 보면서 작성하고 싶을 수도

탭 클릭해서 드래그로 동서남북으로 갖다 놓으면 화면 분할이 됨

다시 탭쪽 놓으면 원래 상태로

 

=======================================

파일 찾기 : 

이동 > 파일로 이동

윈 단축키 컨+P

이름 전부 몰라도 밑에 뜸, 엔터치면 파일이 열림

다음에 또 검색할 땐 선택했던 파일이 위쪽에 뜸

 

=======================================

내용으로 파일 찾기 : 

사이드 두번째 아이콘

검색하면 그 텍스트가 포함돼 있는 파일을 검색해서 보여줌

클릭하면 그 파일이 열릴 뿐만 아니라 선택돼있음

바꾸기 기능을 이용하면 내용을 한번에 바꿀 수도 있다.

 

=======================================

설정 :

어느정도 익숙해져서 욕심이 생기면

주어지는 대로 쓰는게 아니라 설정을 만져보고 싶어 

 

코드는 크게, UI(왼쪽 메뉴모음 바 같은거)좀 작게 하고싶다

길어지면 줄바꿈 하고 싶어

 

맥은 Code > 기본 설정 > 설정

윈은 파일 > 기본 설정 > 설정 ( Ctrl + , )

검색바에 검색하는게 편하다

zoom검색으로 해도 됨

이거랑 똑같음 : 보기 > 모양 > 확대축소 ( 컨 + -,+ )

 

(설정창도 분할 가능)

 

font size 검색

에디터의 텍스트만 커지게 됨

 

텍스트가 긴 경우 줄바꿈을 자동으로 되게 하고 싶다

word wrap 검색

=======================================

명령어 팔레트 : 

사이드바를 사라지게 할 수 있다.

단축키 기억하고 있으면 굉장히 유용 ! --그러겠네

 

이런걸 말로 명령 내릴 수 있으면 얼마나 좋아 단축키 기억 못하면 말이야 --이게 command 팔레트

윈 : 컨 + 쉬 + P

 

선택하면 열리고 닫혀짐

--스팟라이트같은거네 그것보다 좋은건가

 

명령을 검색을 통해 빨리빨리 실행할 수가 있어 !

 

=======================================

실행 : 

 

개발을 끝냈어

테스트를 좀 해보기 위해 실행을 해볼 것

버튼만 클릭하면 한번에 실행되면 얼마나 좋을까? --콘솔에서 컴파일 해야되고 뭐 그런거 말하는거겠지

방법이 있다

지금건 HTML이고, HTML은 웹브라우저에서 실행하는 거죠? 눌러보면 ( 단축키 F5, 설명은 안함 요점정리에 있다 )

어디에서 실행할건지 물어보고 누르면 크롬이 켜진다실행된다

 

이때 수정하고 저장하면 바로 반영되진 않아

저기 있는 다시 시작 버튼을 클릭하면 바로 반영 됨

단축키 컨 + 쉬 + F5

끌 땐 저 빨간 네모, 이전에 실행되고 있었던 게 꺼진다

 

언어별로 실행하는 방법이 좀 다름

python은 웹브라우저가 아니고 

기본적으로 vscode가 파이썬을 실행하는 기능을 갖고 있진 않다.

그래서 클릭하면 

탭이 확장 기능 탭으로 바뀌고 추천 검색어가 들어가 있다.

설치 누르면 설치됨

저거 깔면 여러분의 vscode는 python에 대한 지원이 훨씬 더 강력해집니다

그 다음 실행 및 디버그 버튼 클릭

여러분의 파이썬 코드가 어떤 형식인지, 어디에서 실행되고 있는지 물어본다

저는 파이썬 파일이기 때문에 첫번째를 선택하겠습니다

 

클릭하면 터미널이 튀어나오면서 

실행결과도 나옴

 

=======================================

확장 기능 : 

누르면 검색텍스트 지워짐 그리고

내가 설치한 것과 vscode에서 추천하는 게 나옴

 

아까 HTML코드를 실행할 때 웹브라우저가 실행되는게 맘에 안든다(vscode바깥쪽에서 실행결과를 확인해야함)

또 저장하고 재실행을 해야 결과를 볼 수 있어

vscode를 떠나지 않고 이안에서 편집하면 즉각적으로 그 결과를 볼 수 있다면?

HTML Preview 라는 확장 기능

120만명 넘게 쓰고 있음

 

때에 따라서 확장기능을 설치하면 껐다 켜야 하는 경우가 있음. 얘는 아니지만

README 는 확장기능 어떻게 쓰면 되는지 

 

탐색기(왼사이드 첫번째 아이콘)

이전에는 없었던 메뉴가 추가됨

클릭하면

새로운 에디터가 뜨면서 뭔가 나옴

옆에 갖다 놓고

저장을 하지 않았음에도 preview쪽에서 웹페이지에 대한 미리보기가 생성되는 것을 보세요

 

vscode홈페이지에서 Extensions를 선택하시면 Marketplace라는 곳으로 옴

밑에보면 Most Popular라고 해서 가장 유명한 확장기능들이 있음. 유용할 가능성이 높다

 

하여튼 여기에서 여러분이 필요한 확장기능을 선택하셔서 여러분에게 최적화 돼 있는 편집기를 만드신다면 어떤 편집기 부럽지 않은 개발 환경을 구축하실 수 있으실 겁니다.

 

 

좀 더 살펴볼만한 주제

 

콘솔환경에서 컴퓨터를 자주 다루면

메뉴의 터미널 > 새 터미널 --터미널 환경을 조작할 수 있는 터미널이 내장돼 있다. 이 조작 방법을 살펴봐(검색이겠지)도 좋을듯

 

 

깃을 vscode안에서 제어할 수 있는 기능이 내장돼 있다.

git자체가 내장돼 있진 않아 git설치하고 저 기능을 사용하면 그때부터 사용가능

 

 

확장기능을 받기만 했는데

vscode는 웹으로 만든 기술,

웹개발자라면 여러분이 알고 있는 웹개발 지식을 그대로 이용해서 vscode의 확장기능을 만들 수도 있다

(후속수업주제)