이제 그동안의 클론 코딩 덕분에 html css는 어느 정도 통달된 것 같아 자바스크립트 공부를 하려고 검색해보다가 노매드 코더 무료 강의가 눈에 들어왔다. 평도 좋았고 유튜브 알고리즘을 통해 봤던 영상들의 좋은 기억들이 있어서 그대로 강의를 들었다.
자바스크립트는 드림코딩엘리 유튜브 채널에 있는 이론적인 내용의 자바 스크립트로만 배워서 전혀 감이 없었던 상태였다.
제일 처음 배웠던것은 html의 내용을 자바로 grab 하는 여러 속성들이 있었는데 대표적으로 queryselector와 getelementbyid가 있었고 니꼬썜이 99퍼센트가 이것으로 작성한다고 했다.
queryselector란 내 document에 있는 class명이나 id명 혹은 div,span과 같은 요소들을 css에서 호출하는 것처럼 class는. abcde
id는 #abcde span이나 div 같은 것들은 이름 그대로 사용하는 것이다.
getelementbyid는 이름 그대로 id값만 불러올 수 있는 대신 queryselector처럼 #을 적는 수고를 덜 할 수 있는 장점이 있다.
우선 함수와 addeventlistener로 시작했는데 함수는 어떤 조건으로 어떤 동작을 해주게 도와주는 것이고 addeventlistener로는 말 그대로 어떤 a라는 이벤트가 생겼을 때 b라는 함수를 통해 그 이벤트를 어떻게 처리할지 정한다.
event는 그동안 흔히 썼던 click 말고 submit을 배웠는데 submit은 서버에 제출하는 행위이고 디폴트 값으로 웹을 새 로고 침하는 기능이 있었는데 이를 막기 위해 b라는 함수 내에 아래의 내용을 적으면 default값이 적용이 안된다.
이러한 제출형 프로그램을 작성할 때 html에서는 <form></form>를 사용하고 input 안에 여러 기능이 있었는데 흥미로웠던 내용은 maxlength나 minlength로 인풋 안에 value의 길이를 조절할 수 있는 기능이었고 저번에 검색해서 알았는데 까먹었던 내용 중에 input value를 입력하기 전에 글자를 띄워놓는 placeholder기능이 있었다.
이것들을 이용해서 input값을 저장하고 화면을 refresh 했을 때도 값을 들고 있어야 했지만 refresh 하면 값이 날아간다는 문제점이 발생했다.
여기서 사용하는 것이 localstorage이고 setter와 getter개념이 쓰인다.
setter는 값을 저장하고 getter는 값을 불러온다.
이렇게 localstorage에 set 한 다음 새로고침을 했을 시 값이 localstorage에 저장이 돼 있을 경우 값을 그대로 저장하도록 유지함으로써 해결했다.
그다음 기능은 todo 리스트 앱의 꽃 todo를 입력하고 입력한 값을 삭제할 수 있는 기능을 구현하는 것이었는데 여기서 상당한 오랜 시간이 걸렸다.
아까 앞에서 했던 localstorage에 값을 저장하는 것은 물론이고 삭제하는 기능까지 구현해야 했기 때문이었다.
여기서 x버튼을 눌렀을 시 리스트가 삭제되는 기능은 매우 간단했다.
x버튼을 클릭 시 addeventlistener 클릭이벤트 시 target.parentElement로 바로 삭제하면 됐으나 화면 refresh시 삭제했던 리스트가 삭제되지 않고 그대로 남아있는 문제가 생기는데 이 또한 앞에서의 느낌과 비슷하지만 약간 다르게 localstorage에 저장됐던 리스트가 삭제되지 않아서 발생한 문제였다.
여기서 filter가 사용됐는데 예전에 드림 코딩 유튜브 채널에서 어떤 값을 filter 한다는 것만 알고 있었는데 여기서 사용될지는 상상도 못 했다.
filter를 이용해 현재의 값(롤)과 todolist의 전체 값(롤, 배그, 로아, 스타, 원랜디)과 비교하여 같은 값은 놔두고 나머지 값들은 그대로 유지하게 하는 것이었고 버튼 클릭 시 리스트 없애는 것과 localstorage에서 Filter를 사용하여 값을 제거하였다.
이제 위의 사진들에서 유추할 수 있듯이 시간 구현 기능과 화면, 인용구를 refresh 할 때마다 바뀌게 하기, 우측 상단에 현재 날씨, 위치 기능 구현이 있었는데 글이 너무 길어짐으로 2/2 글에서 다시 뵙겠습니다.