S1_U5_CH1. 코드 기초

Judevv·2023년 4월 18일

코드스테이츠 SEB FE BOOTCAMP

목록 보기

13/55

Chapter 1. 코드 기초

학습 목표

JavaScript 코드를 직접 실행할 수 있다.

원하는 데이터를 console.log()로 출력할 수 있다.

JavaScript 엔진이 코드를 읽는 법에 대해 기억한다.

코드와 주석을 구분할 수 있다.

값과 연산자를 구분할 수 있다.

console.log()로 구구단을 출력할 수 있다.

1-1. 코드 실행

JavaScript 코드 실행하기

JavaScript는 브라우저에서 실행하기 위해서 만들어진 프로그래밍 언어로, HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동한다.

혹은 Node.js라는 JavaScript 런타임을 설치하여야 한다.

* 런타임 : 프로그래밍 언어가 구동되는 환경  
- JavaScript 런타임이란 JavaScript가 구동되는 환경을 말함
- JavaScript 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스 등)프로그램과 NodeJS라는 프로그램이 있음

코드 실행 방법(StackBlitz 예시)
- index.js 파일에 원하는 JavaScript 코드를 작성 -> Terminal에 node index.js를 입력하고 엔터-> 코드가 실행되고 출력 결과를 확인
- Terminal에 node를 입력하면 REPL을 사용 가능
  - REPL 사용 종료하려면 .exit를 입력
REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경
- 코드를 한 줄씩 작성하여 확인할 수 있어 테스트나 디버깅에 유용
```
	프로그램(program): 작업(task) 수행을 위한 코드 모음 
	프로세스(process): 프로그램 실행의 결과물
```

console.log

console.log()는 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

코드를 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력

REPL 아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력

console.log('hello world'); // hello world

1-2. 코드 독해

JavaScript 엔진이 코드를 읽는 법

일반적인 컴퓨터는 0과 1의 조합으로 모든 정보를 표현하고 이해함(기계어)

하지만 자바스크립트(JavaScript)는 영어나 기호가 있으며, 숫자도 있음(프로그래밍 언어)

let ourMission = 'Unlock Human Potential';
let JavaScriptWasInventedBy = 'Brendan Eich';
let JavaScriptWasInventedIn = 1995;
i++;
i--;

JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석
문제가 있으면 에러를 발생시키고, 코드 중단(에러 출력)

= // SyntaxError: Unexpected token '='

* 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어(사람이 쉽게 이해 불가)
* 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어(사람이 다룰 수 있는 수준의 문법과 의미를 지님)
* 자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어
* JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램(크롬에 내장된 v8이 대표적)

주석

작성했던 코드를 왜 작성했는지, 자기 자신 기억하고 또는 다른 개발자에게 설명하기 위해서 메모가 필요

코드에 간단히 메모를 하기 위해 주석(comment)를 추가

JavaScript에서는 주석은 // 다음에 작성하거나, /* ,*/ 사이에 작성

주석 처리된 코드는 엔진이 인식하지 않기 때문에 자유롭게 작성 가능

/* */ 방식 주석은 중복하여 사용이 불가능

* 주석: JavaScript 엔진이 따로 해석하지 않는 코드
* 자연어: 인간이 쓰는 언어(컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분)

값과 표현식

값(value) : 읽고, 평가가 완료되어 하나의 의미를 가지는 코드

값을 표현하기 위해서는 다양한 방식이 있음

숫자값 1995를 표현

1995;
1000 + 900 + 90 + 5;
1900 + 95;

하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 함

+ 기호와 같이 값에 변화를 줄 수도 있으며, 산술 연산이나 논리 연산 등을 할 수 있는 기호를 연산자(operator)라고 함

* 값(value): 하나의 고유한 의미를 가지는 코드, JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 함
* 표현식(expression): 값으로 평가될 수 있는 코드
* 연산자(operator): 특정 연산을 수행할 수 있는 코드

1-3. 코드 출력

console.log()

구구단 출력하기

구구단 2단의 결과를 출력하기 위해서는 값을 직접 입력할 수도 있으나, * 연산자로 좀더 직관적으로 2단이라는 것을 표현할 수 있음

직접 입력

console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(14);
console.log(16);
console.log(18);

연산자 입력

console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18