그럼에도 불구하고

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 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..

Node.js에서 코드를 실행하는 방법에는 크게 2가지가 있다. [ REPL ] Read : Read User Input Eval : Evaluate User Input Print: Print Output (Result) Loop: Wait for new Input 터미널에 node를 입력 시 REPL에 진입할 수 있다. 이는 파일 시스템 패키지에서 한 줄씩 임포트가 가능하지만, 저장은 불가능하다. 즉, 일부 기능을 실행할 때 간단하게 사용할 수 있다. 터미널에 node라고 입력하고 내가 확인하고 싶은 간단한 내용을 타이핑하면 된다. ( Node.js 가 깔려있어야 함 ) [ 파일 실행 ( Execute Files) ] js 파일을 만들어서 그 안에 소스 코드를 입력하고 터미널에서 실행시키는 방법이다. ..

Node.js란 무엇인가? Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 간단하게 말하면, Node.js의 사용 목적은 사용자에게 데이터를 회신하는 코드를 서버에 작성해서 클라이언트가 사용하게 하는 것을 말한다. ※ Node.js의 역할 Node.js로 서버 사이드 코드를 작성하고 서버에서 실행하게 한다. 브라우저를 사용하..

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 ..

layout 만들기 Ver_5 소스코드 더보기 화면 너비 1220px 초과 section { clear: both; width: 100%; height: 200px; background-color: #bebee8; display: flex; justify-content: space-around; align-items: center; } section>div { width: 15%; margin: 5%; height: 80%; background-color: #9090ed; border-radius: 20px; } 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%; } .bottom-article {..

layout 만들기 Ver_4 width 1220px 초과 width 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%;} section > div { width: 23%;} section > div:nth-child(5n) { display: none;} } section 안에 div 5번째와 10번째를 display: none;으로 만들어 한 줄에 4개씩 표시 width 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 768px) { #wrap { width: 100%;} section > div { width: 31.333333%;} section > div:nt..

Elarm Artists 사이트를 따라 해보자 https://elamartists.ac.nz/? year_select=2022&themes_select=all&practice_areas_select=all Elam Artists — The University of Auckland elamartists.ac.nz 따라 할 Elarm Artists main page 완성본 HTML 더보기 Year: 2022 2021 2020 2019 Programme: ALL BFA BFA(Hons) PGDipFA Themes: All Abstraction Affect Agency Practice: All Artist's Book Ceramics Comics Students Susu Ali senescall Alyssa K..

여려가지 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..