#1-5 Hello World with Javascript

 

그럼 우리의 첫 번째 연습 프로젝트로 일단 우리가 사용할 툴에 대해 알아봅시다. Visual Studio Code, Atom, Sublime Text 등등 여러분이 원하는 에디터를 선택하기를 바라요.

저는 Repl 이라는 것을 사용 할 겁니다. Repl은 꽤 괜찮습니다. Code Editor 같은 건데 다운로드가 굳이 필요 없거든요.
개인 파일이랑 결과를 여기서 전부 볼 수 있습니다. 당연히 큰 프로젝트를 할때는 VSCode 도 사용하는데 컨셉을 보여준다거나 하는 용도의 작은 프로젝트는 그냥 Ripple만 사용 할 겁니다. 알겠죠?

자, 처음으로 해야하는 건 JavaScript를 어떻게 페이지에 추가하는지 알아야 합니다. 그냥 평범한 HTML를 만들어줄건데
아마 우리 전부는 CSS를 웹사이트에 어떻게 넣는지 알고 있을 겁니다. 모른다고요? 괜찮아요. 배우면 돼요.

이렇게 하고 저장해주면 됩니다. 파일명 뒤에 .html 붙이는 것 잊지마세요😉

 

이제 style.css로 가서 제대로 작동 되는지 확인해 봅시다.

 

색상은 빨간색으로. 저장하고 새로고침을 하고 결과를 한번 볼까요?

제대로 되고 있네요. 빨간색으로 설정한 배경도 제대로 떴습니다. 근데 너무 강렬해요. 이 부분은 좀 수정해줄게요.

그나마 낫네요. 이건 다들 해본 것이니 잘 따라올 수 있죠? 전에 하지 않았던 부분은 JS파일을 추가하는 부분일 것입니다. JS파일을 추가하는 건 매우 간단합니다. 이번 케이스 같은 경우엔 JS파일이 맨 위에 뜨지 않을 겁니다.

JS파일은 항상 Body 아래에 있어야 합니다. 제일 마지막에 추가를 해야하죠.

 

JavaScript가 우리 파일에서 제대로 실행되는지 보려면 테스트를 진행해보면 됩니다. 경고 메세지를 만들어 보겠습니다.

 

사진과 같이 입력을하고 저장, 새로고침을 하면! 이 아름다운 걸 보세요. 제대로 실행 되었습니다.
이제 우리는 경고메세지도 있습니다. JavaScript로 제일 처음한 작업입니다. 이걸 Hello world 라고 부릅니다. Hello world 언어 라고도 합니다. 경고메세지요.

 

사진과 같이 alert를 console.log로 바꿔주면 제대로 실행이 되면서 아까는 경고메세지로 뜨던 내용이 여기 console에 뜹니다. 좋아요 여기 보이는 것처럼 HTML CSS에 JavaScript 파일을  추가하는건 매우 쉽고 심플합니다. 심플한 이유는 전에 말했듯이 모든 웹브라우져에는 JavaScript가 설치되어있기 때문입니다.

보통 소프트웨어 제품을 만들 때 Haskell이라는 언어를 사용했다고 가정하면 소프트웨어가 만들어졌고, 내가 오픈을 해야 할 때 언어에 따라 다르지만 이따금씩 Haskell을 설치해야 하는 경우가 있습니다. 내 컴퓨터에서 Haskell을 이해하려면 말이죠. 그리고 그런 점이 가끔 불편하게 느껴질 때가 있습니다. 왜냐면 사람들이 모든 언어를 가지고 있지 않아서 다운로드를 받아야 하는데 이게 굉장히 귀찮거든요.

하지만 JavaScript같은 경우엔 아무도 다운로드를 하지 않아도 됩니다. 브라우저랑 같이 이미 구성이 되어있기 때문입니다. 그래서 JavaScript가 강력하다는 겁니다.

그리고 사진에서 보이듯 우리는 설치를 한 게 없는데 코드는 이미 실행이 되고 있습니다. 브라우저는 우리가 준 명령어를 알아들었고 우리는 그저 코드를 적기만 했을 뿐입니다.

다음 글에서는 JavaScript에서 우리가 해야하는 것들에 대해 더 설명을 해줄게요. Variables라고 불리는 것에 대해 더 알려줄 것입니다.

 

아, 소개영상에 빠뜨린 내용이 있었네요! 다음 글에 그것도 넣어야겠다. 담에봐용가리!