[NomadCoder] Making Momentum with JavaScript 2. 터미널에서 vscode 실행, html-css-js의 동작 방식, index.html 기본 템플릿 생성
괜히 컨텐츠를 늘려보려고 시덥지 않은 글로 1을 썼지만 2는 진짜로 내가 몰랐던 내용이다.
터미널에서 vscode 바로 실행하기.
% code .or
% code momentum//폴더명
인데 code 라는 명령어가 없단다! 왜 나는 안되는데!
안되면 되게 하자.
1) 먼저 vscode를 켠다. (이럴거면 그냥 이대로 폴더를 열지.. 싶지만 언젠가 멋지게 터미널에서 vscode를 열어버릴 나를 위해...ㅎ)
2) 검색창 (command + shift + p)에 [Shall Command: install 'code' command in PATH] 줄여서 [Shall Command: PATH만 쳐도 됨]를 입력한다.
3) 해당 명령어를 설치! 끝!
4) 이제 터미널로 돌아가서, 열어볼 폴더에서 상단의 명령어를 실행해본다. vscode가 땋 켜진다.
자. 이제 본격적으로 js를 배워보자.
javascript는 따로 설치할 필요가 없다. 기본적으로 구성되어있기 때문이다. 그러므로 모든 곳에 당연히 사용되기 때문에 사장될 일이 없어 적어도 갑자기 일자리가 사라져 굶어죽을 일은 없다는 게 장점이라는 주장이다.
우리는 브라우저 창을 이용할건데, "인터넷 익스플로러" 만 아니면 된다. 이왕이면 크롬/브레이브 등 크로미움 기반의 브라우저가 가장 최신의 브라우저이며 대부분의 확장 프로그램들이 크롬에 먼저 도입된다고 하니 그것으로 선택하는 것이 좋다고 한다. "인터넷 익스플로러"는 지옥이다. ㅇㅈ ㅋㅋㅋㅋ솔직히 이거 듣고안웃는 사람 없었을 듯.
크롬창 우클릭 > 맨 하단 검사 > console > alert("hi!"); 를 입력하면 hi라면서 알림창이 뜬다.
우리는 이걸 웹 콘솔창이 아니라 프로그램 파일로 동작할 수 있게 만들려는 것이다.
자, momentum(or tomato든 potato든) 폴더에 가서 js, index.html, style.css 세개의 파일을 만들자.
app.js or script.js
alert("Hi!");style.css
body {
background-color : beige;
}둘다 브라우저로 열면, 'open'되는 것이지 '실행'되지 않는다.
왜냐하면 그들의 동작 방식은 이것이 아니기 때문이다.
브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져온다.
index.html 파일을 브라우저에서 열고, html 파일이 css파일과 js 파일을 불러온다.
자, 일단 index.html 파일의 기본값을 만들어보자.
#index #html #파일 #기본템플릿생성
! > enter > 끝!
index.html
<!-- ! + 엔터 : 기본 템플릿 생성 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MOMENTUM </title> <!--title 적기(tomato or potato or etec.) -->
</head>
<body>
</body>
</html>