JavaScript

브라우저 사이즈 확인

console.log(window.innerWidth);
> 803
console.log(window.innerHeight);
> 608

🦴 반복 메서드

forEach()

인수(value, index, array)로 받은 함수를 배열의 요소별로 한 번식 실행한다.

let array = [1, 2, 3, 4, 5];
let sum = 0;
array.forEach(function(value){ sum += value; });
console.log(sum); // 15
array.forEach(function(v, i, arr){ arr[i] = v*v; });
console.log(array); // [1, 4, 9, 16, 25]

map()

인수(value, index, array)로 받은 함수를 배열의 요소별로 한 번식 실행하며, 마지막에 그 함수가 반환한 값으로 새로운 배열을 생성한다.
map() 메서드의 반환값은 원본 배열과 같은 개수의 원소가 들어 있는 배열이다.

let a = [1, 4, 9, 16, 25];
let b = a.map(Math.sqrt); //제곱근 구하기
console.log(b); // [1, 2, 3, 4, 5]

//객체 배열의 요소 순회
let persons = [
  {name: "Tom", age: 17},
  {name: "Huck", age: 18},
  {name: "Becky", age: 19}
];
let names = persons.map(person => person.name);
console.log(names); // ['Tom', 'Huck', 'Becky']

🦴 object[‘key’] vs object.key

[]은 변수로 접근 가능하지만, .은 바로 객체의 속성에 접근한다.
[]은 객체에 속성값이 문자열이라면 전부 접근가능하다.

let object = {
 a : 1,
 b : 2,
 "c-d": 3,
 "0e" : 4,
};
let a = 'b';
console.log(object[a] + ' vs ' + object.a); // 2 vs 1
console.log(object.c-d) // ReferenceError: d is not defined
console.log(object.0e)// SyntaxError

• object[a]에서는 a가 변수가 되어 실제로 객체 object의 속성 b의 값인 2를 출력하는
  반면, object.a에서는 a가 변수가 아닌 실제 속성 a에 접근하여 1을 출력
• object의 속성 c와 변수 d를 뺴라는 연산으로 인지하기에 error가 발생
• 참조를 할 때 숫자가 먼저 나오면 error가 발생

🦴 innerHTML vs innerText vs textContent

<div id='content'>
  Hello! 
  <span style='display:none'>innerText는 볼 수 없어😛</span>
</div>

const content = document.getElementById('content');
console.log(content.innerHTML); 
// HTML 전체를 다 가져옴
// Hello! 
// <span style='display:none'>innerText는 볼 수 없어😛</span>
-----------------------------------------------------
console.log(content.innerText);
// 사용자에게 보여지는 텍스트만 가져옴
// 숨겨진 텍스트는 사용자에게 보여지지 않기 때문에 'Hello!'만 가져옴
-----------------------------------------------------
console.log(content.textContent);
// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴
// Hello! 
// innerText는 볼 수 없어😛

innerHTML

'Element'의 속성으로, element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다.

document.documentElement.innerHTML = "<p>innerHTML</p>"
// html 코드와 작성 가능
document.documentElement.innerHTML = 
  "<span style='color:blue'>innerHTML</span>"
// 스타일 적용, 파란색으로 innerHTML 출력

document.body.innerHTML = "";
// 빈 문자열을 넣으면 body의 전체 내용을 지움

innerText

'Element'의 속성으로, element내에서 사용자에게 보여지는 텍스트 값을 가져오거나 설정할 수 있다.

document.documentElement.innerText = "<p>innerText</p>"
// html태그를 넣으면 태그도 text값으로 인식하고 
// <p>innerText</p> 문자열 그대로 출력

• 공백 문자를 제거한 채 반환
• <table>, <tbody>, <tr> 요소 등의 테이블 요소를 수정할 수 없음

textContent

'Node'의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 <script>나 <style> 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.

🦴 querySelector vs querySelectorAll

querySelector

주어진 CSS 선택자와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.

document.querySelector(selectors);

querySelectorAll

querySelector와 사용 방법은 동일하며,주어진 CSS 선택자와 일치하는 모든 요소를 반환한다. 이때, 배열과 비슷한 객체인 NodeList를 반환한다. 반환 객체가 nodeList이기에 for문 또는 forEach문을 사용한다.

elementList = parentNode.querySelectorAll(selectors);
querySelectorAll("#id,.class");
//","를 사용하면 여러 요소를 한번에 가져올 수 있음

🦴 onClick vs addEventListener

EventListener는 이벤트가 발생했을 그 처리를 담당하는 함수르 가르키며, Evnet Handler라고도 한다.
특정 element에서 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 EventListener를 실행시킨다.

onClick

• HTML 코드에 inline 방식
  • Javascript를 지원하는 모든 브라우저에서 사용 가능
  • HTML 코드에 Javascript 코드가 추가되어 가독성과 유지보수 측면에서 좋지 않음

<button onclick="btn-click">click</button>

• Javascript 코드에서 사용
  • 하나의 이벤트 리스너만 등록할 수 있음

object.onclick = function(){Script};

addEventListener

• EventListener 등록을 위한 메서드
• 같은 요소의 같은 이벤트에 EventListener를 여러개 등록할 수 있음
• HTML요소를 포함한 모든 DOM 노드에 EventListener를 등록할 수 있음
• explorer8이전 버전은 지원하지 않아 attachEvent()와 detachEvent()를 사용

object.addEventListener("clcik", script);

🦴 Cookie

HTTP Cookie(웹 쿠키, 브라우저 쿠키)란 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다.

Cookie

• 서버가 어떤 데이터를 브라우저 측에 저장한 후 다시 그 데이터를 받아오는 기술, 또는 그 데이터 자체이다.
• <이름>=<값> 형태의 단순한 문자열
• 서버에서 요청할 때마다 클라이언트에서 서버로 전송됨
• HTTP 메시지의 헤더(header) 영역을 통해서 송수신됨
• 유효기간을 설정하여 일정 기간 동안 유지될 수 있음
• 클라이언트에서 수정이 가능

Cookie를 사용하는 목적

• 세션 관리(Session management): 서버에 저장해야 할 로그인, 게임 스코어 등의 정보 관리
• 개인화(Personalization): 사용자 선호, 테마 등의 세팅
• 트래킹(Tracking): 사용자 행동을 기록하고 분석하는 용도

🦴 Cache

Cache란 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 임시 저장소이다.

Cache

• 클라이언트에서 내용 수정이 불가능함
• 요청 할 때 서버로부터 해당 리소스를 다운로드하여 캐시에 저장하고 리소스의 복사본을 반환
• 서버 부하 완화를 완하하고 빠른 페이지 로딩이 가능
• 일정 기간이 지나면 자동으로 만료되어 새로운 버전의 리소스를 가져옴
• Caching = Cache + ing, Cache를 사용하는 것

Cache 종류

• Shared Cache: 한 명 이상의 사용자가 재사용할 수 있도록 응답을 저장하는 캐시
• Private Cache: 한 명의 사용자만 사용하는 캐시

참고문서
object, https://medium.com/sjk5766/javascript-object-key-vs-object-key-차이-3c21eb49b763
innerHTML vs innerText vs textContent, https://velog.io/@kim_unknown_/JavaScript-Difftext
click event, https://goddino.tistory.com/68
cookie, https://www.daleseo.com/http-cookies/

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.