메로그

로컬스토리지, 세션스토리지 웹 개발 중 서버단에 저장하지 않아도 될 필수적이지 않은 데이터이지만, 가끔 필요로한 경우가 발생합니다. 그러한 경우에 굳이 DB 에 저장하지 않고 웹 스토리지에 저장하여 사용하는 방법이 있습니다. 웹 스토리지 기법에는 로컬스토리지와 세션스토리지가 있는데, 이 둘의 차이는 저장되는 범위 입니다. 그 외에는 사실상 같은 동작을 하고 있습니다. 저장 범위 로컬스토리지의 경우, 각 탭간의 데이터가 공유되며 세션이 끝나고 데이터가 사라지지 않습니다. 하지만, 브라우저가 다른 경우에는 공유되지 않습니다. 세션스토리지의 경우, 각 세션간에 데이터가 격리되어 사용되며, 각각의 데이터는 공유되지 않고 세션이 끝날시 데이터는 사라집니다. 예제 주의 해야할 점은 key, value 로 지원하지만..

console.log 스타일 적용하기 console.log 를 입력하여 콘솔에 나오는 로그에 스타일을 입힐 수 있습니다. 예를 들어, 티스토리 같은 사이트에 들어가면 아래와 같이 로그에 크게 TISTORY 라고 나오는 것을 볼 수 있다. 우리도 한 번 직접 만들어보자! 일반적으로 console.log 를 입력하면 우리가 아는 일반적인 로그가 찍히게 된다. 여기서 스타일을 입히기 위해서는 %c 를 사용하여 CSS 에서 사용한 스타일을 전달해줍니다. // 일반 console.log("티스토리"); // 스타일 적용 console.log("%c티스토리", "color:#ff7f00; font-size:84px;font-weight:bold;"); // 여러개 스타일 적용 console.log("%c티스토리 %..

classList, className classList, className 을 이용하여 요소에 적용된 클래스를 조회할 수 있습니다. classList 는 요소의 적용된 클래스를 리스트 형식으로 반환해주는 속성입니다. className 는 classList 를 공백으로 구분시킨 문자열입니다. 추가, 삭제 classList 의 add, remove 함수를 이용하여 클래스를 동적으로 추가하고 제거할 수 있습니다. classList.add("className"): 지정한 클래스를 추가해줍니다. classList.remove("className"): 지정한 클래스를 제거합니다. 간단한 예제를 아래와 같이 만들 수 있습니다. classList.contains 를 이용하여 클래스가 있는 경우에는 제거하고 없는 경우에..

Dom 요소(객체) 추가 document.createElement() 를 사용해서 요소를 동적으로 추가합니다. 추가한 요소에는 필요한 스타일, 속성을 추가할 수 있습니다. // 요소 생성 const newNode = document.createElement('div'); // id 속성을 추가합니다. newNode.setAttribute("id", "NewDiv"); // 필요한 스타일을 추가합니다. innerHTML, innerText 도 사용가능합니다. newNode.style.width = "300px"; newNode.style.height = "400px"; newNode.style.backgroundColor = "red"; 동적 요소 트리에 삽입 위의 추가한 요소를 Dom 트리에 삽입해보자...

원시값 원시값은 객체가 아닌 불변성을 가지고 있는 값들 입니다. 종류 string: String 전역 객체는 문자열(문자의 나열)의 생성자입니다. number: 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다 bigint: Number 원시 값이 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. boolean: 불리언 값을 감싸고 있는 객체입니다. symbol: Symbol()로부터 반환되는 모든 심볼 값은 고유합니다. null: 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. undefined: 값을 할당하지 않은 변수, 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우 종류의 대한 내용은 MDN 을 참고했..

Promise 콜백 지옥을 우리는 기억할 것이다.. 그 콜백 지옥을 해결하는 방법 중 하나로 손꼽힌다. 또한 예외처리를 쉽게 할 수 있는 방법 중 하나이다. 비동기를 처리하는 패턴 중 하나라고 보면 된다. 상태 pending(대기): 비동기 처리가 수행중이거나 초기 상태 fulfilled(이행): 비동기 처리 완료 rejected(거부): 비동기 처리 실패 아래 간단한 예제를 봐보자. 다음 3가지 상태는 아래와 같다고 생각하면 된다. const msgPromise = new Promise((resolve, reject) => { // pending const msgFunc = (msg) => { if (msg === 'success') { // fulfilled resolve('Success!'); } ..