자바스크립트 설치 방법

안녕하세요~ 오늘은 자바스크립트를 처음 입문하시는 분들을 위해 실습 환경 구축, 웹 브라우저 실습 방법에 대해 알아보려고 합니다!

먼저, 자바스크립트란 무엇인지, 역사, 특징 이런것들은 저보단 구글에 검색하면 너무 잘 나와있기 때문에 한번 읽어 보시고 그 다음에 따라오시는걸 추천합니다!

실습 환경 구축

1. 구글에 들어가서 "visual studio code" 라고 검색을 하고 Download를 클릭합니다.
(오른쪽 설명 보시면 아시겠지만 다양한 언어를 코딩할 수 있는 코드 편집기입니다.)

2. 개인의 컴퓨터에 따라 다운로드 버튼을 클릭해줍니다.

동의합니다 클릭 후 다음

원하시는 경로에 저장하시면 됩니다

다음

PATH에 추가는 환경변수 설정에서 이 프로그램의 PATH를 추가할 것인지를 묻는 것 입니다.

확인해 보시고 설치 클릭

3. 설치를 완료합니다.

이렇게 실습 환경 설치를 완료하였습니다!

웹 브라우저 실습 방법

비주얼 스튜디오 코드의 실행 화면

1. 상단에 File -> Open Folder를 클릭해줍니다.

2. 본인이 원하시는 경로에 폴더를 지정해줍니다. (저는 바탕화면에 새 폴더를 만들어서 지정해주었습니다)

3. 다음과 같이 폴더가 생겼고 우 클릭 후 New File 클릭

4. hello.html 이라고 만들어줍니다.

5. doc라고 검색을 한 뒤, Ctrl + 스페이스 바를 눌러주면 다음과 같이 나오고 Enter를 눌러줍니다.

6. 다음과 같이 html 태그로 구성된 내용들이 나오게 됩니다.

HTML을 잘 모르신다면 태그, 요소, 속성에 대해 알아야합니다.

태그를 사용해 만들어진 것을 요소라고 합니다.

(위 사진 참고)
갈색 : 시작태그, 끝태그 (항상 시작태그와 끝태그로 구성되어 있죠??)
빨간색 : 속성
파란색 : 속성값

(다른 예시)
<img src = "abc.png"></img>

<img> : 시작태그
</img> : 끝태그
<im src = "abc.png" : 여기서 src는 속성이며 어떤 사진을 불러올 것인지 지정하는 것이죠

간단히 설명 드렸지만 HTML이 무엇인지, 태그가 무엇인지 잘 모르신다면 검색해 보시길 바랍니다.

7. scri를 입력하고 Ctrl + 스페이스바를 누르면 사진과 같이 나오고 Enter

8. 그러면 나오게 되는 <script></script> 태그가 보이게 되고, 이 태그 안에 자바스크립트 코드를 작성하는 것 입니다!
사진 14번 라인과 같이 코드를 작성해줍니다.

console.log() -> 이 메소드는 주로 디버깅을 목적으로 변수나 문자 등을 출력하기 위해 주로 사용합니다.

개인이 작업을 하다가 어디까지 값이 넘어오는지? 변수의 값이 제대로 넘어오는지 등 그외에도 다양하게 활용합니다

9. 구글이나 파이어폭스 등 웹 페이지에 hello.html 파일을 드래그해서 가져다 놓습니다.

10. F12(개발자 도구)를 눌러준다면 다음과 같이 Hello가 출력되는 것을 확인할 수 있습니다.

---

오늘은 이렇게 실습 환경 설치 및 웹 브라우저에 적용하는 방법까지 알아보았습니다.

다음 챕터부터는 간단한 문법과 자주 사용하는 메소드에 대해 알아보고 실습을 진행하려고 합니다.


제가 자바스크립트에 대한 설명이나, HTML에 대한 내용은 구체적으로 다루지 않았는데 스스로 찾아보시고 이해하시는걸 추천드립니다! 왜냐하면 코딩을 접해보신 분들이라면 오늘 하신 것 처럼 하나의 내용을 알려고 하다보면 다른 것도 알아야하고 그런 경우가 많죠! 미리 습관을 들여놓는다 생각하시고 다양하게 공부하시면 좋을 것 같아요.

이상 마무리하겠습니다~