03_기초부터 실무까지! 자바스크립트 (ES6) 마스터하기

1 00:00:00,000 --> 00:00:14,160 안녕하세요 오늘은 자바스크립트 개발환경 구축하는 방법 알아보겠습니다 2 00:00:14,160 --> 00:00:22,879 오늘 목표는 자바스크립트 개발에 필요한 VSCode라는 툴을 설치할 거구요 3 00:00:23,520 --> 00:00:28,320 그리고 관련된 플러그인들을 설치하려고 합니다 4 00:00:28,320 --> 00:00:34,639 그 다음에 Node.js를 설치하고요 그 환경에 대해서 확인을 한번 해 보겠습니다 5 00:00:34,639 --> 00:00:41,160 그리고 이제 VSCode에 쓸 수 있는 기본 단축키들 그것들을 몇 개 살펴 보겠습니다 6 00:00:41,160 --> 00:00:46,560 그리고 디버거 이용해서 코드 디버깅 하는 방법들 알아보도록 하겠습니다 7 00:00:46,560 --> 00:00:53,759 이 사이트 URL로 접속하시면 VSCode를 다운로드 받을 수 있는데요 8 00:00:53,759 --> 00:01:01,560 한번 같이 가보겠습니다 사이트 들어가시면 이제 VSCode 다운로드 받는 링크가 나올 거에요 9 00:01:01,560 --> 00:01:08,599 중간에 보시면 윈도우 버전 Windows OS 쓰시는 분들 그 다음에 Linux 쓰시는 분들 10 00:01:08,599 --> 00:01:15,680 그 다음에 Mac 쓰시는 분들 윈도우 쓰신다면 중간에 시스템 인스털러라고 있을 겁니다 11 00:01:15,680 --> 00:01:21,000 거기에 x64 버전으로 다운로드를 받으세요 12 00:01:21,919 --> 00:01:24,800 자, 얘를 누르시면 13 00:01:26,000 --> 00:01:29,360 다운로드가 진행이 될 거구요 14 00:01:30,480 --> 00:01:36,800 다운로드 폴더를 열어보시고 다운로드 받으신 파일을 실행을 해 보세요 15 00:01:37,160 --> 00:01:42,400 사용자 계정 컨트롤 나오면 얘 누르시고 그 다음에 사용권 동의가 나올 겁니다 16 00:01:42,400 --> 00:01:46,800 그럼 동의하시고 다음 17 00:01:47,279 --> 00:01:57,639 원하시는 폴더에다가 다운로드 받으시면 되는데요 저는 VSCode라고 설치 디렉토리를 설정하겠습니다 18 00:01:57,639 --> 00:02:06,360 다음 누르시고 다음 누르시고 그 다음에 바탕화면에 바로가기 만들기는 하나 해주세요 19 00:02:06,360 --> 00:02:09,000 그리고 다음 20 00:02:09,440 --> 00:02:14,559 그리고 설치 하시면 설치가 진행이 될 겁니다 21 00:02:14,559 --> 00:02:23,600 VSCode는 여러분들이 이제 JavaScript나 HTML, CSS 이런 것들을 코딩할 수 있는 툴 이에요 22 00:02:23,600 --> 00:02:28,320 그래서 확인 누르시면 실행이 될 거구요 23 00:02:28,320 --> 00:02:34,960 자 이렇게 VSCode 메인화면이 보일 거에요 거기에 웰컴 페이지가 있는데요 요거는 닫아 버리시고 24 00:02:34,960 --> 00:02:45,199 이제 플러그인들을 설치해 볼게요 플러그인은 우리가 크게 라이브 서버하고 다음에 코드러너 그리고 한국어팩 이렇게 세가지 설치할 건데 25 00:02:45,199 --> 00:02:53,279 왼쪽에 보시면은 하나 둘 셋 넷 다섯번째 메뉴를 보시면 Extensions라고 나올 겁니다 26 00:02:53,279 --> 00:02:59,479 VSCode에 사용할 수 있는 플러그인들을 설치하는 건데요 이렇게 눌러보시면 27 00:02:59,520 --> 00:03:07,199 검색하는 창이 나올 거에요 자 거기에 라이브 서버라고 한번 쳐보시구요 28 00:03:08,839 --> 00:03:15,639 자 맨 첫번째로 라이브 서버 플러그인이 있을 겁니다 이거를 인스터를 해주시고 29 00:03:20,839 --> 00:03:29,080 자 그 다음에는 이제 코드러너 설치해주시구요 코드러너 30 00:03:30,279 --> 00:03:35,559 여기 보시면 이제 코드러너라고 나오죠 그걸 인스터를 해주시고 31 00:03:37,000 --> 00:03:44,320 자 그 다음에는 한국어팩을 설치할 건데요 코리안 이렇게 검색해보시면 32 00:03:44,960 --> 00:03:52,320 첫번째 이제 코리안 랭기지팩 for Visual Studio Code 라고 나올 거에요 이거를 인스터를 하시고 33 00:03:53,320 --> 00:04:02,880 인스터를 끝나면 오른쪽 밑에 어 랭기지 변경하고 다시 시작하라는 메뉴가 나올 겁니다 이렇게 눌러주시고 34 00:04:03,839 --> 00:04:12,479 자 그럼 이제 메뉴들이랑 도음말들이 전부 다 한글로 바뀐거 보이시죠 시작하면은 닫으시고 35 00:04:13,199 --> 00:04:18,799 자 구조는 위쪽에 메뉴들이 있구요 왼쪽에는 단축 메뉴들이 있고 36 00:04:18,799 --> 00:04:25,959 이쪽에 여러분들이 작성하실 코드들 파일들이 나올 거에요 이쪽이 이제 편집창이 됩니다 37 00:04:25,959 --> 00:04:34,959 자 우리가 설치한 이제 그 라이브 서버는 여러분들이 VS 코드에서 이제 서버를 구동해 볼 수 있는 레디앙 서버 이구요 38 00:04:34,959 --> 00:04:40,679 저 코드 러너는 저건 우리가 단축키로 자바스크립트 실행하려면 필요한 플러그인 이에요 39 00:04:40,679 --> 00:04:47,079 그리고 이제 한국어팩은 이렇게 메뉴라든지 도음말들을 한국어로 이렇게 표시해 줄 수 있는 겁니다 40 00:04:47,079 --> 00:04:55,519 저희가 이제 VS 코드 다운로드 받고 설치하고 플러그인도 설치를 해봤구요 그 다음에 이 노드를 설치해 보겠습니다 41 00:04:55,519 --> 00:05:02,000 이 노드는 여러분들이 자바스크립트를 웹 브라우저 없이 실행할 수 있는 툴 이구요 42 00:05:02,000 --> 00:05:08,000 노드는 여기 URL에 가서 다운로드 받으시고 저랑 같이 해 보겠습니다 43 00:05:08,000 --> 00:05:16,640 자 URL은 여기 nodejs.org.eng 여기가서 밑에 이제 다운로드 nodejs lts 이걸 누르시면 44 00:05:16,640 --> 00:05:24,160 lts 는 롱텀 서비스의 약자구요 오랫동안 서비스를 지원할 거다라는 버전이에요 45 00:05:24,160 --> 00:05:32,200 다운로드 받으시면 이렇게 nodejs 가 있을 겁니다 다운로드 폴더에 가셔서 이걸 설치하시면 되요 46 00:05:32,200 --> 00:05:35,200 더블클릭 하시고 47 00:05:36,920 --> 00:05:46,440 자 그럼 셋업 위저드가 뜰 거에요 넥스트 가시고 다음에 사용권 동의 하시고 넥스트 48 00:05:46,480 --> 00:05:56,000 얘는 적절한 폴더에다가 nodejs 이렇게 설치를 하겠습니다 49 00:05:56,000 --> 00:06:04,760 넥스트 가시고 다음에 넥스트 넥스트 인스터를 하시면 됩니다 50 00:06:05,440 --> 00:06:12,000 피니쉬 하시면 설치가 되구요 그 다음에 이제 노드 설치 확인을 할 거에요 51 00:06:12,040 --> 00:06:15,720 자 여러분들 그 윈도우 키 있죠 52 00:06:16,399 --> 00:06:26,200 윈도우 키를 누르시고 커맨더 창을 띄어 주세요 윈도우 키 누르시고 cmd 이렇게 해서 엔터 하시면 53 00:06:26,200 --> 00:06:35,920 이렇게 커맨더 창 명령 프롬프트 창이 뜰 겁니다 자 거기서 일단 노드가 설치되어 있는지 확인을 해 볼게요 54 00:06:36,000 --> 00:06:43,320 노드 쓰시고 한 칸 띄고 마이너스 브이 이렇게 하시면 이제 노드의 버전이 표시가 될 거에요 55 00:06:43,320 --> 00:06:51,519 잘 표시된다면 잘 설치가 된 거구요 노드 설치하면 이제 npm 이라는게 설치가 될 텐데요 56 00:06:51,519 --> 00:07:00,320 npm 은 노드 패키지 매니저라고 해서 노드에서 사용할 수 있는 패키지들 관리해주는 툴 이에요 57 00:07:00,320 --> 00:07:06,200 npm 마이너스 브이 이렇게 해서 실행해 보시면 npm 버전이 뜰 겁니다 58 00:07:06,200 --> 00:07:13,000 그럼 노드하고 npm이 잘 설치됐구나 이렇게 확인하시고 자 노드 한번 실행해 볼 건데요 59 00:07:13,000 --> 00:07:21,480 노드라고 치시고 엔터 이렇게 하시면 여기다가 이제 자바스크립트 코딩을 해 보실 수가 있어요 60 00:07:21,480 --> 00:07:26,519 이렇게 같이 해 볼까요 콘솔 점 로그 쓰시고 61 00:07:26,519 --> 00:07:32,760 인사를 하죠 hello javascript 62 00:07:33,239 --> 00:07:38,440 자 그리고 엔터 치시면 여기 hello javascript 라고 잘 뜨나요 63 00:07:38,440 --> 00:07:45,359 이제 노드 실행하셔가지고 거기다가 자바스크립트 코드를 쓰시면 자바스크립트 실행이 되죠 64 00:07:45,359 --> 00:07:51,760 빠져나오실 때는 컨트롤 c 이렇게 누르시고 컨트롤 c 한번 더 누르시고 65 00:07:51,760 --> 00:07:57,799 exit 치시면 이 명령 프롬프트가 닫힐 거에요 66 00:07:57,799 --> 00:08:03,640 자 그래서 이제 노드 설치하고 다음에 구동 확인까지 해봤습니다 67 00:08:03,640 --> 00:08:13,399 자 개발환경 구축 테스트를 해 보겠습니다 vscode 는 아까 노드 데이터에서 설치했기 때문에 다시 한번 구동을 시켜 주시고 68 00:08:13,399 --> 00:08:20,559 그 다음에 왼쪽에 음 탐색기 요거 누르셔서 폴더 열기를 한번 눌러보세요 69 00:08:22,200 --> 00:08:28,519 자 이제 여러분들이 작성한 코드가 실제적으로 저장될 폴더를 선택하는 건데요 70 00:08:28,519 --> 00:08:34,320 저는 c 드라이브의 색폴더 만들기 해서 71 00:08:34,679 --> 00:08:40,919 vscode underbar workspace 이렇게 폴더를 하나 만들겠습니다 72 00:08:40,919 --> 00:08:47,479 이름은 여러분들이 편한 걸로 정해 주시면 돼요 그리고 폴더 선택 73 00:08:47,479 --> 00:08:55,520 하시고 자 그러면 왼쪽에 이제 vscode workspace 라는 폴더가 이렇게 생길 거에요 74 00:08:55,520 --> 00:09:00,960 모든 파일들을 이제 여기에다가 만드시면 되는데요 75 00:09:00,960 --> 00:09:05,960 오른쪽에 보시면은 이제 새 파일 만들기 아이콘이 있어요 이걸 누르시고 76 00:09:05,960 --> 00:09:09,239 요런 파일 하나 만들어 보겠습니다 77 00:09:09,640 --> 00:09:15,039 hellojs.js 라는 파일을 하나 만들어 보시고 엔터 78 00:09:16,000 --> 00:09:20,840 자 여기다가 console.log 79 00:09:23,640 --> 00:09:29,039 hello javascript 이렇게 쳐 볼까요 80 00:09:29,039 --> 00:09:36,919 이걸 웹브라우저 없이 실행시키려면 컨트롤하고 Alt하고 N 이렇게 누르시면 81 00:09:36,919 --> 00:09:42,000 저장을 한번 해주세요 저장을 하고 컨트롤 Alt N 이렇게 82 00:09:42,000 --> 00:09:48,400 자 밑에 보시면 이제 hello javascript 라고 출력된 게 잘 보이시죠 83 00:09:48,400 --> 00:09:52,320 그럼 성공한 거구요 자 두번째로 84 00:09:52,359 --> 00:09:58,119 이제 다시 여기서 새 파일 만들기 누르셔서 85 00:09:58,119 --> 00:10:04,599 이번에는 hello.html.html 파일을 하나 만들어 보겠습니다 86 00:10:04,599 --> 00:10:10,200 엔터 치시고 느낌표하고 엔터 이렇게 쳐 주시면 87 00:10:10,200 --> 00:10:15,000 html 파일의 기본 폼이 나올 거에요 느낌표 엔터 88 00:10:15,000 --> 00:10:21,119 거기 바디 쪽에다가 h1 엘리먼트를 하나 만들겠습니다 89 00:10:21,119 --> 00:10:26,000 h1 하나 써 주시고 거기에 90 00:10:28,000 --> 00:10:33,599 자 hello.html 이렇게 하나 써 주실까요 저장하시고 91 00:10:33,599 --> 00:10:38,640 자 html을 실행시키려면 아까 우리가 라이브 서버를 설치했는데요 92 00:10:38,640 --> 00:10:43,359 오른쪽 밑에 보시면 고 라이브가 있을 거에요 93 00:10:43,359 --> 00:10:48,039 고 라이브를 누르시면 이제 라이브 서버에서 저 파일이 실행이 됩니다 94 00:10:48,039 --> 00:10:50,640 눌러보실까요 95 00:10:51,359 --> 00:10:55,280 자 그러면 액세서 허용해 주시고 96 00:10:55,960 --> 00:11:02,799 이렇게 웹브라우저에 이렇게 여러분 작성한 html 파일이 실행이 되는게 보이실 거에요 97 00:11:02,799 --> 00:11:08,080 html 파일을 실행하실 때는 라이브 서버를 쓰시고요 아까처럼 98 00:11:08,080 --> 00:11:15,520 js 파일을 실행시킬 때는 컨트롤 다음에 alt n 이렇게 해서 노드 상에서 실행을 시키시면 되요 99 00:11:15,520 --> 00:11:21,200 그 다음에는 이제 vs 코드를 많이 쓰게 되니까요 기본 단축키를 몇 개 알려 드릴게요 100 00:11:21,200 --> 00:11:28,520 전체 단축키는 여기 url에 있으니까 url 확인하시면 꽤 많은 단축키들이 있는데요 101 00:11:28,559 --> 00:11:32,119 사실 뭐 처음에 이걸 다 외우거나 다 공부할 필요는 없구요 102 00:11:32,119 --> 00:11:36,400 여러분이 코딩 하시면서 필요한 것들은 찾아 쓸 수 있으면 되고 103 00:11:36,400 --> 00:11:41,119 여기 이제 작성해온 몇 개의 기본 단축키들은 조금 처음에 익히시면 104 00:11:41,119 --> 00:11:49,719 이제 코딩 하시기 한결 수월하실 거에요 그래서 파일 하나 만들어 가지고 단축키를 몇 개 테스트를 해 보겠습니다 105 00:11:50,119 --> 00:11:54,440 자 다시 이제 vs 코드로 돌아오셔 가지고 106 00:11:54,440 --> 00:11:58,799 자 거기에 이제 새 파일 만들기 하셔서 107 00:11:58,799 --> 00:12:04,840 그냥 우리 테스트할 js 파일을 하나 만들게요 테스트 점 js 라고 하나 만드시고 108 00:12:04,840 --> 00:12:10,799 여기에 뭐 1 2 3 4 5 이렇게 다섯 개만 한번 써볼까요 109 00:12:10,799 --> 00:12:19,559 자 여러분들이 이제 행을 복사하실 때는 커서가 껌뻑껌뻑 거는 데서 ctrl c 이렇게 누르시면 이 행이 복사가 되요 110 00:12:19,559 --> 00:12:25,039 밑에서 컨트롤 브이 이렇게 하시면 그 복사된게 붙여넣어지죠 111 00:12:25,039 --> 00:12:34,679 자 그 다음에 어 뭐 이 행을 지우고 싶어요 그러면 컨트롤 엑스 이렇게 누르시면 해당 행이 삭제가 되죠 112 00:12:34,679 --> 00:12:40,840 여러 개를 복사하고 싶으실 때는 쉬프트랑 위아래 화살표 누르셔 가지고 113 00:12:40,840 --> 00:12:44,880 라인 선택을 해주세요 블럭 지정을 해주시고 114 00:12:44,919 --> 00:12:52,960 그 다음에 컨트롤 c 누르시고 밑에서 컨트롤 브이 이렇게 하시면 그 여러 행이 같이 복사가 되겠죠 115 00:12:52,960 --> 00:13:02,320 삭제할 때도 마찬가지입니다 블럭을 요만큼 지정하신 다음에 컨트롤 엑스 하시면 요 4개의 행이 삭제가 되겠죠 116 00:13:02,320 --> 00:13:08,960 컨트롤 z 는 많이 쓰실 거에요 저희가 방금 전에 했던 작업을 다시 원상복귀 시키는 거죠 117 00:13:08,960 --> 00:13:16,119 컨트롤 z 입니다 그 다음에 어 행을 이동하고 싶을 때요 118 00:13:16,119 --> 00:13:21,640 그 땐 alt 하고 다음에 up down 버튼을 눌러보세요 이렇게 119 00:13:21,640 --> 00:13:28,640 요 행이 지금 아래 위로 움직이는게 보이시죠 요 행의 코드를 이제 다른 행에다 옮기고 싶은 거에요 120 00:13:28,640 --> 00:13:33,400 그럴 때는 alt up, alt down 이렇게 쓰시고 121 00:13:34,000 --> 00:13:40,440 요 3 이라는 값이 쓰여 있는 행 요 행을 위나 아래로 복사할 수가 있는데요 122 00:13:40,440 --> 00:13:46,840 그 때는 쉬프트하고 알트 하고 up 버튼 위로 하나 복사되죠 123 00:13:46,840 --> 00:13:51,159 쉬프트하고 알트하고 다운 버튼 누르시면 밑으로 하나 복사가 돼요 124 00:13:51,159 --> 00:13:55,599 요것도 이제 코딩 하실 때 많이 쓰시니까 알아두시면 좋구요 125 00:13:55,599 --> 00:14:01,159 자 우리가 이제 코드 이제 작성하시면서 중간에 어떤 코드를 찾아야 될 때가 있어요 126 00:14:01,159 --> 00:14:09,239 그 때는 컨트롤 f 누르시면 파인드죠 자 5를 찾고 싶어 그러면 이렇게 5가 표시가 되는 게 보일까요 127 00:14:09,239 --> 00:14:15,799 컨트롤 f 이렇게 쓰시면 되고 그 다음에 코드를 바꾸고 싶을 때가 있어요 128 00:14:15,799 --> 00:14:24,760 여기에 이제 5라는 애가 있는데 얘를 6으로 바꾸고 싶은 거에요 그러면 컨트롤 h 누르시구요 129 00:14:24,760 --> 00:14:28,200 위에 아래 이렇게 텍스트 박스가 두 개가 나올 텐데요 130 00:14:28,200 --> 00:14:34,840 위에는 바꾸기 전에 값, 밑에 거는 바꿀 값, 5를 6으로 바꿔 보겠습니다 131 00:14:34,840 --> 00:14:40,880 여기다 6 누르시고 오른쪽에 보시면은 이제 바꾸기가 두 가지가 있어요 132 00:14:40,880 --> 00:14:44,840 앞에 거는 1개만 바꾸는 거, 앞에 거는 전체 다 바꾸는 거에요 133 00:14:44,840 --> 00:14:47,760 그래서 오른쪽에 전체 다 바꾸기를 누르시면 134 00:14:47,760 --> 00:14:53,799 자 왼쪽에 코드 창에 5가 6으로 다 변경이 된 게 보이시죠 135 00:14:54,400 --> 00:14:58,359 그렇게 해서 이제 변경 대체를 하시면 되고 136 00:14:58,359 --> 00:15:01,719 자 그 다음에 멀티 커서라는 기능이 있는데요 137 00:15:01,719 --> 00:15:11,039 이 Alt 키하고 커서 깜빡이는 데서 이렇게 왼쪽 마우스 클릭을 이렇게 눌러보세요 138 00:15:11,039 --> 00:15:13,840 이제 커서가 여러 개가 나올 거에요 139 00:15:13,840 --> 00:15:16,400 동시에 여러 줄에 코딩을 하고 싶을 때 140 00:15:16,400 --> 00:15:19,760 여기다 이제 헬로우라고 해볼까요 141 00:15:19,760 --> 00:15:24,479 이렇게 동시에 여러 줄에 같은 코드를 쓸 수가 있죠 142 00:15:24,479 --> 00:15:27,400 그래서 이제 가끔 멀티 커서를 써야 될 때가 있는데 143 00:15:27,400 --> 00:15:30,719 그때 이용하게 쓸 수가 있습니다 144 00:15:30,719 --> 00:15:33,000 자 디버거 사용법에 대해서 알아보겠습니다 145 00:15:33,000 --> 00:15:34,960 어 디버거는요 146 00:15:34,960 --> 00:15:40,599 일단 우리가 코딩을 할 때 중간중간에 변수의 값들을 알고 싶을 때가 있어요 147 00:15:40,599 --> 00:15:43,080 이제 코드가 길어지거나 좀 복잡해지면 148 00:15:43,080 --> 00:15:45,520 중간중간에 변수들도 많고 하기 때문에 149 00:15:45,520 --> 00:15:49,119 그 변수의 값을 알고 싶을 때 이 디버거를 사용을 합니다 150 00:15:49,119 --> 00:15:54,159 그래서 우선은 이제 새 파일 만들기를 하나 하시고 151 00:15:54,159 --> 00:15:59,320 디버깅.js 이렇게 코딩을 하시고 152 00:15:59,320 --> 00:16:10,359 거기에다가 이런 코드를 하나 작성할까요 153 00:16:10,359 --> 00:16:15,479 i는 i 플러스 1 하시고 154 00:16:15,479 --> 00:16:23,080 이 두 개의 코드를 3번 이렇게 복사해주세요 155 00:16:23,080 --> 00:16:25,919 아까 단축키 이용하셔가지고 156 00:16:25,919 --> 00:16:26,880 이렇게 해놓으시고요 157 00:16:26,880 --> 00:16:29,239 코드를 간단히 설명드리면 158 00:16:29,239 --> 00:16:32,200 이제 i가 처음에는 0이었어요 159 00:16:32,200 --> 00:16:34,760 그랬다가 0을 화면에다가 출력하고요 160 00:16:34,760 --> 00:16:36,640 1을 더하죠 161 00:16:36,640 --> 00:16:38,359 그러면 1을 출력하겠죠 162 00:16:38,359 --> 00:16:40,119 그 다음에 2가 될 거고 163 00:16:40,119 --> 00:16:42,960 그 다음에 2 출력하고 3이 되고 164 00:16:42,960 --> 00:16:45,880 3 출력하는 간단한 코드죠 165 00:16:45,880 --> 00:16:48,200 이걸 그냥 실행시키실 때는 166 00:16:48,200 --> 00:16:52,400 아까처럼 Shift-Alt-N 167 00:16:52,400 --> 00:16:53,640 Ctrl-Alt-N 이죠 168 00:16:53,640 --> 00:16:58,200 이렇게 눌러주시면 0, 1, 2, 3 이렇게 결과값이 출력이 될 거예요 169 00:16:58,200 --> 00:17:00,799 근데 이 i의 값이 자꾸 바뀌어 가는데 170 00:17:00,799 --> 00:17:04,319 바뀌어가는 값들을 중간중간에 알고 싶은 거죠 171 00:17:04,319 --> 00:17:06,880 그러면 여기 라인 넘버가 있는데요 172 00:17:07,880 --> 00:17:12,560 거기 왼쪽에 중간에 중단하고 싶은 점 있죠 173 00:17:12,560 --> 00:17:16,439 실행을 중단하고 싶은 점을 이렇게 체크하세요 174 00:17:16,439 --> 00:17:21,839 여기, 여기, 여기 이렇게 세 개를 포인트를 주겠습니다 175 00:17:21,839 --> 00:17:24,920 그 다음에 F5 누르시면 176 00:17:24,920 --> 00:17:28,520 디버거를 Node.js 선택을 하세요 177 00:17:28,520 --> 00:17:32,119 그러면 이렇게 디버깅 된 결과가 보일 거예요 178 00:17:32,119 --> 00:17:37,000 왼쪽에 보시면 여기에 i가 0의 값으로 되어 있죠 179 00:17:37,000 --> 00:17:41,520 첫 번째 중간점에서는 아직 i가 0이라는 거죠 180 00:17:41,520 --> 00:17:46,560 그랬다가 다시 한번 F5를 누르시면 181 00:17:46,560 --> 00:17:48,439 두 번째 중간점으로 가는 거예요 182 00:17:48,439 --> 00:17:51,880 그러면 이제 i값이 1로 증가가 됐죠 183 00:17:51,880 --> 00:17:53,839 자 한 번 더 F5를 누르시면 184 00:17:53,839 --> 00:17:56,119 세 번째 중간점으로 가죠 185 00:17:56,119 --> 00:17:58,000 그럼 이제 i값이 2가 됐어요 186 00:17:58,000 --> 00:18:02,199 이런 식으로 코드 중간중간에 변수의 값들을 알 수가 있거든요 187 00:18:02,199 --> 00:18:06,199 그 위에 보시면은 이제 디버깅 모드에서는 188 00:18:06,199 --> 00:18:07,800 이 아이콘들이 보일 거예요 189 00:18:07,800 --> 00:18:12,920 여기에 이걸 누르셔도 다음 중단점으로 갈 수가 있습니다 190 00:18:12,920 --> 00:18:16,760 그렇게 하시면 간단하게 중단점들 선택해 가지고 191 00:18:16,760 --> 00:18:19,040 디버깅 하는 것들을 할 수가 있어요 192 00:18:19,040 --> 00:18:23,680 이번 시간에는 자바스크립트 개발하기 위한 193 00:18:23,680 --> 00:18:28,719 VSCode라는 툴을 설치해 봤고요 194 00:18:28,719 --> 00:18:31,400 우리가 이제 다양한 플러그인들을 설치할 수 있는데요 195 00:18:31,400 --> 00:18:36,839 코드러너라든지 한글 확장팩, 라이브서버 같은 196 00:18:36,839 --> 00:18:41,040 그런 다양한 기능들을 플러그인 형태로 추가해서 사용할 수가 있어요 197 00:18:41,040 --> 00:18:45,280 그 다음에 이 Node.js는 웹 환경이 아닌 경우에 198 00:18:45,280 --> 00:18:48,760 자바스크립트를 실행시키는 엔진이라고 생각을 하시면 되고 199 00:18:48,760 --> 00:18:53,079 Node.js랑 npm 버전 확인도 한번 해보시고요 200 00:18:53,079 --> 00:18:55,520 그 다음에 VSCode의 단축키들은 201 00:18:55,520 --> 00:19:00,560 오늘 적어드린 것들은 좀 처음에 꼭 알아야겠다 싶은 것들이고요 202 00:19:00,560 --> 00:19:03,520 그 외에 수없이 많은 단축키들이 있으니까 203 00:19:03,520 --> 00:19:06,400 코딩을 해가시면서 필요한 것들을 하나씩 찾아서 204 00:19:06,400 --> 00:19:08,319 익히시면 좋을 것 같습니다 205 00:19:08,319 --> 00:19:10,640 그 다음에 우리가 이제 디버거라는 걸 썼죠 206 00:19:10,640 --> 00:19:15,599 디버깅 작업을 하는데 변수라든지 어떤 프로그램의 구동상태들을 207 00:19:15,599 --> 00:19:17,800 디버거 통해서 확인할 수 있으니까 208 00:19:17,800 --> 00:19:20,400 나중에 코드가 좀 복잡해지고 길어지고 할 때 209 00:19:20,400 --> 00:19:22,560 디버깅 쓰시면 아주 좋을 거예요 210 00:19:22,560 --> 00:19:24,839 오늘은 여기까지 학습을 했고요 211 00:19:24,839 --> 00:19:29,000 다음 강의 때는 자바스크립트 변수에 대해서 좀 더 확인하겠습니다 212 00:19:29,000 --> 00:19:29,680 수고하셨습니다

03_기초부터 실무까지! 자바스크립트 (ES6) 마스터하기

강의 개요와 목표

VSCode 설치 및 기본 설정 방법 소개
Live Server, Code Runner, 한국어팩 등 필수 플러그인 설치
Node.js 설치 및 버전 확인, 간단 실행 테스트
VSCode 기본 단축키 사용법 실습
디버거를 이용한 변수 값 확인과 디버깅 흐름 이해

VSCode 설치 절차

VSCode 공식 사이트 접속 후 OS(Windows/Linux/Mac)에 맞는 설치 파일 다운로드
Windows 사용자는 System Installer x64 버전 선택 권장
다운로드 폴더에서 설치 파일 실행 → 사용자 계정 컨트롤 승인
사용권 동의 후 설치 경로 선택(예: VSCode 폴더)
바탕화면 바로가기 생성 옵션 체크 후 설치 진행 및 완료
실행 후 웰컴 페이지는 닫고 본격 사용 시작

필수 플러그인 설치

왼쪽 사이드바 5번째 메뉴 Extensions 선택 후 검색창 활용
Live Server: HTML 파일을 브라우저에서 바로 실행·자동 새로고침할 수 있는 로컬 서버 플러그인
Code Runner: VSCode 안에서 단축키로 JavaScript 등을 즉시 실행하는 플러그인
Korean Language Pack for Visual Studio Code: 메뉴와 도움말을 한국어로 표시
각 플러그인 검색 후 Install 버튼으로 설치
한국어팩 설치 후 우측 하단의 언어 변경 안내 클릭 → VSCode 재시작 → 인터페이스가 한글로 전환

Node.js 및 npm 설치·확인

공식 사이트 \( nodejs.org \) 접속 → LTS 버전 다운로드 (Long Term Support, 장기 지원 버전)
다운로드한 설치 파일 실행 → 라이선스 동의 → 설치 경로 지정 후 기본 옵션으로 설치
설치 후 명령 프롬프트(cmd) 실행:
- \( node -v \): Node.js 버전 확인
- \( npm -v \): npm(Node Package Manager) 버전 확인
Node REPL에서 테스트:
- \( node \) 실행 후 \( console.log("hello javascript") \) 입력
- 출력 확인 후 Ctrl + C 두 번, 또는 exit 입력으로 종료

워크스페이스 구성 및 코드 실행 테스트

워크스페이스 폴더 생성
- VSCode 실행 → 왼쪽 탐색기 → 폴더 열기
- 예: C 드라이브에 vscode_workspace 폴더 생성 후 선택
JavaScript 파일 실행 (Node + Code Runner)
- 새 파일: hellojs.js 생성
- 내용: console.log("hello javascript")
- 저장 후 Ctrl + Alt + N → 하단 출력 창에 결과 확인
HTML 파일 실행 (Live Server)
- 새 파일: hello.html 생성
- ! 입력 후 엔터 → 기본 HTML 템플릿 자동 생성
- <body> 안에 <h1>hello.html</h1> 추가
- 저장 후 우측 하단 Go Live 클릭 → 브라우저에서 페이지 자동 실행
- HTML은 Live Server, JS는 Code Runner(또는 Node)로 실행

VSCode 기본 단축키 활용

행 단위 편집
- 복사: 커서가 있는 행에서 Ctrl + C → 다른 위치에서 Ctrl + V
- 삭제(잘라내기): Ctrl + X
- 여러 줄 선택: Shift + 위/아래 방향키 → Ctrl + C / X / V
- 되돌리기: Ctrl + Z
행 이동·복제
- 행 이동: Alt + ↑ / ↓ (해당 줄을 위·아래로 이동)
- 행 복제: Shift + Alt + ↑ / ↓ (줄을 위·아래로 복사)
찾기·바꾸기
- 찾기: Ctrl + F → 검색어 입력, 일치하는 부분 강조
- 바꾸기: Ctrl + H → 위: 기존 값, 아래: 변경할 값 설정 후
  - 개별 바꾸기 아이콘: 선택한 하나만 변경
  - 모두 바꾸기 아이콘: 파일 내 전체 일괄 변경
멀티 커서
- Alt 누른 상태에서 여러 위치를 마우스로 클릭 → 여러 개의 커서 생성
- 동시에 동일한 텍스트를 여러 줄에 입력·수정 가능 (예: 여러 줄에 동시에 hello 입력)

디버거 사용법과 중단점

디버깅용 코드 작성
- 예: debugging.js 파일에 \( i \) 값을 0부터 증가시키며 console.log(i) 호출하는 코드 작성
- \( i \) 초기값 설정 → console.log(i) → i = i + 1 패턴을 여러 번 복사
브레이크포인트 설정
- 라인 번호 왼쪽 여백 클릭 → 빨간 점 생성 (실행을 멈출 지점)
- 필요한 여러 줄에 중단점 설정 가능
디버깅 실행
- F5 누르고 Node.js 환경 선택
- 실행이 첫 번째 브레이크포인트에서 멈추고, 좌측 변수 창에서 \( i \) 값 확인(예: 처음엔 0)
- F5 또는 상단 디버깅 아이콘의 다음 중단점으로 진행 버튼으로 다음 브레이크포인트로 이동
- 각 중단점마다 \( i \) 값이 1, 2, 3 등으로 변화하는 과정 확인
디버거를 통해 코드 흐름과 변수 상태를 단계별로 검증 가능하며, 복잡한 코드 오류 분석에 유용