[Momentum_ problem shooting] LS의 유저이름 수정 버튼 만들기

모멘툼을 쓰는 언니가 

이름 잘못 쓰면 수정 어떻게 하냐고 물어서,, 처음에는 inspector에 들어가는 법을 알려줄까 하다가.. 

그냥 버튼을 만들었음. 

 

이미, YoutubePlaylist에 ID를 업데이트하는 코드를 짰었기에 빠르게 끝낼 줄 알았으나.. ㅎㅎ ^^

한~~~참 걸렸음...

 

지피티도 이유를 몰라,,

나도 이유를 몰라,, 

진짜.. 한 5-6시간을 붙들고 있었던 듯. 

 

되야 하는데 안 되니깐, 

LS에 저장된 값을 삭제하는 코드로도 짜보고, 

newUsername 변수도 만들어보고, 

다 하다가 결국 savedUsername으로 충분할 거 같은데 하면서

지피티랑.. 계속 키배를 뜸...

넌 시니어 개발자인데 .. 왜 못찾냐고..ㅎ

 

계속 코드를 이리저리 수정해보고, 넣었다 빼보고

console.log를 찍으면서 디버깅 해보니깐,

submit 자체가 안 된다는 것을 확인하고

에러도 안 보이는 것을 알게 됐음. 

그 이유를 고민해서 gpt에게 이것저것 물어봄.

 

오타를 확인했으나 아니었고,

혹시 onclick이 부딪히는 건지 확인했으나, 

아니었고,

코드 순서를 고민하다가 그것도 아니었고, 

코드를.........뚫어져라 보다가.. 

else인 경우에 submit이 되도록 명령을 추가하지 않았다는 것을 깨달았음.

 

.................요새 항상 느끼지만,

gpt는........ 개발자를 대체 할 수 없음. 

 

gpt를 잘 활용하려면, 

질문이 명확해야 하고,

코드가 맞는 것 같으면 추천해주는 대로 바꾸지 않아야 함. 

특히, 로직의 경우 

큰 틀이 맞으면 디테일한 것은 잡아내지 못하는 것 같음..

케바케인 것 같기도 한 게 코드 배치 순서는 잘 잡아냄..

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
//2번 반복되니깐, 변수 해줌. 대문자로 쓰는 것은 string으로만 저장하고 싶으르 때 사용.
//즉 중요 정보는 아님. 반복 쓸 떄 오타를 줄이기 위해서 변수로 하면, 에러 확인 가능
let savedUsername = localStorage.getItem(USERNAME_KEY);

function onLoginSubmit(event) {
  event.preventDefault();
  let username = loginInput.value; // 새로운 사용자 이름 저장
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
  loginForm.classList.add(HIDDEN_CLASSNAME); // 폼이 사라지게 클래스 .hidden이 나타나도록 // h1 값을 입력 내용으로 변경 // hidden을 보이게 없애줌.
}

function onRenameToggle() {
  loginForm.classList.toggle(HIDDEN_CLASSNAME);
  buttonRename.classList.add(HIDDEN_CLASSNAME); // 로그인 폼 나오면, 수정 버튼 감추기
  greeting.classList.toggle(HIDDEN_CLASSNAME);
}

function paintGreetings(username) {
  // 위 아래 반복되서 함수로 만들어서 뺐음
  greeting.innerText = `Hello ${username} :)`; //먼저 그리팅 넣고
  greeting.classList.remove(HIDDEN_CLASSNAME); // 히든 없애기.. 보이게
  buttonRename.classList.remove(HIDDEN_CLASSNAME); // 그리팅이 나타날 때 수정 버튼 보이기
}

//이름 수정하는 버튼
const buttonRename = document.createElement("button");
buttonRename.classList.add("buttonRename");
buttonRename.innerText = "✍️";
buttonRename.addEventListener("click", onRenameToggle);
document.body.appendChild(buttonRename);
buttonRename.classList.add(HIDDEN_CLASSNAME); // 수정 버튼 감추기

if (savedUsername === null) {
  // LS 에 없으면 form 보여주기
  loginForm.classList.remove(HIDDEN_CLASSNAME); //form 보이게 만들어주기
  loginForm.addEventListener("submit", onLoginSubmit); //유저이름 입력할 수 있도록
} else {
  // greeting 보여주기
  paintGreetings(savedUsername); //변수만 savedUsername로 바꿔줌
  loginForm.addEventListener("submit", onLoginSubmit); //아오......이걸 안 해줘서...난리 난리...
}

 

// 결과

 

 

 

.. ㅎ 버튼 하나 만들자고.. 그래

점점 빨라지겠지... ㅎㅎㅎㅎ-ㅎ