Javascript 입문 - 001. 시작하기

You Seunghyeon·2023년 3월 6일

JavaScript UDR front end web 언더독레볼루션

Javascript 입문

목록 보기

1/6

본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다

01. Javascript 란?

Javascript(자바스크립트, JS)는 Client-side 웹 프로그래밍 언어이다.

HTML과 CSS가 웹에서 각각 구조와 디자인을 담당한다면, JS는 주로 동적이거나 유저와 상호작용이 필요한 파트를 구현하기 위해 사용된다.

웹 브라우저만 있으면 어디서든 실행이 가능하고, 문법이 간단해 진입 장벽이 낮다.

원래는 Client-side 프로그래밍을 위해 만들어졌으나, 요즘에는 JS를 서버 프로그래밍에서도 Node.js를 이용해 사용할 수 있다.

02. 개발환경 세팅

강의에서는 Sublime Text 프로그램을 사용했지만, 여기서는 Jetbrains사의 Webstorm을 사용해서 진행하려한다. 학생 인증을 하면 무료로 사용할 수 있으며, 기본적으로 다양한 편의성을 제공한다.

사실 웹 프로그래밍은 개발 툴에 따라 큰 차이가 없기에, 본인이 기존에 사용하던 익숙한 IDE가 있다면 그 툴을 사용해도 무방하다.

02.01. 프로젝트 세팅

Webstorm을 열고 File > New > Project를 통해 새로운 프로젝트를 디렉토리에 세팅한다.
최상위 폴더를 우클릭 한 후 New > HTML File을 클릭해 새로운 index.html파일을 만들어준다.
똑같이 최상위 폴더를 우클릭 한 후 New > JavaScript File을 클릭해 새로운 challenge001.js 파일을 만들어준다.
challenge001.js 코드에 아래 코드를 넣어준다.

/***
 * challenge001.js
 */

alert("Hello World!");

index.html 에는 아래 코드를 넣어준다.
(script 태그 라인의 코드만 삽입하면 된다)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="challenge001.js"></script>
</head>
<body>

</body>
</html>

그러면 아래처럼 JS를 이용해 alert 를 띄울 수 있다.

여기까지가 가장 기본적으로 개발환경을 세팅하고, HTML과 JS를 이용해본 예제이다.

03. 개발자 도구 (Developer Console)

방금 전에 만든 challenge001.js 코드를 아래와 같이 변경해보자.

/***
 * challenge.js
 */

console.log("Hello, Welcome to Developer Console");
console.log("1");
console.log("2");
console.log("3");

그리고 Ctrl(Cmd) + Shift(Opt) + I 단축키를 눌러 개발자 도구를 열어 Console 탭을 눌러보면 아래와 같이 방금 작성한 console.log 가 출력된다.

개발자도구 Console 탭에서는 이처럼 JS에서 출력되는 로그 등을 확인하거나, 직접 JS를 작성해 실행해 볼 수 있다.

우선, 오늘은 여기까지다.

다음 시간에는 모든 프로그래밍에서의 기초인 변수 (Variable) 부터 살펴보겠다.

You Seunghyeon

다음 포스트

Javascript 입문 - 001. 시작하기