2021.6.16(tue)_커스텀훅, url 이동, jwt 디코드, 비밀번호 input 커스텀 시도

 

✱커스텀 훅

 - 커스텀 훅의 state는 독립적, 호출될 때마다 state는 아예 독립적이다. 그렇다면 커스텀 훅이 호출돼서 종료되면 그 내부의 state값은 더 이상 수정하거나 사용할 수 없고 끝?(커스텀 훅이 종료되면 내부로 들어갈 수 없으니까

 

 - 커스텀 훅의 state는 async 함수 반환값이 promise객체라 리턴값 활용을 못 할 때 유용. setState로 값을 저장하고 return state하면 되니까.

 

✱history API

 - pushState: 주소가 바뀐다. 뒤로가기 버튼이 활성화된다. 페이지는 새로 갱신되지 않고 주소만 바뀐다!!

 - replcaceState: 주소가 바뀌지만, 뒤로가기 버튼은 활성화되지 않는다. 마찬가지로 페이지 갱신은 안 된다. 이전 주소를 지우기 때문에 더는 접근할 수 없다. 뒤로 못 감!!

 ➙ pushState, replaceState 모두 history에 주소를 넣고 수정하는 것이고, 페이지가 새로 갱신되는 것은 아니다!!

 - pushState할 때 state 객체를 넣어야 하는 이유 → 스택오버플로우(pushState: what exactly is the state object for?)

 

✱다른 URL로 이동시키기

window.location.href = 'https://codingsalon.tistory.com';
window.location.assign('https://codingsalon.tistory.com');
window.location.replace('https://codingsalon.tistory.com');

replace는 history API처럼 뒤로가기 버튼으로 이전 화면으로 이동이 불가.

window.location.href로 속성 지정, window.location.assign 메서드 호출의 다른 점을 찾아봤는데 메서드호출보다 속성을 바로 지정해주는 게 조금 더 빠른 차이말고는 zero difference라고 한다 → 스택오버플로우(location.href property vs location.assign() method)

 

✱git OAuth 로그인 jwt토큰 decode

 - 로그인 바보인 나는 jwt토큰을 디코드해서 유저 정보를 렌더링 때 사용하려고 했는데 로그인 마스터인 큐랑 이야기하면서 정리해봤다.

➙ 백엔드에서 secret key를 넣어서 jwt 토큰을 만들었는지 아닌지를 모르기 때문에 decode를 할 때 secret key가 필요한지 아닌지도 알 수 없음

➙ 시크릿키없이 decode를 할 수는 있지만, 시크릿키가 없으면 인증된 사용자인지 확인이 불가능하기 때문에, 확인되지 않은 정보를 클라이언트에서 사용하는 것은 매우 이상하다. 무의미!

➙ 그렇다고 해서 프론트에서 시크릿키를 가지고 있는 것도 보안상 좀 그렇다!

 

✱비밀번호 입력하는 input 커스텀

- 하려고 했던 것: 비밀번호를 입력하면 ●●●●이렇게 나오는 걸 🐷🐷🐷🐷 이렇게 커스텀해보고 싶었다!

- 처음에 했던 생각: input에 onChange 이벤트를 걸어서 event.target.value로 해서 password를 상태로 저장하고, 렌더링되는 건 target.value = Array(target.value.length).fill('🐷'').join('') 이렇게 하려고 했는데...

- 문제 발생: target.value로 input값을 가져오고, 렌더링할 value를 다른 문자로 바꿔주니 결국 입력할 때마다 가져오는 target.value는 마지막 글자를 제외하고는 다른 문자로 들어온다. xxxxxj, xxxxy 이런식으로.. 그래서 마지막 문자들만 이전 상태값에 더하거나 빼주거나로 로직을 짜려고 했는데, 예외상황이 생각났다. 화살표키나, 마우스로 커서를 이동했을 때 그 위치, 어떤 문자가 추가됐는지를 알 방법이 없다. 지금 작성하는 순간, 생각난 게 onChange 이벤트핸들러에 커서 위치를 가져오면(target.selectionStart) 가능할 것 같기도한데..

- 생각: input을 하나로는 어려울 것 같고, range slider 커스텀하듯이 진짜 인풋, 가짜 인풋을 만들어서 진짜 인풋을 투명하게 해서 하면 어떨까 해봤는데..슬라이더는 위치, value 조정만 하면 되지만 인풋에서는 커서를 조정해야되기 때문에 꽤나 복잡했다. 

- 알게 된 것: 이걸 큐와 같이 이야기하고 찾아보면서 javascript에 참 모르는 게 또 많다는 걸 알게 됐다. 커서의 위치를 알려주는 속성, 커서의 위치를 바꿔주는 메서드, 선택한 곳만큼 드래그해주는 메서드 등 다양하게 있더라. 신기😲

e.target.selectionStart // 커서의 위치 속성

const input = document.querySelector('#password');
const part = input.createTextRange();
part.move('character', 1);
input.select(); // 전체 드래그
input.setSelectionRange(3, 4); // 3, 4 사이를 드래그

 

 

---

참고📚

블로그 - [제로초] History API

블로그 - 자바스크립트로 다른 URL 호출하기