그럼에도 불구하고

JSON.stringify와 JSON.parse에 대해 알아보자 [ JSON.stringify ] JSON.stringify 메서드 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. HTML 삽입 미리보기할 수 없는 소스 JSON.stringify 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다. HTML 삽입 미리보기할 수 없는 소스 [ JSON.parse ] JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(de..

data 어트리뷰트와 dataset 프로퍼티에 대해 알아보자 data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. data 어트리뷰트는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙여 사용한다. HTML 삽입 미리보기할 수 없는 소스 data 어트리뷰트의 값은 HTMLElement.dataset 프로퍼티로 취득할 수 있다. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다. DOMStringMap 객체는 data 어트리뷰트의 data-접두사 다음에 붙인 임의의 이름을 카멜 케이스로 변환한 프로퍼..

배경색을 랜덤으로 조작할 수 있는 버튼을 만들어 보자 조건 1. 버튼을 누르면 배경색을 두 가지 색이 섞인 색으로 변경시켜 준다. 2. linear-gradient로 지정되는 색깔 두 개는 같을 수 없다. 3. 만약 같은 색깔 두 개가 선정될 경우 두 번째 색상을 임의로 바꿔준다. 소스 코드 HTML 삽입 미리보기할 수 없는 소스 Script HTML 삽입 미리보기할 수 없는 소스 button을 클릭했을 때 변경할 수 있는 color를 배열로 담아놓고 랜덤함수를 통해 random1과 random2에 무작위로 0부터 5까지의 수를 초기화시킨다. 그리고 random1과 random가 같은 숫자일 경우를 검사하기 위해 checkNum 함수를 사용한다. 만약 checkNum 함수에서 확인결과 같을 경우 chan..

요소를 다루는 법에 대해 알아보자 [ 부모 / 자식 / 전 / 후 요소 읽어오기 ] ※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) 소스 코드 HTML 삽입 미리보기할 수 없는 소스 [ 부모 요소에 자식 요소 추가하기 ] ※ 동적 표시 요소를 추가하고..

숫자 뽑기 게임을 만들어보자 ※ 조건 1. 0부터 내가 선택한 숫자 범위 내에서 비교할 숫자를 입력해야 한다. 2. 비교할 숫자가 내가 선택한 숫자보다 클 수 없다. 3. 비교할 숫자는 0이거나, 음수일 수 없다. 4. 0부터 내가 선택한 숫자 범위 내에서 "Play!" 버튼을 누를 때마다 랜덤으로 숫자를 생성하여 비교할 숫자와 크기를 비교한다. 5, 비교 결과를 알려준다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

jQuery가 아닌데 변수명 앞에 $를 붙이는 경우를 알아보자 예전부터 jQuery를 쓰지 않는데 $를 붙이는 경우가 있어서 궁금했었다. 그래서 이번 기회에 그 이유를 알아보고자 한다. 보통 구글에 검색하다 보면 변수명 앞에 $가 붙는다는 것은, jQuery에서 쓰는 변수명을 의미한다는 글이 많았다. $는 jQuery에서 매우 일반적인 사용으로 변수에 저장된 jQuery 객체를 다른 변수와 구별하는 것이다. 윗 말이 제일 많았다. 혹은, jQuery가 아닐 때에도 jQuery를 사용해서 받은 것을 변수에 넣었다는 것을 표시하기 위해서?라는 말이 있었다. (jQuery를 사용하지는 않는데, jQuery를 사용해서 받은 것??? (의문) 무슨 말인지 이해가 잘 안 되고, jQuery라는 단어를 써야만 대답할..

Drag & Drop 이용하여 이미지를 올려보자 HTML 이미지를 올려주세요 업로드한 이미지 CSS 더보기 body { display: block; overflow: scroll; width: 100%; height: 100vh; } .file-zone { background-color: rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 400px); transition: 0.1s all ease-out; } .file-zone.on { background-color: rgba(97, 131, 209, 0.9)..

event.preventDefault()와 event.stopPropagation()에 대해 알아보자 [ event.preventDefault() ] event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 주로 사용되는 경우를 나열하자면, 1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음 ★ 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되서 초기..

Map에 대해 알아보자 [ Map ] Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size [ Map 객체의 생성 ] Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..

Set에 대해 알아보자 [ Set ] Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X [ Set 객체의 생성 ] Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set, 객체에 요소로 저장되지 않는다. const set1 = new ..

디스트럭처링 할당에 대해 알아보자 [ 디스트럭처링 할당 ] 디스트럭처링 할당(destructuring assignment (구조 분해 할당))은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. [ 배열 디스트럭처링 할당 ] 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. const arr = [1, 2, 3]; const [ one, two, three ] = arr; c..

스프레드 문법에 대해 알아보자 [ 스프레드 문법 ] ES6에서 도입된 스프레드 문법(spread syntax)... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments와 같이 for... of 문으로 순회할 수 있는 이 트러블에 한정된다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e ..