바닐라 JS로 간단하게 다크모드 구현하는 방법 1. CSS 파일에 색상 관리 변수 생성하기 :root { --text-strong: #14212B; --text-bold: #4B5966; --text-default: #5F6E76; --text-weak: #879298; --text-white-default: #FFFFFF; --text-white-weak: #FFFFFFB2; --text-point: #4362D0; --surface-default: #FFFFFF; --surface-alt: #F5F7F9; --surface-brand-default: #4362D0; --surface-brand-alt: #7890E7; --border-b..
FE/Javascipt
동기와 비동기 동기 : 순차적으로 코드가 실행됨 비동기 : 순차적으로 코드가 실행되지 않음 Promise : 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체 resolve 키워드를 사용해 실행 순서를 보장 const a () => { //인자로 콜백함수를 받지 않아도 됨 return new Promise(resolve=> { setTimeout(() => { console.log(1) resolve() //실행 순서 보장 },1000) }) } a().then(()=>{ b() }) 대기 pending : 초기 상태 이행 fulfilled : 작업이 성공적으로 안료된 상태를 의미. then을 통해 결과값 반환 가능 거부 rejected : 작업이 실패했음을 의미, catch로 ..
DOM(Document Object Model) HTML 문서를 객체로 표현한 것, JS에서 HTML을 제어할 수 있게 해줌 DOM API Dom을 통해 사용할 수 있는 명령어 집합 Node VS Element 노드가 요소보다 좀 더 상위 개념 노드 : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소 : HTML 요소만을 의미 속성 / 메소드 Document.QuerySelectorAll() : css 선택자로 검색한 모든 요소를 NodeList 형태로 반환 NodeList 객체(유사배열)는 forEach를 사용할 수 있음 N.parentElement() : 노드의 부모 요소를 반환 E.closest(‘css 선택자’) : 자신을 포함한 조상 요소 중 CSS 선택자와 일치하는 가장 가까운 요소를 ..
Event 생성과 제거 .addEventListener() : 대상에 이벤트 청취를 등록. 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출됨 .removeEventListener() : 메모리 관리를 위해 등록한 이벤트 제거 Event 객체 대상에서 발생한 이벤트 정보를 담고 있음 event.target : 이벤트가 발생한 요소 event.currentTarget : 이벤트가 등록된 요소 기본 동작 방지 event.preventDefault() : 브라우저에서 기본적으로 제공하는 동작을 방지함 버블링 이벤트 버블링 : 이벤트 전파. 즉, 작은 범위에서 넓은 범위로 이벤트가 전파되는 현상 event.stopPropagation() : 이벤트 전파 방지 캡처링 이벤트가 버블링되면서 하위 함수부터 각 ..
객체 Object .assign() : 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사하고 대상 객체를 반환 const target = {a:1, b:2} const source1 = {b:3, c:4} const source2 = {c:5, d:6} const result = Object.assign(target, source1, source2) //{a:1, b:3, c:5, d:6} const result = { ...target, ...source1, ...source2 } .entries() : 주어진 객체의 각 속성과 값으로 하나의 배열 만들어 요소로 추가한 2차원 배열을 반환 .keys() : 주어진 객체의 속성 이름을 나열한 배열을 반환 .values() : 주어진 객체의 속성 값을 ..
배열 array .length() : 배열 내 아이템의 개수 .at() : 대상 배열을 인덱싱함 → arr[0] = arr.at(0) .concat() : 배열 두개를 합쳐서 새로운 배열 반환 .every() : 대상 배열의 모든 원소가 콜백 테스트에서 참을 반환하는지 확인 const isValid = arr.every(item => item item item > 10) .findIndex() :..
날짜 date .getFullYear() / .setFullYear(): 년도를 반환 / 년도를 지정 .getMonth() / .setMonth() : 월 반환 / 지정 → 제로베이스 넘버링이 사용됨 .getDate() / .setDate() : 일 반환 / 지정 .getHours() / .setHours() : 시간 반환 / 지정 .getMinutes() / .setMinutes() : 분 반환 / 지정 .getSeconds() / .setSeconed() : 초 반환 / 지정 .getDay() : 요일 반환 → 0~6까지의 숫자 반환 .getTime() / .setTime() : 날짜 인스턴스의 밀리초로 변환 / 지정 .now() : 메소드가 호출 될 때의 밀리초 반환
수학 math .abs() : 절댓값 반환 .ceil() : 올림처리 정수 반환 .floor() : 내림처리 정수 반환 .max() : 가장 큰 값 반환 .min() : 가장 작은 값 반환 .pow() : 거듭제곱한 값 반환 .random() : 0이상 1미만의 난수 반환 .round() : 반올림 정수 반환
