서버시스템구축실습 (4) 자바스크립트 기초

- Node.js 설치

 

자바스크립트는 원래 웹브라우저에만 실행되지만, node.js를 사용하면 서버 위에서 바로 자바스크립트를 실행시킬 수 있게 된다.

Node.js 런타임 설치 필요.

윈도우에 설치하는게 아니라 GCP에 만든 vm인스턴스에서 활용.

모든 실습은 생성한 vm instance 안에서 이루어진다.

윈도우용이 아니라 리눅스용을 다운받아야 한다. Other Downloads -> LTS버전이 훨씬 안정적.

* ARM은 맥북 최신 프로세서 사용 버전. 일반적으로는 x64를 사용.

윈도우에 다운로드를 받으면 안되고 오른쪽 클릭 - copy link address 클릭.

 

vm instance 접속.

중지되어 있다면 시작을 눌러줌.

 

wget (링크 붙여넣기) > 다운로드받기.

tar xf node(탭) > 압축풀기.

cd node(탭) > 이동.

sudo cp -Rvi ./{bin, include, llib, share} /usr/local/ > /local 디렉토리 밑으로 복사된다.

 

 

 

node 명령어 사용시

 

- REPL Read-Evaluate-Print-Loop 환경(자바스크립트 실행 가능)

shell이 떠서 그 안에서 자바스크립트를 작성/실행/확인할 수 있는 것을 무한히 반복 가능.

특징: 노드의 모든 코어 모듈에 접근 가능.

리콰이어를 통해 모듈 사용 선언을 하지 않아도 코어 사용 가능.

 

간단히 실습.

나가고 싶을때는 컨트롤C를 두번 누르기.

 

 

- 자바스크립트 파일을 만들고 그 안에서 실행하기

vi편집기 - 원격에 있는 vm 인스턴스에서 수정하려면 서버에서는 GUI가 제공되지 않음 - 터미널에서 제공되는 텍스트 편집기를 사용할 줄 알아야 함.

vi, vim, emacs - 서버 환경에서 문서 작성을 할 수 있도록 하나의 편집기를 다룰줄은 알아야 한다.

편집기 사용법을 강의하지는 않을 예정.

 

vi hello.js 해서 vi편집기로 파일 생성하고 들어가기.

esc눌러서 일반모드로 전환하고 :wq로 저장하고 나오기.

node hello.js(hello) 입력하면 실행.

 

 

 

 

- 자바스크립트 문법.

 

- 데이터 타입

 

- 숫자 데이터 타입 - Number

-> 연산자

- 단항 연산자. x++, ++x

- 이항 연산자. +, -, *

- 삼항 연산자. var beverage = (age >=21) ? "Beer" : "Juice"

조건문 ? 참과 거짓

beverage는 Beer일수도 있고 Juice일수도 있다.

 

-> 실습

console.log = cout = prinf

 

 

- 문자열 데이터 타입 - String

-> 문자열 표현: " ", ' '

 

-> 실습

 

 

-> 문자열 처리 예

문자열이 굉장히 길때, 문자의 길이를 알고 싶으면?

문자열의 lengh 속성 활용.

 

 

 

- 변수

 

- 변수의 형식

 

 

- 변수와 상수의 차이

변수는 변할 수 있는 수, 상수는 변할 수 없는 수.

할당할때는 변수에 상수를 할당.

왼쪽이 되는 애가 유효하지 않다.

 

 

- 변수에 대해

1) 변수명에는 공백을 넣을 수 없다.

예를 들어 hell world; 식으로 이름을 만들 수 없다. 

 

2) 변수명은 문자, 밑줄(_), 달러 기호($)로만 시작할 수 있다. (첫글자 제한)

var 1a; 등의 변수 선언이 불가능하다. var $2는 가능하다. 조건을 잘 보고 변수명을 사용해야 한다.

3) 첫글자 이후에는 문자, 숫자, 밑줄, 달러 기호를 사용할 수 있다. 이때 기호라고 아무나 사용할 수 있지 않고 _와 $만 사용할 수 있다.

 

4) 변수명은 대소문자를 구분한다.

소문자 abc =/= 대문자 ABC 변수는 다르다.

 

5) 자바스크립트 예약어는 변수명으로 쓸 수 없다.

var var; 등의 변수명이 불가능하다.

 

 

- 주석

//를 사용하여 소스코드 주석 처리 가능.

실행에서 제외.

자신이나 다른 사람이 코드를 해석할 때 도움이 되도록 메모.

 

 

- 변수 선언 키워드

-> var: 호이스팅 시 undefined로 저장.

예상하지 못한 오류가 발생하곤 했다.

 

-> const: 호이스팅 시 초기화되지 않은 상태로 저장.

-> let: 호이스팅 시 초기화되지 않은 상태로 저장.

아예 실행되기 전에는 사용되지 못하도록 접근하지 못하게 함.

 

var이 옛날 생기고 나머지 둘은 최신에 생겼다. 

 

 

- 호이스팅

자바 스크립트가 함수라는 것을 제공한다. 프로그래밍 언어이기 때문에.

결국 함수 안에 필요한 변수들을 미리 체크해놔야 실제로 함수를 실행시킬 수 있다.

 

자바 스크립트를 해석하는 Parser가 함수 실행 전에 함수 내용을 확인하고, 함수 안에 존재하는 변수/함수선언을 기억한다.

함수 블록 { } 안에서 유효하도록 보장. 즉, 유효 범위는 함수 블록 { } 안에서만.

 

함수 내에서 변수를 선언하면 - 이것이 밑에쪽에 몰아져 있을때 

function( )

. . .

{ }

밑의 것을 미리 끌어 올려서 처리한다.

 

 

- 호이스팅의 대상

var만 문제 발생.

변수 선언과 함수 선언을 할때 호이스팅이 발생.

 

모든 선언은 선언/할당하는 부분이 각자 있다. 예시에서는 var myname은 변수 선언, myname = "HEEE"; 로 변수 할당.

한 줄에서 처리되고 있지만 실제로는 아래처럼 선언 <-> 할당 부분이 따로 있음.

이때 선언 부분만 위로 끌어올려진다. 할당 부분은 그대로 존재한다. 이때 let, const와 같은 키워드는 호이스팅이 발생하지 않는다. (실제로 하기는 하지만 다른 방식)

 

이때 myname에 접근한다면 - undefined라는 값이 할당되어 있기 때문에, 선언과 할당 사이에는 이상한 값이 들어가있게 된다.

let, const는 실제로 할당이 일어나기 전에는 myname이라는 것

에 접근이 불가능하게 조치되어 있다.

 

+ 호이스팅을 함수의 맨 위쪽으로 끌어올리는 것으로 묘사했지만, 위쪽의 블록을 한 함수라고 취급한다면 (일종의 main() 개념) 맨 위쪽으로 알아서 호이스팅으로 끌어올려진다. 

 

 

- 호이스팅의 문제점

잠재적인 버그가 발생할 수 있다. 

 

n이라는 변수에 1을 할당.

함수에서 n을 출력하고, n값을 2로 할당해 다시 출력한다.

어떤 결과가 나올까?

 

n=1은 선언과 할당이 그 위치에서 동시에 벌어짐. 함수 레벨로 따지자면 가장 바깥쪽.

test()을 실행하기 전에 사용할 변수들을 호이스팅한다. 위쪽으로 var n; 할당이 끌어올려진다. n=2;가 남겨진다.

console.log(n); 출력시 undefined가 출력된다. 왜? 할당 - 선언 사이에는 그 값이 들어가기 때문에.

다음은 2가 할당된 후이기 때문에 2가 출력된다.

 

= 의도치 않게 다른 값이 나올 수 있다.

지역변수와 전역변수 사이에서 var타입을 사용하면 헷갈려지기 딱 좋다.

 

 

- 구글의 자바스크립트 스타일 가이드

 

const, let을 사용해 변수를 선언하라고 한다.

const를 디폴트로 사용하라(재할당이 필요한 경우가 아니라면).

var은 절대로 사용하지 말라.

 

 

! 변수 선언 키워드를 다시 보면

var

- 중복 선언 가능

var a = 10;

var a = 20;

- 재할당 가능

var a= 10;

a = 20;

- 함수 레벨 스코프 (함수 안에서만 의미가 있다, 함수 안에서만 다 공유가 된다 = 함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 외부에서는 유효하지 않다.)

 

const

- 중복 선언 불가능

const a = 10;

const a = 20; //오류 발생

- 블록 레벨 스코프 (C, C++, 파이썬 등에서 일반적으로 사용되는 범위(스코프). 함수가 중요한 게 아니라 블록 안에서만 의미가 있음.)

if(true) {

    const a = 10;

}

console.log(a); //오류 발생

* var로 설정했다면 실행이 가능하다.

- 재할당 불가능 (상수처럼 사용)

const c = 111;

c = 222; //오류

 

let

- 중복 선언 불가능

let a = 10;

let a = 20; //오류 발생

- 블록 레벨 스코프

- 재할당 가능

const b = 111;

b = 222;

 

 

- 변수의 활용

1) 변수는 데이터에 이름을 붙이는 이름표 역할.

해당 데이터가 의미하는 바를 쉽게 파악할 수 있게 한다. (코드 가독성을 높인다.)

 

 

2) 중복되는 코드도 줄일 수 있다.

좋은 프로그래밍의 조건이기도 하다. 

 

이건 무슨 의미가 있는가?

입력하다가 오타를 낼 수 있는 부분을 없앤다.

또한 네임을 변경하고 싶을 때 일괄적으로 변경할 수 있다 - 굉장히 효율적.

 

 

 

- 템플릿 리터럴

 

엔터 두 번으로 줄을 바꾸면 에러가 발생한다.

 

 

- 템플릿 문자열

1) 역슬래시(\)를 입력하면 에러 해결 가능. 단, 물리적으로 줄넘김이 되는 것은 아님.

 

 

2) 줄바꿈을 위해서는 특수기호은 \n을 사용.

 

단점: 코드의 가독성이 굉장히 떨어진다.

이것만 보고 어떻게 출력될지 예측이 힘들다.

 

 

- 이때 사용하는 것이 템플릿 리터럴

문자열 그 자체가 값을 나타냄.

백틱(`)(물결표에 있는거 - 맥북 노트북은 생김새가 다름)을 사용.

 

`로 시작해서 `로 끝낸다.

변수는 ${변수명}으로 입력한다.

 

장점: 가독성이 굉장히 좋다. 코드만 봐도 어떻게 출력될지를 이해할 수 있다.

변수 또한 쉽게 가져다가 사용할 수 있다. (+로 불필요하게 연결할 필요 없다.)

 

굉장히 유용하다! 익숙해지는게 좋다.

 

 

숫자, 문자열만 있는게 아니라

- Boolean

 

단 두개의 데이터만 가능: true/false.

true/false는 변수 이름으로 사용할 수 없다.

 

 

- 비교 연산자

비교를 할 때 사용하는 연산자.

두개의 결과가 참이면 true, 거짓이면 false.

결과는 Boolean 데이터 타입이다.

 

! ==와 ===의 차이

 

==는 데이터 타입을 알아서 변환해서 두 값을 비교한다.

===는 '데이터 타입'과 '값' 둘 다를 비교한다.

 

 

 

- 제어문

 

- 제어문의 필요성

if, while, for이 제어문의 종류.

 

- 제어문의 종류

1) 조건문

2) 반복문

 

- 조건문

익히 아는 것과 동일. 이하생략.

 

 

프로그램을 짜는 경우 입력받는 경우가 있다.

 

- 매개변수와 인자의 차이

두가지를 섞어서 쓰지만 둘은 다르다.

 

-> 매개변수의 경우: 프로그램에 필요한 값을 입력받는 형식. 어떤 타입을 받을 것인지를 선언해놓은 형태.

function foo (int a) //선언 -- int a가 매개변수. 받는 변수의 형식을 정의.

foo(3); //호출 -- 3이 인자. 실제로 입력을 한 값.

 

 

- 콘솔로부터 입력받기

process 모듈의 argv라는 기능을 사용.

node.js의 여러가지 모듈의 사용법에 대해서는 다음에 설명.

 

argv = argument vector

 

콘솔창으로부터 들어온 argument들을 변수에 받을 수 있다.

(argc = count, 몇개의 인자가 있는지.)

 

 

args는 일반 변수가 아니라 배열이다.

 

 

다음과 같이 [2]을 추가하면 세번째 입력 값만 받는다.

 

 

- 콘솔에서 입력한 값은 모두 문자열로 취급된다. 

위의 결과 실행창에서 123도 '123'로 적혀있는 것을 볼 수 있다.

 

에서 == 1의 경우 true(타입 변환을 하니까), ===1의 경우 false(타입이 다르니까).

 

 

 

- while 반복문

이하생략.

 

 

- 배열

1) 대괄호를 이용해 생성.

var arr = ['zero', 'one', 'tow'];

 

2) Array() 생성자 함수로 생성.

var arr = new Array('zero', 'one', 'tow');

 

+ 자바스크립트의 특징.

일반적으로 프로그래밍하면 숫자는 숫자끼리 배열에 들어갈 수 있고, 문자열 배열, 똑같은 타입의 데이터로만 이루어져야 한다.

자바스크립트는 아니다. 서로 섞여서 들어갈 수 있다.

 

 

- 배열 출력

 

배열 안의 특정 값을 가져오고 싶다면 인덱스 활용.

 

 

! 배열에서 값 갱신할때는 const여서는 안된다.

 

 

- 배열의 크기 구하기

length 사용.

 

 

- 배열의 마지막에 값 추가하기

 

 

- 배열과 반복문의 활용

 

배열의 크기를 가지고 일반적으로 반복문을 실행.

후자가 확장성이 더 좋다.

 

 

- 함수의 기본 문법

function 함수이름 ( 매개변수 ) {

    함수에서 실행할 코드;

}

 

함수도 결국은 변수와 비슷한 개념.

변수가 데이터의 상징성, 이름을 구현하기 위해 사용된다면

함수도 특정 로직에 이름을 붙일때 사용.

 

주기적으로 똑같은 작업을 반복하는 경우 함수를 만든다.

 

 

- 입력 값 두개를 받는 sum()이라는 함수 정의

 

 

-> 함수를 활용하는 측면: 함수의 처리 결과를 반환. 

호출한 쪽에서 결과값을 자유롭게 활용.

 

 

! return문 이후에 명령이 있다면 -> 생략하고 함수를 종료한다.

 

 

여기까지 자바스크립트에 대한 기초적인 문법.

호이스팅이라는 개념이 중요!

자바스크립트에만 있는 특이한 방식 - 때문에 const, let를 사용한다.

 

템플릿 리터럴 - 문자열 처리 관련해서 백팁을 사용.

쉽게 가독성을 높일 수 있다. 

 

또한 argument쪽에서 터미널 창에서 인자로 넘겨주는 것들은 전부 문자열로 취급된다.

 

비교연산자에서도 ==, ===의 차이.