JavaScript_모멘텀 project [이름 삭제하는 button 만들기]

NomadCoder에서 vanilla JavaScript로 모멘텀을 만드는 project를 했었는데, 이름을 삭제 하려면 localStorage에 들어가서 이름을 삭제 해야되는데 일반 사람들이 접근하기에는 어렵다는 생각이 들었다. 그래서 이름옆에 작게 이름과 인사 말을 삭제 할 수 있는 버튼을 만들어 보았다! 

 

 

 

 

 

 

Button 만들기

 

 

 

 

 

 

 

function makeButton()

 

먼저 button을 추가하기 위해서 makeButton() 이라는 함수를 만들었고, HTML에 button 태그를 추가하기 위해서 버튼 태그를 만드는 delBtn이라는 변수를 만들었다. button 모양을 만들기 위해서 button 태그 안에 텍스트를 넣었고(innerText) 어떤걸로 만들까 고민하다가 제일 simple한걸로 만들자는 생각이 들어서 '✔'로 정했다.

 

button 태그가 들어갈 자리에 parent 태그를 찾아서 appendChild(); method를 써서 넣었다. 그리고 button 태그에 css를 사용하기 위해서 class를 추가했다. classList.add();를 사용해서 추가했다. 

 

마지막으로 버튼을 클릭하면 인사 메세지와 이름이 사라지는 event가 생기도록 addEventListener(); method를 사용했다. addEventListener("click", function), 클릭을 했을 때 event가 생겨야하기 때문에 "click"을 넣었고 이름을 사라지게 하는 함수를 넣어서 버튼이 클릭 되었을 때 안에 있는 함수가 실행되도록 했다.

 

 

 

function deleteName()

 

버튼이 클릭 되었을 때 이름과 인사 메세지를 삭제하기 위해서 deleteName()이라는 함수를 만들었다. 그리고 다시 이름을 묻는 태그를 화면에 보이게 하기 위해서 css에 display: block; 값을 가지고 있는 'showing' class를 이름을 묻는 form 태그에 추가 했고, 이름과 인사 메세지를 안보이게 하기 위해서 'showing' class를 이름과 인사 텍스트를 포함한 태그에서 삭제했다.

 

마지막으로 localStorage에서 저장되어있는 이름을 삭제하기 위해서 localStorage.removeItem(key 값)을 사용했다.

 

 

 

 

느낀점

 

필요한 method를 찾는건 별로 어렵지 않았지만 기존 코드에 함수 구성을 파악하고 몇개에 함수를 만들고 어떤함수에 어떤 method를 넣아야하는지 생각하는게 쉽지는 않았던것 같다. 간단한 기능을 구현하는것일 수도 있지만 이걸 통해서 함수 구조를 파악하고 함수를 생성하는 능력이 조금 향상된거 같아서 기분이 좋타!

 

function이름을 정할때도 function 이름을 보고 이 function하는 역할이 무엇인지 알 수 있게 해야한다는 생각이 들었다. 원래는 makeButton() function 이름을 deleteButton()으로 지었는데 버튼을 삭제하는 함수라고 생각할 수도 있다는 생각이들어서 이름을 바꿨다. 아직 숙달이 안되서 function이름이 바로 생각이 안나지만, 좀 시간이 걸리더라도 function기능에 맞는 이름을 정해야겠다.