글 작성자: Coding Groot

https://ko.javascript.info/ 를 읽으며 정리하는 글입니다.

이 책을 천천히 정리하면서 제가 알고 있는 내용을 함께 적어봅니당.

1장 소개

자바스크립트란?

"자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어"입니다.

보통 웹페이지의 HTML 안에 작성하거나 불러와서 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.

자바스크립트는 자바스크립트 엔진에서 돌아간다. 브라우저엔 '자바스크립트 가상 머신'이라는 불리는 엔진이 내장되어있고 대표적으로 크롬에서 사용하는 V8 엔진이 유명합니다.

책에서는 자바스크립트는 안전한 프로그래밍 언어라고 표현합니다.
브라우저를 대상으로 만든 언어이기 때문에 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다.

인터넷에서 코드를 불러와서 내 컴퓨터에서 마구마구 실행되는 특성상 브라우저 밖으로는 조작이 쉽다면 아주 취약할 것입니다..!

저런 특성상 브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았습니다.
말고도 여러 보안 정책이 있는데 SOP, CORS 등을 살펴보면 좋습니다.
책에서는 나중에 설명해준다며 이것을 말로 풀어놓았네용.

그러면 이것을 풀기 위해서는 어떻게 하냐? 궁금할 수 있습니다.

예를 들어서 인터넷상에서 돌아가는 게임을 외부 장치(조이스틱)로 조작하고 싶다면?

기타 프로그램(혹은 플러그인)을 설치하거나 추가 권한을 부여해줘야 합니다.

그리고 예전에 은행 웹 사이트를 쓸 때 ActiveX도 떠올려보시면...

Transpile

트랜스파일(transpile)은 변환이라는 뜻을 가지고 있습니다. 다른 언어를 자바스크립트로 변환해주는 것을 Transpiler라고 부릅니다.
이 책에서는 CoffeeScript, TypeScript(유명하죱..), Flow, Dart를 소개합니다.

저는 타입스크립트를 써보았네용.
이런 트랜스파일러가 나중에 배포할 때 까다롭더라고요. 테스트 코드도 JS로 돌리지 트랜스파일링 전에서 돌리지도 고민해야 합니다.

플러터에서 쓰는 언어로 유명한 Dart도 JS로 트랜스파일링이 가능하지는 처음 알았습니다.

매뉴얼과 명세서

ECMA-262

자바스크립트의 표준은 ECMAScript입니다. ECMA라는 단체에 맡겨서 JavaScript를 표준화시킨 것이 ECMAScript입니다.

크로스브라우징의 많은 이슈가 ECMAScript가 나오고 (바로는 아니고 시간이 좀 지나고) 많이 해결이 되었습니다 ㅎㅎ.
각자 제각각이었는데 정말 다행입니다.

읽기가 쉽지 않은 문서이기도 합니다.
저는 ECMA-262에서 아주 가끔씩 찾아보고는 합니다.
https://www.ecma-international.org/publications/standards/Ecma-262.htm

 

ECMA-262 - Ecma International

ECMAScript® 2022 language specification, 13th edition - ECMAScript is a programming language based on several technologies like JavaScript.

www.ecma-international.org

예를 들어서, 호이스팅은 실제로 없는 개념이고 실제 현상을 설명을 편하기 위한 개념이라고 해서 ECMA를 찾아본 적이 있습니다.
정말로 Hoisting이라는 단어는 명세서에 없습니다.

TC39의 Proposals
TC39 홈페이지: https://tc39.es/

이 부분은 카일 심슨의 책("You Dont Know JS Yet")을 참고했습니다.

TC39는 언어의 공식적인 스펙을 관리하는 역할을 합니다. 주기적으로 미팅을 하면서 찬반 투표를 한다고 합니다. 그리고 ECMA에 표준화를 맡긴다고 합니다.

TC39의 위원회의 구성원으로는 Mozilla, Google, Apple, 삼성 등이 참가하고 있습니다. 

TC39가 언어에 대해서 새로운 Proposal(제안)을 합니다. 모든 TC39 proposal은 5단계 프로세스를 통해 진행됩니다. (0부터 4 스테이지)

"stage 0"은 대략적으로 TC39의 누군가가 가치 있는 아이디어라고 생각하고 이를 옹호하고 작업할 계획임을 의미합니다. 
TC39 회원이 아닌 사람들이 소셜 미디어나 블로그 게시물과 같은 비공식적인 수단을 통해 제안하는 아이디어는 "pre-stage 0"입니다. 공식적으로 "stage 0"으로 간주되려면 제안을 옹호할 TC39 회원을 확보해야 한다고 합니다!

"stage 3"인 갓 명세서에 등록된 기능이나 '등록되기 바로 직전’에 있는 기능에 대한 제안 목록은 https://github.com/tc39/proposals에서 확인할 수 있습니다.

"stage 4"까지 올라갔다면 언어의 다음 해 개정판에 포함될 자격이 있다는 것을 뜻합니다.

호환성

누구는 깨지고 누구는 빠르고 누구는 느리고...

그리고 웹 특성상 호환성이 되게 중요합니다.
특정 브라우저나 엔진이 내가 사용하려는 기능을 지원하는지 확인하는 용도로 두 사이트를 추천해주는데 매우 익숙했습니다.

아마 웹 개발을 하다 보면 can i use는 잊을만하면 사용하게 됩니다.

코드 에디터

코드 에디터는 취향이죠.

제 얘기만 간단하게 하고 넘어가겠습니다.

저는 간단한 작업은 neovim을 씁니다.

그리고 실질적으로 많은 파일을 오래 작업할 때는 WebStorm(학생이면 무료!), 원격으로 작업을 할 때는 VSCode를 씁니다.

원격 기능은 VSCode가 제일 간편하더라고용.. 포트포워딩도 GUI로 간편하게 할 수 있습니다.

WebStorm도 기능이 다 있고 훌륭한데 이게 램을 생각보다 많이 잡아먹습니다... 여러 개 띄우고 자주 껐다 켰다 해야 하면 컴퓨터가 조금 힘들어했습니다.

이전에 같이 작업했던 팀원분들은 무료이고 가벼워서 그런지 대부분 VSCode를 썼던 것 같아요.

이 책에도 마지막에 논쟁하지 말자고 적혀있네요 ㅎㅎ. 각자 편한 것을 고르면 될 것 같습니다.

개발자 콘솔

개발자 콘솔 F12는 필수템입니다. 조금 변태 같지만 저는 모바일에도 별도 플러그인을 깔아서 개발자 콘솔을 볼 수 있게 했습니다. ㅎㅎ
대부분의 개발자는 Chrome이나 Firefox를 이용해 개발하는 걸 선호한다고 합니다.

저는 Chrome 개발자 엔진을 많이 사용합니다. LightHouse, Network, Element(Dom검사), 등등 정말 많은 기능이 있습니다.

그리고 디버그 기능도 있어서 디버깅하는 데에도 사용할 수 있습니다. 이건 의외로 잘 모르시는 분들이 계시더라구영.
예전에 이걸 이용한 웹 해킹 문제도 푼 기억이 있습니다.

ㅎㅎ 여러 가지로 활용 가능합니다.

공부할 때 주의할 점

책에서는 언급이 없지만 공부할 때 주의할 점

한 가지 주의할 것이 웹 개발자 도구의 콘솔이 완벽히 표준이 아니라는 것입니다.

말 그대로 개발을 돕는 도구입니다.

귀찮다고 개발자 콘솔 열어서 실습하는 친구를 봤는데 조심하세요.

공부할 때는 html파일을 만들어서 script 태그로 실습을 하시거나 NodeJS로 실행해서 하시는 것을 추천합니다.

다음 장의 Hello, world에서 실행하는 법을 알려주네요.

2장 자바스크립트 기본

스크립트 태그

예전 HTML4에서는 script 태그의 type 속성을 명시하는 것이 표준이었다고 합니다.

<script type="text/javascript"><!--
    ...
//--></script>

현재는 HTML5죱. 심지어 HTML5에서는 type 속성을 의미하는 것이 바뀌었습니다.

외부 스크립트

자바스크립트는 외부의 파일을 불러올 수 있습니다.

<script src="/path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

보통은 이렇게 자바스크립트 파일을 분리해서 작업을 합니다.
책에서는 스크립트를 별도의 파일에 작성하면 브라우저가 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있다고 합니다.

src 속성

Script 태그에 src 속성이 있으면 내부의 코드는 무시됩니다.

<script src="file.js">
  alert(1); // src 속성 때문에 alert는 실행되지 않는다고 하네요!
</script>

따로 분리해야 된답니다.

코드 구조

문(statement)란 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.
 - 모던 JavaScript 튜토리얼, 파트 1, 1장

자바스크립트는 세미콘론(;)으로 문을 구분하지만 자바스크립트는 세미콜론을 생략하면 자동으로 넣어줍니다.

하지만 다음과 같이 세미클론을 추론을 못하는 경우도 있다고 합니다.

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

// 아래와 같이 실행된다
// alert("에러가 발생합니다.")[1, 2].forEach(alert)

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 최상단이나 함수 본문 맨 위에 'use strict'를 적어줘야 합니다.

자바스크립트는 '하위 호환성’을 깨드리질 않길 원합니다.
이런 하위 호환성을 보장하는 것이 기본 모드이고 strict 모드를 켜면 모던 기능을 모두 제공하기 시작합니다.

대표적으로 strict모드가 아니면 변수를 선언하지 않고 그냥 값을 할당해 변수를 생성할 수 있습니다.

변수와 상수

변수는 let, const, var를 사용해서 선언할 수 있습니다.

let, const가 ECMAScript2016부터 들어온 문법인데 var의 많은 부분을 개선을 했습니다. 두 번 선언이 안 되고 block scope입니다.
var는 과거에 쓰이던 방식인데 조심해야 할 점이 몇 가지가 있습니다. 보통은 let, const만 쓰지 var를 섞어 쓰지는 않습니다. 그래도 var는 자주 보입니다.
자바스크립트는 동적 타이핑(dynamic typing)을 허용합니다. 실행 중에 자료형을 바꿔가며 값을 할당할 수 있다는 말입니다.
문제없이 잘 쓰면 잠시 편하지만 예측할 수 없는 타입 때문에 타입스크립트를 많이 쓰는 것 같습니다.
간단한 프로그램이면 큰 문제는 없지만 점점 코드가 복잡해질수록 불안해지는 것이 있습니다.

변수 여러 개

책에서는 말합니다.

변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 합니다.
변수를 추가하는 것은 악습이 아닙니다. 좋은 습관입니다.

저도 아주 동의하는 부분입니다..!

상수

프로그래밍을 하다 보면 값이 이후에 변경을 되지 않는다면 const로 선언하면 됩니다. 실수를 예방해주며 다른 프로그래머에게 안심?시켜줍니다. 보통 다른 사람의 코드를 보다가 let으로 선언된 변수가 보이면 아 이 변수는 뒤에 바뀌게 되는구나라는 생각이 듭니다. 그래서 유심하게 집중해서 보게 됩니다.

대부분의 코드는 const 선에서 정리가 됩니다. 최근에 코드리뷰를 받으면서 let이 있으면 코드스멜인 경우가 많다는 피드백을 받았습니다.
한 가지 팁을 드리자면 변형을 함수형에서는 immutable 하게 복제를 하여 사용하는 것이 일반적이라 합니다.

자료형

자바스크립트는 여덟 가지 기본 자료형을 지원합니다.

숫자형, BigInt형, 문자형, 불린형, null, undefined, 심볼형, 객체형

typeof 연산자는 값의 자료형을 반환해 줍니다. 그런데 두 가지 예외 사항이 있다고 합니다.

typeof null == "object" // 언어 자체의 오류라고 합니다. 실제로는 null은 독립된 자료형이 맞습니다.
typeof function(){} == "function" // 함수는 특별하게 취급됩니다.

그리고 조심해야 할 점이 JavaScript는 BigInt를 지원하지만 json은 아니라는 점입니다. bigint를 지원하지 않기 때문에 문자열로 다뤄야 합니다. 데이터베이스나 원격으로 데이터를 주고받을 때 조심해야 합니다.

alert, prompt, confirm을 이용한 상호작용

브라우저 상에서 코드와 상호작용하기 위한 인터페이스로 alert, prompt, confirm가 있습니다.
이 책에서는 브라우저 기준으로 적어서 이 세 가지 함수를 알려주네요.

자세한 내용은 생략하도록 하겠습니다.

이런 함수들을 사용자로부터 입력을 받을 수 있도록 모달 창을 띄웁니다.
그리고 모달 창은 다음괴 같은 제약사항이 있다고 합니다.

  • 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
  • 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.

최근에 프로젝트(modocode.com)를 할 때는 이런 제약사항 때문에 프론트 분들이 모달창을 직접 제작하는 것을 봤습니다.
이쁜 모달창이 필요하면 직접 만들어야 할 것입니닷..

형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 자바스크립트에서 가장 조심해야 할 부분 중 하나입니다.
이 책에서는 아주 간단하게 알려줍니다.

혹시 Type coercion과 Type conversion의 차이를 아시나요?

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers).
Type conversion is similar to type coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.

출처: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion

좀 더 자세한 내용은 검색해보시면 내용이 많이 나옵니다.
오브젝트에 관한 내용은 책 뒤에서 언급한다고 하네요.

기본 연산자와 수학

연산자는 , 연산자를 새로 알게 됐습니다.

let a = (1 + 2, 3 + 4);
alert( a ); // 7 (3 + 4의 결과)

, 연산자는 evaluation은 모두 되지만 값은 마지막 값이 된다고 합니다. 그래서 프레임워크에서 자주 볼 수 있다고 합니다.

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

예를 들어서 이런 식으로 활용할 수 있다고 하네요.

잘 못 쓰면 아무도 못 알아볼 것 같네요.

비교 연산자

자바스크립트에서 비교 연산자가 나오면 빠질 수 없는 ==과 ===입니다.

동등 연산자(equality operator) ==은 자료형이 다른 경우 형 변환을 암시적으로 합니다.
일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있습니다. 자료형의 동등 여부까지 검사를 해줍니다.

책에 있는 예시입니다.

일치 연산자 ===를 사용하여 null과 undefined를 비교하면 자료형이 다르기 때문에 거짓이 반환됩니다.

alert( null === undefined ); // false

동등 연산자 ==를 사용하여 null과 undefined를 비교하면 자료형을 맞추기 위해 암시적인 형변환이 일어나서 true가 반환됩니다.

alert( null == undefined ); // true

따라서 어떤 변수에 null이나 undefined가 올 수 있으면 비교할 때 주의를 해야 한다 합니다.
<, >, <=, >=도 주의를 해야 합니다.

if와 '?'를 사용한 조건 처리

자바스크립트는 조건문을 두 가지 방법으로 처리할 수 있습니다.
if문과 ? 연산자입니다.

if (condition) {
  // ...
} else if (year > 2015) {
  // ...
} else {
  // ...
}
let result = condition ? value1 : value2;

논리 연산자

자바스크립트를 처음 봤을 때 헷갈리고 했었던 부분입니다.
연산자에 '논리’라는 수식어가 붙긴 하지만 자바스크립트의 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다.

연산 결과 역시 모든 타입이 될 수 있습니다.

예를 들어서, 이런 식으로 씁니다.

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

firstName과 lastName과 nickName이 비어있으면 falsy이기 때문에 "익명"으로 출력됩니다.
위의 코드는 nickname에 값이 있으므로 nickName이 출력됩니다.

자바스크립트는 short circuit을 이런식으로 많이 씁니다.

그리고 자바스크립트 코드를 보다면 보면 !!값 이런식으로 쓰여있는 경우를 볼 수 있습니다.
그냥 다른 자료형을 불린형으로 변환하기 위해 쓰는 트릭 같은 겁니다.

nullish 병합 연산자 '??'

다른 언어에도 볼 수 있는 기능입니다.
nullish 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 찾을 수 있습니다.
값이 할당된이 핵심입니다.

// [책의 코드] height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

그러면 의문이 드는 것이 '||'랑 똑같은 것이 아닌가 싶습니다.
책에서는

  • ||는 첫 번째 truthy 값을 반환합니다.
  • ??는 첫 번째 정의된(defined) 값을 반환합니다.
    다음과 같이 설명합니다.

제가 처음에 값이 활당된이 핵심이라고 했습니다. ||과 ??의 차이는 falsy한 값을 할당해보면 차이를 쉽게 알 수 있습니다.

// 책의 코드 
let height = 0;

alert(height || 100); // (0은 falsy하므로) 100
alert(height ?? 100); // (height의 값이 정의되어 있으므로) 0

while과 for 반복문

책에서는 while, do..while, for (;;)을 소개해줍니다.

물음표 연산자 ‘?’의 오른쪽엔 break나 continue가 올 수 없습니다.
?에는 값으로 평가되는 표현식만 올 수 있습니다.
책에서는 표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자 ?에 사용할 수 없다는 점을 항상 유의하라 합니다.

레이블로 중첩된 반복문에서 break/continue를 할 수 있는 기능도 소개해주네요.

switch문

switch문은 일치 비교로 조건을 확인한다고 합니다. 따라서 case문에서 값을 주의해야 한다고 합니다.
switch 인자로 문자열이 왔는데 case문에서는 number로 되어있다면 항상 false입니다.

함수

함수에 대한 기본적인 개념을 설명하는 챕터입니다.

다른 언어처럼

  • 함수에 전달된 매개변수는 복사된 후 함수의 지역변수가 됩니다.
  • 함수는 외부 변수에 접근할 수 있습니다.
    • 하지만 함수 바깥에서 함수 내부의 지역변수에 접근하는 건 불가능합니다.
  • 함수는 값을 반환할 수 있습니다.
  • 값을 반환하지 않는 경우는 반환 값이 undefined가 됩니다.
    • 따라서 함수를 호출하는 것은 모두 표현식(expression)이겠죵?

함수 표현식

자바스크립트는 함수도 일급 객체입니다.

일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.

출처: https://ko.wikipedia.org/wiki/%EC%9D%BC%EA%B8%89_%EA%B0%9D%EC%B2%B4

그래서 자바스크립트는 함수를 값으로 주고받고, 할당, 복사, 선언할 수 있습니다. 이것을 통해 우리는 고차함수를 만들 수 있습니다.

이전 챕터에서 함수 선언(Function Declaration)으로 만드는 것이 아니라 함수를 값을 할당해서 만들 수도 있습니다.

let myFunc = function() {
  console.log("Hello, world!");
  return "hello";
}; // <- 여기 세미콜론에 주목!

책에서는 이것을 함수 표현식(Function Expression)을 사용해서 함수를 만들었다고 합니다.

위의 코드를 보시면 구문의 끝의 끝에 ;을 넣습니다. 책에서는 모든 구문의 끝엔 세미 콜론 ;을 붙이는 게 좋다고 합니다.

함수는 언제 생성되는가?

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다.
-> 코드가 그 함수까지 실행되야지 사용할 수 있습니다.

함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.

책에서는 이게 가능한 이유를 자바스크립트의 내부 알고리즘 때문이라고 설명합니다.

자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠. - 모던 자바스크립트

이 자세한 원리는 "카일 심슨"의 You Dont Know JS Yet에서 알 수 있습니다.

이런 자바스크립트의 특성을 보아 "카일 심슨"은 위 책에서는 JavaScript는 오히려 Interpreter보다 Compiler에 가깝다고도 말하더라고용...

이것을 우리는 흔히 편하게 설명하려고 (실제로는 아니지만) 호이스팅 된다고 말하고는 합니다.

한 줄 요약을 하자면, 함수 선언문과는 달리 함수 표현식은 호이스팅 되지 않다고 이해할 수 있습니다.

화살표 함수 기본

또 다른 함수 선언 방법입니다.

// expression이 한 줄일 경우
let func = (arg1, arg2, ...argN) => expression

// expression이 여러 줄일 경우
let func = (arg1, arg2, ...argN) => {
    expression1;
    expression2;
    return expression3; // 반드시 반환값은 return한다 
}

이 방법은 C#에서 익명 함수를 만들 때 사용하던 문법이랑 같아서 익숙했습니다.

주로 일회용으로 쓸 (ex. 정렬의 조건을 판별하는 함수)를 쓸 때 사용했습니다.

자바스크립트에서는 화살표 함수는 또 알아야 할 것이 있습니다. 자바스크립트를 사용하다 보면 bind나 apply 같은 함수로 this를 명시적으로 바인딩해본 경험이 있을 겁니다. 그런데 화살표 함수는 lexcical scope를 사용합니다.

책에서는 이후 뒤에서 이 내용을 다룬다고 합니다.

기본 문법 요약

2장에 관해서 요약해주는 챕터입니다.

1, 2장을 읽고 난 후

1, 2장을 읽고 든 생각은 정리도 어렵지 않게 잘 되어 있고 예시가 깔끔합니다.

그리고 내용 중간에 저자의 여러 경험과 팁이 잘 녹아 있어서 더 특별해지는 책 같습니다.

출처

반응형

티스토리툴바