21. 07. 06
querySelector()는 id, classname, tagname 등 모두 검색이 가능하기 때문에 #을 통해 지금 id를 찾고 있음을 명확히 해주어야 함
getElementById()를 사용할 때는 id를 찾고 있음을 알기 때문에 그럴 필요가 없음
사용자가 input에 입력한 내용을 가져오기 위해서는 value를 찾아야 함
변수.length를 이용해 string의 길이를 구할 수 있음
그러나 값을 입력해야 하거나 글자수를 조절하는 것 등은 HTML에서도 그러한 기능을 구현할 수 있음
또한 HTML에서 submit 기능을 사용할 수 있기에 js에서는 더이상 click에 신경쓸 필요가 없음
이렇게 HTML의 기능을 활용하기 위해서는 input을 form 안에 위치시켜야 함
preventDefault을 통해 기본 동작을 막을 수 있음 (event.preventDefault이니 event의 기본 동작을 막을 것임)
사용자가 정보를 입력한 이후 form을 사라지게 할 수 있음
css에 이름이 hidden인 class를 만들면 그것을 어떤 요소에게든 주면 그 요소를 숨길 수 있게 됨
h1을 만들고 hidden class와 id로 greeting을 준 이후 사용자가 정보를 입력하면 form은 숨기고 h1은 나타나도록 함
사용자가 입력한 value(지금의 경우 user의 이름)를 저장하기 위해 localStorage를 사용할 수 있음
localStorage는 브라우저에 무언가를 저장하도록 함
localStorage.setItem으로 정보를 저장하고, localStorage.getItem으로 정보를 불러올 수 있음
removeItem을 이용하면 저장된 정보 삭제 가능
localStorage가 비어있으면 form을 보여주고, 유저 정보가 있으면 h1(Hello ${username})을 보여주어야 함
따라서 유저 정보의 유무를 확인해야 함
/
Momentum - Clock
interval은 매번 일어나는 일을 지칭함
매 1초마다 무슨 일이 일어나도록 만들고 싶을 때 사용하는 것이 interval
setInterval은 두 인자를 받는데, 첫째는 실행하고자 하는 function임
두번째 인자는 function의 간격을 설정할 수 있으며 그 단위는 ms(milliseconds)임
사진 속에서는 3000ms로 설정했기 때문에 3초마다 hello!가 출력되는 것을 볼 수 있음
function을 한 번만 호출하되 일정 시간이 흐른 뒤 호출할 수도 있음
setTimeout의 첫 번째 인자에 호출하고자 하는 function을 넣고, 두 번째 인자에 시간이 얼마나 지난 후 호출할지 ms단위로 넣어주면 됨
new Date()를 통해 오늘의 날짜를 가져올 수 있음
이것을 date라는 변수로 설정한다면 date.getDate(), date.getDay() 등을 통해 여러 값을 받아올 수 있음
페이지를 새로고침하면 console에 시간이 바로 출력되지 않는데, 1초를 더 기다려야 하기 때문임
페이지가 로드되자마자 getTime()을 바로 실행하기 위해서 8번째 줄의 "getTime()" function이 추가적으로 들어온 것임
시간을 console이 아닌 페이지에 나타내기 위해서 clock(html 파일에서의 h2의 id).innerText 사용
string이 최소한 2개의 문자를 갖게 하려면 (05초.. 이런 식으로) padStart function 사용
"5".padStart(2, "0")은 string의 길이로서 2를 원하며, 문자열의 길이가 2가 아니라면 5의 앞에(pad"Start"이기 때문) 0을 추가
+) 위의 경우에서 padStart를 padEnd로 바꾸면 "05"가 아닌 "50"이 출력됨
date.getHours에서 getHours는 number이기 때문에 padStart를 사용할 수 없음
number를 string으로 바꿔주기 위해 String()으로 date.getHours를 감싸줌
그 다음 string이 된 hours, minutes, seconds에 padStart function을 적용시켜주면 완성됨
/
21. 07. 07
Momentum - Quotes & Background
quotes에 인용문들을 적고 이후 quote, author 변수를 설정
이때, "quote span: first-child"로 적으면 오류가 발생하니 "span"과 "first-child"를 붙여쓸 것!
Math module을 사용할 수 있는데, 이 경우에는 Math.random()
기본적으로 random()은 0부터 1 사이의 숫자를 무작위로 제공함
이 프로젝트에서는 0부터 9까지의 숫자가 필요하기 때문에 random()에 10을 곱해줄 필요가 있음
Math.random() * 10을 하면 "3.1423233" float가 값으로 나오므로 function을 통해 이것들을 정수로 만들어줄 것임
Math.round()는 수를 반올림시킴 (1.2는 1로, 1.6은 2로)
Math.ceil()은 수를 올림시킴 (1.1을 2로)
Math.floor()은 수를 내림시킴 (1.8을 1로)
Array.length를 사용하면 array의 길이를 반환해줌
따라서 "10" 대신 "quotes.length"를 사용한다면 array 속 item의 수를 더 쉽게 알 수 있음
html 파일의 1st span과 2nd span에 todayQuote.(quote or author)을 넣어주면 완성됨
js에서 이미지를 만들고 그것을 html에 추가해야 페이지에 이미지를 띄울 수 있음 (그 이전에 img 폴더를 만들어 사용할 이미지들을 넣어둔 상태)
bgImage라는 변수를 만들기 위해서 getElementById나 querySelector이 아닌 createElement를 사용
brImage를 img 폴더의 chosenImage 변수로부터 가져오기 위해서 "brImage.src = img/${chosenImage};
이것은 결국 html 파일에 "< img src="img/0.jpg">를 넣는 것과 같은 값을 가짐
마지막으로 bgImage를 body에 추가해기 위해 appendChild()를 사용
appendChild()는 선택한 요소 안에 자식 요소를 추가함
"document.body.appendChild(bgImage);"는 html 파일의 body에 bgImage를 추가하기 위한 것임
(appendChild()를 처음 본 거라 검색해서 풀이해봤는데 이게 맞나..?🙄)
새로고침을 하니 Element에서 img가 추가된 것을 확인할 수 있었다!
Momentum - To Do List
TO DO LIST를 위해 html 파일에 form과 list를 추가
todo.js에 submit의 기본 동작(페이지 새로고침)을 막는 function을 만듦
아니 preventDefault를 썼는데 왜 새로고침이 되는거야..?
분명히 새로고침이 안 되어야 하는데 계속해서 페이지의 사진이 바뀌는 걸 보고 preventDefault 오류.. 사용법... 한참을 검색했다
greeting.js 파일에서도 사용해본 경험이 있는데 이걸 왜 못하냐구😣
prevent랑 default 철자가 틀렸나 싶어서 열심히 봤는데 아니 10번째 줄 submit 사이에 있는 "t" 뭐람
submit의 오타를 제거하고 나니 새로고침도 안 되고 console도 잘 작동한다
오늘의 교훈.. 내 손을 너무 믿지 말자🤣
그래도 서치에 힘 쏟은 덕분에 preventDefault랑 더 가까워진 것 같다¯_(ツ)_/¯
다음으로는 enter를 누를 때마다 입력된 값을 저장한 후 입력한 것을 지워야 함
toDoInput의 value를 userToDo라는 변수에 복사한 후 toDoInput의 value를 비우는 것이기 때문에 문제될 것은 없음!
paintToDo라는 새로운 function을 만들고, toDoSubmit function이 paintToDo에게 userToDo를 보내는 구조
background.js에서처럼 li를 html의 body 안에 넣고자 함
다만 list를 삭제하는 버튼을 만들 예정이기에 li를 만들고 그것의 내부에 span을 만들 것임
span을 li 아래에 넣기 위해 appendChild 사용
이후 userToDo를 통해 만들어진 list를 appendChild를 사용해 toDoList 아래에 넣으면 일차적으로 to do list 완성!
작성된 list를 삭제할 수 있는 기능을 위해 button 변수와 deleteToDo function을 만듦
그런데 단순히 button을 클릭하기만 하면 여러 list 값 중 무엇을 삭제할 것인지 알 수 없음
(다시 말해 하나의 button이 클릭된 것은 명확하나, 어떤 button이 클릭된 것인지는 모르는 상태)
submit event를 가진 것처럼 click event에 대한 정보도 있기 때문에 deleteToDo()에 event를 넣어 console.log(event); 해보면 어떤 버튼을 클릭한 것인지에 대한 좌표를 얻을 수 있음
나아가 path, target, parent를 확인할 수 있음
어떤 것이 클릭되었는지(지금의 경우 button) 아는 것에서 그치는 게 아니라 button의 parent를 얻고자 함
event.target이 button이라면 그것의 parent는 li이기 때문에 어떤 것을 삭제해야 하는지 알 수 있게 됨
event.target.parentElement를 chosenLi라는 변수로 설정한 후 remove()를 통해 제거할 수 있음
to do list 역시 localStorage로 그 정보를 브라우저에 저장할 수 있음
to do를 입력할 때마다 그 값을 array에 넣고자 한다면 to do를 화면에 띄우기 이전에 array에 그것을 push해야 함
localStorage에 toDos를 넣는 saveToDo function을 만들고 테스트 해보면 입력한 값이 나타나지만, 새로고침하면 값들이 저장되어 있지 않음
object나 array 등을 string으로 변환하고 싶다면 JSON.stringify() 사용
이후 list를 작성하면 array의 형태로 저장이 되는 것을 확인할 수 있음
/
집안에 일이 생겨 8일, 9일, 10일은 공부를 하지 못했다.. 😶
21. 07. 11
string을 JSON.parse()에 넣으면 배열을 얻을 수 있음
forEach를 사용해 array 속 각각의 item에 대해 function을 실행할 수 있음
to do list를 화면에 나타내기 위해서는 그저 paintToDo를 호출하기만 하면 됨
그러나 화면에 list가 남게 되는 것은 맞지만 새로운 것이 기존의 것을 덮어쓴다는 문제가 있음
이런 현상은 const toDos = [];라고 설정했기 때문에 toDos array가 항상 비어있는 상태로 시작되는 것임
유저가 to do를 작성하면 빈 array에 list를 그냥 push하는 것이 되기 때문에 기존의 것이 유지되지 않는 것임
문제 해결을 위해 const를 let으로 바꿔 업데이트가 가능하도록 만들고, toDos에 parsedToDo를 넣어 이전의 toDo들을 복원하게 할 것임
이후 새로고침 해보면 원하던 대로 localStorage에 to do 값들이 기록되지만, 그것들을 삭제한 후 새로고침해도 값들이 사라지지 않는 문제가 생겼음을 볼 수 있음
어떤 to do를 삭제할 것인지 명확히 하기 위해서는 id를 부여할 수 있음
랜덤한 id를 주기 위해 Date.now()를 사용할 것인데, 이것은 밀리초(1000분의 1초)를 주는 함수임
userToDo(text) 대신 object를 push
이를 위해 userToDoObj 변수를 만들고, 그것을 toDos에 push
또한 paintToDo();에 userToDo 대신 userToDoObj를 줄 것임
입력한 값이 아닌 object Object가 호출되는데, 이 문제를 해결하기 위해 paintToDo()를 바꿔야 함
paintToDo()는 text를 받았지만 이제는 object를 받으므로, span.innerText가 userToDo.text가 되어야 함
이로써 object에 id를 저장할 수 있게 됨
array에서 무언가를 삭제한다면 지우기를 원하는 item을 제외하고 새로운 array가 생성됨
filter는 forEach와 비슷한 부분이 있음
function exFilter() {} 함수를 만들고 [1, 2, 3, 4].filter(exFilter)를 작동시키면 1, 2, 3, 4에 exFilter가 차례대로 실행될 것임
여기서 exFilter() 함수는 새 array에도 1, 2, 3, 4를 포함시키고 싶다면 반드시 true를 리턴해야 함
false를 리턴한다면 그 item은 새 array에 포함될 수 없음
1, 2, 3, 4 중 3을 지우고 싶다면 item이 3이 아닌 경우 true를 리턴하도록 만들어야 함
1, 2, 4는 3이 아니므로 1 !== 3은 true
3은 3이므로 3 !== 3은 false
a, b, c 중 a를 삭제하고 싶다면 id가 제공된 값과 다른지 확인
그 결과 id가 다른 b와 c만 호출됨
id가 아닌 text를 사용해서 a를 제외시킬 수도 있음
클릭한 li의 id를 가지는 toDo를 지우고 싶으므로 (toDo) => toDo.id !== li.id
chosenLi.id는 string 타입이지만, toDo.id는 number 타입임
둘이 다르기 때문에 지워지지 않음
따라서 parseInt()를 사용해 문자열을 숫자로 바꿔줄 것임
To Do List 완성! 😉
Momentum - Weather
navigator.geolocation.getCurrentPosition()을 사용하면 브라우저에서 위치 좌표를 제공할 것임
getCurrentPosition은 두 개의 인자를 필요로 함
하나는 성공적인 경우 실행될 함수, 나머지 하나는 에러가 발생했을 때 실행될 함수
위치를 얻는 데 실패했다면 경고창을 띄우고, 성공했다면 onGeoGood을 실행할 것임
위치 제공을 허용한다면 나의 위치를 찾을 수 있음
fetch()를 이용해 url을 얻을 것임
fetch()를 사용하면 서버가 바로 응답하지 않을 수도 있음 (시간이 소요됨)
그 경우 .then()을 사용
url을 fetch하고 이후 response를 받아야 하고, response의 json을 얻어야 함 (webtube 강의 듣고 오자.. 😥)
내용을 추출하면 data를 얻을 것임
사진에서는 data에서 name과 weather을 가져오려 함
제대로 작동하는 것을 확인했으니 변수를 설정하고 index 파일에도 코드를 추가함
weather 기능 완성!
이 기능이 유독 복잡하고 어렵게 느껴져서 다시 복습하는 걸로🤣
/
Momentum 클론 코딩이 끝났다!
자바 스크립트의 기초 중에 기초만 배우고 무작정 부딪힌 거라 힘든 부분도 있었지만 차근차근 따라 하니 어떻게든 마무리 지을 수 있었다.. 😏
디자인은 천천히 신경 써보기로 ㅎㅎ
오늘은 여기서 끝내고 내일부터는 또 다른 클론 코딩에 도전해 보자 ( •̀ ω •́ )✧
수고했어 나! 🥰
