GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • 소개
  • 자바스크립트란?
  • 매뉴얼과 명세서
  • 코드 에디터
  • 개발자 콘솔
  • 자바스크립트 기본
  • Hello, world!
  • alert 창 띄우기
  • 외부 스크립트를 이용해 alert 창 띄우기
  • 코드 구조
  • 엄격 모드
  • 변수와 상수
  • 변수 가지고 놀기
  • 올바른 이름 선택하기

This view

  • Original page
  • New address

GeezerVison is showing ko.javascript.info — ko.javascript.info

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인 이유는 무엇일까요?
                                            • 숫자를 입력할 때까지 반복하기
                                            • 무한 루프
                                            • min과 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으로 바꾼 후 다시 객체로 바꾸기
                                              • 역참조 배제하기
                                          • 함수 심화학습
                                            • 재귀와 스택
                                              • 주어진 숫자까지의 모든 숫자 더하기
                                              • 팩토리얼 계산하기
                                              • 피보나치 수 계산하기
                                              • 단일 연결 리스트 출력하기
                                              • 단일 연결 리스트를 역순으로 출력하기
                                            • 나머지 매개변수와 전개 구문
                                              • 변수의 유효범위와 클로저
                                                • 함수가 최신 변경 사항을 반영할까요?
                                                • 어떤 변수가 사용될까요?
                                                • counter는 독립적일까요?
                                                • counter 객체
                                                • if 문 안의 함수
                                                • 클로저를 이용하여 합 구하기
                                                • 변수가 보일까요?
                                                • 함수를 이용해 원하는 값만 걸러내기
                                                • 필드를 기준으로 정렬하기
                                                • 함수를 사용해 군대 만들기
                                              • 오래된 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
                                                                                        • CSS width와 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)
                                                                                      • 이벤트 기초
                                                                                        • 브라우저 이벤트 소개
                                                                                          • 버튼 클릭 시 특정 요소 숨기기
                                                                                          • 클릭된 요소 숨기기
                                                                                          • 어떤 핸들러가 실행될까요
                                                                                          • Move the ball across the field
                                                                                          • Create a sliding menu
                                                                                          • Add a closing button
                                                                                          • Carousel
                                                                                        • 버블링과 캡처링
                                                                                          • 이벤트 위임
                                                                                            • 이벤트 위임을 사용해서 메시지 숨기기
                                                                                            • 트리 메뉴 구현하기
                                                                                            • 정렬 기능을 제공하는 표
                                                                                            • 툴팁 보여주기
                                                                                          • 브라우저 기본 동작
                                                                                            • 왜 '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
                                                                                                • 기타
                                                                                                  • 뮤테이션 옵저버
                                                                                                    • Selection and Range
                                                                                                      • 이벤트 루프와 매크로태스크, 마이크로태스크

                                                                                                      추가 주제

                                                                                                      • 프레임과 윈도우
                                                                                                        • Popups and window methods
                                                                                                          • Cross-window communication
                                                                                                            • The clickjacking attack
                                                                                                            • 이진 데이터와 파일
                                                                                                              • ArrayBuffer와 이진 배열
                                                                                                                • 타입이 지정된 배열 연결하기
                                                                                                              • 텍스트 디코더와 텍스트 인코더
                                                                                                                • Blob
                                                                                                                  • File and FileReader
                                                                                                                  • 네트워크 요청
                                                                                                                    • fetch
                                                                                                                      • fetch를 사용해 Github에서 사용자 정보 가져오기
                                                                                                                    • FormData 객체
                                                                                                                      • Fetch: Download progress
                                                                                                                        • Fetch: Abort
                                                                                                                          • CORS
                                                                                                                            • 왜 오리진이 필요할까요
                                                                                                                          • Fetch API
                                                                                                                            • URL objects
                                                                                                                              • XMLHttpRequest
                                                                                                                                • 파일 업로드 재개하기
                                                                                                                                  • 롱 폴링
                                                                                                                                    • 웹소켓
                                                                                                                                      • 서버 전송 이벤트
                                                                                                                                      • 브라우저에 데이터 저장하기
                                                                                                                                        • 쿠키와 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}
                                                                                                                                                                      • 생략 부호 '...'를 어떻게 찾을 수 있을까요?
                                                                                                                                                                      • HTML에서 쓰이는 색상 검출을 위한 정규표현식
                                                                                                                                                                    • 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
                                                                                                                                                                          • © 2007—2026  Ilya Kantor
                                                                                                                                                                          • 프로젝트 설명
                                                                                                                                                                          • 연락처
                                                                                                                                                                          You are visitor 01402503 — GeezerVison does not store the pages you look up.
                                                                                                                                                                          Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.