DAY - 02

공부 저장소·2021년 4월 18일

WILT [ What I Learn Today ]

목록 보기

2/17

Hello, world!

오늘은 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다루는 것으로 시작한다.

현재 코어 자바스크립트를 다루고 있긴 하지만 우선 학습을 위해선 스크립트를 실행할 수 있는 실행환경으로 브라우저를 사용하도록 하겠다. Node.js와 같이 브라우저 이외의 환경에 주력하는 부분(코딩 테스트)도 염두에 두며 실습을 진행 해야겠다.

먼저, 웹 페이지에 스크립트를 삽입하는 방법에 대해서<script> 태그로 시작된다.
참고로 Node.js와 같은 서버 사이드 환경에서 스크립트를 실행하고 싶다면 'node my.js'와 같은 명령어를 사용하면 된다.

‘script’ 태그

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
자바스크립트 코드의 양이 많은 경우엔, 파일로 따로 저장하여 사용할 수 있다.

<script src="불러올 파일의 위치 및 파일 명"></script>

이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML 문서에 삽입한다.
<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용한다.
스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다고 하지만 사실상 나중에는 쓸 일이 없을 것 같다.

스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에 성능상의 이점이 있다.
여러 페이지에서 동일한 스크립트를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하게 되어 스크립트 파일을 한 번만 다운받으면 되는데 이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.

우선 실행을 하면 "스크립트 실행 전"이라는 문구를 읽어내고 "스크립트 실행 후" 문구가 나오기 전에 <script> 태그에서 해당 js 파일 주소로 이동하여 스크립트 문을 읽어내는 모습을 볼 수 있다.

여기서 확인 버튼을 누르게 되면

이렇게 "스크립트 실행 후" 문구까지 성공적으로 끝마치는 모습을 볼 수 있다.

코드 구조

처음으로 배울 것은 코드 블록을 만드는 방법입니다.

문

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.
앞서 ‘Hello, world!’ 메시지를 보여주는 알림창을 띄우는 alert('Hello, world!') 문을 확인한 바 있습니다.
코드엔 원하는 만큼 문을 작성할 수 있습니다. 이때, 서로 다른 문은 세미콜론으로 구분합니다.
코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적입니다.

alert('Hello');
alert('World');

세미콜론

사실 줄 바꿈이 있다면 문과 문 사이에 세미콜론(semicolon)을 생략할 수 있다.

자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.

대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 '대부분의 경우’가 '항상’을 의미하진 않는다.
아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우도 있다.

세미콜론을 생활화 하자

주석

시간이 흐름에 따라 자바스크립트 프로그램은 더욱더 복잡해졌다.
이로 인해 무슨 일이 왜 벌어지고 있는지를 설명해주는 주석(comment) 의 필요성이 요구되었다.

주석은 스크립트의 어느 곳에나 작성할 수 있습니다. 자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않는다.
한 줄짜리 주석은 두 개의 슬래시 //로 시작된다.

슬래시 뒤엔 주석을 적어주면 됩니다. 한 줄을 주석이 다 차지하는 형태도 있고 문 다음에 주석이 이어지는 형태도 있다.
중첩 주석은 지원하지 않는다.
여러 줄의 주석은 슬래시와 별표 /로 시작해 별표와 슬래시 /로 끝난다.

나의 맥에서의 단축어는 cmd+ /이다.

주석 달기를 두려워하지 말자.
주석을 달면 코드의 전체적인 길이가 증가하지만 이는 전혀 문제가 되지 않는다.
프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많이 있고, 이 도구들은 주석을 삭제해주기 때문이라고 한다.
또한 나의 생각은 많은 주석은 나중에 하게 될 팀프로젝트에서도 서로의 코드를 보았을 때와 내가 예전에 작성하였던 코드를 볼 때 많은 도움을 줄 것 같다.

엄격모드

ECMAScript5(ES5)가 등장하기 전인 2009년까지 꽤 오랫동안 호환성 이슈 없이 발전해왔다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가가 지속되었다.

그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있기에 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다.

그리하여서 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았다.

use strict

지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼습니다. 하지만 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다.
"use strict"는 반드시 최상단에 위치시켜야 한다..

그렇지 않으면 엄격 모드가 활성화되지 않을 수도 있다.
다음 코드에서는 엄격 모드가 활성화되지 않는다.

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.
"use strict";
// 엄격 모드가 활성화되지 않습니다.

"use strict"의 위에는 주석만 사용할 수 있다.

use strict를 취소할 방법은 없다.
자바스크립트 엔진을 이전 방식으로 되돌리는 "no use strict"같은 지시자는 존재하지 않는다.
일단 엄격 모드가 적용되면 돌이킬 방법은 없다.

'use strict’를 꼭 사용해야 하나는 질문에 대한 작성자님의 답변

"당연히 사용해야 하는 거 아니야?"라는 생각이 드시겠지만, 꼭 그렇지만은 않습니다.
누군가는 스크립트 맨 윗줄엔 "use strict"를 넣는 게 좋다고 권유할 수 있습니다. 그런데 그거 아세요?
모던 자바스크립트는 '클래스’와 '모듈’이라 불리는 진일보한 구조를 제공합니다(클래스와 모듈에 대해선 당연히 뒤에서 학습할 예정입니다).
이 둘을 사용하면 use strict가 자동으로 적용되죠. 따라서 이 둘을 사용하고 있다면 스크립트에 "use strict"를 붙일 필요가 없습니다.

결론은 이렇습니다.
코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠습니다.

지금까지는 use strict의 일반적인 특징에 대해 알아보았습니다.
다음 챕터부터는 자바스크립트 언어가 제공하는 기능들을 하나씩 학습하면서 이 기능들이 엄격 모드와 비 엄격 모드에서 어떤 차이점을 보이는지 알아보겠습니다. 희소식을 알려드리자면 두 모드에서 차이를 보이는 기능이 많지 않다는 점과 엄격 모드를 사용하면 개발자의 삶의 질이 조금 더 높아진다는 점입니다.

그리고 특별한 언급이 없는 한 이 튜토리얼에 등장하는 모든 예시엔 엄격 모드를 적용할 예정입니다.

변수와 상수

변수

아래와 같이 대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.

온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보
채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보
변수는 이러한 정보를 저장하는 용도로 사용된다.

변수 선언

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 이다.
온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용하는데 자바스크립트에선 let 키워드를 사용해 변수를 생성한다.
아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)한다.

let message;

이제 할당 연산자 =를 사용해 변수 안에 데이터를 저장해 보자.

let message;
message = 'Hello'; // 문자열을 저장합니다.

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다.

let message;
message = 'Hello!';

alert(message); // 변수에 저장된 값을 보여줍니다.

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.

let message = 'Hello!'; // 변수를 정의하고 값을 할당합니다.

alert(message); // Hello!

한 줄에 여러 변수를 선언하는 것도 가능하다.

let user = 'John', age = 25, message = 'Hello';

이렇게 작성하면 코드가 좀 더 짧아 보이긴 하지만 권장하는 방법은 아니다. 가독성을 위해 한 줄에는 하나의 변수를 작성하자.
한 줄에 한 개의 변수를 작성하면 코드가 길어 보이지만 읽기엔 편하다.

let user = 'John';
let age = 25;
let message = 'Hello';

어떤 사람들은 이런 방식으로도 변수를 정의한다.

let user = 'John',
  age = 25,
  message = 'Hello';

‘쉼표가 먼저 오는’ 방식으로 작성하는 사람도 있다.

let user = 'John'
  , age = 25
  , message = 'Hello';

위에서 소개한 방식들에 기술적인 차이가 있지는 않다. 개인의 취향과 미적 감각에 따라 원하는 방식으로 코드를 작성하자.
let 대신 var
만들어진 지 오래된 스크립트에서 let 대신 var라는 키워드를 발견하는 경우가 있다.

var message = 'Hello';

var는 let과 거의 동일하게 동작한다. var도 let처럼 변수를 선언하는 데 쓰이지만 var는 ‘오래된’ 방식이다.
let과 var의 미묘한 차이점에 대해선 추후 오래된 'var' 에서 자세히 배워보도록 하겠다. 지금 시점에선 이 차이점이 중요하지 않기 때문에 넘어가자.

현실 속의 비유

‘상자’ 안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어 있다고 상상해보면 '변수’를 좀 더 쉽게 이해할 수 있다.
예를 들어, 변수 message는 message라는 이름표가 붙어있는 상자에 "Hello!"라는 값을 저장한 것이라고 생각할 수 있다.

상자 속엔 어떤 값이든지 넣을 수 있다.
원하는 만큼 값을 변경할 수도 있다.

let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

alert(message);

값이 변경되면, 이전 데이터는 변수에서 제거된다.

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.

let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가집니다.
alert(Hello); // Hello world!
alert(message); // Hello world!

변수를 두 번 선언하면 에러가 발생한다.
변수는 한 번만 선언해야 한다.
같은 변수를 여러 번 선언하면 에러가 발생한다.

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 합니다.

함수형 언어

함수형(functional) 프로그래밍은 변숫값 변경을 금지합니다. 스칼라(Scala)와 얼랭(Erlang)은 대표적인 함수형 언어입니다.
이들 언어에서는 ‘상자 속에’ 값이 일단 저장되면, 그 값을 영원히 유지한다. 다른 값을 저장하고 싶다면 새로운 상자를 만들어야(새 변수를 선언해야)만 한다. 이전 변수를 재사용할 수 없다.
처음 봤을 땐 좀 이상해 보일 수 있지만, 함수형 언어는 중대한 개발에 상당히 적합한 언어다. 이런 제약이 장점으로 작용하는 병렬 계산(parallel computation)과 같은 영역도 있다. 당장은 사용할 계획이 없더라도 이런 언어를 공부하는 것은 시야를 넓히는 데 도움이 될 것 같다고 한다.

변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.
1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.
다음은 유효한 변수명의 예시다.

let userName;
let test123;

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)가 흔히 사용된다.
카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다. myVeryLongName같이 말이다.
달러 기호 '$' 와 밑줄 '_' 를 변수명에 사용할 수 있다는 점이 조금 특이하다. 이 특수 기호는 일반 글자처럼 특별한 의미를 지니진 않는다.
아래는 유효한 변수명에 관한 예시다.

let $ = 1; // '$'라는 이름의 변수를 선언합니다.
let _ = 2; // '_'라는 이름의 변수를 선언합니다.
alert($ + _); // 3

아래는 잘못된 변수명의 예시다.

let 1a; // 변수명은 숫자로 시작해선 안 됩니다.
let my-name; // 하이픈 '-'은 변수명에 올 수 없습니다.

대·소문자 구별
apple와 AppLE은 서로 다른 변수다.
비 라틴계 언어도 변수명에 사용할 수 있지만 권장하진 않는다.
키릴 문자, 심지어 상형문자도 변수명에 사용할 수 있다. 모든 언어를 변수명에 사용할 수 있다.

let имя = '...';
let 我 = '...';

위 코드에는 기술적인 에러가 없고 변수명도 유효하다. 하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만들길 권유 드린다고 한다. 다른 나라 사람이 스크립트를 볼 경우 등을 대비해 장기적인 안목을 가지고 코드를 작성하자.

예약어

예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없다.

예약어는 프로그램을 작성하는데 있어 필요한 명령문, 자료형등 미리 컴퓨터가 지정해둔 명칭을 의미하며, 이는 반드시 식별자로 사용하면 안 된다. JavaScript의 예약어는 Java와 거의 흡사하며, 향 후 버전이 업그레이드되는 경우, Java와 동일하게 class를 지정할 수 있도록 변경될 것이기 때문에 아래에 JavaScript에 추가된 예약어 이외에도, Java에서 사용되는 예약어를 식별자로 사용하지 말아야 한다.

예약어 예시: https://lifea.co.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%98%88%EC%95%BD%EC%96%B4-javascript-reserved-words/

아래 코드는 문법 에러를 발생시킨다.

let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

use strict 없이 할당하기

변수는 대개 정의되어 있어야 사용할 수 있습니다. 그러나 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다.
use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.

// 참고: 이 예제에는 "use strict"가 없습니다.

num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성됩니다.

alert(num); // 5

이렇게 변수를 생성하는 것은 나쁜 관습이다. 엄격 모드에서 에러를 발생시키기 때문이다.

"use strict";

num = 5; // error: num is not defined

상수

변화하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.

const myBirthday = '18.04.1982';

이렇게 const로 선언한 변수를 '상수(constant)'라고 부른다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.


const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언하도록 하자.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.
이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.
예시로 웹에서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수를 한번 만들어보겠다.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

대문자로 상수를 만들어 사용하면 다음과 같은 장점이 있다.

COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽다.
COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮다.
COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가한다.
그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 하는 걸까요? 명확히 짚고 넘어가자.
'상수’는 변수의 값이 절대 변하지 않음을 의미한다. 그중에는 (빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.

예시는 아래와 같다.

const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었습니다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다.

정리하자면, 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 된다.

바람직한 변수명

변수명은 간결하고, 명확해야 한다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다.
변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나이다. 변수명만 슬쩍 봐도 초보자가 코드를 작성했는지, 노련한 개발자가 작성했는지 알 수 있다.

실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보낸다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있다. 다시 말해, 변수가 올바른 이름을 가졌을 때 말이다.

그러므로 변수 선언 전에 내가 지은 변수의 명을 한 번 더 체크하도록 하자

아래는 변수 명명 시 참고하기 좋은 규칙이다.

userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요.
무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요.
최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.
간단해 보이나요? 그렇게 보이긴 합니다. 그러나 실전에서 서술적이고 간결한 변수명을 짓는 것은 간단하지 않습니다.

재사용 아니면 새로 만들기?

개발자 중에는 새로운 변수를 선언하기보다 기존 변수를 재사용 하는 걸 선호하는 게으른 분들이 있다고 한다.

재사용된 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같다. 상자 안에는 무엇이 들어 있을까? 내용물에 대한 정보를 알고 있는 사람은 누구인가요? 이를 알기 위해선 상자에 가까이 다가가 확인해야만 한다.
변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다.

변수를 추가하는 것은 악습이 아닌 좋은 습관이라고 생각한다.

어차피 모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해준다. 변수를 추가한다고 해서 성능 이슈가 생기지 않는다.
값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있다.

출처

내용 : https://ko.javascript.info/intro
썸네일 제작 : https://www.canva.com/

공부 저장소

https://github.com/WonseoYang

이전 포스트

DAY - 01

다음 포스트