6일차에는 모르는 내용을 많이 배워서 그 만큼 정리해야할 내용도 많아, 글을 쪼개서 작성할 예정이다.
기본적으로 Javascript이며 HTML과 연동하여 HTML값을 가져오거나 요소 자체를 다루는 부분에 대해서 공부했다.
다음 글은 DOM 요소를 다루는 방법에 대해 적은 글이다.
1. forEach()
기본적인 for문과 for ... in문, for ... of문은 알고 있었는데 forEach()문은 상대적으로 헷갈렸었다.
쓰는 법이 앞서 기술한 3가지와는 조금 달랐기 때문인데, 이 기회에 제대로 정리해보려고 한다.
// forEach()
// forEach(callback(currentValue, [,index [,thisArray]))
// 1. forEach()함수 안에 콜백 함수를 작성한다.
// 2. 콜백 함수에 무조건 들어가야하는 인자는 forEach()함수를 실행하면서 진행할 요소값이다.
// 3. 옵션으로 index와 forEach()문을 진행할 현재 배열을 적어줄 수 있다.
// 예시
const alphabets = ['a', 'b', 'c', 'd', 'F', 'G'];
alphabets.forEach(function(alpha){
console.log(alpha);
});forEach()에서 중요한 것은 다른 for문들과는 다르게 for키워드가 먼저 나오는 것이 아니라 반복문을 진행할 배열을 먼저 적어주고, 메소드처럼 forEach()를 사용하는 것이다.
그리고 forEach()에는 콜백 함수가 들어가야하는데, 콜백 함수에는 현재 요소값, 인덱스, 현재 배열을 넣을 수 있다.
현재 요소값은 필수로 적어줘야 하며 인덱스와 현재 배열은 옵션이기에 넣어도 되고 안 넣어줘도 된다.
그래서 위의 코드를 보면 alphabet.forEach()라는 코드를 작성했고, 콜백 함수 안에는 현재 요소 값(a부터 G까지)을 넣어주는 것을 확인할 수 있다.
2. pass by value / reference
다음 내용은 값 할당에 관한 이야기이다.
이 개념을 이해하기 위해서는 자료형에 대해서 정확하게 알고 있어야 한다.
Primitive Type(기본 자료형)과 Object Type(객체 자료형)의 개념과 어떤 차이점이 있는지 안다면 금방 이해할 수 있을 것이다.
[새싹x코딩온] 웹 개발자 부트캠프 과정 4일차 정리 | CSS flex, margin: 0 auto, animation, Javascript 기본
오늘은 CSS에서 처음 들어보는 부분에 대해서 학습했다. display: flex와 animation인데, 전에 코드를 작성했을 때는 display: inline-block과 float속성으로 주로 작업한 터라 flex가 굉장히 어려웠다. 또한 애
eoeung.tistory.com
4일차 때 학습한 내용 중에 마지막 부분인 '4. Javascript 자료형'에 정말 간단하게 정리했으니, 잘 모른다면 참고하면 된다.
두 가지의 코드를 비교해보면 어떤 차이점이 존재하는지 어렴풋이 알 수 있다.
// 1) primitive type
// - pass by value: 원시 타입은 값이 복사되어 전달
let num = 1;
let num2 = num;
console.log(num, num2, num === num2); // 1 1 true
num = 5;
console.log(num, num2, num === num2); // 5 1 false위 코드에서는 let num2 = num이 핵심인데, num에는 기본 자료형인 1을 넣었고, num2는 num과 같은 값인 1을 할당하는 것을 볼 수 있다.
num === num2가 true가 나오는 것을 볼 수 있다.
이런 상황에서 num에 5라는 값을 할당해주면 num과 num2는 아예 다른 객체라는 것을 알 수 있다.
// 2) object type
// - pass by reference
const arr = [1, 2];
arr.push(3);
console.log(arr); // [1, 2, 3] → const로 선언했음에도 불구하고 값이 변했음 → `pass by reference`라서 가능하다.
const obj = { one: 1, two: 2 };
const obj2 = obj;
console.log(obj, obj2); // { one: 1, two: 2 } { one: 1, two: 2 }
console.log(obj === obj2); // true
obj.five = 5;
console.log(obj, obj2); // { one: 1, two: 2, five: 5 } { one: 1, two: 2, five: 5 }
console.log(obj === obj2); // true → 같은 데이터이며 서로 같은 객체이다.
// → 참조값(메모리 주소, address)가 같은 객체임첫 코드는 const로 선언한 배열임에도 불구하고, 배열의 메소드인 push()를 이용해 값을 넣어주면 값이 변한다는 것을 볼 수 있다.
위의 예시와 마찬가지로 obj2 = obj로 같은 값을 할당해주고 obj2 === obj가 true인 것 까지 모두 똑같은 것을 알 수 있다.
그러나 위의 예시와 다른 점이 바로 아래에 나오는데, obj에 five라는 property로 5라는 값을 주게 되면 두 객체 모두 다른 점이 없다고 콘솔에 출력된다.
obj === obj2도 true로 나오며 두 객체가 같다고 출력된다.
그 이유는 겉보기로는 동일한 객체를 할당한 후에 새로운 값을 추가해서 다른 객체로 보이지만, 실상 obj와 obj2는 같은 데이터였으며 변수에 할당되는 것은 값(객체)가 아니라 값을 가리키고 있는 참조값(메모리 주소)를 할당했다는 것을 알 수 있다.
그렇다면 동일한 데이터를 가진 서로 다른 객체를 가지는 방법은 없을까?
그렇지 않다.
아래 코드를 보면 위의 코드와 다른 점을 알 수 있다.
const obj3 = { one: 1, two: 2 };
const obj4 = { one: 1, two: 2 };
console.log(obj3, obj4); // { one: 1, two: 2 } { one: 1, two: 2 }
console.log(obj3 === obj4); // false → 같은 데이터지만, 서로 다른 별도의 객체이다.
// → 참조값(메모리 주소, address)가 다른 객체임
obj3.five = 5;
console.log(obj3, obj4); // { one: 1, two: 2, five: 5 } { one: 1, two: 2 } → obj3에만 five 프로퍼티가 추가된 것을 볼 수 있음
console.log(obj3 === obj4); // false그렇다. a = b로 할당해준 것이 아닌, 실제로 데이터 자체를 똑같이 넣어주면 된다.
3. Date 객체
표준 내장 객체 중에 Date라는 객체가 존재한다.
얼핏 본 것 같은데 제대로 학습한 건 이번이 처음이라서 간단하게 정리해보려 한다.
// Date 객체: 시간, 날짜
let now = new Date(); // 현재 일시
console.log(now); // 2023-07-28T06:09:58.618Z
// [타임스탬프]
// → 1970년 1월 1일을 기준으로 흘러간 밀리초(ms)를 나타내는 함수
let jan_01_1970 = new Date(0);
console.log(jan_01_1970); // 1970-01-01T00:00:00.000Z
let jan_02_1970 = new Date(24 * 3600 * 1000); // 하루 = 24시간 * 60분(3600초) * 1초(1000밀리초)
console.log(jan_02_1970); // 1970-01-02T00:00:00.000Z
// new Date(date_string)
let date1 = new Date('2023-07-17');
console.log(date1); // 2023-07-17T00:00:00.000Z
let date2 = new Date('2023', '06', '17'); // MM주의 (0~11 → 1월 ~ 12월)
console.log(date2); // 2023-07-16T15:00:00.000Z
// [관련 메서드]
console.table(date1.getFullYear()); // 2023
console.table(date1.getMonth()); // 6
console.table(date1.getDate()); // 17
console.table(date1.getHours()); // 9
console.table(date1.getMinutes()); // 0
console.table(date1.getSeconds()); // 0
console.table(date1.getMilliseconds()); // 0
console.table(date1.getDay()); // 1사실 코드를 보면 전부 알 수 있는 내용이지만 중요한 부분은 new Date()로 객체를 만들어서 할당해준다는 점이다.
그리고 주의점이 있는데, new Date('년', '월', '일')로 Date 객체를 생성하는 경우에는 월을 +1해준 값으로 생성해야한다는 점이다. (00부터 11까지 존재한다고 한다.)
4. querySelector, querySelectorAll
Javascript에서 HTML요소로 접근하고 싶을 때 사용했던 방법이 여러 가지 방법이 있는데, querySelector는 처음 접해봐서 정리해보려 한다.
// [document 객체를 이용해 HTML 요소 선택]
// 1) getElementById
console.log( document.getElementById('green') );
// 2) getElementsByClassName
console.log( document.getElementsByClassName('pink') ); // 유사 배열 형태
console.log( document.getElementsByClassName('pink')[1] ); // 2
// 3) getElementsByTagName
console.log( document.getElementsByTagName('div') );
// 4) getElementsByName
console.log( document.getElementsByName('id') );
// 5) querySelector(css selector)
// → 처음 발견한 하나만 가지고 온다.
console.log( document.querySelector('.pink') ); // class
console.log( document.querySelector('#green') ); // id
console.log( document.querySelector('div') ); // <tag>
console.log( document.querySelector('[name=id]') ); // attribute
console.log("------------");
// 6) querySelectorAll(css selector)
// → 선택자에 해당되는 모든 요소를 선택
console.log( document.querySelectorAll('.pink') ); // class
console.log( document.querySelectorAll('#green') ); // id
console.log( document.querySelectorAll('div') ); // <tag>
console.log( document.querySelectorAll('[name=id]') ); // attribute
console.log( document.querySelectorAll('.pink')[0] );
console.log( document.querySelectorAll('.pink')[1] );
console.log( document.querySelectorAll('.pink')[2] );
console.log( document.querySelectorAll('.pink')[3] );코드로 살펴보면 위와 같다.
정말 많은 방법이 있는데, 간단하게 적어보면 다음과 같다.
- getElementById
- getElementByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll
많이 헷갈리는 부분이라 외워서 알기보다는 getElementBy / getElementsBy 로 깔고가면서 어떤 종류(id, class, tag, name)로 찾을 것인지 생각하면 된다.
추가적으로 태그를 단 하나만 가져올 수 있는 것이라면 getElementBy를 사용하며, 여러 가지 태그를 가지고 올 수 있는 경우에는 getElementsBy 처럼 s를 하나 더 붙여서 사용한다.
예전에는 getElement~~를 사용했었는데 정말 편리한 querySelector라는 기능이 있는 줄은 몰랐다.
CSS 선택자에 대해서만 알면 편하게 사용할 수 있다.
2023.07.24 - [IT/SeSAC] - [새싹x코딩온] 웹 개발자 부트캠프 과정 3일차 정리 | CSS 기본
[새싹x코딩온] 웹 개발자 부트캠프 과정 3일차 정리 | CSS 기본
오늘은 전반적인 CSS 기본 수업을 받았다. CSS는 기본적인 지식이 어느 정도 있었다. 이번 글은 새롭게 알게된 내용과 모호하게 알고 있던 것을 정리하는 식으로 적으려 한다. 1. CSS 선택자 CSS를 공
eoeung.tistory.com
위에 작성한 글에서 '1. CSS 선택자'에 해당 내용에 대해서 자세하게 서술했으니 잘 모르겠다면 짚고 넘어가자.
예를 들어 id라면 #id, class라면 .class, 속성이라면 [attribute = attributeValue], 태그라면 tag와 같이 범용성있고 위에 있는 getElement~~를 몰라도 편하다는 장점이 있다. (개인적으로 getElement 계열은 오타가 정말 많이나고 너무 길어서 보기 불편하다.)
또한 querySelectorAll도 존재해서 모든 요소를 가지고 올 때도 정말 편리하다.
5. 유사 배열
딱 하나의 요소가 아닌, 여러 개의 요소를 가지고 올 때는 마치 배열처럼 사용이 가능한데, forEach() 등의 for문을 종종 사용하면 에러가 나는 것을 확인할 수 있다.
querySelectorAll 등으로 여러 요소를 가지고 올 때, 마치 배열처럼 콘솔에는 출력되어 배열을 사용할 수 있을 것 같지만 HTML에서는 유사 배열이라는 개념을 사용해서 무조건 for문을 사용할 수는 없다.
기본적으로 HTML에서 사용되는 유사 배열에는 2가지가 존재한다.
- NodeList
- HTMLCollection
그렇다면 이 유사 배열을 마주치면 절대 for문을 사용할 수 없는 것일까?
그렇지는 않다.
무조건적으로 사용할 경우, 에러를 마주할 수 있을 위험성이 존재하는 것이지 안되는 것은 아니다.
아래 코드를 통해 확인해보자.
// [유사 배열]
// []식으로 생긴 배열을 의미 → 배열은 아님
// index, length는 가지고 있음
// 배열과 달리 사용 가능한 메서드가 제한되어 있음
// 1) NodeList → forEach() 가능
document.querySelectorAll('.pink').forEach(e => console.log(e));
console.log("=============");
// 2) HTMLCollection → forEach() 불가능
// → forEach()를 사용하고 싶다면, Array로 변경해줘야함
// document.getElementsByClassName('.pink').forEach(e => console.log(e)); // Uncaught TypeError: document.getElementsByClassName(...).forEach is not a function
Array.from(document.getElementsByClassName('pink')).forEach(e => console.log(e));
console.log("------------");
// [for ... of]
const pinks = document.querySelectorAll('.pink');
for(let pink of pinks){
console.log(pink);
}첫 번째인 NodeList는 다행히도 Javascript처럼 for문을 사용할 수 있다.
두 번째인 HTMLCollection은 사용이 불가능해 Array.from( HTMLCollection ) 같은 문법으로 Array 객체를 생성한 후, 사용할 수 있다.
코드에서 볼 수 있듯이 querySelector로 가져온 document element는 NodeList로 반환해서 편하게 작업할 수 있는 반면, getElement계열은 대체적으로 HTMLCollection을 반환해주는 것을 볼 수 있다.
글이 너무 길어져서 다음 내용은 6일차 정리 ②에서 서술할 예정이다.