[JS] Vanilla Javascript 복습 2

https://nomadcoders.co/javascript-for-beginners/lobby
크롬 브라우저의 어플리케이션인 Momentum을 만들어보면서 바닐라 자바스크립트를 배웠다.
무료 강의인데 업데이트까지 해주시는 대혜자 니꼬쌤 덕분에 기초 공부가 즐거웠다😘

 

완성한 페이지 https://yojessie.github.io/momentum-JS/

 

강의를 듣고나면 코드를 캡쳐해서 코드가 돌아가는 순서를 다시 그려보며 복습했는데,

강의 들은지 보름정도 지난 지금 왠지 꽤 까먹은 것 같다. 다시 복습 기록을 남겨보며 마무리해야지.

(적다보니 넘나 의식의 흐름대로의 기록이네...)

 

---

 

🕰 실시간 시계

1. 시계 들어갈 div를 선택 (데이터 불러와 innerText 예정)
2. 현재 시간을 나타내는 function 생성
3. Date를 object로 불러와서 사용
4. 현재 시, 분, 초를 상수로 정의
5. 모두 두자리수로 표기하기 위해 padStart(자릿수, '비었을때 채울 문자')사용
6. padStart는 string에만 사용가능하므로 불러온 시간을 string으로 변환
7. clock div에 불러온 시간을 innerText일단 현재 시간을 즉시 호출한 다음 SetInterval(functionName, 간격) 으로 계속 갱신해서 표시

 

---

 

🙋🏻 로컬 스토리지를 이용한 로그인 기능

- form 태그 내부에 input이 있고, 데이터 입력 시 greeting div에 들어가는 텍스트가 노출될 예정
- 자주쓰는 문자열은 상수로 정의해두면 오타로 인한 오류를 방지할 수 있다 (이런 경우 상수명은 대문자와 언더바로 정의한다)
- input에 입력되는 데이터를 로컬에 저장하고, 페이지가 새로고침 되어도 유지되도록 할 예정

1. function으로 저장한 input 데이터를 불러와 상수로 정의
2. 저장된 input 데이터가 비어있다면(= null) 로그인 form을 보여주고 submit 이벤트를 기다린다. submit 했을때 첫번째 function 실행. 데이터가 비지 않았다면 두번째 function을 실행.(else)
3. 첫번째 function : event라는 임의의 인자를 활용해 event.preventDefault()로 브라우저의 기본 동작을 막는다 (여기서는 새로고침을 막아줌)
4. 사용자가 input에 데이터를 입력했으므로 form은 hidden 클래스를 추가해주고 입력한 데이터를 상수로 정의
5. 그리고 그것을 localStorage.setItem("key", value)를 이용해 로컬에 저장해준다.
6. 저장한 데이터는 두번째 function에 인자로 넘겨준다.
7. 두번째 function : 받아온 인자 + 문자열을 greeting div에 innerText해주고, hidden class를 삭제해 노출시킨다.

 

---

 

✏️ 로컬 스토리지를 사용해 투두리스트

function이 4개나 된다. 코드가 짱 길다..

1. input value값들을 저장할 array를 let으로 정의한다. 항목을 지우고 새로썼을때 수정될 수 있도록.

2. todoForm에 submit 이벤트가 발생하면 function 4를 실행한다.

3. function 4 (submit the input value) :

• 페이지 새로고침을 막고, input의 value를 상수로 정의한다.
• 각 value는 특정해주어야 핸들링 할수 있기때문에, id를 부여해서 object로 만들어준다.
• id를 만들때는 date.now()를 사용해서 겹칠 수 없는 랜덤숫자를 부여해주었다.
• submit했으니 input은 비워주고, array에 id를 부여한 object를 push 해준다.
• value를 리스트로 화면에 표시해주는 function 3에 object를 인자로 넣어 실행하고, 로컬에 저장하는 function 1도 실행해준다.

4. function 3 (make a list on the screen) :

• li태그를 만들어서 상수로 정의하고
• 만들어 둔 object의 값을 활용해 li태그에 id로 정의한다.
• value값은 span을 만들어 넣어주고,
• 삭제할 수 있도록 X 버튼을 태그로 만들어둔다. 클릭 이벤트 발생 시 function 2를 실행한다.
• 만든 span과 button을 li안에 appenChild해주고
• 그 li를 HTML에서 만들어둔 ul태그 안에 넣는다.

5. function 1 (save the value in local storage) :

• function 4에서 push해놓은 array를 로컬에 저장한다.
• 근데 그대로 저장하면 array가 아니라 문자열만 저장되므로 JASON.stringify(variableName)를 사용해서 array의 문자 그대로를 저장하도록 한다. (아직도 제대로 array는 아닌상태)

6. 로컬에 저장한 데이터를 가져와 상수로 정의한다.

7. 만약 로컬 데이터가 비어있지 않다면, 로컬에 저장된것은 array의 문자형태로 존재하기때문에
JSON.parse(variableName)을 사용해 진짜 array로 만들어준다.

8. 페이지가 새로고침 되더라도 리스트가 진짜 array로 만든 데이터를 가지고 시작할 수 있도록 재선언 해준다.

9. 각각의 array데이터에 function 3을 실행해 화면에 표시되도록 한다.

10. function 2 (remove each list) :

• event라는 인자를 통해 이벤트가 일어난 타켓(=button)의 부모요소(=li)를 잡아서 상수로 정의해준다.
• 그 타켓을 remove 해준다.
• 아래부터는 로컬에서도 삭제한 데이터를 빼주기 위한 작업.
• 부모요소(=li)가 가지고 있는 id를 불러와서 parseInt를 통해 숫자로 만들어준다 (비교연산 하기 위해)
• filter은 각 array item에 각각 실행된다. (forEach와 동일) 그리고 false인 값은 제외하고 새로운 array로 만들어서 재선언 해주는 개념.
• 인자로 넣어준 item을 이용해, array에 정의된 id와 이벤트가 일어난 타겟의 부모요소(li)의 id를 비교해서 false값이 제외된 array로 재선언 되도록 한다. (사실 이 부분 제대로 이해를 못한거같은데, 나중에 다시 읽어보면서 명확하게 설명이 될때 업데이트 해줘 미래의 나야)
• 그리고 function 1을 다시 실행해 재선언된 array를 로컬에 저장한다.

 

---

 

🌃 랜덤으로 바뀌는 배경 이미지

1. 이미지 소스는 array로 정의해준다.

2. 이미지를 선택하는 상수를 정의한다.

• Math.random() * image.length로 image array의 item 갯수만큼의 랜덤숫자를 호출하고
• 랜덤 숫자는 소수이므로, Math.floor를 이용해 내림처리하여 정수로 만들어준다.

3. createElement로 img 태그를 생성해서 상수로 정의하고, 정의한 img 태그에 랜덤하게 불러온 array의 item의 경로를 src로 연결시킨다.

4. 위에서 만든 img 태그에 className을 부여한다.

5. 부여한 className을 활용해서 body에 appendChild 한다.

 

---

 

🌦 Geolocation API로 날씨와 위치 표시

https://openweathermap.org/ API를 가져올 사이트

1. 사이트에 가입하고 받은 API key를 상수로 정의한다.
2. 현재 위치를 가져올 수 있도록 navigator.geolocation.getCurrentPosition(success, error) 메소드를 사용한다. 괄호안은 function.
3. 위치 가져오기 성공했을때는 function1 실행, 실패했을때는 function2 실행.
4. function 1 : 위도와 경도를 선언하고, API사이트에서 가져온 url을 상수로 정의한다. (fetch는 서버의 응답을 받아오는데 시간이 걸려서 then을 같이 사용하는데, 이 내용은 딥하게 다루지 않았다. 일단 패쓰)
5. function 2 : 위치를 찾지 못했다는 얼럿을 띄운다.

 

---

 

나름대로 적으면서 복습을 해봤는데, 그때는 몇번 복습하면서 이해하고 넘어왔다 생각했지만
지나고보니 다시 강의를 돌아봐야할만큼 빠뜨린 부분도 있었다.

빠뜨리는 부분이 많은것 같아 불안하기도 한데 배우면서 차차 익숙해지겠지!

잘하고싶다 자바스크립트!🔥