JavaScript_Day.1

개발자가 되는 현기씨의 첫걸음이 될 페이지다.
어쩌다 여기까지 왔지...

개발자로 취업하기 위해 학습한 내용을 기록하는 블로그의 첫 글이다.
오늘은 학습 첫날이라 JavaScript(이하 JS) 기초를 중심으로 정리했다.

1. VS Code에서 파일 만들기

VS Code의 Explorer에서 New File로 파일을 만들 수 있다.
파일을 만들면서 바로 이름을 입력하는데, 이때 확장자를 직접 정해서 파일의 종류를 결정한다.

확장자	역할
`파일명.html`	웹 페이지의 구조와 내용
`파일명.css`	UI 디자인, 색상, 폰트 등 화면 꾸미기
`파일명.js`	동적 제어, 사용자 입력과 계산, 웹 서버와의 통신

오늘은 첫날이니 이 중 JS가 중심이다.

2. JavaScript는 어디에 쓰는가

JS 코드는 <script></script> 태그 안에 작성한다.
이 태그는 <head>와 <body> 어디에든 넣을 수 있다.

다만 <head> 안에 넣으면 HTML이 렌더링되기 전에 JS가 먼저 실행된다.
이때는 <body>의 DOM 요소가 아직 만들어지지 않았기 때문에, DOM을 조작하는 코드가 에러를 낼 수 있다.

그런데 여기서 갑자기 DOM이라는 개념이 등장했다. 처음 보는 단어라서 따로 찾아봤다.

DOM이란

DOM(Document Object Model)은 HTML 문서를 브라우저가 이해할 수 있도록 tree 구조의 객체로 만든 것이다.
<body> 안의 내용이 부모와 자식 관계로 정리된 자료 구조라고 보면 된다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul>
    <li id="apple">Apple</li>
    <li id="banana">Banana</li>
    <li id="orange">Orange</li>
  </ul>
  <script src="app.js"></script>
</body>
</html>

위 코드를 DOM으로 바꾸면 이런 모양이 된다.

html
├── head
│   ├── meta
│   └── link
└── body
    ├── ul
    │   ├── li#apple   (Apple)
    │   ├── li#banana  (Banana)
    │   └── li#orange  (Orange)
    └── script

파싱(Parsing)이란

DOM을 공부하다 보니 파싱이라는 단어도 나왔다.
파싱은 컴퓨터가 이해하기 어려운 데이터를 일정한 규칙에 따라 나누고, 각각의 의미를 해석해서 활용하기 좋은 형태로 정리하는 과정이다.
브라우저가 HTML 문서를 읽어서 DOM tree를 만드는 과정도 파싱의 한 예다.

추가로 정리: script 위치 때문에 생기는 에러

<head>에 script를 두면 어떤 문제가 생기는지 직접 코드로 정리해 봤다.

<head>
  <script>
    // body가 아직 만들어지기 전이라 요소를 찾지 못한다
    const fruit = document.getElementById("apple");
    console.log(fruit);              // null
    fruit.style.color = "red";       // TypeError: Cannot set properties of null
  </script>
</head>
<body>
  <ul>
    <li id="apple">Apple</li>
  </ul>
</body>

해결 방법은 두 가지다.

<!-- 1. script를 body 맨 아래에 둔다 -->
<body>
  <ul>
    <li id="apple">Apple</li>
  </ul>
  <script src="app.js"></script>
</body>

<!-- 2. head에 두되 defer 속성을 붙인다 (HTML 파싱이 끝난 뒤 실행) -->
<head>
  <script src="app.js" defer></script>
</head>

3. 데이터 출력

JS에서 값을 화면이나 콘솔에 내보내는 명령문은 세 가지를 배웠다.

명령문	출력 위치
`document.write(내용)`	브라우저의 body 안
`alert(내용)`	브라우저 경고창
`console.log(내용)`	개발자 도구(F12)의 콘솔창

console.log는 코드가 제대로 실행되는지, 오류는 없는지 확인하는 용도로 많이 쓴다고 한다.

4. 주석

// 한 줄 주석

/*
  여러 줄(블록)을
  한 번에 주석 처리
*/

VS Code에서는 코드를 선택하고 Ctrl + / 를 누르면 여러 줄이 한 번에 주석 처리된다.
이 단축키를 발견하고 나서 혼자 감탄했다. 나이쨔!

5. 실습

5-1. document.write / document.writeln

실습에서는 document.write를 주로 사용했다.
document.writeln도 같이 배웠는데, 출력한 내용 뒤에 줄바꿈 문자(\n)를 붙여 준다는 점이 다르다.
다만 HTML은 줄바꿈 문자를 공백 하나로 렌더링하기 때문에, 브라우저 화면에서는 한 칸 띄어쓰기처럼 보인다. 실무에서는 거의 안 쓰게 될 것 같다.

document.write("Hello");
document.write("World");     // HelloWorld
document.writeln("Hello");
document.writeln("World");    // Hello World (화면에서는 공백으로 보임)

5-2. 부등호와 연산 결과 확인

>, < 같은 부등호 연산자를 출력해서 결과를 확인했다.
console.log로는 주로 연산을 해봤다.

서로 다른 자료형(문자열 string과 숫자 number)을 섞어서 연산해도 되는지 궁금해서 직접 넣어봤다.

-, *, / 는 문자열 숫자도 숫자로 바꿔서 계산됐다.
+ 는 계산이 아니라 문자를 이어 붙이는 결과가 나왔다.

console.log("10" - 3);   // 7
console.log("10" * 2);   // 20
console.log("10" / 2);   // 5
console.log("10" + 3);   // "103"  ← 계산이 아니라 이어 붙이기

+만 이상하게 동작했으니 나머지 연산자(% 등)는 -, *, /처럼 숫자로 계산될 것이라 예상했다.
확인해 보니 실제로 그랬다.

console.log("10" % 3);   // 1

5-3. `=`, `==`, `!=` 그리고 논리 연산자

처음으로 ==와 !=가 등장했다.

코드에서 =는 오른쪽 값을 왼쪽에 대입한다는 뜻이다.
우리가 수학에서 쓰던 "같다"는 ==로 표현한다.
!=는 "같지 않다"는 뜻의 부정 연산자다.

console.log(3 == 2);   // false (값이 다르니까)
console.log(3 != 2);   // true

>, <, >=, <=, ==, != 같은 식을 논리(비교) 연산자라고 부르고, 결과값인 true / false를 논리형(boolean) 이라고 한다.

5-4. alert 사용해 보기

alert는 설명 그대로 브라우저에 경고창을 띄우는 명령문이다. 출력 내용은 경고창 안에 표시된다.

alert를 두 번 연속으로 쓰면 어떻게 될까 궁금해서 추가해 봤다.
첫 번째 "하이" 창에서 확인을 눌러야 다음 alert(1+32)가 나왔다. 연산 결과(33)도 정상적으로 표시됐다.

alert("하이");
alert(1 + 32);   // 첫 번째 창을 닫아야 33이 뜬다

5-5. `===` 와 `typeof`

==는 값이 같은지만 비교한다. 반면 ===는 값과 자료형(타입)까지 모두 같아야 true다.

console.log(5 == "5");    // true  (값만 비교)
console.log(5 === "5");   // false (타입이 다르다)

typeof는 값의 자료형을 알려주는 명령어다.
결과를 눈으로 보려면 출력문 안에 넣어야 한다는 점을 주의해야 한다.

console.log(typeof(5));      // "number"
console.log(typeof "5");     // "string"
console.log(typeof true);    // "boolean"

typeof는 괄호 없이 써도 뒤에 오는 값의 타입을 확인해 준다.

6. 변수 선언 방식: var, let, const

키워드	재선언	값 변경
`var`	가능	가능
`let`	불가능 (오류)	가능
`const`	불가능 (오류)	불가능

var(variables): 같은 이름으로 다시 선언해도 오류 없이 동작한다.
let: 값은 바꿀 수 있지만, 같은 이름으로 다시 선언하면 오류가 난다. 공동 작업이나 코드가 복잡한 경우에 실수를 막아 준다.
const(constant): 재선언도, 값 변경도 안 된다.

실습에서는 let으로 두 개의 변수를 선언하고 출력문에 넣어 봤다.

let name = '조현기';
let age = 10;
console.log(name);
console.log(age);

추가로 정리: 세 키워드를 직접 실행하면

var a = 1;
var a = 2;          // 오류 없음. a는 2

let b = 1;
b = 2;              // 값 변경은 가능
let b = 3;          // SyntaxError: Identifier 'b' has already been declared

const c = 1;
c = 2;              // TypeError: Assignment to constant variable.

그래서 요즘은 기본적으로 const를 쓰고, 값이 바뀌어야 할 때만 let을 쓰는 방식을 많이 쓴다고 한다. 나도 이 방식을 따라 보려고 한다.

7. 표기법

표기법에 이름이 있다는 게 신기했다.

카멜 표기법(camelCase): 두 번째 단어부터 첫 글자를 대문자로 쓴다. 예) userName
스네이크 표기법(snake_case): 단어 사이를 _로 구분한다. 예) user_name

JS 변수명과 함수명은 보통 카멜 표기법을 쓴다.

8. 추가 출력 명령문: prompt, confirm

alert처럼 다이얼로그(대화상자)를 띄우는 명령문이 더 있다.

prompt('메시지', '디폴트 입력값')

다이얼로그를 띄우고 사용자에게 문자열을 입력받아 리턴한다. 디폴트 입력값은 생략할 수 있다.

값을 입력하고 확인: 입력한 문자열
아무것도 입력하지 않고 확인: "" (빈 문자열)
취소 버튼을 누르거나 강제로 닫음: null

confirm('메시지')

메시지와 확인 / 취소 버튼이 있는 다이얼로그를 띄운다.

확인 버튼: true
취소 버튼이나 강제로 닫음: false

추가로 정리: 사용 예시

const userName = prompt('이름을 입력하세요', '홍길동');
console.log(userName);   // 입력한 값 / "" / null

const isOk = confirm('정말 삭제할까요?');
console.log(isOk);       // true 또는 false

if (userName !== null && isOk) {
  alert(userName + '님, 처리되었습니다.');
}

prompt는 입력값이 항상 문자열로 돌아온다. 숫자를 입력받아 계산하려면 Number()로 변환해야 한다. 앞에서 +가 문자를 이어 붙이던 것과 같은 함정에 걸릴 수 있다.

마무리

첫날이라 가볍게 시작했지만, 모르는 단어(DOM, 파싱)가 나올 때마다 따로 찾아보면서 공부했더니 생각보다 오래 걸렸다.
오늘 가장 기억에 남는 건 +가 문자열을 만나면 계산이 아니라 이어 붙이기로 바뀐다는 점이었다. 직접 실행해서 확인한 내용이라 오래 기억에 남을 것 같다.

다음 글에서는 이어서 JS 기초를 정리할 예정이다.

Tags: JavaScript 개발자 학습기록 프론트엔드 코딩초보

조현기

난 뭘까

다음 포스트

JavaScript_Day.1

JavaScript_Day.1

1. VS Code에서 파일 만들기

2. JavaScript는 어디에 쓰는가

DOM이란

파싱(Parsing)이란

추가로 정리: script 위치 때문에 생기는 에러

3. 데이터 출력

4. 주석

5. 실습

5-1. document.write / document.writeln

5-2. 부등호와 연산 결과 확인

5-3. `=`, `==`, `!=` 그리고 논리 연산자

5-4. alert 사용해 보기

5-5. `===` 와 `typeof`

6. 변수 선언 방식: var, let, const

추가로 정리: 세 키워드를 직접 실행하면

7. 표기법

8. 추가 출력 명령문: prompt, confirm

prompt('메시지', '디폴트 입력값')

confirm('메시지')

추가로 정리: 사용 예시

마무리

JavaScript_Day.2

0개의 댓글

JavaScript_Day.1

JavaScript_Day.1

1. VS Code에서 파일 만들기

2. JavaScript는 어디에 쓰는가

DOM이란

파싱(Parsing)이란

추가로 정리: script 위치 때문에 생기는 에러

3. 데이터 출력

4. 주석

5. 실습

5-1. document.write / document.writeln

5-2. 부등호와 연산 결과 확인

5-3. =, ==, != 그리고 논리 연산자

5-4. alert 사용해 보기

5-5. === 와 typeof

6. 변수 선언 방식: var, let, const

추가로 정리: 세 키워드를 직접 실행하면

7. 표기법

8. 추가 출력 명령문: prompt, confirm

prompt('메시지', '디폴트 입력값')

confirm('메시지')

추가로 정리: 사용 예시

마무리

JavaScript_Day.2

0개의 댓글

5-3. `=`, `==`, `!=` 그리고 논리 연산자

5-5. `===` 와 `typeof`