TIL #210112

📚 TIL

---

모던 JavaScript 튜토리얼

 

 

목차

 

파트 1	코어 자바스크립트
	소개
	자바스크립트 기본
	코드 품질
	객체: 기본
	자료구조와 자료형
	함수 심화학습
	객체 프로퍼티 설정
	프로토타입과 프로토타입 상속
	클래스
	에러 핸들링
	프라미스와 async, await
	제너레이터와 비동기 이터레이션
	모듈
	기타
파트 2	브라우저: 문서, 이벤트, 인터페이스
	문서
	이벤트 기초
	UI 이벤트
	Forms, controls
	문서와 리소스 로딩
	기타
파트 3	추가 주제
	프레임과 윈도우
	Binary data, files
	네트워크 요청
	브라우저에 데이터 저장하기
	애니메이션
	웹 컴포넌트
	정규 표현식

 

파트 1 - 코어 자바스크립트

 

🍓 소개

자바 스크립트 : 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어

매뉴얼과 명세서 : ECMA-262 명세서 / MDN JavaScript Reference

코드 에디터 : 통합 개발 환경 / 경량 에디터

개발자 콘솔 : Chrome에 내장된 개발자 도구가 가장 좋음

 

---

 

🍓 자바스크립트 기본

 

Hello, world!

 

<script> 태그를 이용하여 HTML에 자바스크립트 삽입

외부 스크립트로 src 속성을 사용해 HTML에 삽입 <script src="script.js"></script>

 

코드 구조

 

문(statement) : 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)

세미콜론(semicolon) : 서로 다른 문을 구분, 줄 바꿈으로 생략 가능하지만 오류 가능성 있음

주석(comment) : 한 줄짜리는 //, 여러 줄은 /*에서 */로 표시

 

엄격 모드

 

엄격 모드(strict mode) : ES5 이전 기존 기능의 변경사항 활성화하여 모던한 방식으로 동작

use strict : 스크립트나 함수 본문 최상단에 "use strict"가 오면 엄격 모드로 실행

 

변수와 상수

 

변수(variable) : 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소', let 키워드를 이용해 생성

변수 명명 규칙 : 문자,숫자,$,_만 사용 가능, 카멜 표기법 사용, 첫 글자로 숫자 불가, 예약어 사용 불가, 대소문자 구별

상수(constant) : 변화하지 않는 변수, const로 선언, 재할당 불가, 주로 대문자 사용

 

자료형

 

동적 타입(dynamically typed) 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어

숫자형(number type) : 정수 및 부동소수점 숫자(floating point number), Infinity, NaN

BigInt : 길이에 상관없이 정수를 나타냄, 정수 리터러 끝에 n을 붙여 만듦

문자형 : 따옴표로 묶어서 작성, 역 따옴표(`) 안에 ${}로 변수나 표현식 넣을 수 있음

불린형 : true와 false

null : 존재하지 않는(nothing) 값, 비어 있는(empty) 값, 알 수 없는(unknown) 값

undefined : 변수는 선언했지만 값을 할당하지 않은 상태

객체형(object type) : 데이터 컬렉션이나 복잡한 개체(entity) 표현

심볼(symbol)형 : 객체의 고유한 식별자(unique identifier)를 만들 때 사용

typeof 연산자 : 인수의 자료형 반환

 

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

 

alert : '확인(OK)' 버튼을 누를 때까지 메시지를 보여주는 모달 창(modal window) 실행

prompt : 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창 실행

컨펌(confirm) 대화상자 : 질문과 확인, 취소 버튼이 있는 모달 창 실행, 확인을 누르면 true, 취소/esc를 누르면 false 반환

 

형 변환

 

형 변환(type conversion) : 함수와 연산자에 전달되는 값이 적절한 자료형으로 변환되는 과정

문자형으로 변환 : 문자형의 값이 필요할 때 일어남, String(value) 함수 호출

불린형으로 변환 : 논리 연산을 수행할 때 발생, Boolean(value) 호출, 비어있다고 느껴지는 값 false 변환

숫자형으로 변환 : 수학과 관련된 함수와 표현식에서 자동으로 일어남, Number(value) 함수 사용

숫자형으로 변환 시 적용되는 규칙

 

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	문자열이 비어있다면 0, 오류 발생시 NaN

 

기본 연산자와 수학

 

피연산자(operand) : 연산자가 연산을 수행하는 대상, 인수(argument)

단항(unary) 연산자 : 피연산자를 하나만 받는 연산자

이항(binary) 연산자 : 두 개의 피연산자를 받는 연산자

수학 연산자 : 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 거듭제곱(**)

이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합

숫자가 아닌 피연산자에 단항 덧셈 연산자를 붙이면 숫자형으로 변환

연산자 우선순위(precedence) : 하나의 표현식에 둘 이상의 연산자가 있는 경우, 실행 순서 결정

할당(assignment) 연산자 : 값을 반환하여 할당

복합 할당 연산자 : +=, /= 등

증가/감소 연산자 : ++, --, 피연산자 뒤에 올 때는 후위형(postfix form), 앞에 올 때는 전위형(prefix form)

비트 연산자(bitwise operator) : 인수를 32비트 정수로 변환하여 이진 연산 수행

쉼표 연산자(comma operator) : 여러 표현식을 한 줄에서 평가할 수 있게 해줌, 마지막 표현식 결과만 반환

 

비교 연산자

 

비교 연산자 : >, <, >=, <=, ==(동등), !=(부등), 불린형 반환

문자열 비교 : 사전순으로 문자열 비교, 소문자가 더 큼

다른 형을 가진 값 간의 비교 : 숫자형으로 바꿔서 비교

동등 연산자 : 0과 false, 빈 문자열을 구별하지 못함, null과 undefined 구별하지 못함

일치 연산자(strict equality operator) : ===, 형 변환 없이 값 비교

null vs 0 : null == 0 은 false, null >= 0 은 null이 0으로 형변환되어 true

undefined : NaN으로 변환되어 다른 값과 비교가 불가능함

 

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

 

'if'문 : if() 괄호 안에 들어가는 조건을 평가하여 불린값으로 변환, true이면 코드 블록 실행

'else'절 : 조건이 거짓일 때 실행, 'else if'로 복수 조건 처리

조건부 연산자 '?' : 평가 대상이 truthy라면 value1이, 그렇지 않으면 value2가 반환

 

let result = condition ? value1 : value2;

논리 연산자

 

||(OR) : 인수 중 하나라도 true이면 true를 반환하고 그렇지 않으면 false를 반환

|| 연산자를 여러 개 체이닝하면 첫 번째 truthy 반환, truthy 없으면 마지막 피연산자 반환

단락 평가(short circuit evaluation) : trythy를 만나면 나머지 값은 건드리지 않은 채 평가를 멈춤

&&(AND) : 두 피연산자가 모두 참일 때 true 반환, 그 외의 경우 false 반환

!(NOT) : 피연산자를 불린형으로 변환한 값의 역 반환

null 병합 연산자 '??' : 여러 피연산자 중 그 값이 '확정되어있는' 변수 반환

 

while과 for 반복문

 

while 반복문 : condition(조건) truthy이면 반복문 본문의 코드 실행

 

while (condition) {
  // 반복문 본문(body)
}

do...while : 본문이 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안에 본문이 계속 실행

 

do {
  // 반복문 본문
} while (condition);

for 반복문 : begin이 한 차례 실행 된 이후에, condition 확인과 body, step이 반복 실행

 

for (begin; condition; step) {
  // 반복문 본문
}

 

break : 반복문을 빠져나올 수 있음

continue : 현재 반복을 종료시키고 다음 반복으로 넘어갈 때 사용

레이블(label) : 반복문 앞에 콜론과 함께 쓰이는 식별자
반복문 안에서 break <labelName>문을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있음

switch문

switch문 : 하나 이상의 case문으로 구성
case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case문 아래의 코드가 실행

값과 일치하는 case문이 없다면, default문 아래의 코드가 실행

 

함수

 

함수 : 동작을 나타내는 값

함수 선언(Function Declaration)과 호출

 

function name(parameters) {
  함수 본문
}

name(parameters)

지역 변수(local variable) : 함수 내에서 선언한 변수, 함수 안에서만 접근 가능

외부 변수(outer variable) : 함수 외부의 변수, 전역 변수(global variable)

매개변수(parameter) : 임의의 데이터를 함수 안에 전달

매개변수에 값을 전달하지 않으면 그 값은 undefined가 됨

기본값(default value) : 매개변수에 값을 전달하지 않아도 값이 undefined가 되지 않게 설정

반환 값(return value) : 함수를 호출했을 때 함수를 호출한 곳에 반환한 특정 값

 

함수 표현식(Function Expression)

 

let name = function() {
  함수 본문
}

콜백 함수 : 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 함수를 나중에 호출하는 것

익명 함수(anonymous function) : 이름 없이 선언한 함수

함수 표현식 vs 함수 선언문

 

	함수 선언문	함수 표현식
문법	주요 코드 흐름 중간에 독자적인 구문 형태로 존재	표현식이나 구문 구성 내부에 생성
함수 생성 시기	선언문이 정의되기 전 호출 가능	실제 실행 흐름이 해당 함수에 도달했을 때 함수 생성
스코프	선언문이 위치한 코드 블록 밖에서는 함수 접근 불가

 

화살표 함수 기본

 

화살표 함수(arrow function)

 

let func = (arg1, arg2, ...argN) => expression
// 아래 코드의 축약 버전

let func = function(arg1, arg2, ...argN) {
  return expression;
}

 

---

 

🍓 코드 품질

 

Chrome으로 디버깅하기

 

디버깅(debugging) : 스크립트 내 에러를 검출해 제거하는 일련의 과정

Sources 패널 : 파일 탐색 영역, 코드 에디터 영역, 자바스크립트 디버깅 영역

콘솔 : 구문을 입력하고 실행하면 아랫줄에 실행 결과가 출력

중단점(breakpoint) : 자바스크립트의 실행이 중단되는 코드 내 지점

debugger 명령어 : 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과

디버깅 영역 하위 패널

 

Watch	표현식을 평가하고 결과를 보여줌
Call Stack	코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시
Scope	현재 정의된 모든 변수를 출력

디버깅 영역 버튼

 

Resume	스크립트 실행을 다시 시작함 (단축키 F8)
Step	다음 명령어를 실행함 (단축키 F9)
Step over	다음 명령어를 실행하되, 함수 안으로 들어가진 않음 (단축키 F10)
Step into	비동기 동작을 담당하는 코드로 진입, 필요하다면 비동기 동작이 완료될 때까지 대기
Deactivate breakpoints	모든 중단점을 활성화/비활성화
Pause on exceptions	예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화

console.log 함수 : 원하는 것을 콘솔에 출력

 

코딩스타일

 

문법 규칙

 

중괄호	여는 중괄호는 상응하는 키워드와 같은 줄에 작성, 앞에 공백 하나
가로 길이	코드의 가로 길이가 길어진다면 여러 줄로 나눠 작성
가로 들여쓰기	스페이스 두 개 혹은 네 개를 사용해 만듦
세로 들여쓰기	논리 블록 사이에 넣어 코드를 분리해주는 새 줄
세미콜론	모든 구문의 끝엔 세미콜론을 써주는 것이 좋음
중첩 레벨	가능하면 너무 깊은 중첩문은 사용하지 않도록 함

함수의 위치 : 헬퍼 함수를 여러개 만들었다면 코드를 먼저 작성하고 헬퍼 함수를 모아 선언

스타일 가이드 : 코드를 '어떻게 작성할지’에 대한 전반적인 규칙을 담은 문서

Linter : 작성한 코드가 스타일 가이드를 준수하고 있는지를 자동으로 확인

 

주석

 

리팩토링 팁 : 함수 분리하기, 함수 만들기

자기 설명적인(self-descriptive) 코드 작성

함수 이름 자체가 주석 역할을 하게 만들면 코드를 쉽게 이해할 수 있음

주석에 들어가면 좋은 내용

• 고차원 수준 아키텍처
• 함수 용례와 매개변수 정보
• 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

 

닌자 코드

 

코드 짧게 쓰기
글자 하나만 사용하기
약어 사용하기
포괄적인 명사 사용하기
철자가 유사한 단어 사용하기
동의어 사용하기
이름 재사용하기
재미로 언더스코어 사용하기
과장 형용사 사용하기
외부 변수 덮어쓰기
부작용이 있는 코드 작성하기
함수에 다양한 기능 넣기

와 내가 하고 있던 것들이라 소름

 

테스트 자동화와 Mocha

 

테스팅 자동화는 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성되었을 때 가능

Behavior Driven Development(BDD) : 테스트(test), 문서(documentation), 예시(example)를 한데 모아놓은 개념

명세서(specification) : 코드가 무슨 일을 하는지 상상한 후 이를 자연어로 표현한 산출물, 스펙(spec)

명세서의 구성

• describe("title", function() { ... }) : 구현하고자 하는 기능에 대한 설명
• it("유스 케이스 설명", function() { ... })
• assert.equal(value1, value2) : 함수가 예상한 대로 동작하는지 확인

스펙의 용도

• 테스트 – 함수가 의도하는 동작을 제대로 수행하고 있는지 보장함
• 문서 – 함수가 어떤 동작을 수행하고 있는지 설명해줌. describe와 it에 설명이 들어감
• 예시 – 실제 동작하는 예시를 이용해 함수를 어떻게 사용할 수 있는지 알려줌

 

폴리필

 

바벨(Babel) : 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줌

폴리필(polyfill) : 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트

 

---

 

😁 오늘 한 일

---

 

📕 모던 JS 튜토리얼로 공부하기

- 자바스크립트를 쭉 정리하기 위해 모던 JS 튜토리얼로 공부를 시작했어요

- 범위가 엄청 많고 아는 부분은 빨리 진행해야지 했는데 꼼꼼히 읽고 정리하다보니 시간이 오래 걸리네요!

- 이런 글 만드신 분은 정말 대단한 것 같아요. 저도 나중에 많은 분들에게 도움이 되는 사람이 될거예요!!

 

🤸‍♀️ 운동하기

- 매일 앉아있었더니 허리가 아파서 아침에 운동을 했어요

- 뻐근한 것도 풀리고 자세도 바로잡게 되고 아침 운동이 효과가 좋은 것 같아요!!

- 아래 링크 영상을 보면서 운동을 했어요 유튜브에 도움될 영상이 많네요 ㅎㅎ

 

youtu.be/sb51gF18cYo

 

🎬 영화 미저리 보기

- 오늘도 어김없이 공포가 끌려서 왓챠에서 미저리를 봤어요

- 50분정도 봤는데 내일 이어서 보려고요 아우 소름돋아

- 영화가 너무 유명해서 구해줄때부터 무서운 사람인거 알고 있었다고요ㅠㅠ

 

 

⛄ 눈사람 만들기

- 집가는 길에 눈이 많이 와서 쌓여있는 눈으로 눈사람을 만들었어요

- 맨손이라 손시려워서 눈 두개 뭉쳐서 붙이고 끝!

- 주먹크기도 안되지만 왠지 눈사람을 만들어보고 싶었어요

- 집까지 데려왔는데 아빠가 이게뭐야!했어요 ㅋㅋ