20230302TIL
반복문
반복문 만들기
for
for(최초식; 조건식; 증감문){
//반복을 수행할 코드
}
최초식 let I = 0 조건식 i<10 증감문 i = i+1(i++)
while
let I = 0;
while(I<10){
// 반복을 수행할 코드
I = I + 1
}
*종료조건 제대로 설정하지 않으면 무한 반복
for-of
배열에 주로 사용
const arr = [1, 2, 3, 4, 5]
for(let el of arr){
console.log(el)
}
el 이라는 이름으로 arr의 각 요소가 들어옴
for-in
객체에서 사용
객체 - 순회불가능 - 어떻게 반복문에 적용?
const obj = {
name : “otter”,
gender : “male”
}
for(let key in obj){
console.log(key)
}
코드 실행시 obj 객체 프로퍼티들의 key가 담겨옴
setInterval
setInterval() 반복 함수 ()안에 넣어준 함수를 지정시간마다 반복 실행
clearInterval
setInterval() 을 통해 생성된 interval을 종료해 줌.
실행될 때마다 고유의 id값 반환, 해당 아이디 체크해서 clearInterval() 함수 실행할 때 그 아이디를 ()안에 넣고 실행해주면 반복실행하던 interval 종료
전달인자, 매개변수
함수의 외부에서 데이터 받아 이용하기 위해
변수의 참조 영역
JS의 함수, 변수는 정의된 영역 안에서만 존재
→ 밖에서 참조될 수 없음
confined - 함수 안에서만 존재 → 밖엔 없음
→ return을 통해 밖으로
매개변수
밖으로 건네주는 것 + 외부의 데이터를 받아올 수 있다.
one, two 매개변수 - 함수 내에서만 존재, 안에 담긴 데이터 참조 가능, 위 코드 실행시 console.log() 는 두개의 undefined 출력(one, two)에 값 할당하지 않아서
데이터를 할당 해주는 부분은 어디?
전달인자
const paramDefine = function(one, two){
console.log(one, two)
}
paramDefine(1,2)
1,2 가 one, two 에 담기게 됨
전달인자를 담아주는 순서 → 담길 값
전달인자 : 매개변수에 할당되는 데이터
함수 재사용성 높아짐
브라우저의 Web Storage
데이터 저장공간 - 다 local 환경에 데이터 저장함,
key-value 형태로 저장(객체같이)
key-value 문자열 형태로 변환되어 저장해야sessionStorage
데이터를 세션 단위로 저장
사용자가 페이지에 접속하는 순간~ 끊어지는 순간
접속 끊기거나 종료시 데이터 영구 삭제
localStorage
도메인 단위 저장, 도메인이 같으면 path가 달라도 데이터 공유, 비휘발성 메모리→ 브라우저나 pc종료해도 남음
반영구 데이터 - 직접 storage데이터 삭제해야 없어짐
→ 사이트 재방문해도 남아있어야 하는 사용자 개별 설정 등의 데이터 저장
Session =>
사용자가 브라우저를 통해 페이지에 접속한 시점부터, 해당 접속을 종료하는 시점까지를 의미하는 단위
Domain =>
url의 프로토콜(http://) 바로 뒷부분에 따라오는 문자를 통해 도메인(localhost)을 확인할 수 있다.
"http://localhost:5500/user/login"
"http://localhost:5500/post"
// localhost라는 공통된 도메인, 서로 다른 path(/user/login, /post)
local storage 접근 방법
localStorage.setItem()
window.localStorage로 접근 가능
이때, window = 생략 가능
데이터 저장시, setItem (내장 메서드) 사용
localStorage.setItem(저장할 데이터)
데이터 : key - value
lS.setItem(’data-key’, ‘data-value’)
localStorage 확인 경로
개발자 도구
⇒ Application 탭
⇒ >Local Storage 토글localStorage - 도메인단위 저장,관리 - 도메인url클릭 - 저장한 데이터 확인
localStorage.getItem()
JS에 활용 → 데이터 꺼내와야 함
localStorage.getItem(’data-key’)
‘data-key’ 꺼내오고자 하는 데이터의 키
조건문과 Storage 데이터의 조합
저장된 데이터 + 조건문 : 다른 분기점 생성 가능
ex. 웹 페이지 타이머 시작하는 순간 그 내용이 local Storage에 저장되도록 함, 페이지 새로 로드될 때 관련 데이터가 local Storage에 저장되었는지 체크해주면 사용자가 이전에 타이머를 시작했었는지 바로 확인
const savedTimerData = localStorage.getItem( 'saved-timer-data' )
const startTimer = function() {
// 타이머를 시작하는 코드
localStorage.setItem( 'saved-timer-data', '타이머 시작에 필요한 데이터' )
}
if( savedTimerData !== null ) {
startTimer()
}