[인생 프로그래밍] 나의 첫 자바스크립트 프로그램, "Hello World!"

Rex·2022년 1월 10일
JavaScripthelloworld개발자렉스너무쉬운프로그래밍자바스크립트
0

인생 프로그래밍

목록 보기
15/33
post-thumbnail

나의 첫 자바스크립트 프로그램, "Hello World!"

JavaScript 과정은 반드시 Python 의 모든 과정을 완전히 끝낸 후에 다시 돌아와서 해야 한다. 그렇지 않으면 학습 효율이 낮아질 것이고, 결국 모든 언어가 헷갈려서 아무것도 잘 하기 어렵게 될지도 모른다. 꼭 Python 의 전 과정을 마치고 JavaScript 를 시작하라! 그렇게 하나씩 끝내는 게 결국 더 빨리 가는 길이다. 그 전에는 JavaScript 가 궁금해도 그냥 지나가야 한다. 어차피 Python 과정에서 설명한 개념은 다시 설명하지 않을 것이기 때문이다. 그래도 읽고 싶다면 30초 안에 빨리 읽고 넘어가버리자!

학습 순서와 책 페이지의 순서가 다른 이유는 추후에 효율적인 복습을 위해서이다. 반드시 하나의 언어를 완전히 끝내고 다음 언어를 진행해야 한다.
학습 순서: Python → JavaScript

Python 을 완전히 끝낸 후에 이 페이지를 본 것이라면, 이제부터 아주 쉽게 느껴질 것이다. 바로 시작해 보자!

HTML, JavaScript 파일 만들기

workspace 폴더의 javascript 폴더에 index.html 과 too-easy-javascript.js 라는 파일을 만들어보자.

확장자 .html 파일은 HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어) 소스코드 파일이다. 우리가 웹 브라우저에서 보이는 모든 화면들은 html 코드로 만들어져있다.

확장자 .js 파일은 JavaScript 소스코드 파일이다. JavaScript 를 줄여서 js 라고 표현한다. 우리는 .js 파일을 .html 에서 불러들여서 사용할 것이다. (이를 보통 import 한다고 표현함)

웹사이트 개발 이해하기

네이버, 블로그, 유튜브 등 우리들이 사용하는 전 세계의 모든 웹사이트는 HTML / CSS / JavaScript 라는 3가지 기술의 조합으로 만들어져있다. 웹사이트를 사람으로 표현하면 HTML은 인체 뼈의 역할을 함으로써 웹사이트의 기본 골격을 만들어주고, CSS는 살/옷/화장의 역할을 함으로써 웹사이트가 시각적으로 예뻐 보일 수 있도록 꾸며준다.
그리고 JavaScript는 두뇌의 역할로 웹사이트에 영혼을 불어넣어 준다. 즉, JavaScript 없는 웹사이트는 영혼이 없는 것이다. 마네킹 상태라고 할 수 있겠다.

JavaScript 는 웹사이트를 살아 움직이고 동적인 인터렉션이 가능하도록 만들어준다. 웹사이트에서 물건을 구매하거나, 채팅을 하거나, 댓글을 남기거나, 좋아요를 누르거나, 게시판에 글을 쓰는 등 모든 행동의 99.99%는 JavaScript 로 구현된다.

HTML / CSS / JavaScript 중에 가장 방대하고 중요도가 높은 영역이 바로 JavaScript 이다. 이 책에서는 HTML 과 CSS 를 다루지 않으니 그에 대한 자세한 설명은 하지 않을 것이다. 우리는 그 안에서 핵심적인 역할을 하는 JavaScript 만을 공부할 것이다.

HTML 파일에 코드 입력하기

방금 만든 index.html 파일에 아래의 html 코드를 입력하고 저장해 보자.

<html>
  <head>
  </head>
  <body>
    <h1>
      인생 프로그래밍 - JavaScript
    </h1>
    <script>
      console.log("Hello World!");
    </script>
  </body>
</html>

위의 내용은 html 의 기본적인 5가지 tag(태그)를 사용한 건데, 이 책에서 html 을 설명하는 처음이자 마지막 영역일 것이다. 아주 간단하게만 설명하고 지나가겠다.

HTML 태그 이해하기

  • <태그이름> 내용 </태그이름> : 태그의 시작과 끝, 그 안에 다른 태그를 넣거나 내용을 넣을 수 있다. 대부분의 태그들은 여는 태그와 닫는 태그로 되어 있다.
    • 열거나 닫지 않는 '단일 태그' 도 있다. (예: <img /> 또는 <input />
  • <html> : html 전체를 감싸는 태그
  • <head> : 시각적으로 보이지 않으면서, html 에 대한 여러 가지 초기 설정 등을 구성할 수 있는 태그
  • <body> : 시각적으로 보이는 태그들을 작성하는 영역. 각종 요소(제목, 본문, 이미지, 버튼, 링크 등)들이 표현되는 태그
  • <h1> : 문서의 제목(heading 1)을 표현하는 태그
  • <script> : 자바스크립트 태그. 자바스크립트가 실행되는 영역, 보편적으로 <script> 태그는 body 태그의 끝인 </body> 직전에 위치하는 편이다.
    • <script> 태그 내에 작성된 console.log() 는 우리가 파이썬에서 print() 함수를 써서 콘솔 창에 결과를 출력한 것과 똑같은 역할을 한다.

console.log() 이해하기

이미 Python 을 공부했으니, console.log() 라는 코드를 보고 이렇게 추측할 수 있을 것이다.

  • console 은 Console 클래스의 인스턴스(instance) 일 것이다.
  • log() 는 console 인스턴스가 가지고 있는 method 중 하나일 것이다.

만약 위와 같이 추측했다면 당신은 파이썬 과정을 거의 완벽하게 이해한 것이나 다름 없다. 자신에게 칭찬을 아끼지 말아야 한다!

그러나 위 내용을 추측하지 못했다고 해서 다시 뒤로 돌아가서 파이썬을 학습할 필요는 전혀 없다. 그냥 자바스크립트를 통해 새롭게 이해하기 시작하면 된다. 천천히 익숙해지면 되니 절대 실망하거나 걱정하지 말기를 바란다. 이런 것들이 익숙해지기 위해서 여러 개의 언어를 학습하는 것이다. 곧 있으면 분명히 잘 해낼 것이다!

HTML 소스코드 실행하기

.html 파일을 실행시키는 방법은 매우 간단하다. 단지 브라우저로 실행하기만 하면 된다.

우측 하단 콘솔에 보이는 것 처럼 Hello World! 라는 글자가 출력되었다면 성공이다!

HTML 과 JavaScript 분리하기 (리팩토링)

우리는 방금 자바스크립트 코드를 .html 파일에 함께 작성했다. 그러나 보통은 자바스크립트 코드를 .js 파일에 따로 분리해서 작성하는 편이다. 그러기 위해서 .js 파일을 만든 것이다.

<script> 태그의 코드를 다음과 같이 수정할 것이다.

<!-- 기존 코드 -->
<script>
  console.log('Hello World!');
</script>
<!-- 새로운 코드 (위 기존 코드를 새로운 코드로 변경) -->
<script src="./too-easy-javascript.js"></script>

새로운 코드의 <script> 태그를 보면 src 라는 코드가 추가되었는데, 이것을 속성(Attribute) 이라고 한다. 태그에 속성을 추가함으로써 태그의 부가적인 기능을 사용할 수 있도록 해준다. <script> 의 src 속성을 추가하고 자바스크립트 파일의 경로를 입력하면 해당 자바스크립트 파일을 불러오고 실행시켜준다.

경로에 입력한 것 중 .(점)은 현재 실행 중인 index.html 파일의 위치를 기준으로 '현재 폴더' 를 의미하며, 현재 폴더의 too-easy-javascript.js 파일을 가져오는 것이다. 위에서 잠깐 언급했던 것처럼, 이것이 JavaScript 파일을 HTML 문서에 import 하는 방법이다.

그리고 console.log('Hello World!'); 라는 코드를 too-easy-javascript.js 파일에 작성하고 저장해 보자. (index.html 파일과 too-easy-javascript.js 파일 둘 다 저장해야 한다.)

다 됐으면 브라우저를 새로고침하고, 아래 스크린샷처럼 변경된 내용이 보이면 성공이다!
(새로고침은 단축키 f5 또는 control + r)

콘솔에 출력된 자바스크립트의 실행 결과는 동일해야 한다. 그런데 실행 결과의 오른쪽에 표시되는 '파일의 몇 번째 line에서 실행되었는지' 가 달라진 것을 확인할 수 있을 것이다. 이렇게 실행 결과를 유지하면서, 코드의 구조를 더 좋게 변경하는 행위를 리팩토링(Refactoring) 이라고 표현해요.

이제부터는 모든 자바스크립트 코드를 too-easy-javascript.js 파일에 작성할 거고, 소스코드가 변경되면 브라우저를 새로고침 하기만 하면 된다. 이제부터 본격적으로 JavaScript 개발자의 길을 걸어보자!

정리하기

  1. HTML, CSS, JavaScript
    • 웹 페이지를 개발하는 데 사용되는 3가지 종류의 언어이다. HTML 은 웹페이지의 뼈대를 구성하며, CSS 는 화면을 예쁘게 꾸미는데 사용된다. JavaScript 는 웹페이지에 영혼을 불어넣는다.
  2. JavaScript import
    • 자바스크립트 소스코드를 실행시키는 방법은 2가지가 있다. 하나는 HTML 파일에 <script> 태그를 만들고 그 안에 코드를 넣는 방법. 또 하나는 HTML 파일에서 script 파일의 경로를 입력하고 import 하는 방법이다. 실제로 매우 짧은 코드가 아닌 이상 후자의 방식이 훨씬 더 많이 쓰인다.

생각 해보기

이전의 파이썬 과정에서 공부했던 것들을 생각해 보자. 그리고 파이썬과의 차이점을 하나씩 발견해 나가는 재미와 즐거움을 느껴보자.

JavaScript는 두뇌의 역할로 웹사이트에 영혼을 불어넣어 준다. - Developer Rex

연습 문제

  1. 나만의 .html 파일과 .js 파일을 만들어서 콘솔 창에 내용을 출력해 보자.

궁금증 / 질문 / 개선점이 있다면 꼭 댓글을 달아주세요. 제가 최선을 다해 도와드리겠습니다. 여러분들의 최고의 학습 친구가 되어드리겠습니다.

#인생프로그래밍 #개발자렉스 #프로그래밍 #프로그래머 #개발자 #개발입문 #프로그래밍입문서적 #코딩교육 #코딩무료교육 #파이썬 #자바스크립트 #자바 #파이썬기초 #파이썬독학 #파이썬책 #혼자공부하는파이썬 #혼공파 #자바스크립트책 #앱개발 #어플개발 #ProgrammingOfLife #programming #programmer #coding #software #developer #python #javascript #java

profile
Rex
🔥 from Abstraction to Realization
이전 포스트

[인생 프로그래밍] 나의 첫 파이썬 프로그램, "Hello World!"

0개의 댓글