Error Log4 #4. 다수 컴포넌트에서의 useWebSocket 훅 사용 useWebSocket으로 웹소켓 구현하기이번 프로젝트에서 웹소켓을 통해 게시물의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현하였다.프론트엔드에서는 웹소켓을 통해 전송하는 데이터의 형태를 정확히 설정하고,웹소켓을 통seyoonagain.tistory.com 😎 useWebSocket으로 웹소켓을 구현하기이~이번 프로젝트에서 웹소켓을 통해 여행 후기의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현했당.그런데 문제점 발견! 🚨 다중 컴포넌트에서의 연결좋아요 관련 컴포넌트와 댓글 관련 컴포넌트들에서 각각 useWebSocket 훅을 호출하다보니,하나의 연결이 아닌 사용하는 컴포넌트 개수만큼 연결이 생성된 것!이렇게 불필요한 연결이 많아지게 되면 성능 저하가 발생할 수 있어 수정이 필요하다고 생각했.. 2025. 1. 17. #3. useRouter() from next/router vs. next/navigation 오류 발생 상황 useRouter() 입력 시 자동완성으로 뜨는 import 가능 패키지 중 가장 상단의 next/router로부터의 패키지를 선택하였더니 아래와 같은 오류가 발생했다. 자동완성으로 뜨는 두 가지 import 가능한 패키지1. next/router2. next/navigation 오류 발생 원인 두 패키지 간 차이에 의해 오류가 발생한 것 공통점- 두 패키지 모두 라우팅에 관련된 기능을 제공 차이점next/router- 더 이전에 나온 라우팅 관련 패키지로, 기본적인 라우팅 작업을 위해 만들어진 좀 더 가벼운 패키지이다.- 라우팅을 pages 폴더 기반으로 하던 next.js 13버전 이전에서 사용했던 패키지이다. next/navigation- 라우팅을 app 폴더 기반으로 하는 next.. 2024. 12. 28. #2. Supabase 테이블의 특정 column에 대해 중복값 처리하기 자동차 연비 관련 웹 사이트를 만들어보고 있다. 구현하고자 한 것연비 정보를 필터링 할 수 있도록몇몇 column들의 값을 select 태그를 이용해 선택하여 검색할 수 있는 기능을 구현하고자 했다. 그럴러면 중복값을 처리하고 option 태그에 하나 하나 담아야 했다.시도한 방법chatGPT에서 알려준 방법이었던 .distinct()는 작동하지 않았다. 그래서 distinct()를 빼고, set을 이용하여 중복값을 처리하였지만. 문제가 있었다. Supabase에 저장된 데이터는 대략 3400개 정도인데,저 코드로는 1000개의 데이터만 가져오기 때문에1000번째가 넘어가는 데이터에 대해서는 중복값 처리가 불가했던 것. 해결방법1. Supabase 내에서 SQL 에디터를 통해 선택한 column의 고유.. 2024. 9. 24. #1. margin: auto로 가운데 정렬이 안되는 경우 Error Log #1._margin: auto로 가운데 정렬하기text-align을 center로 설정하거나,flexbox에 justify-content를 center로 설정함으로써 가운데 정렬을 하던 나에게.margin: auto로.center라는 단어를 쓰지 않고.가운데 정렬을 해내는 것은.참 특이혔다...특이혔어...배운 거 써먹겠다고 비장하게 썼다가 아무런 일도 일어나지 않았을 때의 뻘쭘함을 기억하고자. 로그를 남긴다.margin: auto란?브라우저가 element를 가운데로 정렬하기 위해left와 right의 margin값을 자동으로 계산하여 설정하는 방식margin: auto가 제대로 작동하기 위한 조건Block-level해당 element는 block-level element(div, p.. 2024. 9. 6. 이전 1 다음
