728x90 코드캠프16 훈훈한 Javascript (17) 2. 브라우저의 web storage 새로고침 버튼 누르면 타이머가 종료되어버림. 카운트 다운 유지되는 방법 만들기 웹스토리지 이용 key - value 형태(키와 값이 쌍이 돼서)로 저장 = 객체처럼 저장 어떠한 데이터에 이름(key)을 지정해줘서, 그 값으로 원하는 형태의 데이터를 저장. 데이터를 전달해주면 백엔드 엔지니어 분들이 해당 데이터를 데이터 베이스에 저장할 수 있도록 작성을 해줌 세션 스토리지, 로컬 스토리지 사용하게 되면 적은 양의 데이터를 로컬 환경에 저장할 수 있음. 세션과 로컬 스토리지 마찬가지. localhost - 도메인 도메인 에서 저장된 로컬스토리지 데이터는 뒤에 어떠한 url 이 오든 모두 공유가 될 수 있음. user ( 이 부.. 2023. 9. 16. 훈훈한 Javascript (16) 1. 함수의 인자와 매개변수 전달인자, 매개변수 웹 스토리지 우선 구현한 것에서 올바르지 않은 날짜를 입력해도 D-day를 입력해주세요 만 뜨는 상태이다. 이 부분때문에 제대로 된 메시지 받지 못하고 있는 것. 이 부분을 고쳐주기 위해서 함수 하나 더 만들어주기. restTimer 함수 생성 해당 드래그 부분을 restTimer 함수 내부로 이동. setClearInterval(); 이것도 내부에서 사용. innerHTML 조작하는 부분을 restTimer 함수로 빼 줌으로서 원하는 메시지 출력받을 수 있게 됨 - 이 부분 헷갈림. 어떤 원리인지 restTimer 로 변경 바로 박스에 날짜 수정해주면 생기는 오류 고쳐주기. 이 함수 자체가 반복실행 되고 있는 것. 1초마다 counterM.. 2023. 9. 16. 훈훈한 Javascript (15) 9. clearInterval setInterval() = 함수 대부분의 함수는 return 을 해준다. 함수를 실행만하고 return 을 안 해준 상태. (리턴 값 받지 않음) 리턴값을 받기 위해서 변수에 담아봄 intervalId 라는 변수 tagetDateInput 변수와 똑같은 형식인 것임. const targetDateInput = dateForMaker(); targetDateInput => 리턴 데이터를 여기에 담아준 것 그리고 targetDate = new Date( targetDateInput ) 이렇게 사용해줬었다. intervalId 라는 변수에 뭐가 담겨져 있을 지 console.log 를 통해 확인해보기. 값 넣어주고 버튼 눌러줌 => 숫자 1 나옴 => 버튼 한 .. 2023. 9. 14. 훈훈한 Javascript (14) 7. 반복문을 사용한 텍스트 갱신 일반적으로 카운트 다운이라고 하면 시간초가 줄어드는게 보여야 한다. for 문 써주고 counterMaker 함수가 100번 반복하도록 해줌. = 별 차이 안보임 = 100번을 빠르게 반복해서 실행해주고 있는 상태. = 너무 빨라서 보이지 않는 것 자바스크립트에 코드의 실행을 늦춰주는 기능 = setTimeout 화살표 함수 fn 사용 이것도 함수 (익명함수) () => { } 익명함수를 setTimeout 함수에 작성 counterMaker 함수를 안에 넣어준다. 그리고 콤마 + 5000 시간이 지연되면서 보여진다. 5000 = 5000 밀리 초 ( = 5초 ) 1000 * i 적용 i = 1 씩 증가 1초마다 실행되고 있음. 근데 100 (i < 10.. 2023. 9. 12. 훈훈한 Javascript (12) 질문 Q: 5:29 대에서 숫자 0이 i에 들어가고 0 번째 인덱스 값을 가진 요소 1을 갖고 올 수 있고, 코드 실행해주고 i(0)이 1 증가되니 arr.length = 길이가 5 니까 i < 5 를 조건식으로 해석해서 i[0] ~ i[4] 까지 인덱스를 기준으로 출력하므로 (arr[0] ~ arr[4] 를 의미한건데 잘못 표현) 1,2,3,4,5 가 출력 되는게 제가 맞게 이해한 걸까요? A: Q: for ( let i = 0; i < timeKeys.length; i = i + 1 ) { console.log (timeKeys[i]) } 에서 timekeys도 배열이고 똑같이 길이(length) 갖고 있으니까, 길이만큼 반복 하는 거니까 ( 길이 =4 ), timeKeys[0] timeKeys[1] ti.. 2023. 9. 11. 훈훈한 Javascript (13) 6. for - of 와 for - in = 객체 in 에다가 객체 이름 적어준다. key 라는 걸 console.log로 확인해보니 documentObj의 key 값들이 빠져나오는 걸 확인할 수 있다. for - in 문은 객체에 사용해줌. 반복문 안에서 사용할 객체(documentObj)를 in 뒤에다가 적어주면 된다. 변수를 선언하듯 let 을 써주고, 뒤에 key를 받아옴 ( key 에 담겨져 있던 것들은 주어진 객체안에 있는 프로퍼티의 키. ) ( let key in documentObj ) = documentObj 객체에 있는 프로퍼티들의 키들을 key 라는 변수로 받아오는 것 실제로 let 옆의 key 는 변수 a 라고 명칭을 바꿔도 변수의 역할을 .. 2023. 9. 4. 이전 1 2 3 다음 728x90
