JavaScript 92
- 자바스크립트: 오디오 음원의 음정(음높이, 피치) 조절하기 (외부 라이브러리 없이 AudioContext와 Buffer를 이용)
- CSS: 글자를 형광펜으로 칠한 듯한 효과 주기
- 자바스크립트: 두 날짜(Date) 사이의 차이(간격) 구하기
- 자바스크립트: 패스워드 안전도(강도; Strength) 표시하기
- 자바스크립트(JavaScript): 비트 연산자 (Bit Operator)
- 자바스크립트 + abcjs: 노트 프로그래밍 방식으로 하이라이트, 노트 선택(클릭) 방지하기
- CSS + 자바스크립트 예제: 스켈레톤 로딩(Skeleton Loading)
- 타입스크립트(TypeScript): HTML 요소에 이벤트 추가
- CSS 이미지에 마스킹 하기 (mask image) + 앱스토어 아이콘처럼 보이게 곡률 조정 (코너 깎기)
- 자바스크립트: 콘솔 로그(console.log)의 내용을 브라우저 HTML 내에 표시하기
- 자바스크립트 예제: 텍스트에서 유튜브(YouTube) URL을 감지하고 해당 URL을 자동으로 플레이어로 전환
- 자바스크립트 예제: 스크롤 이벤트를 사용한 이미지 지연 로딩(lazy loading) 라이브러리 없이
- ResReq.api 사이트로 빠르고 편리하게 Restful API 테스트하기
- HTML: 파비콘(favicon), 바로가기 아이콘 (iOS, 안드로이드) 설정
- HTML5: input 태그의 radio 타입 (태그, JQuery, 자바스크립트)
- 자바스크립트 예제: 한글 단어에서 을/를, 이/가, 은/는 구분하기 (받침 여부를 확인해 조사 대입)
- 자바스크립트 예제: URL 라우팅 기능 (window.history.pushState, window.location.pathname 이용)
- 자바스크립트 ES6+: Fetch에서 요청을 취소하는 방법
- 자바스크립트: 검색어 캐시 (객체에 저장, 브라우저 세션에 저장)
- 자바스크립트: 모달(modal window) 만들기
- 자바스크립트: 스크롤 상태 표시기 (스크롤 인디케이터, 라이브러리 없이 구현)
- 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이)
- 자바스크립트 예제: 추천 검색어 표시 (사용성 개선을 위한 이벤트 처리)
- 자바스크립트: Debounce, Throttle 순수 자바스크립트 (Vanilla JS)로 구현
- 타입스크립트 + 웹팩 환경에서 mp3 파일 임포트(import) 하는 방법
- 웹팩(Webpack)으로 타입스크립트 & HTML Loader 환경 설정
- 자바스크립트: 클립보드에 복사하기 기능 만들기
- Glassmorphism CSS Generator로 글래스모피즘 스타일의 CSS 만들기
- CSS: submit 버튼(button)처럼 보이도록 앵커 태그(a) 스타일 지정 - button 태그와 a 태그 스타일 통일
- 자바스크립트 ES6+: 제너레이터 함수 (generator function)
- jQuery: 제이쿼리 이미지 지연 로딩(lazy loading) 플러그인 (jQuery Lazy)
- CSS로 말풍선 툴팁 만들기 (cssarrowplease.com 이용)
- 자바스크립트(JavaScript)에서 쿼리 파라미터(query parameter) 값을 알아내는 방법
- 자바스크립트: input file에서 이미지 미리보기 기능 만들기 (한 개, 여러 개)
- 자바스크립트 예제: 2차원 정방형 배열(square array) 여러 번 회전
- 자바스크립트 ES6+: 모듈(module) 기능을 이용하여 리액트의 hook 흉내내기 (reactify)
- 자바스크립트 ES6+: 동적으로 모듈 임포트(import) 하기
- 자바스크립트: 파일을 특정 영역으로 드래그 앤 드롭하기 (라이브러리 없이)
- 자바스크립트: Snake 게임 만들기 3 - 뱀 몸체 만들기, 마무리 (完)
- 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기 & 사과(먹이) 만들기
- 자바스크립트: Snake 게임 만들기 1 - 블럭 움직이기
- 자바스크립트, HTML: 이벤트 버블링, 캡처링, 위임(delegation) - 동적 요소에 이벤트 할당
- 자바스크립트 npm: package.json의 정보 가져와 웹 페이지에 보여주기
- 자바스크립트: 배경색에 '어두움 정도' 따라 텍스트의 색상 결정하기
- 자바스크립트: 테이블의 tbody 내용 뒤집기(reverse)
- 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현
- 자바스크립트: IntersectionObserver (2) 무한 스크롤(Infinite Scroll) 구현 (라이브러리 없이)
- 자바스크립트 ES6+: fetch를 사용해 blob 데이터 받아오기 (AJAX)
- 자바스크립트: TTS(Text-to-Speech) 라이브러리 없이
- 자바스크립트 예제: 마이크 테스트
- 자바스크립트: 배열 Array.reduce
- 자바스크립트: 다국어 지원 (국제화 Internationalization) 1
- 자바스크립트: JSONP (JSON Padding) 사용법
- 자바스크립트: 운영체제의 다크 모드 정보 가져오기
- 자바스크립트 예제: 순열 및 중복순열 (어떠한 문자를 조합해서 나올 수 있는 가능한 모든 경우 나열하기)
- 자바스크립트: Fetch (외부 라이브러리 없이 AJAX 사용)
- 자바스크립트: 배열 자르기 및 합치기 (예제: 퀵 정렬, 병합 정렬)
- 자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한
- 자바스크립트 예제: 루비 문자 변환기
- 자바스크립트: 캔버스로 원 그리기 + 원을 n등분하기
- 자바스크립트: 오디오(Audio) 요소 구간반복하기
- 자바스크립트: 정규표현식 (Regular Expression; 정규식) 정리
- 자바스크립트 + abcjs: 악보 출력, Synth 플레이어 삽입
- 자바스크립트 예제: 특정 주파수의 소리 재생 + 음악 평균율 주파수 테이블
- JQuery: 선택자 최적화 (Optimize Selectors)
- 자바스크립트: 객체지향 3 - class (ES6 이상)
- 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하)
- 자바스크립트: 객체지향 1 - new 키워드를 이용해 객체 생성 (ES5 이하)
- 자바스크립트: 배열 map, filter, apply + 예제: ABC(알파벳) 내비게이터
- 자바스크립트: 배열 내 객체들의 정보를 이용해 배열을 정렬 (sort() 기능)
- 자바스크립트: AJAX로 blob 타입의 리스폰스 가져오기(파일 다운로드)
- 자바스크립트: setInterval(반복 함수) 정지하는 방법 (clearInterval 사용)
- axios: AJAX 데이터 받기 (Promise 기반) + 예제 (JSON 가져오기)
- 자바스크립트: 캔버스를 이미지 파일로 다운로드
- Node.js: Webpack + Babel과 Babel/polyfill을 이용하여 ES6으로 작성된 코드를 ES5 이하에서도 호환되게 하기
- JQuery: $.parseXML 과 IE의 WrongDocumentError 에러
- JQuery: 제이쿼리 사용법 이것저것 (select opiton, 체크박스, DOM, 위아래이동, 이벤트 부여, 배열 순회, 자식-부모 요소, AJAX, XML 파싱, 이벤트 한번만 실행 one)
- 자바스크립트 예제: 일본어 가사를 Quizlet으로 공부하자!
- 자바스크립트: 콜백, Promise, async - await 기초
- 자바스크립트: 길찾기 1 (라이브러리 이용 - EasyStar.js)
- 자바스크립트: 인터넷에서 미디(MIDI) 파일을 바로 재생하는 라이브러리(http://www.midijs.net/) + 예제: 미디 플레이어
- Three.js: 장면(scene) 추가
- Node.js Webpack: 한 번에 세팅 완료하기 (개인용)
- HTML5: Select ~ Option (태그, JQuery, 자바스크립트)
- dat.GUI: 세련된 디자인의 GUI 폼(Form)을 사용할 수 있는 자바스크립트 라이브러리
- 자바스크립트: 캔버스(Canvas) 에서 픽셀 단위로 다루기
- 자바스크립트: 색상 이름을 rgb 코드로 바꾸기.
- 자바스크립트, JQuery(제이쿼리): 테이블의 행, 열 번호 표시 & 행, 열번호로 테이블 td 접근하기 (예제: 직선 거리 측정)
- 자바스크립트: 날짜 관련 함수 + 예제(바이오리듬)
- 자바스크립트: for문 안에 setTimeout 함수 사용하는 방법 (IIFE, 재귀함수)
- 자바스크립트: 콘솔 로그(console.log) 사용법, 로그에 CSS 적용, 로그 그룹화 하기
- JQuery: 단위 변환 (pixel - mm - inch)