[노마드코더] 바닐라 JS 챌린지(6/12~24)

 

---

6/14 수

 

const 갱신 불가능

let 갱신 가능(변수를 업뎃하고 싶다면  let사용)

 

always const

sometimes let

never var

 

변수에는 num(숫자), string(문자), boolean(true, false), null(포장한 빈 상자, 비어있음), undefined(포장하지 않은 빈 상자, 할당 가능) 모두 저장 가능

 

데이터 정리

-> array  ex) const days = [1, 2, false, "text"]

데이터 순서 : array[0] array[1] array[2] ... 0번째부터 시작 ! ! !

arrayName.push("add")-> array 맨끝에 "add"값 추가 /  arrayName[1]="modify"-> array 2번째 값을 "modify"로 수정

 

연관되어 있는 property

console은 사실 object였음

 

 

 

 

console 안에 console 넣기

콘솔 했을 때 나오는 f는 function(함수)

 

 

 

object에서 한 개의 element를 가져올 수 있음.

element 갱신도 가능.

element 추가도 가능

 

 

<- function 만들고 function 안에서 data 받는 방법

 

data의 순서가 중요함. 두번째 줄의 경우 potato=1.33453  salad=9898

인 반면, 세번째 줄의 경우 potato=9898  salad=1.33453 임.

많은 argument를 보내도 potato, salad 두개만 받음. 함수 밖에서 potato, salad 사용 불가능

 

니코쌤이 내주신 숙제 

계산기 만들기

틀만 알고 있다면 쉬운 문제 ! ! !

근데 내가 저 코드들을 잘 외울 수 있을까

하다보면 익숙해지겠지

 

S W E E T  W O R K 💗

 

 

 

 

 

 

 

 

 

console 사용하지 않기 -> fuction 밖에서 결과값을 얻으려고. 

calKrAge를 실행시키면 100이라는 argument가 age자리로 대체됨.

그 100이 ageOfFor 자리로 가게 되고 100+2를 return 하게 됨.

 

앞으로는 콘솔에 출력하려고 func 쓰지 않고 대신 어떤 작업을 처리하고 그 결과를  return 하기 위해 func를 사용할 것임.

 

 

return 사용해서 console 사용하지 않고 function에서 바로 값 넘겨주기

return 해야 값이 넘어간다 ! ! ! (안 하면 못 꺼냄)

근데 return 해놓고 아무것도 안 하면 받는 게 없어서 아무 일도 안 일어남

 

 

 

 

 

 

 

 

이렇게 또 정의 해줘야함 (const니까 변수 정의?)

function 밖에서  value 제공받기

 

 

-> 자바스크립트는 여기서 우리 기다려줌.

아 그래서 prompt 안 쓴다네요 HTML CSS 사용

자료형 변경

parseInt("15") : string -> num

NaN : not a number (숫자가 아님) string들을 처리하지 못하면 나오는 결과값

isNaN : boolean (string=true number=false)

 

조건문

if (condition) [

 // condition은 boolean으로 판별 가능해야 함(true/false)

실행코드 = true -> 실행

실행코드 = false -> 다음 else 값 실행

} else {

} 

age === 100 -> 100인 경우

age !== 100 -> 100이 아닌 경우

 

 

 

 

 

이제 HTML과 상호작용 할 차례 ! ! !

 

 

---

6/15 목

 

javascript는 이미 HTML에 연결되어 있음.

document = website

HTML : CSS와 JS를 가져오는 풀과 같은 도구. JS는 HTML과 상호작용을 위해 사용. -> JS는 애초에 HTML에 접근, 읽기가 가능하도록 구성(configured)되어 있다.

즉, JS는 그냥 HTML을 자동으로 읽음. 추가적으로 뭔가를 설치할 필요도 없음.

 

이렇게 HTML 문서를 그대로 JS의 방식으로 보기 때문에, 이 웹페이지(문서) 전체는 이미 Document라는 객체로 정의되어 있음.(선언)

콘솔에서 console.dir(document);  -> document의 속성을 확인할 수 있음.(객체)

document = HTML / getElementById = HTML에서 id를 통해 element를 찾아줌

element를 찾고 나면, JS로 해당 HTML의 무엇이든 변경 가능

 

chat GPT가 알려준 css에서 직접 수정 하지 않고 자바스크립트로 css 수정하는 이유.

JavaScript를 사용하여 스타일을 수정하는 것이 CSS를 사용하는 것보다 불편하다는 것은 맞습니다. 그러나 JavaScript를 사용하여 스타일을 수정하는 것에는 몇 가지 장점이 있습니다.
1.동적인 스타일링
CSS는 정적인 스타일링을 제공합니다. 즉, CSS는 웹 페이지가 로드될 때 설정된 스타일을 적용합니다. 그러나 JavaScript를 사용하면 웹 페이지가 로드된 이후에도 동적으로 스타일을 변경할 수 있습니다. 이를 통해 웹 페이지의 상호작용성을 높일 수 있습니다.
2.조건부 스타일링
JavaScript를 사용하면 특정 이벤트(예: 버튼 클릭)가 발생하거나 특정 조건(예: 사용자가 로그인했는지 여부)이 충족될 때 스타일을 변경할 수 있습니다. 이를 통해 조건부 스타일링을 할 수 있으며, 이는 웹 페이지의 사용자 경험을 개선하는 데 도움이 됩니다.
3.동적으로 생성되는 요소 스타일링
JavaScript를 사용하여 동적으로 요소를 생성할 수 있습니다. 이 경우에는 CSS를 사용하여 스타일을 적용할 수 없으므로 JavaScript를 사용하여 동적으로 생성된 요소의 스타일을 변경해야 합니다.
4.JavaScript 코드와 CSS 스타일 코드를 통합할 수 있음
JavaScript를 사용하여 동적으로 스타일을 변경할 때, 스타일 코드와 JavaScript 코드를 통합하여 작성할 수 있습니다. 이 경우에는 스타일 코드와 JavaScript 코드를 별도로 유지보수하는 것보다 코드의 일관성을 높일 수 있습니다.
따라서 JavaScript를 사용하여 스타일을 수정하는 것은 불편하지만, 동적인 스타일링, 조건부 스타일링, 동적으로 생성되는 요소 스타일링, 코드 일관성 향상 등의 장점이 있습니다.

getElementByClassName() : 많은 element를 가져올 때 씀(array)

getElementByTagName()  : name을 할당할 수 있음(array)

getElementById() : id 

querySelector : element를 CSS 방식으로 검색할 수 있음. 하나만 가져옴(조건에 맞는게 여러개일 경우 첫번째)

querySelectorAll : 모두 가져옴(array)

콘솔하면 <h1>Grab me!</h1> 이렇게 나옴

class 이름 .hello 라고 알려주는 것임.

querySelector("#hello") = getElementById("hello") 

JS 파일이 있기 때문에 JS를 통해 HTML의 내용을 가져올 수 있는 것임

document가 HTML이 JS 파일을 로드해주기 때문에 존재 -> 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌

console.dir() : element의 내부를 볼 수 있음. 기본적으로 object로 표시한 element를 보여줌 (전부 JS object)

event : 어떤 행위를 하는 것. element 앞에 on 이 붙음. 모든 element는 JS가 listen 가능

eventListener : JS에게 무슨 event를 listen하고 싶은 지 알려줘야 함

title.addEventListener("click") : 누군가가 title을 click하는 것을 listen 할 것임. -> 무언가를 해줘야함

click 하면 handleTitleClick이라는 fuction이 동작하길 원함.

그래서 handleTitleClick() 이 아님. JS가 대신 실행시켜주길바람

 

function이 JS에게 넘겨주고 사용자가 title을 click할 경우에 JS가 실행버튼을 대신 눌러주길 바람. () -> 함수 실행 ! ! ! ! !

콘솔에서 사용할 수 있는 event를 볼 수 있는데, on이 붙어있으면 event listener임. (onclick -> click으로 사용해야함)

 

document.body/head/title 이런 것들은 중요하기 때문에 바로 가져올 수 O

나머지 element들은 querySelector나 getElementById등으로 찾아와야 함

 

🔥 첫번째 코드 챌린지 🔥

일단 ... 설렁 설렁 따라해도 수월할 거라 생각했는데 첫번째 코드 챌린지부터 만만치 않았다 ;;

일단 1번 ~6번까지는 강의에서 배운 내용이니까 OK

근데 7번이 도무지 이해가 가질 않음 ㅜㅡㅜ

한개라도 충족되지 않으면 인정되지 않는다고 해서 폭풍 검색 시작 ,,,,

 

 

 

 

 

 

힌트까지 봤는데 뭔말인지 모르겠음

나는 분명 function 따로 만들어서 addEventListener로 받는 거밖에 모른단말임 ..

 

 

 

그래서 친구한테 도움 요청 . . ㅜ ㅜ

 

 

물어보니까 superEventHandler안에 저렇게 하나씩 함수로 들어있는 거라고 함. (나는 function이 없어서 함수가 아닌줄 ;; 바보)

전에 만들었던 계산기 코드를 보니 그제서야 이해가 가서 또 뚝딱거리면서 코드를 작성해봄

이렇게 코드를 어렵사리 짜봤는데 (사실 이거 짜는데 반나절걸림;)

실행이 안되고 자꾸 오류뜸 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 하 ....

뭐가 문제일까 이것저것 바꿔보고 계속 검색해보고 했는데

 

 

 

 

<- superEventHandler.handleMouseEnter 라고 작성해야 되는데

그냥 handle~ 적어놓고 찡찡 거리고 있던 거였음

 

드디어 실행됨  . .. . . .. . .. . . 아침부터 강의 듣고 오후에 본격적으로 코드짜기 시작했는데 7시 반 되어서야 해냄 .......

(근데 이걸 코드라고 할 수 있을까 ^^...... 갈길이 얼마나 먼걸까 망망대해에 던져진 기분이다)

(ノへ￣、)  코드는 블로그에 공개하지 말라고 하니, 올리지 않겠지만 위에 내가 헤맨 내용 보면 바로 짤 수 있을 듯

 

---

6/16 금

 

이벤트리스너는 대상.행동=함수; 이렇게도 작성할 수 있다

다만 eventliestener로 작성해야 나중에 한꺼번에 remove가 쉬워서 니코쌤은 addEventListener를 선호하신다고 하심

y) function 안에도 const let 선언이 가능 ! (지역변수?)

 

if else 문 활용하기

 

currentColor <- title.style.color  <-newColor

결국 newColor 가 currentColor가 됨.

뭔가 회전목마 같이 변수들이 돌아감

 

 

className -> 모든 class들을 교체해버림. 기존에 있던 class까지

classList -> element의 class 내용물을 조작하는 것을 허용. 아예 바꾸는 게 아니라 추가나 삭제 가능

title.classList.contains(clickedClass) -> title이 clickedClass라는 class를 가지고 있는 지 확인

title.classList.remove(cilckedClass) -> title에 cilcedClass라는 class 제거

title.classList.add(cilckedClass) -> title에 clickedClass 추가

-> 위의 3줄을 title.classList.toggle("click"); 로 줄일 수 있음. (심지어 const로 선언해놨던 clickedClass 대신 괄호 안에 바로 "clicked" 쓰면 됨)

toggle : title의 classList에 clicked class가 이미 있는지 확인해서 만약 있다면, clicked를 제거해줌. 만약 존재하지 않는다면, clicked 를 classList에 추가해줌.

 

🔥 두번째 코드 챌린지 🔥

innerWidth를 이용해서 윈도우 창 너비가 변할 때마다 다른 배경색을 적용하기 !

if (window.innerWidth > 1200) 이런식으로 작성했는데 계속 오류가 떠서 parseInt 적용해주니 해결 !

그리고 이번 강의에서 classList 배웠기 때문에 적용하려고 했는데 실패 ,, css 창 만들기도 귀찮아서

일단 오늘의 멘탈 보호를 위해 JS에서 배경색이랑 폰트색까지 바꿔버림 ^^,,

이거 과제 탈락하는거 아녀 ? 그래도 조건은 만족함 if/else etc. 라고 나와있으니까 되겠지 모.

강의 들으면서 따라하는 건 쉬워도 직접 만들어보려니까 정말 막히는 곳이 한두군데가 아니다

하다보니 작년 조교 처음 시작했을 때가 생각난다 ㅋㅋ 그때도 하나 해결되면 바로 다음 순서 막히고 그랬는데..

어쨌든 조교 생활도 잘 적응했었으니 코딩도 하다보면 늘겠지 ! 오늘은 이만 🖐

이라고 말하고 코드 다시 수정함 ^^.. classList 야무지게 이용해서 코드 짜봤는데

CSS파일에서 background color가 새로운 색깔로 적용이 안돼서 애먹었다.

전체 배경색을 바꿔야 하는데 자꾸 div 기준 작은 상자만 색이 변경됨.

그래서 div를 100vh 100vw로 설정해서 전체 화면처럼 보이게 꼼수를 썼다,, 도대체 전체 배경색 변경은 어떻게 하는거지

그래도 CSS 파일 만들어서 코드 수정한 것에 의의를 ! 새벽까지 수고 많았다 나자신

 

---

 

6/20 화

 

event는 공간만 할당해주는 역할 알아서 정보 다 채워줌

-> 브라우저가 기본 동작을 실행하지 못하게 막기

event object는 preventDefault 함수를 기본적으로 갖고 있음.

 

sumbit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미.

JS는 onLoginSubmit 함수 호출 시 인자를 담아서 호출함, 해당 인자는 event object를 담은 정보들.

 

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있음.

preventDefault()함수를 추가함으로써 브라우저의 기본동작(새로고침)을 막을 수 있음.

이 preventDefault 함수는 EventListener 함수의 첫번째 argument안에 있는 함수임.

첫 argument는 지금 막 벌어진 event들에 대한 정보를 갖고 있음.

JS는 기본적으로 argument을 담아서 호출하는데, 이 argument가 기본 정보들을 제공하고 있음. (누가 submit 주체인지, 몇시에 submit했는지)

 

const HIDDEN_CLASSNAME = "hidden";

관습 :  string만 포함된 변수는 대문자로 쓴다.(중요한 변수가 아니라서)

 

string+변수명 합치는 방법 (username이 변수라고 가정할 때)

1) "Hello " + username

2) `Hello ${username}`

2번이 조금 더 새로운 방법임 ( ` ` 물결이랑 같은 칸에 있는 기호임)

 

검사 > Application > Local Storage 들어가면 미니DB같은 저장소를 볼 수 있음(로컬저장소가 제일 다루기 쉬움)

localStorage + .removeItem .getItem .setItem 으로 key와 value 값만 있다면 저장소 이용 가능

 

paintGreetings 함수는 하나의 인자를 받고 있음.

지금 같은 경우는 유저가 form안에 input에 입력한 유저명을 받고 있음.

paintGreetings 함수는 username이라는 인자를 받고 있고

비어있는 h1 요소 안에 `Hello ${username}`이라는 텍스트를 추가해줌

그리고 h1요소로부터 "hidden"이라는 클래스명을 제거해줌

 

 

local storage에서 username key를 찾으려 했는데 찾을 수 없고,

그말은 savedUsername 값이 null이란 이야기.

그럼 첫번째 조건이 참이 되고 그럼 form의 hidden class를 제거해서 form이 화면에 표시됨.

그리고 내가 추가한 addEventListener가 submit을 기다리고 있슴.(onLogicSubmit함수를 실행시키게 됨)

 

paintGreetings(username) -> 데이터가 input으로부터 옴

paintGreetings(savedUsername) -> 데이터가 local storage로부터 옴

 

 

 

🔥 세번째 코드 챌린지 🔥  (무려 이틀 주심)

 

 

사실 이틀짜리 챌린지였는데 월요일에는 멘탈이 가출해버려서 아무것도 안해버렸다 ㅎ..

그래서 나에겐 하루짜리 챌린지가 되어버림 ,,

근데 만만치 않은 녀석이군요 아무것도 모르겠어 !

 

 

 

 

 

 

 

 

math.random() * inputNum
-> 랜덤 숫자는 0~1만 제공하므로 랜덤숫자에 사용자가 입력하는 숫자를 곱하면 그 숫자까지의 랜덤숫자를 얻을 수 있음.

math.round(num) (반올림)
math.ceil(num) (올림)
floor (내림)
math.ceil(math.random()* inputNum)

inputNum = input 칸에 입력되는 숫자
myNum=#my-num = 내가 고른 숫자
machineNum=#machine-num = 컴퓨터가 골라주는 랜덤숫자
1. play를 누른다. ->you chose: my-num, the machine chose:machine-num
                                you lose / you win

일단 이렇게 적어두고 시작함 (1번밖에 없는거 민망하네욤)

우선 변수들을 다 const로 정리해줌 ! (html은 그나마 쉬우니 생략) 콘솔로 입력숫자랑 랜덤 숫자 보이게끔 해서 식을 계속 작성했는데 왜인지 자꾸 NaN 나오고 null나오고 0나옴 ..

 

 

그래서 우선 randomNumber라는 함수 선언 해주고 event.preventDefault() 걸어줌 (새로고침 방지)

찾아보다가 저 const들을 함수 안에 넣은 방식으로 코드 짠 거 발견하고 나도 함수 안으로 넣어봄. 그랬더니 됨 ! ! ! (왜인지는 아직 잘 모름)

넣으니까 랜덤 숫자까지 완전 잘나옴 ..! 순식간에 갑자기 완성된 수준

function 안에 if문 넣어주고 (myNum === machineNum일때 win.innerText = "You win!" else lose.innerText = "You lose!") 

you win/lose 전에 내가 고른 숫자 랜덤 숫자 나오게끔 <span> 추가 했다가 줄바꿈 안되길래 <p>로 추가 

그리고 그냥 p에 id로 result 주고 result.innerText = 해서 내가 고른 숫자 랜덤 숫자 나오도록 했다

오늘 배운 ` ~ ${} ` 써먹었음. const로 선언한 변수 써도 잘 알아먹음 왕신기 !

하튼 그렇게 코드를 완성했다 .......

오늘 깨달은 거 1. play 버튼 처음에 버튼으로 만들었는데 input하고 type="submit" 하면 됨

                        2. 변수들 함수 안에 선언 ...(이건 사실 잘 이해 안감)

근데 win이나 lose는 함수 밖에 선언했는데 왜 잘되는거지 ? 이게 변수 안의 값을 직접 넘겨줘야 해서 그런거 같긴한데 ... 흐음

아무튼 성공 못할 줄 알았는데 완성해서 너무 다행이다 ㅜㅜ 왕초보에겐 이것도 너무 어렵다구요...

 

---

 

6/21 수

 

오늘은 시계 만드는 날.html에 h2 id=clock 만들어주고 h2를 받아와서 그 내부에 text에 입력하면 됨.

 

>> interval : 매번 일어나야하는 일. ex) 매2초

>> timeout : 얼마 뒤에 일어나야 하는 일

setInterval(호출하려는 function의 이름, 시간간격); 

5000은 5000ms = 5s  5초 라는 의미

 

 

setTimeout(sayHello, 5000); -> 5초 뒤에 sayHello 실행하기

 

new date로 먼저 날짜/시간 호출해놓고,

date + .getFullYear() / .getDay() / .getHours() / .getMinuties() / .getSeconds -> 날짜/시간을 호출해줌 (number형태로)

getHours + getMinutes + getSeconds 하면 손쉽게 시계 완성.

padStart/padEnd 로 string의 앞/뒤 padding 줄 수 있음

 

-> "1".padStart(2, "0") 2자리수에 미달된다면 앞쪽부터 0을 채우겠다는 함수.

string의 형식에 적용되는 함수이므로 date로 불러온 값은 string으로 변환해줘야함.

String(date.getHours()); 이런식으로 사용할 수 있음 -> 스트링의 첫번째 S는 대문자여야 실행됨 ! ! !

 

getClock()으로 함수 한번 호출한다음, setInterval(getClock, 1000);으로 1초마다 함수 호출하면 시계 완성.

 

🔥 네번째 코드 챌린지 🔥

 

실시간으로 크리스마스까지 얼마나 남았는지 알려주는 화면만들기

 

시계도 다 만들어놨으니 오늘은 좀 쉬울 것 같은 느낌 ,,?

 

우선 html로 제목 만들어주고 디데이 들어갈 자리 만들어줌

JS 시작 !

 

일단 현재시각 띄워놓는 것까지는 완료. 그런데 문제는 크리스마스 날짜를 어떻게 입력하지 ?

구글링으로 지정날짜와 현재날짜 차이 구하는 코드를 찾았음

크리스마스 변수에 날짜를 집어넣고 수학 계산식으로 차이를 구하면 됨

근데 문제는 JS에서 밀리초로 계산을 해주기 때문에 

날짜는 1000*60*60*24 로 나눈다고 쳐도 시간이랑 분초는 ...?

 

고민하면서 몇가지 방법을 생각해냄.

1. 시간 차 변수 diff는 구해놨으니 diff에서 dates의 시/분/초 버전을 구해서 뺀다 (대충 diff이용하겠다는 뜻)

2. 0시 / 0분 / 0초 를 각각 변수로 지정해서 시 분 초 각각 현재시간과의 차이를 구하기 (이렇게 하면 변수가 너무 많아지고 복잡해짐)

1번을 도전해보고 안되면 2번이라도 하자 .. 하는 생각으로 어떻게 하면 구할 수 있을 까 고민함

 

밀리초에서 날짜를 구하면서(나누기를 하면서) 날아간 부분이 있을 거고 diff에서 dates을 빼면 그 부분이 나오지 않을까 생각함

근데 자꾸 이상한 숫자가 나와서 ㅎ 다시 필기하면서 생각해보니 쉽게 나머지를 구하면 되는 일 ..

그래서 나머지를 구했더니 아주 잘 나옴

오늘 배운 padStart 입히면 코드 끗

오늘은 그래도 멘붕 안 오고 차근차근 코드 작성 완료했다 !!!

 

---

❗ #7 (#7.0~#7.8) 챌린지 진도표에는 없길래 미리 들었음

 

#7.0

html에서 form 만들고 그 안에 ul 만든다음, list는 js에서 가져올 것임

greetings에서 만들었던 것처럼, form은 submit 이벤트를 거쳐서 function을 만들고, 그 이벤트의 기본 동작(새로고침)을 막을거임

> const toDoInput = toDoForm.querySelector("input");

> const toDoInput = document.querySelector("#todo-form input");

위 두 코드는 같은 코드 ! (toDoForm 을 미리 찾아서 정의해놨다고 가정했을 때)

 

#7.1

function 'paintToDo'를 만들고, handleToDoSubmit function이 paintToDo를 사용하게 됨.

const 로 선언해놨던 newTodo를 paintToDo에게 보내는 것임

newTodo 는 input의 value를 비우기 전의 값을 나타내는 string임. 그런 다음 그 입력값을 paintToDo에 넣어서 호출.

list 생성

span 생성

list 안에 appendchild로 span 넣어주기

span의 텍스트를 newTodo로 설정 -> html 리스트 완성 !

html에 넣어주려면, 위에서 정의한 toDoList(id = todo-list인 ul)에 appendchild로 list 넣어주면 완성이다

 

#7.2

list와 span을 만들고 list안에 넣어준 것처럼, 버튼을 만들어서 list안에 넣어줌 (appendchild는 맨 뒤에 항목을 넣어줌)

button을 클릭하면 뭔가 동작(해당 list를 삭제)하도록 만들것이기 때문에,

이벤트리스너를 만들어주고 버튼을  클릭하면 삭제하는 함수를 만들기 시작

하지만 버튼을 눌렀다고 해도 몇번째 항목의 버튼이 눌린 건지 알 수 없음. -> 함수에 event 를 인자로 줘서 정보를 정보를 받을 수 있게 함.

클릭 된 button이 어떤 건지 단서를 얻을 수 있음. event.target으로 정확한 정보 알 수있음. target은 클릭된 html element임

parent element 는 클릭된 element의 부모임

 

#7.3 

saveToDos라는 함수 만들어서 toDos라는 변수를 localStorage에 넣기 -> localStorage.setItem("todos", toDos) key-value의 형식임

saveToDos 함수가 실행될 때 newTodo는 array에 들어있음

하지만 새로고침 후 newTodo값을 입력하면 로컬저장소에 있던 값도 날아가고 다시 시작됨.

toDo 들을 텍스트가 아닌 array로 저장하고 싶음. 

JSON.stringify(변수) -> js object나 array 또는 어떤 js코드 간에 string으로 만들어줌.

toDos를 stringify를 이용해서 스트링 타입으로 저장해놓으면 로컬저장소에 ["a","b","c"] 이런 형태로 저장됨! 

 

#7.4

JSON.parse 를 가지고 JS가 이해할 수 있는 array로 만들 수 있음.

js는 array에 있는 각각의 item에 대해 function을 실행할 수 있게 해줌. 그게 list를 array로 힘들게 바꾸는 이유임

forEach는 function을 실행하게 해주는데, 그 array에 있는 각각의 item에 대해서 실행해줌

parsedToDos.forEach(함수명) 이렇게 해주면

list에 입력된 각각의 item?인지?마다 function을 실행시켜줌.

function을 따로 만들지 않고 parsedToDos.forEach((item) => console.log("this is the turn of ", item)) 이렇게 만들 수 도 있음 (함수를 안에 집어 넣은 거임) -> arrow function ! ! !

 

#7.5

todo에 새로운 항목을 추가하면 덮어쓰기 되는 이유 : toDos가 빈 array로 실행되고 newToDo를 toDos array에 그냥 push하게 되기 때문

그렇게 때문에 toDos를 const가 아닌 let으로 바꿔주고, if문에 toDos = parsedToDos; 를 추가해줌

그리고 화면에서 삭제 버튼을 누르고 삭제해도, local Storage에 반영 안됨 .(다음 영상)

 

#7.6

로컬 저장소가 데이터베이스가 아님. toDos array 를 복사해두는 곳이 로컬 저장소인거임.

todo 들에게 id를 주기. 랜덤(처럼 보이는)한 id를 주는 방법. Date.now() 완전히 랜덤한 건 아니고, 입력한 시간단위로 정밀한 숫자를 배정하는 것임.

그래서 원래 text로 이루어진 newTodo를 받던 함수들을 newTodoObj(값과 키로 이루어진)로 바꿔줌.

 

또한 span.innerText가 원래는 newTodo를 받아도 상관없지만, 

키값을 추가함으로써 화면에 오류가 출력됨. 

그래서 newTodo의 텍스트를 받는 것으로 수정해주면 됨.

 

 

삭제하려는 버튼의 id도 알아야함. 다음시간에 !

 

#7.7

filter. 만약 array에서 뭔가 삭제할 때, 실제로 array에서 그것을 지우는 게 아니라, 지우고 싶은 item을 빼고 새 array를 만드는 것임.

sexyfilter를 만들고, false를 리턴하면 그 item은 새 array에 포함되지 않게하고, true를 리턴하면 새 array에 포함되게 함.

todos에 배열로 인자들을 넣어놓고,

sexyfilter라는 함수를 만든다.

todo라는 인자를 사용하여 함수 안에 넣어줄거고

반환의 조건은 "lololo"가 아닌 것.

 

선언한 todos에 sexyfilter함수를 filter하면

"lalala"만 남게 된다.

("lololo"는 함수를 통해 필터링됨)

 

 

 

 

 

 

 

 

#7.8

filter을 이용하여 delete된 항목을 제외하고 새로운 array 만들기.

toDos = toDos.filter((toDo) => toDo.id !== li.id);  -> 투두의 아이디가 리스트의 아이디와 같지 않은 것들로만 array를 만듦.

but li.id는 strring 타입이고, toDo.id는 number타입. .li.id를 parseInt 를 이용하여 문자열->숫자로 바꿔줌.

그리고 딜리트 함수 안에서 마무리로 saveToDos() 한번더 해주면 끗 !

 

#8.0

Geolocation ! 날씨 보여주긔

<- 이 코드로 사용자의 위도/경도를 알아낼 수 있음.

API를 이용해서 사용자의 위치의 날씨를 알아낼 수 있음.

 

openweathermap.org 들어가서 회원가입함.

 

 

 

#8.1

API는 기본적으로 다른 서버와 이야기할 수 있는 방법. 지금은 The Open Weather Map 서버와 이야기할 것임.

그 후로는 와다다다 강의를 들어서 .. 일단은 완강

 

---

 

6/22 목

 

Math.random() -> 0~1 랜덤 숫자 (따라서 구하고 싶은 최대숫자를 곱해줘야함 ex. 0부터 100까지 랜덤 숫자인 경우 Math.random() *100)

Math.round(1.1) -> 1 (반올림)

Math.ceil(1.1) -> 2 (올림)

Math.floor(1.1) -> (내림)

변수명.length -> 길이 반환(quotes의 경우 array이기 때문에 array의 갯수를 반환해줌

 

>> 백그라운드 이미지 랜덤으로 변경하기

img 파일에 이미지 왕창 저장해놓고 const로 배열

 

랜덤 숫자 고른 것처럼 image길이만큼 곱해서

이미지 랜덤 고르는 코드 완성 !

-> js 에서 html element 생성

원래는  html에서 querySelector등을 이용해서 html element를 가져왔는데, 지금은 html에 소스가 없다보니

js에서 만들어서 html로 넘길 계획  ! 저렇게 코드 짜고 콘솔했더니 <img src="img/7.jpg"> 라는 아름다운 코드 탄생 ,,,! 

document.body.appendChild(bgImage) 로 html body 에 추가해주면 끝

 

🔥 다섯번째 코드 챌린지 🔥

 

array로 주어진 색깔 배열에서 랜덤으로 두 색상을 골라 그라데이션 배경화면 주기

 

일단 html에서 버튼을 만들었는데 button 가운데 정렬 하는 것부터 애먹었다.

일단 div로 버튼을 감싸서 div에(부모) relative 주고

버튼에 absolute 준 다음 top, left 조정하니 얼추 가운데 됨.

근데 수직 가운데 정렬이 안돼서 height을 100vh로 주니 정렬 됨!

자꾸 옆에 스크롤이 생겨서 전에 box-sizing 이런 걸로 조정해보려고 했는데(margin,padding 같은 공간들 때문에 화면이 넘치는 현상 방지하는 기능) 안돼서 야매로 97vh 해놓음  ,, (창피)

 

버튼 만들기는 끝 !

 

랜덤 색상 뽑기는 쉽다.

색깔 뽑기는 강의에서 나온 내용이라 순식간에 처리하고,

배경색상을 그라데이션으로 지정할 차례 ! 인터넷에 찾아보니 코드가 정말 그대로 나와있어서 일단 똑같이 옮겨써보았다 ㅜ 

 

 

처음엔 왜 백틱안에 집어넣었지 ? 부터 시작해서 (긁어온 원래 코드엔 0.25turn이라고 적혀있었음) 또 생소한 코드들 뿐이라 잠시 이해를 포기하고 다른 식들을 찾아봤지만 마땅한 것이 없었음

생각해보니까 js에서 html로 element를 넘겨주는 것을 배웠던 거임 .. 지금은 css로 넘겨주는 거고 ㅠ

그래서 위의 식처럼 작성하고, 실행해보니 동작됨 ! ! 

해도 해도 헷갈리고 어려운 코딩 ㅎ .. 오늘도 얼떨결에 성공함 ㅋㅋ ㅜ 원래 코딩이 이런건가요

 

---

 

6/25 일

 

🔥 마지막 코드 챌린지 🔥

 

그 동안 배웠던 것들을 총집합해서, 나만의 크롬 화면 만들기 !

사실 조건들은 강의에서 나온 것 고대로 따라하면 되기 때문에, CSS가 관건임 ,,,,, 과연 잘 해낼 수 있을 것인가

html만 있는 거랑 js 껴있는 거랑 css 하기가 은근 다르다 ㅠ

일단 난 애플 스타일로(디자인능력 전혀 없음ㅎ 모방만이 답일뿐) 깔끔하게 만들어보기로 생각.

1. 사진 배경화면으로 지정
2. 시간 가운데 정렬
3. 로그인창 / greetings 가운데 정렬
4. 할일 가운데 정렬 / 밑줄로만들기
5. 딜리트 버튼 작고 예쁘게 만들기
6. 명언은 맨 아래에
7. 위치와 날씨는 시계 위에(날짜로 받아올 수 있으면 추가하긔) 약간 아이폰 스타일로 도전?

 

문제는 일요일 새벽이라는 점 ... 그러니까 시간 상으로는 월요일입니다 이미

제출하려면 네시간 정도 남았는데 그 전에 완료할 수 있을까요 ㅎ 안되면 엉진망창 결과물이라도 일단 제출할거임

 

일단 끝났는데 , 마지막 제출양식이 깃허브여서 엄청 헤맸다 ㅜ

제대로 제출된 건지도 모르겠고 ,,

만약에 제대로 안됐으면 다음에 또 다시 도전해야지 ㅋㅋㅋㅋ 

 

---