웹 기초 공부 #7 - Node.js / Javascript

앞서 Node.js의 개념을 알아보았다.

그럼 이제 Node.js 위해서 실행시킬 무언가를 만들기 위해 Javascript에 대하여 공부해보자.

 

DataType - Number

Number, 즉 숫자는 우리가 다뤄야 할 데이터 타입에서 가장 중요한 데이터 타입 중 하나이다.

Javascript에서 숫자를 다루는 방법은 정말 간단하다.

말 그대로 숫자를 입력하여 사용하면된다.

예를 들어 10이라는 숫자를 출력한다고 하자. 그럼 어떻게 하면 될까?

console.log(10)

위와 같이 작성 후 실행하면 그냥 10이 출력된다.

또한

1과 2를 더한 수를 출력한다고 하자.

console.log(1+2)

위와 같이 작성 후 실행하면 1+2의 값인 3이 출력된다.

정수형 뿐만 아니라 숫자가 아니라는 NaN값과 무한인 Infinity 값을 출력할 수 있음을 볼 수 있다.

Number타입에는 앞서본 1, 2, 3과 같은 정수 뿐만 아니라 부동 소숫점, 무한대 등을 포함한다.

하지만 해당 값들을 다루는 방법이 위와 다르지 않다 때문에

우리는 Number라는 자료형을 다루는 방법을 알게 된 것이라고 할 수 있다.

 

DataType - String

String이라는 단어를 처음 보면 무슨 자료형을 가르키는 건지 감이 안 올 것이다.

끈? 줄? 뜻으로 추론하려 하면 이해가 안갈것이다. String은 컴퓨터 프로그래밍에서 문자열을 의미하는 단어이다.

Javascript에서 문자열을 다루는 방법은 ' 와 "에 달려있다.

앞서 숫자를 사용할 때 단순히 숫자를 입력하면 된다고 했다. 그래서 javascript에서 숫자 1을 입력하면

그건 그냥 숫자 1을 의미한다. 이때 1을 '(작은 따옴표)나 "(큰 따옴표)로 감싸면 어떻게 될까?

 

간단한 예제로 확인해보자.

자바 스크립트에 내장된 연산자 중에는 연산 대상의 자료형을 알려주는 연산자가 존재한다.

"typeof"

해당 연산자를 이용하여 1과 '1'의 차이를 알아보자.

단순 1은 Number 자료형, '1'은 String자료형임을 보여준다.

즉, Javascript에서 문자열을 나타낼때는 '나 "로 감싸서 나타낸다.

 

조금 더 나아가보자.

Number타입 처리 방식에 대하여 +, -, *, /연산자를 사용하는 예제를 보여주었다.

이 중 +연산자를 살펴보자.

만약에 'hello'라는 문자열과 'world'라는 문자열을 +와 함께 출력하면 어떻게 될까?

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

출력 값은 다음과 같다.

'hello'와 'world'가 합쳐서 출력된다.

즉, 이항연산자인 +는 문자열과 문자열 사이에서 사용될 경우 두 값을 더하는 산술 연산이 아니라

두 값을 이어주는 결합 연산자로 자동 변환되어 사용된다. (어떠한 값들의 연산이냐의 따라 연산자의 의미가 달라진다.)

 

다른 문법을 찾아보자.

만약에 'bla bla bla bla...'로 수없이 반복되는 문자열의 길이를 구하고 싶을때 어떻게 할까?

우선 다음과 같이 검색 해보자.

javascript string count

그럼 다음과 같은 결과들이 검색된다.

이 중 하나의 웹 사이트에 접속하여 문법을 찾아보자.

대부분 length라는 속성에 대해 찾을 수 있을것이다. length 속성의 사용법은 다음과 같다.

String.length

length속성은 UTF-16코드 유닛을 기준으로 문자열의 길이를 나타내준다.

그럼 앞서 본 엄청난 길이의 문자열 뒤에 .length만 붙이면 문자열의 길이를 파악할 수 있는거 아닌가?

확인해보자.

그렇다. length를 붙이는 것으로 문자열의 길이를 파악 할 수 있다.

이렇게 문자열의 표현 방식, 처리방식, 기타 문법에 대하여 알아보았다.

 

변수 - Variables

변수는 다른 프로그래밍 언어를 사용해본 사람들은 왜 써야 하는지에 대해

굳이 설명 해야할 필요 없을 정도로 중요하다는것을 알것이다.

 

변수에 대한 개념 설명없이 거두절미하고 바로 변수 사용법에 대하여 알아보도록 하자.

우선 다음과 같은 예시를 작성하고 실행해보자.

a = 1;
console.log(a);

a라는 변수에 저장된 값인 1이 출력된다.

다음과 같이 예제 코드를 바꾸고 실행해보자.

a = 1;
console.log(a);
a = 2;
console.log(a);

a에 저장되었던 1이 출력된 후 다시 a에 저장된 2를 출력하는 모습이다.

이는 '='이라는 연산자 때문인다. 아는 사람도 있겠지만 '=' 은 대입 연산자라고 한다.

이름 그대로 어떠한 변수에 어떠한 값을 대입하는(저장하는) 기능을 한다.

따라서 a에 우선적으로 1을 대입한 후 다음 명령으로 a에 2를 대입하게 된 것이다.

 

그럼 여기서 또 알아볼 것이 변수라는 단어의 의미를 흔히 변할 수 있어서 변수라고 알고 있는 경우가 많다.

그럼 변수의 반댓말을 무엇이라고 할까? 바로 상수 라고 한다.

우리가 사용하는 숫자들은 보통 상수이다. 1이라는 값이 다른 값으로 정해지거나 바뀌지 않기 때문이다.

이것 또한 다음과 같은 코드를 작성후 실행하여 확인 해보자.

1 = 2;

위와 같이 SyntaxError 즉 문법적 에러를 발생시키며 작동하지 않음을 볼 수 있다.

즉, 1이라는 상수를 2라는 상수의 값으로 바꿀 수 없다는 뜻이다.

 

변수를 생성하는 법과 변수에 값을 바꾸고 넣는 방법을 알아보았다.

하나 말을 하자면 앞선 예제에서 변수 생성시 단순히 "변수 이름 = 값"으로 생성했다.

이때 변수 이름 앞에 "var"을 붙여주도록 하자.

var을 왜 붙여야 하는지에 대해서는 추후에 배울 것이지만 왜 var이 없어야 하는지에 대해 모른다면

그냥 var을 붙여서 변수 선언을 해주도록하자.

 

변수의 활용

이제 변수를 왜 사용해야 하는지 알아보자.

우선 아무런 의미 없는 문자열을 만들고 출력해보자.

1줄이긴 하지만 해당 문자열이 길어진다면 무언가 보기 않좋게 생겼을 것이다.

이때 우리는 특정 값에 이름을 붙이는 변수의 특징을 이용할 것이다.

해당 코드를 다음과 같이 바꾸어 보자.

var string = "mcoTempor nisi ulla id veniam eiusmod.";
console.log(string);

 

문자열을 변수에 저장함으로 써 letter라는 이름을 붙이고 출력시에도 해당 이름을 사용할 수 있음을 볼 수 있다.

이렇게 보면 훨씬 가독성이 올라가는것을 느낄 수 있다.

 

프로그래밍을 효율적으로 하는 방법중에는 중복을 제거하는 방법이 있다고 배웠다.

이를 예시로 설명해보자. 앞선 예시를 재활용 하여 다음과 같이 바꾸어보자.

var string = "Lluvia mcoTempor nisi Lluvia ulla id veniam Lluvia eiusmod.";
console.log(string);

문자열에 "Lluvia"라는 단어가 반복되고 있음을 볼 수 있다.

예를 들어 해당 문자열의 길이가 몇억 줄이고 해당 단어의 반복이 수천번이라고 할때

우리는 해당 단어의 의미가 모두 같은지 파악하기 힘들고 그중 바꾸면 안되는 단어가 있을 수도 있다.

 

이때 변수를 사용하면 편리하다.

var name = 'Lluvia'
var string = name + " mcoTempor nisi Lluvia ulla id veniam " + name + " eiusmod.";
console.log(string);

바꿀 필요가 있는 문자를 변수에 저장하고 코드를 수정하니 결과 값을 이전과 동일하다.

이때 name 변수의 값을 다른 값을로 바꾸면 string 변수의 name부분만 바뀔 것이다.

 

이런 부분은 추후에 배울 반복문이나 조건문에서도 매우 도움 될 것이다.

 

Template Literal

우선 앞서 사용한 예제 코드를 그대로 사용할 것이다.

var name = 'Lluvia'
var string = name + " mcoTempor nisi Lluvia ulla id veniam " + name + " eiusmod.";
console.log(string);

해당 코드를 실행 했을때 특정 부분에서 줄바꿈을 하고 싶다. 어떻게 하면 좋을까?

다들 단순히 코드에서 줄바꿈을 시도 할 것이다. 그럴때는 다음과 같은 결과를 볼 것이다.

코드 상에서 줄바꿈이 허용되지 않는 모습이다. 이는 줄바꿈을 하려는 양쪽 끝에 \ 를 붙이면 해결된다.

var name = 'Lluvia'
var string = name + " mcoTempor nisi Lluvia\
\
ulla id veniam " + name + " eiusmod.";
console.log(string);

하지만 해당 방법은 코드에서의 줄 바꿈이지 출력 내용의 줄바꿈이 아니다.

이때 다른 언어를 공부 해본 사람들은 이스케이프 문자인 \n 을 떠올릴 것이다.

var name = 'Lluvia'
var string = name + " mcoTempor nisi Lluvia\nulla id veniam " + name + " eiusmod.";
console.log(string);

실제로 Javascript에서도 출력값의 줄바꿈을 할때 \n을 사용한다.

 

하지만 Javascript를 만든 사람들은 이러한 부분이 보기 안좋고 불편하다고 생각했다.

그렇기에 만들어 낸 것이 바로 Temlate Literal이다.

 

우선 Llteral이라는 단어의 뜻을 알아보자.

Lliteral은 정보를 표현하는 방법 또는 기호를 말한다.

 

Template을 사용할때는 Template의 양 끝을 ` 으로 감싼다.

또한 모든 따옴표를 지우고 변수를 넣을 부분을 + 로 추가하지 말고 ${}으로 감싸자.

또한 줄바꿈의 경우 이스케이프 문자가 아닌 단순 줄바꿈으로 표현하자.

앞서 본 변수 string의 내용을 Template Literal로 바꾸어 보자.

var name = 'Lluvia'
var string = `${name} mcoTempor nisi Lluvia
ulla id veniam ${name} eiusmod.`;
console.log(string);

Template Literal로 수정한 뒤의 결과물이 앞선 코드의 결과와 같음을 볼 수 있다.

 

이 결과 Template Literal은 이스케이프 문자 같은걸 사용할 필요 없다는 장점.

따로 문자열을 끊어서 변수를 삽입할 필요 없다는 장점.

${}에는 변수 뿐만 아니라 숫자나 다른 값들을 넣어 표현 가능하다는 장점이 존재한다.

 

 

 

오늘의 글에서는 자료형 중에서 가장 중요한 것들 2개,

Number와 String에 대하여 그리고 그것들을 다루는 방법을 알아보았고

변수의 생성 방법과 활용법

마지막으로 Template Literal에 대하여 알아보았다.

 

간단하지만 꽤 많고 중요한 내용들이었기에 다들 확실히 공부하고 기억했길 바란다.

 

긴글 읽어주셔서 감사합니다.

 

<정보 출처>

생활코딩_WEB_WEB2:Node.js - JavaScript - Data Type - Number

https://opentutorials.org/course/3332/21031

생활코딩_WEB_WEB2:Node.js - JavaScript - Data Type - String

https://opentutorials.org/course/3332/21033

생활코딩_WEB_WEB2:Node.js - JavaScript - 변수

https://opentutorials.org/course/3332/21034

생활코딩_WEB_WEB2:Node.js - JavaScript - Template Literal

https://opentutorials.org/course/3332/21045