코딩쌀롱

✱문제1. 체크박스 체크되는 영역 문제 : chakra UI의 Checkbox를 사용해서 선택하는 모달창을 만들었는데, Checkbox만 클릭해야 체크되고 그 외의 MenuItem 요소부분을 클릭하면 모달창이 닫히거나 체크되지 않는 문제 생각 : ui 라이브러리를 사용하지 않고, 직접 짰다면 label을 이용해서 쉽게 해결할 수 있는 문제인데.. 만들어진 걸 가져다 쓰려니까 내가 주는 className이나 data-id값이 어디에 저장되는지 알 수가 없어 많이 헤맸다. 해결 : MenuItem > ItemWrap, Checkbox 구조에서 MenuItem > Checkbox > ItemWrap 구조로 변경 체크박스 자식인 ItemWrap을 클릭해도 체크가 된다. 하지만 라벨 width === 아이템랩 w..

✱JWT 디코딩은 어느 쪽에서..? JWT 토큰을 서버에서 받아서 로컬스토리지에 저장을 했다. 토큰의 public claims로 사용자 이름, 프로필 사진 url이 인코딩되어 있다.이 정보를 사용하려고 할 때, 프론트에서 디코드를 하는 것이 맞는 것일까. 아니면 백엔드에서 디코드를 하고 응답으로 받는 것이 맞을까? 16일에 적었던 글에 큐랑 이야기했던 부분에 대해 간단하게 정리했었다. 요약하면, 보안이 필요한 예민한 정보가 아니라고 하더라도, 프론트에서 디코드를 하는 것보다 백에서 해주는 게 맞을 것 같다는 내용. 그 이후에 백엔드 분과 회의할 때 디코딩을 어떻게 해야할지 말씀을 드려봤다. 백엔드 분께서는 jwt 토큰에 있는 내용들이 예민한 내용이 아니기 때문에 프론트에서 바로 디코딩을 해서 정보를 사용..

✱dataset 상황 : 체크박스 모달에서 라벨이 선택되면 모달창이 닫혔을 때 선택된 라벨이 렌더링돼야 한다. 의도 : 모달 내 메뉴 아이템 요소에 dataset속성으로 라벨에 대한 정보를 객체로 넣고, 클릭 && checked 됐을 때 dataset 정보를 state로 저장해서 렌더링하려고 했음 문제 : dataset의 반환값이 DOMStringMap 이라서 객체를 넘겨줄 수 없음..그냥 문자열로만 받을 수 있음. 이걸 왜 이제 알았지...? 해결 : 코드가 좀 늘어나긴 하지만 각각 키로 주려고 했던 정보들을 dataset을 여러개로 해서 보냄 그리고 클릭핸들러에서 그 정보들을 객체로 만들어줌. ... Object.assign({}, element.dataset) 그리고 추가로, data- 뒤에 가능한..