syleemomo의 IT 블로그 syleemomo의 IT 블로그

* 배열요소 추가, 삭제 - push, pop [배열].push(추가할 요소) 배열의 push 메서드는 인자로 주어진 값을 배열의 끝에 추가한다. 또한, 배열의 새로운 길이를 반환한다. push 메서드는 원본 배열을 변경한다. const seasons = ['spring', 'summer', 'autumn'] const arrLength = seasons.push('winter') console.log(seasons) // 변경된 원본배열 출력 console.log(arrLength) // 변경된 배열 길이 출력 위 코드는 seasons 배열에 winter 라는 문자열을 배열 끝에 추가한다. const multiplyBySix = [] for(let i=1; i 배열요소 2) return 1 // 배열요..

* 배열 검색 - indexOf, lastIndexOf, find, findIndex, includes, filter, some, every [배열].indexOf(검색할 요소, 검색 시작 위치) 배열의 indexOf 메서드는 첫번째 인자로 검색할 배열요소가 들어간다. 두번째 인자로는 검색을 시작할 인덱스 위치값을 설정하면 된다. 검색할 요소를 찾으면 해당요소의 인덱스값을 반환하고, 검색에 실패하면 -1 을 반환한다. const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat'] const searchedAnimal = animals.indexOf('cat') console.log(searchedAnimal) animals 라는 배열에서 'cat' 이라는 ..

* 스크롤 이벤트 스크롤 이벤트는 마우스 휠을 스크롤할때 발생하는 이벤트이다. 해당 이벤트를 사용하면 웹페이지에서 유용한 효과나 애니메이션을 보여줄 수 있다. * 가로 스크롤링 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 index.html 파일을 위와 같이 작성한다. 리스트 아이템이 20개가 있다. body{ background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg); } .container{ display: flex; width: 80%; height: 200px; margin: ..

* 사용자 입력 이벤트 처리하기 index.html 파일을 위와 같이 작성하자! 사용자 입력을 처리하기 위한 input 요소와 배경색상을 변경하기 위한 div 요소를 정의한다. body{ margin: 0; padding: 0; background: #0e1111; } .color-box{ background-color: #0e1111; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } #color-input{ all: unset; width: 300px; height: 50px; border: 2px solid lightgreen; padding: 10px; border-radius: 15px; color: lightgreen; fo..

이벤트 처리하기 참고문서 이벤트 입문 - Web 개발 학습하기 | MDN 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주 developer.mozilla.org * 이벤트의 개념 이벤트는 특정 사건이나 행동을 의미한다. 브라우저에서의 이벤트는 사용자가 버튼을 클릭한다든지 입력창에 뭔가를 입력하는 등의 사건을 가리킨다. * 이벤트핸들러 함수 사용자가 버튼을 클릭한더던지 입력창에 뭔가를 입력했을때 이를 처리하는 로직을 이벤트 핸들러 함수라고 한다. * 이벤트핸들러와 이벤트루프 (비동기 처리) 이벤트핸들러 함수는 자바스크립트 엔진에 의하여 이벤트루프에..

* 프로그램 에러 (error) 프로그램 에러란 말 그대로 프로그램을 실행하는 도중에 발생되는 오류를 의미한다. 에러가 발생하는 이유는 수십만가지다. 크게 문법에러와 논리에러가 있다. 문법에러는 코드를 작성하면서 자바스크립트 문법에 맞게 작성하지 않았거나, 오타가 난 경우이다. 논리에러는 문법에는 전혀 이상이 없고, 콘솔창에도 에러가 뜨지 않지만 논리적인 절차의 오류로 인하여 프로그램이 정상적으로 동작하지 않는 경우이다. * 에러를 처리하는 이유 (디버깅 목적, 신뢰성 있는 코드, 유지보수 & 디버깅) 에러가 발생하면 스크립트는 동작을 멈추고 (프로그램이 중단되고), 콘솔창에 에러가 출력된다. 프로그램이 실행되다가 도중에 멈추면 위험한 경우가 있다. 예를 들어 자율주행 차량이 스스로 운전하다가 프로그램 ..

* 비동기 (asynchronous)의 개념 프로그램이 순차적으로 실행되다가 비동기 코드를 만나면 해당 코드는 나중에 실행하라고 등록만 해놓고 다음 부분을 먼저 실행하는 것을 비동기라고 한다. 회사에서 업무를 처리하다가 시간이 오래 걸리는 작업은 후임에게 맞겨놓고 자기는 그 다음 일을 처리한 다음 후임이 해당 작업을 끝내면 보고 받는 식이다. * 비동기 (asynchronous)를 사용하는 이유와 활용 비동기의 대표적인 예는 아래와 같이 서버에서 데이터를 가져오는 등의 시간이 오래 걸리는 작업이다. const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' fetch(API_URL) .then(functio..

참고자료 DOM | PoiemaWeb 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저 poiemaweb.com * DOM 의 개념 브라우저의 DOM 은 Document Object Model 의 약자이다. 번역하면 문서 객체 모델이다. 브라우저는 렌더링 엔진을 사용하여 HTML 문서를 읽어들이고(로드하고) 해석(파싱)한다. 그런 다음 HTML 문서를 객체화(DOM)하고, DOM 트리로 만든 다음 웹화면에 렌더링한다. (웹화면에 그린다.) * DOM 출력해보기 브라우저에 의하여 생성된 DOM 은 자바스크립트가 자신을 제어할 ..