그럼에도 불구하고

여려가지 for문에 대해 알아보자 [ for .. of 문 ] for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for...of 문의 문법은 다음과 같다. for (변수선언문 of 이터러블) { ... } for...of 문은 for...in 문의 형식과 매우 유사하다. for (변수선언문 in 객체) { ... } 하지만 두가지 for문에는 차이가 있다. for...in 문의 경우 객체 혹은 유사 배열 객체라면 사용할 수 있다. 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문과 for...in 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형..

심벌에 대해 알아보자 [ 심벌 (Symbol) ] 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이기 때문에 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 다른 값과 중복되지 않는 유일무이한 값 변경 불가능한 원시 타입의 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용 [ 심벌 값 생성 ] 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않은 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); con..

정규표현식에 대해 알아보자 [ 정규 표현식 ] 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 예시 const cellphone = '010-1234-1224'; console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true 위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 정규표현식을 사용하면 반복문과 조건문 없이 ..

글자를 drag 하면 확대된 말풍선을 보여주는 코드를 만들어보자 조건 : 1. 내가 드래그한 단어 및 문단은 형광펜으로 처리한다. 2. 드래그한 단어를 확대해서 말풍선으로 드래그 영역 끝부분에 보여준다. 3. 말풍선을 누르면 말풍선이 꺼진다. HTML 더보기 가슴속에 그리고 피어나듯이 이름자를 있습니다. 우는 쉬이 추억과 노새, 어머님, 하나에 새워 청춘이 있습니다. 멀리 슬퍼하는 덮어 토끼, 하나에 아침이 위에 버리었습니다. 계집애들의 헤일 지나고 했던 내 노루, 위에 같이 흙으로 거외다. 이름과, 하나의 우는 벌써 책상을 봅니다. 내린 않은 하나에 별 내 잠, 보고, 봅니다. 하나에 별 토끼, 슬퍼하는 쉬이 까닭입니다. 없이 어머님, 위에도 까닭입니다. 자랑처럼 하나에 가을 무덤 나의 까닭이요, 없이..

마우스 이벤트에 대해 알아보자 [ mousedown ] 마우스 버튼을 누르는 시점에 발생하는 이벤트 [ mouseup ] 마우스 버튼을 떼는 시점에서 발생하는 이벤트 [ mousemove ] 마우스를 움직이는 시점에서 발생하는 이벤트 [ mouseenter ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 [ mouseleave ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 ※ 포인팅 디바이스 마우스, 터치 패드 등을 가리킴 [ mouseover ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) [ mouseout ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링) ※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스..

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자 [ 이벤트 리스너 1회 실행하기 ] addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 세 번째 인수로 지정할 수 있는 옵션은 다음과 같다. 옵션 의미 타입 capture 이벤트 캡쳐 여부 진릿값 once 리스너 1회 실행 여부 진릿값 passive 패시브 이벤트 여부 진릿값 다음 예제를 보자 버튼 버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다. [ 이벤트 리스너 삭제하기 ] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. 버튼 페이지가 실행되고 3초까..

아날로그 시계를 만들어보자 조건: 1. Date 함수를 이용한다. 2. Date 함수를 통해 각도를 구해서 사용한다. HTML 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgba(15, 14, 14, 0.889); } .container { width: 600px; height: 500px; background-color: rgba(28, 27, 27, 0.829); border-radius: 60px; margin: 25vh auto; } .clock { width: 400px; height: 400px; border-radius: 50%; background-color: rgba(37, 36..

mousemove 이벤트로 색 변환을 해보자 조건 1. 마우스를 움직일 때마다 화면의 색이 바뀜 2. 왼쪽, 오른쪽 여부 상관없이 바뀜 3. 화면의 색은 Math.random() 메서드 사용 box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 box18 box19 box20 HTML 삽입 미리보기할 수 없는 소스 ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? ); ? 는 개별 지정 필요

FileReader 객체 사용하여 image 올려보자 ref: [JavaScript] FileReader 객체에 대해 알아보자 FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, e despiteallthat.tistory.com 조건 1. 파일을 올릴 수 있는 버튼을 누르면 파일을 올린다. 2. 올릴 파일은 image로 제한한다. 3. 파일은 한 개만 올릴 수도 있고 다수도 가능하다. (여기서는 4개) 4. 각 파일마다 파일명, 사이즈, 파일타입을 알려준다. CSS 더보기 * { marg..

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

배열을 섞을 수 있는 메서드를 만들어보자. 1. 기존 배열 값은 바꾸지 않는다. (복사해서 사용) 2. 메서드를 실행할 때마다 무작위로 섞인다. [ array [ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 피셔 예이츠(Fisher Yates) 알고리즘을 사용하며, 재사용할 수 있도록 처리 작업을 함수로 만든다. ※ 피셔 예이츠 알고리즘 [ array[ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 예를 들어, 5개의 요소 [0, 1, 2, 3, 4]를 가지는 배열을 생각해보자. for문 i에 4, 3, 2, 1, 0 을 대입했을 때 Math*random()은 0 이상..

배열 오름차순, 내림차순 정렬을 해보자 조건 1. 오름차순, 내림차순 버튼이 있고 버튼을 누르면 userDataList 배열에 있는 객체 값을 보여준다. 2. 오름차순 버튼을 누르면 id가 오름차순 된 순서대로 보여준다. 3. 내림차순 버튼을 누르면 id가 내림차순 된 순서대로 보여준다. 4. 최초에는 id가 오름차순 된 순서대로 보여준다. 오름차순 내림차순 div 태그 안에 오름차순 버튼과 내림차순 버튼을 만들고, 버튼을 누르면 ul태그 안에 li 태그로 객체 값을 출력한다. 결과 HTML 삽입 미리보기할 수 없는 소스 리뷰 특별하게 어려운 건 없었는데 sortByAscending과 sortByDescending에서 return 값을 설정하는데 시간이 좀 걸린 것 같다. sort() 메서드에서 sort..