튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 09 - Dev Tools Domination 튜토리얼 분류: 개발자 도구 튜토리얼 설명: 개발자 도구의 다양한 기능 알아보기 진행기간: 2020년 4월 20일 HTML 요소의 속성 변화를 구체적으로 확인하기 개발자 도구 > Elements 탭 > HTML 요소 선택 후 우클릭 > Break on > attribute modifications 속성이 변화하는 순간 Debugger가 작동, Sources 탭으로 전환되어 그 변화를 만든 코드 line을 화면에 표시함 콘솔 메시지에 스타일 입히기 형태: console.log('%c문자열', 'CSS 속성값'); 콘솔로 표현식 테스트하기 형태: console.assert(표현식, 코드); 첫 번째 ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 08 - Fun with HTML5 Canvas 튜토리얼 분류: JavaScript 튜토리얼 설명: HTML5 캔버스로 무지개색으로 색깔이 변하는 선 그리기 진행기간: 2020년 4월 19일 HTML Canvas 요소 HTML 위에 그래픽 요소를 표현할 수 있는 요소 Canvas API, WebGL API, JavaScript 코드와 함께 활용됨 Canvas API는 주로 2D 그래픽을, WebGL API는 2D와 3D 그래픽을 표현하는 데 쓰임 참고자료 Canvas API - Web APIs | MDN WebGL: 2D and 3D graphics for the web - Web APIs | MDN 특징 그래픽 요소는 Canvas 요소가 아..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 07 - Array Cardio 2 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 배열 조작 메서드 연습하기 진행기간: 2020년 4월 18일 Array.prototype.find( ) 메서드의 특징 filter( ) 메서드와 유사하나, 제시된 조건에 해당하는 모든 요소가 아닌 '첫 번째' 요소만 반환하는 것이 차이점 ※ findIndex( ) 메서드 또한 제시된 조건을 만족하는 '첫 번째' 요소의 index를 반환함 원본 배열에 영향을 미치지 않고 특정 Index의 원소 제거하기 배열의 원소를 제거하는 방법으로는 splice( ) 메서드가 대표적임 단, 원본 배열의 원소 구성을 직접적으로 변화시키는 문제가 있음 sl..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 06 - Ajax Type Ahead 튜토리얼 분류: JavaScript 튜토리얼 설명: AJAX를 이용한 검색어 자동완성 기능 진행기간: 2020년 4월 17일 Fetch API AJAX를 구현하는 방법 중 하나로, 사용이 쉽고 간단함 Promise 객체를 반환하므로, Promise가 도입된 ES6 이후로 자주 쓰임 반환된 Promise 객체는 then 키워드로 활용 예시 코드 참고자료 Fetch API - Web API | MDN AJAX, XMLHttpRequest와 Fetch 살펴보기 | Dev.White 자바스크립트 fetch API 알아보기 ! Internet Explorer에서는 지원되지 않음 정규 표현식 문자열의 특정 문자 조합..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 05 - Flex Panel Gallery 튜토리얼 분류: CSS, JavaScript 튜토리얼 설명: CSS Flex를 이용한 이미지 갤러리 진행기간: 2020년 4월 16일 CSS Flex의 특징 부모 요소를 Flex 컨테이너, 자식 요소를 Flex 아이템이라고도 함 Flex 컨테이너는 자손 요소로 상속되지 않으므로, 중첩해서 만드려면 자손 요소에게도 설정해줘야 함 CSS Flex 관련 속성들 display: flex 해당 요소를 Flex 컨테이너로 설정하는 속성 flex-direction Flex 컨테이너의 방향을 설정하는 속성 기본값은 가로이며, 가로 / 가로 역순 / 세로 / 세로 역순의 4가지 중 설정할 수 있음 justify-co..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 04 - Array Cardio 1 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 배열 조작 메서드 연습하기 진행기간: 2020년 4월 15일 배열 내 원소가 중복해서 등장하는 횟수 구하기 reduce( ) 메서드의 초기값으로 객체 입력 2번째 인자로 초기값을 입력 형태: 배열.reduce( callback, 초기값 ); 반복마다 객체[key] 조작 후 반환 예시 코드 배열에서 특정 문자열을 포함하는 원소만 추출하기 filter( ) 메서드의 조건식으로 includes( ) 메서드를 입력 예시 코드 GitHub 저장소 링크