베이스캠프 13일차 _22년 12월 28일

학습 언어

자바스크립트

 

학습 내용

 

반복문 

for문의 생김새

for(최초식; 조건식; 증감문){
	// 반복을 수행할 코드
}

• 최초식 : let i = 0
• 조건식 : i < 10
• 증감문 : i = i+1 는 i++ 로 대체 할 수 있습니다.

while문의 생김새

최초식
while( 조건식 ){
	// 반복을 수행할 코드
	증감식
}

• 최초식 : let i = 0
• 조건식 : i < 10
• 증감식 : i = i + 1
  
  

❗️while문 주의사항 ❗️
종료조건을 제대로 설정하지 않으면 무한반복됩니다.

for-of

for-of문은 배열에 주로 사용을 하게 됩니다.
반복문을 통해 배열의 요소에 접근하려면 그 인덱스 값으로 접근

const arr = [1, 2, 3, 4, 5]

for(let el of arr) {
    console.log(el)
}

for-of문은 위와 같이 작성합니다.

for-in

for-in문은 객체에서 사용하게 됩니다.

const obj = {
    name : "otter",
    gender : "male"
}

for(let key in obj) {
    console.log(key)
}

for-of와 마찬가지로 위 코드를 실행해보면
이번에는 obj 객체 프로퍼티들의 key가 담겨져 오는 것을 확인할 수 있습니다.

 

setInterval

setInterval() 함수는 반복 함수입니다.
소괄호 안에 넣어준 함수를 지정한 시간마다 반복해서 실행해 줍니다.

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

 

clearInterval

clearInterval() 함수는 setInterval() 함수를 통해 생성된 interval을 종료해주는 함수입니다.
setInterval 함수는 실행될 때마다 고유의 id 값을 반환합니다.
해당 아이디를 체크해서 clearInterval() 함수를 실행할 때, 그 아이디를 소괄호 안에 넣고 실행해주면 반복 실행하던 interval이 종료됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/clearInterval

 

전달인자, 매개변수

변수의 참조 영역

자바스크립트의 함수, 변수 는 정의되어 있는 영역 안에서만 존재하게 됩니다.
그렇기 때문에 함수 안에서 선언된 변수는 그 밖에서 참조될 수가 없습니다.

위 사진의 confined 변수는 박스로 감싸진 해당 영역 내부에 속해 있기 때문에
박스 바깥에서 confined 변수를 참조하고 있는 console.log() 명령어는 해당 변수에 접근이 불가능합니다.

그래서 코드를 실행시키면 위와 같은 에러를 만나게 되죠.
에러 내용을 살펴보면 confined라는 변수가 정의되지 않았다 고 이야기합니다.
confined 변수는 함수의 영역 안에서만 존재하기 때문에 밖에서는 해당 변수가 존재조차 하지 않는 것이죠.
그래서 우리는 함수 내부에 존재하는 데이터를 return을 통해서 그 밖으로 건네줄 수가 있었습니다.

매개변수

함수는 데이터를 밖으로 건네주는 것 뿐만 아니라, 외부의 데이터를 받아온 후 가공, 혹은 로직을 수행하는 것도 가능합니다.
이때, 사용하게 되는 개념이 바로 매개변수입니다.
우리가 함수를 정의할 때는 매개변수라고 하는 함수 내부에서 사용할 변수를 선언해 줄 수 있습니다.

one, two는 우리가 paramDefine이라는 함수를 정의할 때, 함께 정의되는 매개변수 입니다.
우리가 함수 내부에서 변수를 선언했을 때처럼 매개변수는 해당 함수 내부에서만 존재 하게 됩니다.
그리고 매개변수 또한 하나의 변수이기 때문에 그 안에 담긴 데이터를 참조할 수도 있습니다.
위의 코드를 실행시키면 console.log() 명령어는 두개의 undefined를 출력하게 될겁니다.

전달인자

함수를 정의할 때, 매개변수를 함께 정의해줬다면 함수를 호출하는 과정에서 전달인자 를 건네줄 수 있습니다.

 

 

브라우저의 Web Storage

웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할 공간이 필요합니다.
웹 브라우저는 Web Storage라고 하는 저장소를 제공 하는데, seesionStorage 와 localStorage 를 활용할 수 있습니다.
두개의 storage는 공통점을 가지게 됩니다.
먼저 두 storage 모두 local 환경에 데이터를 저장 한다는 특징을 공통점으로 가집니다.
또 다른 공통점으로는 데이터가 key-value 형태로 저장 이 됩니다. 마치 객체와 같죠.
이때, key와 value는 모두 문자열 형태로 변환되어 저장이 되어야 합니다.
공통점이 있다면 차이점도 존재를 하겠죠.

sessionStorage

sesstionStorage는 데이터를 세션 단위로 저장합니다.
여기서 이야기하는 세션은 사용자가 페이지에 접속하는 순간부터 접속이 끊어지는 순간까지 를 이야기합니다.
즉, sessionStorage는 해당 페이지와 접속이 끊어지거나 브라우저를 종료하게 되면 해당하는 세션 저장소의 데이터를 영구히 삭제 해 버립니다. 휘발성 메모리인 것이죠.

localStorage

localStorage는 데이터를 도메인 단위로 저장이 되며, localStorage에 저장된 데이터는 도메인이 같다면 path가 다르더라도 서로 데이터를 공유 하게 됩니다.
또한, locaStorage는 비휘발성 메모리이기 때문에 저장된 데이터가 브라우저, pc를 종료하더라도 그대로 남아있게 되죠.
반영구적인 데이터여서 직접 Storage 데이터를 삭제할 때까지 존재합니다.
이러한 특징 때문에 페이지를 재방문 했을 때도 남아있어야 하는 사용자 개별 설정 등의 데이터를 저장하게 됩니다.

local storage 접근 방법

웹 브라우저는 sessionStorage와 localStorage를 가집니다.
Web Storage는 데이터를 저장하는 공간이죠.
그렇다면 데이터를 저장하는 방법과 해당 데이터를 참조하는 방법이 존재할 것입니다.
우리는 JavaScript를 명령어를 사용해서 localStorage에 데이터를 저장하고 참조하는 방법에 대해 알아볼겁니다.

localStorage.setItem()

localStorage는 window.localStorage로 접근할 수 있습니다.
그리고 localStorage의 앞에 적혀지는 window는 생략이 가능합니다.
localStorage에 접근했다면, 이제 데이터를 저장해야겠죠.
데이터를 저장할 때는 localStorage에 내장되어 있는 setItem이라는 메서드 를 사용하면 됩니다.

localStorage.setItem()

setItem 뒤에 있는 소괄호 안에 저장할 데이터를 넣어주면 됩니다.
Web Storage의 데이터는 key-value 형태 로 저장이 된다고 했었죠?
소괄호 안에 두개의 인자를 넣어주면 되는데, 첫번째 인자로 key 를, 두번째 인자로 value, 저장할 데이터를 담아주면 됩니다.

localStorage.setItem('data-key', 'data-value')

그렇게 하면 형식에 맞춰 key-value 형태로 데이터가 저장되죠.

데이터를 저장했다면, 그 데이터를 활용하기 위해 저장된 데이터를 확인하고 참조해올 수 있어야 겠죠.
먼저 저장된 localStorage 데이터는 개발자 도구 내에서 직접 확인할 수 있습니다.

❗️ localStorage 확인 경로

개발자 도구 ⇒ Application 탭 ⇒ >Local Storage 토글

해당 위치로 이동해, 토글을 열어 보면 우리가 저장한 데이터를 확인할 수 있는데요.
localStorage는 도메인 단위로 데이터가 저장되고 관리되기 때문에 현재 접속해 있는 도메인의 url을 클릭 해서 우리가 저장한 데이터를 확인할 수 있습니다.

localStorage.getItem()

localStorage에 저장된 데이터를 JavaScript에서 활용하기 위해서는 데이터를 꺼내와야겠죠.
아래의 명령어로 localStorage에 존재하는 데이터를 꺼내올 수 있습니다.

localStorage.getItem()

이때, 위의 소괄호 안에는 꺼내오고자 하는 데이터의 key를 적어주시면 됩니다.

localStorage.getItem(’data-key’)

데이터의 올바른 key를 적었다면, 그와 연결된 값을 가져오게 됩니다.

 

조건문과 Storage 데이터의 조합

localStorage에 저장되어 있는 데이터를 조건문과 결합하면, 사용자가 이전에 어떠한 동작을 수행했는지에 따라 다른 분기점을 만들어줄 수 있습니다.
예를 들어 웹 페이지의 타이머를 시작하는 순간 그 내용이 localStorage에 저장되도록 해주는겁니다.
그리고 페이지가 새로 로드될 때, 해당 내용과 관련된 데이터가 lcoalStorage에 저장되어 있는지를 체크해주면 사용자가 이전에 타이머를 시작했었는지 바로 확인이 가능