ko.javascript.info Open in urlscan Pro
2606:4700:20::681a:c11  Public Scan

Form analysis
3 forms found in the DOM

GET /search

<form class="sitetoolbar__search" method="GET" action="/search">
  <div class="sitetoolbar__search-input">
    <div class="text-input"><input class="text-input__control" name="query" placeholder="javascript.info에서 검색하기" required="required" type="text"></div><button class="sitetoolbar__find" type="submit">검색</button>
  </div>
</form>

/search/

<form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="튜토리얼 내에서 검색" required="required"><button class="tablet-menu-search__button" type="submit" name="type"
    value="articles">검색</button></form>

/search/

<form class="frontpage-search" action="/search/">
  <div class="text-input text-input_big"><input class="text-input__frontpage-search__input text-input__control" type="search" name="query" placeholder="튜토리얼 검색하기" required="required"></div><button
    class="frontpage-search__button button button_action button_big" type="submit" name="type" value="article">검색</button>
</form>

Text Content

KO
 * ARعربي
 * ENEnglish
 * ESEspañol
 * FAفارسی
 * FRFrançais
 * IDIndonesia

 * ITItaliano
 * JA日本語
 * KO한국어
 * RUРусский
 * TRTürkçe
 * UKУкраїнська

 * ZH简体中文

본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.



구매EPUB/PDF


검색
검색
튜토리얼 지도
Light themeDark theme
공유
عربيEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнська简体中文


모던 JAVASCRIPT 튜토리얼

모던 JavaScript 튜토리얼은 상세한 설명과 함께 JavaScript 기본 개념 및 고급 개념을 다룹니다.


검색
최종 업데이트 2024년 1월 4일
구매EPUB/PDF
공유:
1755 ★GitHub에서 보기Discord Chat (English)


목차

파트 1은 프로그래밍 언어로서의 자바스크립트를, 파트 2는 브라우저에서 동작하는 자바스크립트를 다룹니다. 파트 3에선 이 외의 다양한 주제를
다룹니다.

파트 1코어 자바스크립트파트 2브라우저: 문서, 이벤트, 인터페이스파트 3추가 주제


코어 자바스크립트

파트1에선 기본 문법부터 객체 지향 프로그래밍과 같은 고급 개념까지 다양한 내용을 학습합니다.

호스트 환경에 종속되지 않는 코어 자바스크립트에 집중할 예정입니다.

소개
 * 자바스크립트란?
 * 매뉴얼과 명세서
 * 코드 에디터
 * 개발자 콘솔

자바스크립트 기본
 * Hello, world!
 * 코드 구조
 * 엄격 모드
 * 변수와 상수
 * 자료형
 * alert, prompt, confirm을 이용한 상호작용
 * 형 변환
 * 기본 연산자와 수학
 * 비교 연산자
 * if와 '?'를 사용한 조건 처리
 * 논리 연산자
 * nullish 병합 연산자 '??'
 * while과 for 반복문
 * switch문
 * 함수
 * 함수 표현식
 * 화살표 함수 기본
 * 기본 문법 요약
 * 더 보기…

코드 품질
 * Chrome으로 디버깅하기
 * 코딩 스타일
 * 주석
 * 닌자 코드
 * 테스트 자동화와 Mocha
 * 폴리필

객체: 기본
 * 객체
 * 참조에 의한 객체 복사
 * 가비지 컬렉션
 * 메서드와 this
 * new 연산자와 생성자 함수
 * 옵셔널 체이닝 '?.'
 * 심볼형
 * 객체를 원시형으로 변환하기

자료구조와 자료형
 * 원시값의 메서드
 * 숫자형
 * 문자열
 * 배열
 * 배열과 메서드
 * iterable 객체
 * 맵과 셋
 * 위크맵과 위크셋
 * Object.keys, values, entries
 * 구조 분해 할당
 * Date 객체와 날짜
 * JSON과 메서드
 * 더 보기…

함수 심화학습
 * 재귀와 스택
 * 나머지 매개변수와 전개 구문
 * 변수의 유효범위와 클로저
 * 오래된 var
 * 전역 객체
 * 객체로서의 함수와 기명 함수 표현식
 * new Function 문법
 * setTimeout과 setInterval을 이용한 호출 스케줄링
 * call/apply와 데코레이터, 포워딩
 * 함수 바인딩
 * 화살표 함수 다시 살펴보기
 * 더 보기…

객체 프로퍼티 설정
 * 프로퍼티 플래그와 설명자
 * 프로퍼티 getter와 setter

프로토타입과 프로토타입 상속
 * 프로토타입 상속
 * 함수의 prototype 프로퍼티
 * 내장 객체의 프로토타입
 * 프로토타입 메서드와 __proto__가 없는 객체

클래스
 * 클래스와 기본 문법
 * 클래스 상속
 * 정적 메서드와 정적 프로퍼티
 * private, protected 프로퍼티와 메서드
 * 내장 클래스 확장하기
 * 'instanceof'로 클래스 확인하기
 * 믹스인

에러 핸들링
 * 'try..catch'와 에러 핸들링
 * 커스텀 에러와 에러 확장

프라미스와 async, await
 * 콜백
 * 프라미스
 * 프라미스 체이닝
 * 프라미스와 에러 핸들링
 * 프라미스 API
 * 프라미스화
 * 마이크로태스크
 * async와 await

제너레이터와 비동기 이터레이션
 * 제너레이터
 * async 이터레이터와 제너레이터

모듈
 * 모듈 소개
 * 모듈 내보내고 가져오기
 * 동적으로 모듈 가져오기

기타
 * Proxy와 Reflect
 * Eval: 문자열 코드 실행하기
 * 커링
 * 참조 타입
 * BigInt


브라우저: 문서, 이벤트, 인터페이스

파트2에선 브라우저 내 페이지를 다루는 방법에 대해 학습합니다. 요소 추가, 요소의 사이즈와 위치를 조정하는 방법을 비롯하여 동적으로
인터페이스를 생성하는 방법, 인터페이스를 기반으로 사용자와 상호작용 하는 방법 등에 대해 학습할 예정입니다.

문서
 * 브라우저 환경과 다양한 명세서
 * DOM 트리
 * DOM 탐색하기
 * getElement*, querySelector*로 요소 검색하기
 * 주요 노드 프로퍼티
 * 속성과 프로퍼티
 * 문서 수정하기
 * 스타일과 클래스
 * 요소 사이즈와 스크롤
 * 브라우저 창 사이즈와 스크롤
 * 좌표
 * 더 보기…

이벤트 기초
 * 브라우저 이벤트 소개
 * 버블링과 캡처링
 * 이벤트 위임
 * 브라우저 기본 동작
 * 커스텀 이벤트 디스패치

UI 이벤트
 * 마우스 이벤트
 * Moving the mouse: mouseover/out, mouseenter/leave
 * 드래그 앤 드롭과 마우스 이벤트
 * Pointer events
 * Keyboard: keydown and keyup
 * Scrolling

폼과 폼 조작
 * 폼 프로퍼티와 메서드
 * focus와 blur
 * 이벤트: change, input, cut, copy, paste
 * submit 이벤트와 메서드

문서와 리소스 로딩
 * DOMContentLoaded, load, beforeunload, unload 이벤트
 * defer, async 스크립트
 * Resource loading: onload and onerror

기타
 * Mutation observer
 * Selection and Range
 * 이벤트 루프와 매크로태스크, 마이크로태스크


추가 주제

파트 1과 2에서 다루지 않은 추가 주제를 다룹니다. 파트 3은 순서가 없습니다. 학습을 원하는 주제를 골라 읽으세요.
프레임과 윈도우
 * Popups and window methods
 * Cross-window communication
 * The clickjacking attack

이진 데이터와 파일
 * ArrayBuffer, binary arrays
 * 텍스트 디코더와 텍스트 인코더
 * Blob
 * File and FileReader

네트워크 요청
 * fetch
 * FormData 객체
 * Fetch: Download progress
 * Fetch: Abort
 * CORS
 * Fetch API
 * URL objects
 * XMLHttpRequest
 * 파일 업로드 재개하기
 * 롱 폴링
 * 웹소켓
 * Server Sent Events
 * 더 보기…

브라우저에 데이터 저장하기
 * 쿠키와 document.cookie
 * localStorage와 sessionStorage
 * IndexedDB

애니메이션
 * 베지어 곡선
 * CSS 애니메이션
 * JavaScript animations

웹 컴포넌트
 * 궤도의 높이에서
 * Custom elements
 * Shadow DOM
 * Template element
 * Shadow DOM slots, composition
 * Shadow DOM styling
 * Shadow DOM and events

정규 표현식
 * 패턴과 플래그
 * 문자 클래스
 * 유니코드: 'u' 플래그와 \p{...} 클래스
 * 앵커: 문자열의 시작 ^과 끝 $
 * 앵커 ^와 $의 여러 행 모드, 'm' 플래그
 * Word boundary: \b
 * Escaping, special characters
 * Sets and ranges [...]
 * Quantifiers +, *, ? and {n}
 * Greedy and lazy quantifiers
 * Capturing groups
 * Backreferences in pattern: \N and \k<name>
 * Alternation (OR) |
 * Lookahead and lookbehind
 * Catastrophic backtracking
 * Sticky flag "y", searching at position
 * Methods of RegExp and String
 * 더 보기…

공유
튜토리얼 지도


댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
 * 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 이슈를 만들어주세요.
 * 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
 * 댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요.
   10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.


 * © 2007—2024  Ilya Kantor
 * 프로젝트 설명
 * 연락처