Visual Studio Code 기본 사용법
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 강의를 할 때 메모장으로 실습을 합니다.
파일이 커지고 많아질수록 불편함이 고조됩니다.
불편함이 극에 달했을 때
스윽 코드 편집기를 선물로 알려주면
그렇게 행복해 할 수가 없습니다.
반면에
처음부터 코드 편집기로 실습을 하면
그냥 배울 것이 많은 어려운 도구일 뿐입니다.
아~
행복의 배후에는 불행이 있구나.
이런 생각이 들곤합니다.
제가 요즘 주로 학생들에게 선물하는 에디터에 대한 수업을 만들어봤습니다.
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 확장기능
이 도구와 관련된 여러가지 후속수업을 준비하고 있습니다.
아래 지식지도 서말을 통해서 접할 수 있습니다.
seomal.com/map/1/138
:) - วิทยาศาสตร์และเทคโนโลยี
vscode사용법
1. 파일 새파일 . 코드 작성하기 전에 저장부터.
2. 상단 파일 옆에 동그라미 표시 떠있으면 ! 저장이 안된 상태라는 것을 의미! 따로 저장 해줘야함. Vscode는 저장 해주지 않음.
3. html에서 태그 쉽게 만들기. :
형제 태그는 +로 연결, 자식태그는 >로 연결 개수는 *숫자 로 연결해서 태그명들 쓴다음에 탭누르면 됨
예) head+body 탭
예) h1 + ol > li *3 탭
4. 샘플텍스트 -> Lorem쓰고 탭 누르면 샘플텍스트 (라틴어막나옴)
5. 들여쓰기 조절하는 방법 (코드의 가독성을 위해 잘 이용할 필요가 있음. 자주 사용됨)
드래그한다음에 탭누르면 드래그한 전체가 들여쓰기됨 이때 얼마나 들여쓰기 되냐: 하단에 쓰여있는 “공백4” 만큼
쉬프트+탭 하면 내어쓰기
6. 주석만들기
드래그 한 다음에
상단 메뉴바의 “편집” -> 줄 주석설정/해제 누르면 해당 코드에 알맞게 주석이 생김. (해제도가능)
언어에 상관없이! 주석 어케 다는지 몰라도! 그냥 쓸 쑤 있음! 개꿀!
7. 단어찾기 : 컨트롤 F
8. 단어찾은 다음에 그 단어를 다른 단어로 바꾸는 방법
컨트롤 f로 찾은다음에 검색창 펼치면 밑에 수정의 결과로 쓸 단어를 적고 엔터 누르면 선택된 단어만 수정됨
이때 버튼 두개 중에 오른쪽 거 누르면 웹페이지 에있는 모든 그 단어가 수정됨.(컨트롤엔터)
9. 폴더/ 파일 관리하기 : 폴더열기 해서 폴더로 들어감. -> 그 폴더 안에있는 코드파일들 다 관리할 수 이씀.
10. 폴더로 들어가서 한다. 뭔가 폴더 단위로 이용하는듯?
11. 코드화면 여러 개 띄워놓고 동시에 보면서 하기 : 상단 파일제목 드래그해서 코드쓰는 부분에 갖다 놓으면 됨
12. 파일찾기
- 상단 메뉴바 “이동” -> 파일로 이동 선택 한다음에 이름 알파벳 몇 개만 적어도 해당파일 나옴. 개꿀기능ㅋ
- 단축기 이용해서 다시 열면 최근 사용한 항목 있음. 그걸 통해서 파일 여러 개를 빠르게 왔다갔다 하면서 작업 할 수 있음. 잘 써먹기.
13. 내용을 기반으로 파일을 찾기
-왼쪽 세로바에 검색 버튼 누르고 내용 입력하면 해당 내용이 들어있는 파일 뜸 ㅋ
여기서도 내용 바꿀 수 있음.
14. 설정 바꾸기 (윈도우랑 맥이랑 설정 여는 방법이 다르다는 점 알고 있자)
상단메뉴바 “파일” -> 설정
설정검색가능! UI축소하기 zoom검색 해서 숫자 입력 하면 됨
참고) UI축소/확대 하는 또 다른 방법 : 상단메뉴바 “보기”에서 확대/축소
코드 텍스트 크기 확대하기 ; font size검색 해서 설정 하면 됨
줄바꿈 자동으로 설정하는 방법 : word wrap 검색해서 off를 on으로 바꿔주면 창 크기에 맞춰서 줄바꿈이 자동으로 됨
15. 왼쪽 워크바?? 파일탐색기? 창 끄기 : 컨트롤B (보기 -> 모양 -> 사이드바)
16. 명령어 팔레트 : 설정 어디서 하는지 찾을 필요없이 키워드로 검색해서 설정을 바꿀 수 있음 ( 컨트롤 P ) 개꿀기능.
검색에 사이드바 검색하면 열엇다닫았다 가능 존나 개꿀
17. 실행하기 : 맨왼쪽 세로바에서 실행 버튼 클릭하고 ‘실행 및 디버그’ 버튼 누르면 어느 환경에서 실행할지를 고르라고함. html파일의 경우 크롬을 골라주면 창이새로뜸
설명) 언어에 따라서, (파이썬 자바 등..) vscode에서 실행 가능하기도 하고 안하기도 함. 해당 언어를 실행할 수 있는 소프트웨어가 vscode에 내장되어 있을 수도, 없을 수도 있음. 만약 실행이 안되면 확장프로그램을 따로 설치해줘야됨. 어렵진 않음.
18. 확장기능: 우측 세로바의 마지막 버튼 . 누르면 갖고있는 확장프로그램이랑 추천프로그램 뜸.
19. HTML Preview : HTML파일을 vscode안에서 바로바로 반영되서 결과볼 수 있게 해주는 확장 프로그램. 100만명이나 쓰는 프로그램ㅋ
-> 이거를 깔면. html파일을 우클릭 했을 때 이전에는 없던 open preview라는 기능이 추가됨. 클릭하면 새로운 창이뜸.(브라우저 상에서 보이는 화면임). 이거를 드래그해서 html코드옆에 놓고 둘다 같이 보면서 쓰면 됨. 저장을 안해도 바로바로 반영됨!!
20. 이외에도 여러가지 유용한 확장프로그램들이 있다!
vscode홈페이지 에서 extensions를 클릭하면 유명한 확장프로그램들이 뜸. 자신에게 알맞은 확장프로그램을 찾아 쓴다면 좋은 개발환경을 구축할 수 있다!
21. 그 외 참고사항
1. 터미널창 불러오기 (콘솔환경에서 작업하기) : 상단 “메뉴” -> 새 터미널
2. vscode에서 깃 제어하기 : 왼쪽 세로바의 소스코드 버튼
3. 확장기능을 내가 만들 수도 있음.
정리 고맙습니다
누군가에게는 기초적인 부분이라고 쉽게 넘어 갈 수 있는 내용까지도 짚어주시면서 필요하신 분들을 위해 좋은 강의 만들어 주셔서 감사합니다 !
선생님 강의로 입문하여서 아톰을 쓰고있었는데 다른 강의도 보다보니 비주얼 스튜디오코드가 좋아보여서 바꿔 사용하고있었는데 이렇게 또 아름다운 강의를 내주시니 정말 감사합니다 ㅎㅎ 요즘 비많이 오던데 항상 안전운전 방어운전 하세요~!
Visual Studio Code로 개인 웹프로젝트를 만들려고하는 사람인데, 문득 문득 드는 생각이였지만 정말 이러한 정보를 공유해주시는 분에게 감사한 마음이 드네요. IT 직종 선배님들이 공유해주시는 소중한 정보 정말 감사하게 배우고 있습니다. 저도 언젠가 누군가에게 도움이되는 정보를 쉽게 만들어 공유하고 싶네요. 다시 한번 감사드립니다!
우와 제가 사용하는 에디터인데 사용법까지 나오다니 너무 좋아요!
생활코딩님 17년 웹 강의 영상보고 VSC배워보려고 했는데 마침 올려주셨네요! 감사합니다! 잘 보고 공부하겠습니다!!
아 정말정말 감사합니다..... 이런 기본적인 내용도 설명안하고 교육하는 곳이 많은데 진짜 감사합나다...
오늘도 좋은 강의 감사합니다.
가장 대중적인 vsCode ide에 대한 강의라니!!! 너무 감사합니다!!! 업무시 참고하도록 할게요~~~감사해요!!!
항상 좋은 강의 감사합니다~~^^
크~ 이렇게 또 친절하게 알려주시면 제가 너무 고맙죠
정말 감사합니다 에디터나 이클립스 쓰다가 비주얼 스튜디오 코드 공부해야했는데 마침 이런 영상이ㅠㅠ
정말 필요한 강의였습니다. 감사합니다.
형 사랑해요 .. 형만큼 강의잘하는사람 본적이없어 ㅠㅠ
Vscode를 오랜만에 사용하려니 기억이 안나서 보는중인데 너무나 친절한 강의네요. 모르던 내용까지 많이 알아갑니다 감사합니다
요즘 이거 모르면 많이 많이 불편해요!! 저거 진짜 좋아요. 늘 새로운 언어 시작할 때마다 새로운 IDE 설치, 환경 설치가 복잡하고 힘든데 이건 혁명임!! OS도 안가리고!!
아 그리고 깃 사용법을 만들고 계신것 같아 부탁드립니다!! 일반적인 깃 사용법 말고 브랜치, 병합, 스태시, 태그, 깃 플로우 등과 같은 것도 설명해 주세요!!!
선생님 너무 영상 좋아요
감사합니다
요새 안그래도 이거 쓰면서 많이 고생하고 있었는데 넘 감사합니다!!!
정말 최고입니다. 감사합니다!!!
좋은 영상에 항상 감사드립니다.
정말 좋은 강의 감사합니다 잘보고 있어요
vs code 현재 사용 중에 있습니다. 몰랐던 부분을 집고 넘어가는 기분이네요.
잘 봤습니다.
이젠 이런것도 알려주시네욬ㅋㅋ 넘 좋습니다
서말... 정말 최곱니다!!!
매번 놀랍니다.. 생활코딩!!!
왕 아톰 쓰면서 html 수업 들은게 엊그제 같은데ㅠ 정말 시간 빨라요ㅎㅎ 수업 항상 잘 듣고 있슴니당
사용법을 잘몰라 답답햇는데 덕분에 한결 수월해졌습니다~ ^^
항상 감사합니다
선생님의 가르침에 감사합니다.
너무 감사합니다. 잘 봤습니다
정말 소중한 지식을 공유해 주셔서 진심으로 감사드립니다. 고맙습니다.^^
좋은 강의 감사합니다.
완전 유용해요!!
늘 감사드립니다.~~
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 중간중간에 '이런 생각이 드시죠? 그렇다고 하세요' 지대 카리스마 있으십니다bb 많이 배워가여
와 시간가는줄 모르고 들었습니다 감사해요
메모장 코딩만 가끔 따라해봤는데 친절히 알려주셔서 감사합니다
자세해서 좋아요. 감사합니다
감사합니다 !
22.12.29
atom 에디터가 서비스 종료돼서 어떤걸로 생코수업을 이어 들어야할까..고민했는데
이고잉님께서 설명해주신 영상보고 다시 수업 들을 수 있어서 정말 감사하게 생각합니다!
vscode 에디터 사용하면서
선생님 수업 잘 들어볼게요
감사합니다!!
고맙습니다!
감사합니다. 정말 감사합니다
20:58 web1 듣다가 중간에 여길와보길 정말 잘 한거 같네요 완전 대박입니다
감사합니다~~^^
감사합니다. 많은 도움이 되었습니다.^ ^
Wow,최고네요
목소리 최고십니다.
입문 영상으로 딱이네요
강의 잘 들었습니다,~~
감사합니다
요즘 최신 강의답군
감사합니다.
건 10년 넘게 봐왔지만.... 목소리가 너무 좋아서... 내겐 수면제...
역쉬 이렇게 사용하시는 군요 역쉬 다르십니다. 대단 하세요 ㅎㅎ
visual studio code 처음 사용해보는데 영상보면서 감탄사말고 탄성을 몇번 내질렀는지 모르겠어요 좋은영상 감사합니다 ^^
와와와!!
사랑합니다
in the details. when you get stuck, roll back to the beginning and start over. The other weay is to focus entirely on one set of commands
This is cool it worked thx
아톰이 사라진데서 html, css, javascript를 vscode 이용해서 적용해보고있었는데 이런 강의도 있었군요
안녕하세요!!! 예전 html css 영상부터 너무 잘 보고 있습니다. 오늘 강의 보다 따라하는데 한가지 궁금한 점이 있습니다. 17:50에 실행 및 디버그로 크롬 선택해주면 강의자님은 화면이 바로 우측에 분할되어 보여지는데, 전 새창이 뜹니다... 바로 보기쉽게 분할되게 뜨는 방법이 뭔ㄱ 해서요... 새 창을 오가면서 실행하는게 불편해서요 ㅠㅠ 라고 질문했는데 뒤에 더 보다보니 설명해주셨네요 ㅎㅎㅎ 감사합니다!!!
html preview는 진짜 개쩌네요
고맙습니다 🤓
Run and Debug 나 Run>Start Debugging 을 하기전에 브레이킹 포인트를 잡으시는데요! Extensions에 디버깅 확장파일을 깔지 않으면 브레이킹 포인트 잡고 하는 그런 것들이 안됩니다. 그냥 디버깅 하려고하면 안내문 나오면서 확장파일 깔라고 안내해주는데 다른분들에게 도움이 되라고 남기고 갑니다.
대박기능이죠? ㅋㅋㅋㅋㅋㅋ 너무 귀여우세요 ㅋㅋ
세밀하게 설명해주셔서 감사합니다.
혹시 만약에 새문서를 열 때마다 미리작성해 놓은 기본서식이 자동적으로 반영되어 새창이 열리도록 하려면 어떻해야할까요??
Document
이런식으로 제가 기본서식을 만들어 놓고 새작업 시, 새창을 열때 저 형식 자동적으로 나오게하고 싶은데 이렇게 할 수 있는 설정이 있을까요??ㅠㅠ
오 vscode 강좌 ㄷㄷ
선생님 제가 맥북을 가지고 있는데 대학교에서 Mac용은 안되고 무조건 무료 Window용 Visual Studio를 사용해야하는 상황입니다
그래서 맥OS에서 부트캠프 또는 패러럴즈를 통해 윈도우OS로 바꿔서 Window용 Visual Studio를 실행하고 사용하면서 공부를 하려는데 문제가 있을까요?
오른쪽 위에 단축키 표시되는 어플은 어떤 걸 쓰시나요??
vs code와 이클립스 차이가 무엇인가요?
“나에게 꼭 필요한 동영상”
혹시 html 다시 해주시면 어떤지ㅠ (그와중에 목소리 너무 좋습니다)
똑같이 html 를 짜고 실행 했을때 웹페이지에서 에러가 뜸니다 문제가 뭘까요??
제가 게임에서 인터넷이 안되는 버그가 있는데 이 코딩 앱으로 고칠수 있을까요?
선생님 18분에 html 크롬열때 자동으로 코드는 줄어들며 왼쪽으로 가고 맞춰주는거 어떻게 하나요? 맥만 되는건가요?
생활코딩님, 제가 원하는 기능을 가진 태그를 인터넷에서 어떻게 알아낼수있나요?
한글판으로 확장을 했는데 이걸 영어판으로 어떻게 다시 변경할수있나요?
혹시 파일/편집/선택영역 이런 메뉴모음 단축키 누를때 뭐 눌러야 하는지 알 수 있을까요.. f라고는 써있는데 그냥 글써지네요,,ㅠ
18:10 아... 저는 폰트 깨짐이 나는데 특이한게 한글, 영어대문자는 깨지지않고
영어소문자만 깨지는데 어떻게 해야하는지 아시나요? 구글링해봐도 나오지 않아서요
검색기능에서 ctrl shift F 하는데 계속 알 캡쳐가 뜨면 어떻게 해야하나요?? 다른 단축키는 다 먹는데 이것만 안되여ㅠ
자동 줄바꿈을 word wrap 이라고 하는구나... 드디어 찾았다... 15:00
강의 감사합니다. 그런데 46초에 다시 영어로 설정하려면 어떻게 해야 하나요?
초반에 한글버전으로 못바꾸면 다시 한글버전으로 바꿀 수 없나요?
질문있습니다! 맥으로 vscode사용중인데요~ 사용자 입력에 의해 종료되는 코드는 어떻게 하면 유닉스 실행 파일을 만들수 있나요?? c언어로 공부 중인데, 1~6번까지 어항에 시간이 지남에 따라 물이 줄어들고 클릭하면 채우는 프로그램을 작성중인데, run code로는 안나와서요!
이런 프로그램으로 간단한 게임을 만드려면 따로 추출이필요한가요? 이렇게 코드를 만들어 프로그램에 적용하려면 어떡해야하나요??
고맙습니다 이고잉님 ㅠㅠㅠㅠㅠ vs code 로 git 사용하는 방법도 기다릴게요 ㅜㅜ
(앗 들켰다)
이걸 원했슴당
탭을 누르면 빈칸 3개가 추가되어 기능을 사용할수 없네요.
안녕하세요 생활코딩님 ㅠㅠ혹시 비주얼 스튜디오에서 작업하고 있던걸 크롬으로 연결해서 보고 싶은데요 비주얼 스튜디오에서 오픈인 브라우져를 다운받아서
윈도우에서는 컨트롤 알트 오를 누르면 크롬으로 연결해서 볼 수 있었는데 맥에선 어떤걸 누르는지 알고 계실까요??
커맨드와 옵션 그리고 오를 눌렀을떄는 반응이 오지 않는 상황입니다 ㅠㅠ... 아니면 크롬으로 중간중간 작업물을 확인 할 수 있는 다른 방법도 있을까요??
항상 네!네!선생님!(음성지원 왜 안되는거양) 하면서 배우고 있습니다. 스앵님 어디 가지마세용 ㅡㅜ
혹시비주얼스튜디오코드 모든 단축키를 알려주실수있나요?
선생님..ㅜ 폴더 만들기에서 저장이라는 칸이 클릭이 안되도록 회색으로 되어있을때는 어떻게 파일을 만드나용...ㅠ
안녕하세요. 저 vscode 설치했는데...자꾸 자바스크립트 쓰면 안돼서요 ㅠㅠ 저좀 도와주실분 연락부탁드려요. 제가 다른건 몰라도 해결되면 스벅 쿠폰 쏠게요. 익스탠션이런거 다 설치하고 하라는거 다했는데도 안되서요. 진짜 시작도하기전에 포기각이라서 도움부탁드립니다. ㅠㅠㅠㅠ
오호라, 여기 있었군요 :)
링크가 깨진 곳이 있었나요?
생활코딩님 처음코딩 할때html이 자동완성이 안되는데 어떻게 해야하나요????????????
혹시 저장이 안된더 아닐까요?
안녕하세요. 질문이 하나 있습니다. 화면에서 단축키 정보를 미니화면으로 보여주고 계신데 어떤 앱인지 알 수 있을까요? 너무 깔끔해서 활용도가 많을것 같습니다.
그건 앱은 아니고 그렇게 편집한 거예요. 대신 snipaste 라고 하는 앱이 비슷한 기능이 있는데 강추합니다!
영상 도입부 퀄 뭐죠....
영어공부할겸 억지로 한글화 안시키고 쓰고있는데 그냥 한글화 시킬까봐요ㅠ
요약 :
진짜 좋죠.
대박이죠?
그렇다고 하세요.
안녕하세요. 저는 이번 고용노동부와 대한상공회의소에서 주관하는 IT교육 중
IT 계열 인턴과정과 연계되는 교육에서 생활코딩님의 유튜브 영상을 학생들에게 보여주고 실습을 진행하면 효과가 더 좋을것 같아서 문의 드립니다. 동영상을 사용해도 괜찮을련지요? 감사합니다.
제 모든 수업은 ccl 라이선스 조건 하에서 자유롭게 사용가능합니다 :)
@@coohde 네 감사합니다.
그런데 아톰과 비주얼스튜디오중 뭐를 쓰는게 더 좋나요?
영상 인덱스에 화면 분할로 수정해 주세요!
수정했습니다! ^^