22 captures
11 Aug 2020 - 11 Feb 2026
Feb
MAR
Apr
23
2021
2022
2023
success
fail
About this capture
TIMESTAMPS
The Wayback Machine - https://web.archive.org/web/20220323215442/https://ko.javascript.info/tutorial/map
Show tasks
코어 자바스크립트
소개
자바스크립트란?
매뉴얼과 명세서
코드 에디터
개발자 콘솔
자바스크립트 기본
Hello, world!
alert 창 띄우기
외부 스크립트를 이용해 alert 창 띄우기
코드 구조
엄격 모드
변수와 상수
변수 가지고 놀기
올바른 이름 선택하기
대문자 상수 올바로 사용하기
자료형
문자열 따옴표
alert, prompt, confirm을 이용한 상호작용
간단한 페이지 만들기
형 변환
기본 연산자와 수학
전위형과 후위형
할당 후 결과 예측하기
형 변환
덧셈 고치기
비교 연산자
비교
if와 '?'를 사용한 조건 처리
if와 문자열 0
자바스크립트의 공식 이름
입력받은 숫자의 부호 표시하기
'if'를 '?'로 교체하기
'if..else'를 '?'로 교체하기
논리 연산자
다음 OR 연산의 결과는 무엇일까요?
OR 연산자의 피연산자가 alert 라면?
다음 AND 연산의 결과는 무엇일까요?
AND 연산자의 피연산자가 alert 라면?
OR AND OR 연산자로 구성된 표현식
사이 범위 확인하기
바깥 범위 확인하기
"if"에 관한 고찰
로그인 구현하기
nullish 병합 연산자 '??'
while과 for 반복문
반복문의 마지막 값
while 반복문의 출력값 예상하기
'for' 반복문의 출력값 예상하기
for 반복문을 이용하여 짝수 출력하기
'for' 반복문을 'while' 반복문으로 바꾸기
사용자가 유효한 값을 입력할 때까지 프롬프트 창 띄우기
소수 출력하기
switch문
"switch"문을 "if"문으로 변환하기
"if"문을 "switch"문으로 변환하기
함수
"else"는 정말 필요한가요?
'?'나 '||'를 사용하여 함수 다시 작성하기
min(a, b) 함수 만들기
pow(x,n) 함수 만들기
함수 표현식
화살표 함수 기본
화살표 함수로 변경하기
기본 문법 요약
코드 품질
Chrome으로 디버깅하기
코딩 스타일
좋지 않은 코드 스타일
주석
닌자 코드
테스트 자동화와 Mocha
잘못된 점 찾기
폴리필
객체: 기본
객체
객체야 안녕?
객체가 비어있는지 확인하기
변하지 않는 객체?
프로퍼티 합계 구하기
프로퍼티 값 두 배로 부풀리기
참조에 의한 객체 복사
가비지 컬렉션
메서드와 this
객체 리터럴에서 'this' 사용하기
계산기 만들기
체이닝
new 연산자와 생성자 함수
함수 두 개로 동일한 객체 만들기
계산기 만들기
누산기 만들기
옵셔널 체이닝 '?.'
심볼형
객체를 원시형으로 변환하기
자료구조와 자료형
원시값의 메서드
문자열에 프로퍼티를 추가할 수 있을까요?
숫자형
수를 입력받아 덧셈하기
6.35.toFixed(1) == 6.3인 이유는 무엇일까요?
숫자를 입력할 때까지 반복하기
An occasional infinite loop
A random number from min to max
A random integer from min to max
문자열
첫 글자를 대문자로 변경하기
스팸 문자열 걸러내기
문자열 줄이기
숫자만 추출하기
배열
배열은 복사가 될까요?
배열과 관련된 연산
배열 컨텍스트에서 함수 호출하기
입력한 숫자의 합 구하기
최대합 부분 배열
배열과 메서드
border-left-width를 borderLeftWidth로 변경하기
특정 범위에 속하는 요소 찾기
특정 범위에 속하는 요소 찾기(배열 변경하기)
내림차순으로 정렬하기
배열 복사본을 정렬하기
확장 가능한 계산기
이름 매핑하기
객체 매핑하기
나이를 기준으로 객체 정렬하기
배열 요소 무작위로 섞기
평균 나이 구하기
중복 없는 요소 찾아내기
Create keyed object from array
iterable 객체
맵과 셋
배열에서 중복 요소 제거하기
애너그램 걸러내기
반복 가능한 객체의 키
위크맵과 위크셋
'읽음'상태인 메시지 저장하기
읽은 날짜 저장하기
Object.keys, values, entries
프로퍼티 값 더하기
프로퍼티 개수 세기
구조 분해 할당
구조 분해 할당
최대 급여 계산하기
Date 객체와 날짜
날짜 생성하기
요일 보여주기
유럽 기준 달력
n일 전 '일' 출력하기
달의 마지막 일
몇 초나 지났을까요?
몇 초나 남았을까요?
상대 날짜 출력하기
JSON과 메서드
객체를 JSON으로 바꾼 후 다시 객체로 바꾸기
역참조 배제하기
함수 심화학습
재귀와 스택
주어진 숫자까지의 모든 숫자 더하기
팩토리얼 계산하기
피보나치 수 계산하기
단일 연결 리스트 출력하기
단일 연결 리스트를 역순으로 출력하기
나머지 매개변수와 스프레드 문법
변수의 유효범위와 클로저
Does a function pickup latest changes?
Which variables are available?
counter는 독립적일까요?
counter 객체
if 문 안의 함수
클로저를 이용하여 합 구하기
Is variable visible?
함수를 이용해 원하는 값만 걸러내기
필드를 기준으로 정렬하기
함수를 사용해 군대 만들기
오래된 'var'
전역 객체
객체로서의 함수와 기명 함수 표현식
숫자 설정과 감소가 가능한 counter 만들기
임의의 수만큼 있는 괄호를 이용해 합계 구하기
new Function 문법
setTimeout과 setInterval을 이용한 호출 스케줄링
일초 간격으로 숫자 출력하기
setTimeout 은 무엇을 보여줄까요?
call/apply와 데코레이터, 포워딩
Spy decorator
Delaying decorator
Debounce decorator
Throttle decorator
함수 바인딩
bind를 적용한 함수를 메서드에 정의하기
bind 두 번 적용하기
bind를 적용한 함수의 프로퍼티
this 값이 undefined인 함수 고치기
로그인에 부분 적용하기
화살표 함수 다시 살펴보기
객체 프로퍼티 설정
프로퍼티 플래그와 설명자
프로퍼티 getter와 setter
프로토타입과 프로토타입 상속
프로토타입 상속
프로토타입 이해하기
검색 알고리즘
어디에 프로퍼티가 추가될까요
왜 햄스터 두 마리 모두 배가 꽉 찼을까요
함수의 prototype 프로퍼티
'prototype' 변경하기
동일한 생성자 함수로 객체 만들기
내장 객체의 프로토타입
메서드"f.defer(ms)"를 함수에 추가하기
데코레이팅 "defer()"를 함수에 추가하기
프로토타입 메서드와 __proto__가 없는 객체
사전에 toString 추가하기
호출 간의 차이점
클래스
클래스와 기본 문법
클래스로 다시 작성하기
클래스 상속
인스턴스 생성 오류
시계 확장하기
정적 메서드와 정적 프로퍼티
Object를 상속받는 클래스
private, protected 프로퍼티와 메서드
내장 클래스 확장하기
'instanceof'로 클래스 확인하기
이상한 instanceof
믹스인
에러 핸들링
'try..catch'와 에러 핸들링
finally 아니면 코드만?
커스텀 에러와 에러 확장
SyntaxError 상속
프라미스와 async, await
콜백
콜백을 이용한 움직이는 원
프라미스
두 번 resolve 하기?
프라미스로 지연 만들기
프라미스로 애니메이션이 적용된 원 만들기
프라미스 체이닝
프라미스: then vs. catch
프라미스와 에러 핸들링
setTimeout에서의 에러
프라미스 API
프라미스화
마이크로태스크
async와 await
async와 await를 사용하여 코드 변경하기
async와 await를 사용해서 '다시 던지기' 예시 재작성하기
async가 아닌 함수에서 async 함수 호출하기
제너레이터와 비동기 이터레이션
제너레이터
의사 난수 생성기
async 이터레이터와 제너레이터
모듈
모듈 소개
모듈 내보내고 가져오기
동적으로 모듈 가져오기
기타
Proxy와 Reflect
존재하지 않는 프로퍼티를 읽으려고 할 때 에러 던지기
음수 인덱스를 사용해 배열 요소에 접근하기
Observable 만들기
Eval: 문자열 코드 실행하기
Eval 계산기
커링
참조 타입
문법 점검하기
'this' 값 알아내기
BigInt
브라우저: 문서, 이벤트, 인터페이스
문서
브라우저 환경과 다양한 명세서
DOM 트리
DOM 탐색하기
자식 DOM
형제 노드에 관한 질문
모든 대각선 셀 선택하기
getElement*, querySelector*로 요소 검색하기
요소 검색하기
주요 노드 프로퍼티
후손 노드 개수 세기
노드 타입 맞추기
주석 안의 태그
DOM 계층 구조와 'document'
속성과 프로퍼티
속성 가져오기
외부 링크를 주황색으로 만들기
문서 수정하기
createTextNode vs innerHTML vs textContent
요소 삭제하기
왜 'aaa' 가 남아 있을까요
리스트 생성하기
객체로부터 트리(tree) 생성하기
트리의 자손 수 나타내기
달력 만들기
setInterval을 사용한 알록달록한 시계
리스트에 HTML 삽입하기
표 정렬하기
스타일과 클래스
알림 만들기
요소 사이즈와 스크롤
What's the scroll from the bottom?
What is the scrollbar width?
Place the ball in the field center
The difference: CSS width versus clientWidth
브라우저 창 사이즈와 스크롤
좌표
Find window coordinates of the field
Show a note near the element
Show a note near the element (absolute)
Position the note inside (absolute)
이벤트 기초
브라우저 이벤트 소개
Hide on click
Hide self
Which handlers run?
Move the ball across the field
Create a sliding menu
Add a closing button
Carousel
버블링과 캡처링
이벤트 위임
Hide messages with delegation
Tree menu
Sortable table
Tooltip behavior
브라우저 기본 동작
왜 'return false'가 작동하지 않을까요
요소 안 링크 잡아내기
이미지 갤러리
커스텀 이벤트 디스패치
UI 이벤트
마우스 이벤트
선택 가능한 리스트
Moving the mouse: mouseover/out, mouseenter/leave
Improved tooltip behavior
"Smart" tooltip
드래그 앤 드롭과 마우스 이벤트
Slider
Drag superheroes around the field
Pointer events
Keyboard: keydown and keyup
Extended hotkeys
Scrolling
Endless page
Up/down button
Load visible images
폼과 폼 조작
폼 프로퍼티와 메서드
select에 옵션 추가하기
focus와 blur
수정 가능한 div
클릭해서 TD 수정하기
키보드로 쥐 움직이기
이벤트: change, input, cut, copy, paste
예금 계산기
submit 이벤트와 메서드
Modal form
문서와 리소스 로딩
DOMContentLoaded, load, beforeunload, unload 이벤트
defer, async 스크립트
Resource loading: onload and onerror
Load images with a callback
기타
Mutation observer
Selection and Range
이벤트 루프와 매크로·마이크로태스크
추가 주제
프레임과 윈도우
Popups and window methods
Cross-window communication
The clickjacking attack
Binary data, files
ArrayBuffer, binary arrays
Concatenate typed arrays
텍스트 디코더와 텍스트 인코더
Blob
File and FileReader
네트워크 요청
fetch
fetch를 사용해 Github에서 사용자 정보 가져오기
FormData
Fetch: Download progress
Fetch: Abort
CORS
왜 오리진이 필요할까요
Fetch API
URL objects
XMLHttpRequest
파일 업로드 재개하기
Long polling
웹소켓
Server Sent Events
브라우저에 데이터 저장하기
쿠키와 document.cookie
localStorage와 sessionStorage
양식 필드를 자동으로 저장하기
IndexedDB
애니메이션
베지어 곡선
CSS 애니메이션
비행기에 애니메이션 효과주기 (CSS)
Animate the flying plane (CSS)
Animated circle
JavaScript animations
Animate the bouncing ball
Animate the ball bouncing to the right
웹 컴포넌트
궤도의 높이에서
Custom elements
라이브 타이머 요소
Shadow DOM
Template element
Shadow DOM slots, composition
Shadow DOM styling
Shadow DOM and events
정규 표현식
패턴과 플래그
문자 클래스
유니코드: 'u' 플래그와 \p{...} 클래스
앵커: 문자열의 시작 ^과 끝 $
정규식 ^$
앵커 ^와 $의 여러 행 모드, 'm' 플래그
Word boundary: \b
Find the time
Escaping, special characters
Sets and ranges [...]
Java[^script]
Find the time as hh:mm or hh-mm
Quantifiers +, *, ? and {n}
How to find an ellipsis "..." ?
Regexp for HTML colors
Greedy and lazy quantifiers
A match for /d+? d+?/
Find HTML comments
Find HTML tags
Capturing groups
Check MAC-address
Find color in the format #abc or #abcdef
Find all numbers
Parse an expression
Backreferences in pattern: \N and \k<name>
Alternation (OR) |
Find programming languages
Find bbtag pairs
Find quoted strings
Find the full tag
Lookahead and lookbehind
Find non-negative integers
Insert After Head
Catastrophic backtracking
Sticky flag "y", searching at position
Methods of RegExp and String
