자바스크립트[기초]

혼자 공부하는 자바스크립트 [개발환경 설치와 코드 실행]

raiutc 2023. 8. 30. 17:24
728x90
반응형
SMALL

개발환경 설치와 코드 실행

  • 개발을 할 수 있게 해주는 환경을 개발환경(development environment)라고 부른다
  • 개발환경에는 코드를 작성하는 텍스트 에디터와 코드를 실행하는 코드 실행기가 필요
  • 자바스크립트 개발을 위해 텍스트 에디터는 비주얼 스튜디오 코드(Visual Studio Code)를 사용, 코드 실행기는 구글 크롬이라는 웹 브라우저 사용

코드 실행기: 구글 크롬

  • 구글 크롬 설치하기
  1. 구글 크롬 홈페이지에 들어가서 [Chrome  다운로드] 버튼을 클릭

https://www.google.com/chrome/

 

Chrome 웹브라우저

더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.

www.google.com

 

2. 다운로드가 완료되면 하단이나 우측 상단에 나타나는 설치 파일을 클릭해 실행

3. 디바이스 변경 허용 동의를 구하는 창이 나타난다. [예]를 클릭하면 설치가 자동으로 진행

4. 구글 크롬 설치가 완료되면 자동으로 구글 초기 화면이 나타난다. 이제 구글 크롬을 사용할 수 있다.

 

텍스트 에디터: 비쥬얼 스튜디오 코드

  • 비쥬얼 스튜디오 코드 설치하기

1. 비쥬얼 스튜디오 코드의 설치 프로그램을 다운로드해야 한다. 비쥬얼 스튜디오 코드 홈페이지에 접속해서 [Download for Windows]를 클릭하여 설치 파일을 다운로드한다.

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

2. 페이지가 이동되고 설치 파일을 다운로드한다. 설치 파일을 화면 우측 상단(혹은 화면 하단)에서 확인할 수 있다. 다운로드한 파일을 클릭해 실행한다.

3. [동의합니다]를 선택하고 [다음] 버튼을 클릭

4. 설치할 폴더가 표시된다. 다른 폴더를 선택하려면 [찾아보기] 버튼을 클릭해 변경하고, 그렇지 않으면 [다음] 버튼을 클릭한다.

5. 시작 메뉴 폴더의 이름을 지정한다. [다음] 버튼을 클릭한다.

6. 바탕 화면에 바로 가기를 만들고 싶다면 [바탕 화면 바로 가기 만들기]를 체크한다. 나머지도 작업 시 유용하게 사용되는 부분이므로 모두 체크한다. [다음] 버튼을 클릭한다.

7. 대상 위치, 시작 메뉴 폴더, 추가 설정 항목을 확인하고 [설치] 버튼을 클릭한다.

8. 설치가 완료되면 다음과 같은 화면이 나온다. 기본적으로 [Visual Studio Code 시작]에 체크되어 있으므로 [마침] 버튼을 클릭하면 비주얼 스튜디오 코드가 바로 실행된다.

9. 설치가 완료되었다면 Visual Studio Code를 실행

  • 비주얼 스튜디오 코드 한국어 언어팩 설치하기

1. 화면 왼쪽의 툴바에서 ① 5번째에 있는 [확장(ctrl+shift+x)] 아이콘을 클릭한다. ② 검색창에 'Korean'을 입력하고 Enter를 눌러 검색한 후 목록에서 ③[Korean Language Pack for Visual Studio Code]를 선택하고 ④[Install] 버튼을 클릭해 설치

2. 설치가 완료되면 오른쪽 아래에 "새로 시작하겠습니까?"라는 의미의 대화상자가 나온다. [Restart Now] 버튼을 클릭해 새로 시작하면 다음과 같이 비주얼 스튜디오 코드의 메뉴가 한글로 바뀐 것을 확인할 수 있다.

코드 실행하기(1): 구글 크롬 콘솔에서 실행하기

1. 구글 크롬의 주소창에 about:blank를 입력해 크롬이 기본적으로 제공하는 빈 페이지로 들어간다.

2. 여기에서 단축키 Ctrl+Shift+I(알파벳 '아이')를 눌러 개발자 도구를 실행. [Console] 탭을 클릭

3. 코드를 입력하고 Enter키를 누르면 곧바로 코드 실행을 확인할 수 있다.

console.log("Hello JavaScript...!")

코드 실행하기(2): 파일 만들고 저장해 실행하기

1단계: HTML 페이지 생성하기

1. 새 파일을 만든다.(단축키 Ctrl+N)

2. 폴더를 지정하고 test.html이라는 이름으로 저장

2단계: HTML 페이지 작성하기

1. 새 창에 html이라고 입력. 입력하는 중에 나오는 자동 완성 기능중 [html:5]를 선택하고 Enter키를 누른다.

2. 완성되는 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3. 아래 코드처럼 간략하게 만든다.

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

4. 자바스크립트를 사용하려면 기본 HTML 페이지의 <head> 태그 사이에 다음과 같이 <script> 태그를 삽입

<!DOCTYPE html>
<head>
    <title></title>
    <script>
        // <script>태그룰 추가한다.
        // 이 부분에 자바스크립트 코드를 입력한다
    </script>
</head>
<body>
    
</body>
</html>

※ <script>태그는 <head> 태그 안에 넣으면 코드를 살펴보기에도 편리하므로 특별한 경우가 아니라면 <head> 태그 안에 위치시킨다.

  • Hello World 예제
<!DOCTYPE html>
<head>
    <title></title>
    <script>
        alert('Hello World')
    </script>
</head>
<body>
    
</body>
</html>

3단계: HTML 페이지 실행하기

1. 예제가 저장되어 있는 폴더로 가 생성한 test.html 파일을 확인한다.

2. 이 파일을 크롬 브라우저에 드래그&드롭해서 놓으면 다음과 같이 출력된다.

▶ 3가지 키워드로 정리하는 핵심 포인트

  • 개발환경이란 개발을 할 수 있는 환경을 의미
  • 텍스트 에디터란 코드를 작성할 수 있는 프로그램을 말한다. 여기선 텍스트 에디터로 비주얼 스튜디오 코드를 사용
  • 구글 크롬 개발자 도구란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 도구

 

728x90
반응형
LIST