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
• 기타
  • Mutation observer
  • Selection and Range
  • 이벤트 루프와 매크로태스크, 마이크로태스크

추가 주제

• 프레임과 윈도우
  • Popups and window methods
  • Cross-window communication
  • The clickjacking attack
• 이진 데이터와 파일
  • ArrayBuffer, binary arrays
    • 타입이 지정된 배열 연결하기
  • 텍스트 디코더와 텍스트 인코더
  • Blob
  • File and FileReader
• 네트워크 요청
  • fetch
    • fetch를 사용해 Github에서 사용자 정보 가져오기
  • FormData 객체
  • Fetch: Download progress
  • Fetch: Abort
  • CORS
    • 왜 오리진이 필요할까요
  • Fetch API
  • URL objects
  • XMLHttpRequest
  • 파일 업로드 재개하기
  • 롱 폴링
  • 웹소켓
  • 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}
    • 생략 부호 '...'를 어떻게 찾을 수 있을까요?
    • 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—2025  Ilya Kantor
• 프로젝트 설명
• 연락처