코드캠프 - 베이스캠프 13일차

eggMun·2022년 12월 27일

베이스캠프 13일차

스크립트 태그 위치

const messageContainer = document.querySelector("#d-day-message");
// d_day-message div를 가져온다
messageContainer.textContent = "D-Day를 입력해 주세요.";
// 해당 태그에 특정 텍스트를 넣어 줄수 있음

위에는 js 파일이다.
js 파일 제일 최상단에 위치해 있다.
근데 저 상태로 코드를 실행하면 오류가 생긴다.
이유는 컴퓨터가 html을 먼저 읽고 js파일을 읽기 때문이다.
그리고 컴퓨터가 코드를 읽는 과정을 파싱이라고 한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>D-Day</title>
    <link rel="stylesheet" href="./index.css" />
    <script src="./index.js"></script>
    <!--컴퓨터가 스크립트 태그를 만나면 바디태그보다 먼저 읽음 즉 js파일에 html을 태그를 이용하여 조작한다면 html 태그가 
    생성이 안되어 있기 때문에 오류가 생김 
    해결 방법은 스크립트 태그를 가장 아래로 내리는 방법과 스크립트 태그에 defer을 설정해두면 됨
    속성으로 디퍼를 설정해주면 html 해석 과정을 파싱이라고 하는데 html과 스크립트 파일 둘다 동시에
    파싱을 함-->
  </head>
  <body>
    <h1>D-Day</h1>

파싱 오류를 해결하기 위해서는 스크립트 태그 위치를 옮기는 방법이 있다.
스크립트 태그를 바디 태그에서 가장 밑으로 내리는 방법이 있다.
그러면 html 태그 생성이 되고나서 js파일을 읽기 때문에 해결이 된다.
또 다른 방법으로는 스크립트 태그를 헤드 태그에 나두고 defer속성을 이용한다.
defer속성은 html파일과 js파일 두개를 동시에 읽는다.
그러므로 html 태그가 생성이 되니 js에서도 html을 조작이 가능하다.
두 방법에는 장단점이 있다.
일단 첫번째 방법인 스크립트 태그를 가장 아래로 내리는건 자바스크립트 로딩 속도가 느려진다. 하지만 장점으로는 js 파일을 다운로드하기 전 html 코드를 모두 읽기 때문에 사용자 화면의 내용을 빨리 볼수 있다.
스크립트 태그에 defer 속성 추가 방법은 파싱 패칭이 병렬적으로 일어나기 때문에 파싱을 도중에 멈추지 않고 끝낼 수 있다. 즉 빠르게 완전한 웹페이지를 볼 수 있다.
참고 블로그: https://velog.io/@lifefm_j/script-태그의-위치에-따른-차이점
그 외에 또 다른 2가지 방법이 있다.

for문

for(let i = 0; i < 10; i = i + 1 ) {
console.log(i)
}

위에 let i = 0;은 최초식이다.
식이 끝나면 세미콜론을 붙여야 한다
최초식은 i의 선언과 동시에 값을 할당하여 반복문의 시작을 알린다.

i < 10;은 조건식이다.
조건식은 반복문이 이 조건을 충족할때 까지 반복한다.
i = i + 1;은 증감문이다.
증감문은 한 반복이 끝날때마다 실행이 된다.

console.log(i)는 반복해서 실행할 코드이다.

Object.keys()

Object.keys() 메소드에 객체를 넣어주면 객체의 key를 가져온다.

const remainingObj = {
    remainingDate: Math.floor(remaining / 3600 / 24),
    remainingHours: Math.floor((remaining / 360) % 24),
    remainingMin: Math.floor((remaining / 60) % 60),
    remainingSec: Math.floor(remaining) % 60,
  };

만약 remainingObj라는 객체가 있다면
Object.keys(remainingObj)

이렇게 키를 가져오게 된다.
const timeKeys = Object.keys(remainingObj);
timeKeys라는 변수에 저 메소드를 이용하여 remainingObj를 담는다.
그리고 remainingObj[timeKeys[i]] 이렇게 작성을 하게 된다면
키의 키값을 불러오게 된다.
이렇게 객체를 이용하는 방법이 있지만 복잡하다.

for-in 반복문

for-in 반복문은 객체에 주로 쓰는 반복문이다.

const documentObj = {
    days: document.getElementById("days"),
    hours: document.getElementById("hours"),
    min: document.getElementById("min"),
    sec: document.getElementById("sec"),
  };
for (let key in documentObj) {
   console.log(documentObj[key])
   }

위에 for-in 반복문을 쓰면 documentObj의 인덱스만큼 반복문이 작동을 하고 그 객체의 키를 key라는 개발자가 설정한 변수에 담아서 키를 가져오게 된다. 즉 Object.keys()메소드랑 비슷한 기능을 한다.
콘솔로그를 찍게 되면

이렇게 키의 키값을 가져오게 된다.

for-of 반복문

for-of 반복문은 배열에 주로 쓰는 반복문이다.

const documentArr = ["days", "hours", "min", "sec"];
for (let tag of documentArr) {
  console.log(tag)
  }

documentArr라는 배열이 있으면 tag라는 유저가 설정한 변수에 배열의 요소를 담아서 가져온다.
즉

이렇게 배열의 요소를 가져오게 된다.

시간 함수

setTimeout() = 몇초 후에 함수 실행, 이 함수는 시간 지연 함수라고도 한다.
setInterval() = 몇초 마다 반복 실행, 이 함수는 시간 반복 함수라고도 한다.

setInterval() 함수를 consol.log를 찍어보면 아이디값이 출력이 된다.
ex)1번 실행시 1, 2번 실행시 2, 3번 실행시 3, 4번 실행시 4, 5번 실행시 5

clearInterval() 함수는 setInterval() 함수를 통해 생성된 interval을 종료해주는 함수이다.

clearInterval() 함수 안에 setInterval 아이디 값을 넣으면 함수 실행을 멈춘다.

매개변수

매개변수: 함수를 선언할 떄. 소괄호 안에 정의되는 변수

Const sum = function(a, b) {
console.log(a)
console.log(b)
}

sum() ==> undefined undefined 가 출력

sum(10) ==> 10 undefined

sum(10, 20) ==> 10 20

전달인자: 함수를 호출할 때, 함수 내부로 전달되는 데이터 즉 매개변수에 담기는 데이터라고 한다.
즉 sum(10, 20)에 있는 10와 20이 전달인자라고 한다.

Web Storage

Web Storage: Browser에 데이터를 저장할 수 있는 기술이다.
웹 스토리지 기술에는 두가지 방법이 있다.
하나는 세션 스토리지, 또 하나는 로컬 스토리지 방법이 있다.

Session Storage: Key-value 형태 저장, 로컬 환경에 데이터 저장
세션 단위로 구분되며 활용
세션: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점 까지를 의미하는 단위
브라우저, 탭을 종료하면 영구 삭제된다.

Local Storage: Key-value 형태 저장, 로컬 환경에 데이터 저장
도메인 단위로 구분되며 활용
http://localhost:5500/category
여기서 localhost는 도메인 도메인 뒤에 다른 주소가 와도 공유가됨 즉 http://localhost:5500/user 에서도 같이 공유가됨
브라우저 자체를 종료해도 존재한다.

로컬스토리지에 내장된 메소드가 있다.

localStorage.setItem("saved-date", targetDateInput);
로컬스토리지 안에 있는 메소드인 셋아이템으로 앞에는 키 뒤에는 값을 넣는다.
saved-date라는 키에 타겟데이터인풋을 넣는다.
개발자옵션에서 어플리케이션 - 스토리지 - 로컬스토리지 들어가면 저장한 값을 볼수 있다.

localStorage.getItem("saved-date");
저장한 데이터를 가져오는 메소드이다.

localStorage.removeItem("saved-date");
스토리지에 저장된 데이터를 삭제해주는 메소드

false와 truthy

False에는 Undefined, Null, 0, “”, NaN가 있다.
이외의 데이터는 truthy 이다.
if문에 truthy 값을 넣어 줄 수 있다.
즉 truthy는 해당 데이터가 있다면 if문이 성립이됨.
if(truth) {
}
else{ else문은 자연스럽게 false일 경우가 됨
}