티스토리챌린지 3

프론트엔드에서 post 중복 요청을 어떻게 막을까? (with tanstack-query, playwright)

문제 상황코드잽 (https://code-zap.com/) 서비스에서 코드 템플릿을 업로드(POST)할 때 누르는 "저장"버튼이 있다.정보를 모두 작성하고 "저장" 버튼을 빠르게 두번 누르면 같은 템플릿이 두개 생겼다.  이를 막기 위해서 무엇부터 해볼까 생각해보았다. 우선 브라우저 네트워크 창을 보니 "저장" 버튼을 누른 횟수만큼 POST 요청이 갔다. '아니 이거 서버에서 막아야하지 않나요?' 할 수 있지만 아직 막지 않은 이유는 1) 같은 title로 생성되는 템플릿을 막을 것인가? 2) 어떤 데이터로 같은 템플릿이란 것을 구분할 것인가? 등의 논의가 있었다. 어떤 단위 시간동안 같은 title로 들어오는 생성 요청을 막는다던지... 하지만 사실 결제 기능같이 크리티컬한 부분은 아니었기에 이 부분은..

React 2024.11.27

[해커톤] 채널톡 챌린저스 HACKY-TALKY 3기 해커톤 후기(11.8-9)

추억팔이KUCC에 들어온지가 언젠지.. 도 가물가물한데, 채널톡과 KUCC의 인연도 오래된 것 같다.채널톡에서는 동아리 지원금 뿐만 아니라 매학기 오피스 투어를 열어 대학생들에게 맛있는 저녁도 사주고 현직 개발자들과의 치킨챗(?)을 해준다. 이와 더불어 채널톡 챌린저스에 참여하는 각 대학 동아리 간의 해커톤인 채널톡 챌린저스 HACKY-TALKY를 개최한다.고려대 KUCC뿐만 아니라 DevKor 연대 YCC, 서울대 SCSC와 멋사, 카이스트 SPARCS, 세종대 엔샾 이렇게 구성되어있다.(여기서 인연을 맺은 사람들과 SKYST 연합 행사도 개최하고 했다) 작년 채널톡 해커톤에도 나왔었는데, 그 당시에도 랜덤매칭으로 나왔던 것으로 기억한다. 쿠씨(KUCC)의 민재형, 성철이와 YCC의 소효은님과 나왔었는..

회고 2024.11.19

useLayoutEffect는 언제 쓰는걸까?

사실 과제테스트를 끝내고 회고를 하다보니, 아래의 예시는 useEffect, useLayoutEffect 둘 다 쓸 필요가 없는 상황이었다... ㅎㅎ하지만 이를 위해 useLayoutEffect에 대해 알아봤던게 아까워서 일단 글을 써본다! --- 엘리스 회사 과제테스트를 보다가 아래와 같은 UI에서 가격 필터링을 구현해야했다.해당 가격 필터링은 URL search params로 저장하며 새로고침해도 해당 필터링 값이 남아있어야했다.이를 구현은 했지만, 새로고침하면 처음에는 "무료" 필터링이 선택되지 않은 상태였다가 선택된 상태로 바뀌면서 화면 렌더링이 두번 되는 이른바 "깜빡"이는 현상이 발생했다. `react-router-dom`의 `useSearchParams` 훅을 선언했고, `setSearchP..

React 2024.11.17