[TIL-106] 위코드 5일차: JS replit 21 / 자바스크립트 세션 / 개발자 도구

Javascript

 

new Date()

개념

new 연산자에 Date 생성자를 사용하여 날짜 객체를 생성할 수 있다. 그럼 컴퓨터는 GMT 기준으로 현재 시간을 알려준다. (한국 표준시는 GMT+0900이다.) 이 값을 그대로 사용하기보단, 이 값에 메서드를 사용해서 년/월/일/시/분 등 필요한 정보를 받아서 쓴다.

특정 날짜를 인자로 보내주면 해당 날짜의 Date 값을 받을 수 있다.

 

사용법

let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

// 특정 날짜를 구하기 위해 인자로 전달하는 경우
let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);

getMonth() 메서드는 현재 달보다 1 작은 값을 반환한다.

 

 

getTime()

개념

1970년 1월 1일을 기준으로 현재 날짜의 밀리초 표현을 반환한다.

 

 

const 에러

문제 인식

TypeError: Assignment to constant variable.

타입에러가 났다. const 변수를 재할당해서 문제가 되었다는 것 같다.

 

문제 해결

function getWesternAge(birthday) {
  const now = new Date();

  let age = now.getYear() - birthday.getYear();

  const nowMonth = now.getMonth();
  const birthMonth = birthday.getMonth();

  if ( nowMonth < birthMonth ) {
    age = age - 1 ;
  } else if ( nowMonth = birthMonth ) {
    if ( now.getDate() < birthday.getDate() ) {
      age--;
    }
  }
  return age;
}

1. 재할당한 변수는 일부러 let 키워드를 사용하여 선언한 age 밖에 없기 때문에 에러를 이해할 수 없었다. const 변수들은 코드의 흐름상 다시 할당할 일도 없다.
2. 혹시나 해서 const 변수를 let으로 선언해봤다. nowMonth 변수를 let nowMonth 로 바꾸니 에러가 해결됐다.
3. nowMonth가 쓰인 곳을 보니 else if 의 조건으로 nowMonth와 birthMonth 값이 같은지 비교했는데 ===(동등 비교 연산자)가 아니라 =가 써있어서 의도치않게 재할당되어버렸다...!
4. =를 ===로 고쳐서 해결했다. 일치 비교할 때 주의하기! =이 일반 수학공식에서와 달리 프로그래밍에서 대입연산자로서 변수에 값을 대입(할당)하는 데 쓰이는데, 익숙하지 않아서 자주 실수하는 부분.

 

 

---

 

Javascript Session

 

자바스크립트

• 자바스크립트는 웹페이지와 상호작용할 수 있게 만들어진 프로그래밍 언어이다. 컴퓨터는 빠른 연산과 반복에 강하다는 장점이 있기 때문에 프로그래밍 언어에서는 반복과 조건이 중요하다. 반복적으로 어떤 일을 수행할 때, 어떤 조건에서는 다르게 대처한다든지 말이다.
• 자바스크립트에서 반복이 일어나는 예로는 알림창을 띄우는 것이 있다. 어떤 조건에서 띄울 것인지에 대해 "사용자가 버튼을 눌렀을 때"라는 조건을 줄 수 있다.
• 자바스크립트에서 반복은 for문이나 while문으로, 조건은 if문으로 수행할 수 있다.

 

변수

개념

• 변수는 값을 저장하는 공간, 주머니이다.
• 변수를 선언하는 것은 그 공간을 만드는 것에, 할당하는 것은 그 공간에 값을 부여하는 것에 해당한다.

 

변수의 목적

1. 반복적으로 자주 사용되는 값을 저장하기 위해
2. 변수명을 붙임으로써 어떤 의미의 값인지 표시하기 위해

 

변수 선언 키워드

• var : 재선언, 재할당 가능. 함수 스코프.
  
• let : 재할당 가능, 재선언 불가. 블록 스코프.
  
• const : 재선언, 재할당 모두 불가. 블록 스코프.

스코프는 변수가 유효한 범위를 뜻한다. var는 함수 스코프라 외부 스코프를 오염시킬 수 있기 때문에 잘 사용하지 않는다. let과 const가 생기기 전까지는 var 변수를 함수 스코프 안에 가두기 위해 일부러 불필요한 함수를 만들어 감싸고, 또 그 함수를 실행시켜주는 방식으로 사용해왔다. 또한 협업 시 실수로 변수를 재선언할 위험도 있어서 잘 쓰지 않는다.

human error 방지하기 위해 재선언과 재할당이 불가한 const 주로 사용하고 재할당이 필요할 때만 let 사용한다.

 

 

참조 자료형

개념

데이터 타입에는 숫자, 문자열 등 기본 자료형(primitive)과 배열, 객체 등 참조 자료형(reference)이 있다. 기본 자료형에는 그 값 자체가 담기는데, 참조 자료형은 기본적으로 있는 데이터를 합쳐서 참조하는 것이다. 즉, 숫자나 문자열, 불리언 등 기본 자료형으로서 이미 있는 값을 이용해 배열이나 객체 만든다.

객체나 배열은 참조형이므로 const로 선언했어도 요소 추가하는 것이 가능하다.

• 배열 : 순서가 중요한 여러 데이터 사용할 때.
• 객체 : 특정 데이터에 대해 여러 설명들이 있을 때. 이런 정보들은 순서가 중요하지 않음. 예) 나에 대한 정보로서 이름, 나이, 직업, 주소 등.

 

 

함수

개념

함수란 실행(호출)되었을 때 특정한 동작을 수행하도록 코드를 작성해둔 것. return하면 동작이 끝난다.

 

함수 만드는 법

1. function 함수명() = {}
2. const 함수명 = function() {}
3. const 함수명 = () =>
   • es6에서 나온 화살표 함수. 화살표 함수와 그냥 함수는 기능적 차이도 좀 있음.

 

 

메서드

개념

메서드란 객체 안에 value로 들어가있는 함수이다. 메서드도 함수이므로 마찬가지로 호출하려면 () 붙여줘야한다.

 

map() & forEach()

자바스크립트 내에 이미 만들어져있는 함수(메서드)이다. 배열을 순회하면서 요소의 갯수만큼 반복하여 동작을 수행한다. 즉, 배열의 요소를 인자로 받은 callback 함수(인자로 전달되는 함수)에서 반환한 값으로 매 요소를 수정한다.

1. 배열.map() : map 함수에 배열의 요소가 인자로 넘어간다.
   • 사용법 : map 함수는 “요소“와 “인덱스” 두 개의 인자를 받는다. ()괄호 안에 들어온 요소를 매개변수로 이용하여 화살표 함수를 작성하면 된다. 
     • 예) mentors.map( (element) => { return element + ”안녕하세요“; } );
       • 인자가 하나이므로 (element)의 괄호를 생략해도 된다.
       • return 외에 따로 수행할 동작이 없기 때문에 중괄호와 return 키워드를 생략해도 된다.
     • 콜백 함수에 꼭 화살표 함수로 쓰지 않아도 된다.

       const squares = arr.map(function (x) { 
         return x * x;
       });​

   • 이때 map 메서드는 새로운 배열을 반환하기 때문에 기존의 배열은 바뀌지 않는다.
2. 배열.forEach() : map() 메서드와 같이 배열의 요소를 받아, 콜백 함수를 수행한다.
   • for문 대신 사용하는 반복 메서드.
   • map()과의 차이 : 동작을 실행할뿐, 반환하지 않는다.
     • 그래서 forEach로 전달된 콜백 함수에서도 return이 없다. forEach() 함수의 반복문을 탈출하고 싶을 때 return을 사용하면 된다.
     • 함수 안에서 alert나 console.log 등의 동작만 하면 될때 쓰면 된다.
   • 사용법

     let hasC = false;
     let arr = ['a', 'b', 'c', 'd'];
     
     arr.forEach(el => {
       if (el === 'c') {
         hasC = true;
         return;
       }
     });​

 

 

 

---

 

개발자 도구

 

Application 패널

 

local storage

• 브라우저에 데이터를 저장해뒀다가 꺼내서 사용할 수 있는 작은 데이터베이스 같은 것. 키와 값이 쌍을 이룬 객체의 형태로 저장된다.
• 만료 : 세션과 달리 브라우저가 닫혀도 저장되어있다.
• 쿠키보다 직관적이다.
• 사용 예시 : 로그인할 때 사용자로부터 받은 id 정보를 저장해서 띄워둠.

(참고: 45)

 

session storage

• 세션을 저장해두는 공간. 키와 값이 쌍을 이룬 객체의 형태로 저장된다.
• 만료 : 로컬 스토리지와 달리 브라우저가 열려있는 동안만 정보가 저장된다.
• 사용 예시 : 로그인 한 사용자를 기억하기 위해 서버로부터 

 

cookies

• 키와 값이 쌍을 이루어 ;(세미콜론)으로 구분된 문자열로 저장된다.
• 만료 : 만료 기한이 정해져있다. 따로 지정되지 않았을 경우, 세션과 같이 창이 닫힐 때 삭제되도록 정해진다.
• 사용 예시 : 로그인할 때, 사용자로부터 받은 비밀번호를 비교하기 위해 서버에서