#1 설치를 하기 전에
우리가 흔히 말하는 자바, 자바스크립트, C 와 같은 프로그래밍 언어들은 사람과 컴퓨터가 소통하기 위한 언어이다. 그리고 이러한 언어를 이용해서 사람을 여러가지 명령어를 작성할 수 있는데, 그 명령어를 우리는 소스코드 라고 한다. 같은 맥락으로 프로그램은 소스코드들로 만들어진 틀을 의미한다. 그럼 우리가 프로그래밍 언어를 사용해서 명령어를 쓰면, 컴퓨터를 그것을 알아들을 수 있을까? 정답은 '아니다' 이다! 컴퓨터는 사실 0과 1로 이루어진 언어만 알아듣기 때문에 우리가 쓴 명령어를 컴퓨터의 언어에 맞게 번역을 해주는 작업이 필요한데, 이것을 컴파일링(compiling)이라고 한다.
여러가지 언어들은 각각의 장단점이 있는데, 오늘 알아볼 언어는 자바스크립트(JavaScript)라는 언어이다. 자바스크립트란 무엇일까? 쉽게 말하자면, 웹 페이지는 보통 정적 페이지(움직임 없이 고정된 페이지)인데, 그 페이지에 동적인 움직임을 줄 수 있는 언어가 바로 자바스크립트이다. 예를 들어, 자바스크립트를 이용하면 '클릭' 이나 '엔터' 같은 액션에 맞게 웹 페이지가 변화하거나 그래픽, 동영상 등은 보통 자바스크립트로 프로그래밍이 되어있다. 즉, 컨텐츠를 동적으로 바꾼다고 생각하면 이해하기 쉬울 것 같다.
그럼 이제 차근차근 설치를 시작해보자!
#2 설치하기
- Visual Code Studio
자바스크립트를 사용하기 위해 우리는 비주얼 코드 스튜디오(Visual Code Studio)라는 여러가지 프로그래밍 언어들을 쓸 수 있는 소스 코드 편집기를 다운받으려고한다. 설치하는 방법은 매우 간단하다. 먼저 아래의 웹 사이트에 접속해서 각자 본인의 컴퓨터 사양에 맞는 Stable(가장 안정적인) 버전을 다운로드 해주면 된다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
나는 MacOS를 이용중인데, 맥에서는 다운받은 압축 파일을 열기만 하면 자동으로 Visual Studio Code 가 설치된다! 윈도우로 다운로드 할 때도 복잡할 것 없이 초기 값들을 다 기본 값인 default를 유지하면서 다운하면된다 (그냥 다음/계속 을 눌러서 다운로드 받으라는 소리).
- Node.js
Node.js 는 자바스크립트 엔진으로, 네트워크 애플리케이션 개발에 사용되는 소프트웨어이다. 이게 도대체 무슨 말이고 어디에 필요한 것일까? Node.js 는 자바스크립트를 이용해 브라우저가 아닌 서버를 구축하고, 구축된 서버에서 사용자가 입력한 자바스크립트가 잘 작동되도록 해주는 런타임 환경이다. 다운로드 하는 방법은 간단하다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
위 링크를 들어가서 보이는 화면에서 LTS 버전을 선택한 뒤, 다운로드 해주면 된다! Node.js 도 큰 어려움 없이 설치할 수 있다. Window 의 경우에는 설치하다보면 Tools for Native Modules 이라는 창에서 필수 툴을 설치할 거냐고 묻는데, 특별한 경우가 아니라면 체크 후 Next를 눌러서 설치하면 된다. 설치 후에는 Terminal 이나 cmd 창에서 node 라는 명령어를 입력했을 때, Welcomd to Node.js v... 이라는 문구가 나오면 정상적으로 설치가 된 것이다.
#3 html 파일 만들어보기
다운이 잘 됐다면 이렇게 프로그램이 잘 열린다. 설치 후 초기화면에서 테마를 변경할 수 있는데, 테마는 Mac 기준 상단바의
[Code - Preferences - Color Theme]
에서 언제든 자유롭게 수정할 수 있다.
이제 초기 환경을 세팅하기 위해 위 사진에서 왼쪽 위를 보면 빨간색 네모로 표시된 아이콘을 눌러주도록 하자.
이제 Visual Studio Code 에서 만든 파일들을 저장해줄 폴더를 위의 Open Folder 를 눌러서 지정해주면 된다. 아무 파일이나 가능하고, 나는 바탕화면에 JavaScript 라는 폴더를 만들어 그 파일로 설정해주었다.
그럼 왼쪽 창에서 JAVASCRIPT 라는 폴더가 잘 추가된 것을 볼 수 있다.
1번 동그라미를 클릭하면 JavaScript 라는 폴더 안에 파일이 하나가 추가가 되고,
2번 동그라미를 클릭하면 폴더를 생성할 수 있다.
일단 1번 동그라미를 클릭해서 HTML 파일을 생성해보자! 아무 이름이나 입력하고 파일 명 끝에 .html 을 쓰고 엔터를 누르기만 하면 html 파일이 생성된다.
파일 생성이 잘 됐다! 왼 쪽 사진에 보이는 html 파일이 우리가 방금 생성한 html 파일이다. 아무 내용도 없지만 저 파일에
! 를 작성하고 키보드의 Tab 버튼을 누르면 오른쪽 사진 처럼 html 파일의 기본 코드들이 작성이 된다.
html 파일에서 모든 태그는 <태그이름> 으로 열고 </태그이름> 으로 닫을 수 있다. <body> 태그는 문서의 본문 요소를 의미하는데, <body> 태그 안에 원하는 문구를 입력해보자. 나는 우리집 기염둥이 기영이의 이름을 써보았다 ㅎㅎ
이렇게 작성하고 나서 Ctrl + S 버튼을 누르면 방금까지 작성한 html 파일이 저장이 된다! 그리고 처음에 Open Folder 로 설정해주었던 파일에 들어가 생성된 html 파일을 클릭해보면 body 태그에 입력한 문구가 정상적으로 잘 보인다! 위의 html 파일 사진을 보면 내가 '기영이' 라는 글자를 h1, h2, h3, h4, p 태그들 사이에 넣었는데 이미 눈치챈 사람들이 있겠지만 그 태그들은 오른쪽 사진에서도 볼 수 있는 것 처럼 글씨의 크기를 뜻한다. 이렇게 설치부터 파일을 만들어 보는 것 까지 해봤다!
다음 부터는 JavaScript를 이용해 간단한 코딩을 해보자!
'𝑷𝒓𝒐𝒈𝒓𝒂𝒎𝒎𝒊𝒏𝒈 > 𝐽𝑆' 카테고리의 다른 글
| [JavaScript] JSON.parse(), JSON.stringify(), 파일입출력 (0) | 2022.01.29 |
|---|---|
| [JavaScript] Property (프로퍼티) (0) | 2022.01.28 |
