본문 바로가기

전체 글

 (276)
TIL 24.05.14 react-query refetchOnWindowFocus 옵션 https://tanstack.com/query/v4/docs/framework/react/guides/window-focus-refetching Window Focus Refetching | TanStack Query React DocsIf a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option: Disabling Globally // ctanstack...
TIL 24.04.24 System limit for number of file watchers reached 에러 1. 문제점 이번에도 기능 구현 후 빌드를 했다. 빌드과정에서 문제는 없어보였는데 배포한 사이트에 접속해보니 502 bad gateway 가 떴음. 이번에는 무슨 일인가 싶어 서버로그를 확인했는데 Error: System limit for number of file watchers reached ... 에러가 발생하였다. 이후에 파일경로가 있길래 그 파일은 건드리지도 않고 빌드했는데 대체 무슨문제인가 해서 구글 검색을 해보았다. 2. 해결방안 React 처럼 프론트엔드 개발환경에서는 많은 수의 파일감시자가 필요한데, 이 한도를 초과했기 때문에 발생하는 에러라고 한다. 개발을 너무 열심히 하다보면 날 수있다는 에러인데 정말인가 https://github.com/gatsbyjs/gatsby/issues/11..
TIL 24.04.23 TAR_ENTRY_INVALID checksum 에러 1. 문제점 여느날과 같이 npm install 패키지 해서 다운받으려고 보니까 갑자기 에러남. 그냥 라이브러리 에러인줄 알고 별일 아니겠거니 하고 무시했음. 근데 이러고 product 에 올렸는데 빌드중에 에러가 나는 것임 퇴근 10분전에 난 에러라서 더 당황스러웠음 2. 시도해본 것 일단 빌드중에 난 에러라 여기 찍힌거 다 해봤음 npm 다시 최신버전으로도 설치해보고 npm install@latest 캐시가 꼬인 문제라서 캐시를 삭제하면 된다고 하길래 캐시도 지워봄 npm cache verify 다 안됨 3. 해결방안 백엔드분께서 로그확인 해보라고 하셨는데 정답은 생각보다 간단했음 ... 네이버 api 써본다고 프론트단에서 임시로 proxy 를 package.json 에 추가했었는데 그 다음줄에 추가..
TIL 24.04.12 Typescript 타입 에러 무시하기 1. 문제점 타입 스크립트 작업 중, 모듈을 찾을 수 없다고 import 하는데 계속에러가 생겼다. import { encryptTransform } from "redux-persist-transform-encrypt"; 2. 시도해본 것 그래서 해당 타입을 다운받았는데 뭔가 충돌이 생긴건지 제대로 먹히지가 않았다. 그래서 지우고 다시 설치했는데도 같은문제가 반복됨 yarn add redux-persist-transform-encrypt @types/redux-persist-transform-encrypt 3. 해결방안 타입무시하는 명령어가 있어서 사용했다. 해당 주석 기준 다음줄의 타입을 무시해준다. //@ts-ignore import { encryptTransform } from "redux-pers..
TIL 24.04.03 geolocation 위치 권한 요청 1. 문제점 기본적으로 로컬 개발환경이거나 https 를 달지 않으면 http 에서는 사용자의 위치를 불러올 수 없다. 정식적으로 https 로 연결을 마친 상태였는데 위의 경고는 뜨지 않으나, 위치 권한을 요청하는 알람이 안 뜸. 페이지 설정에 들어가서 바꿔줄 수 있지만 사용자 입장에서 위치 권한 알림이 자동으로 뜨지 않으면 불편할 것이다. 2. 시도해본 것 처음에는 페이지 설정 > 위치에 들어가서 설정을 변경해주었다. 허용을 하면 내 위치를 불러오고, 요청(기본값)을 설정하면 다음과 같이 권한을 요청한다. 그러나 매번 사용자가 페이지 설정을 눌러서 이 권한을 설정해 줄 수도 없고, 페이지에 들어가면 기본적으로 물어봐야 된다. 3. 해결방안 Navigator 객체는 다양한 프로퍼티를 가지고 있는데 이중..
TIL 23.04.02 Kakao Map 줌 인 아웃 마커 중복 에러 1. 문제점 기존에 카카오맵을 불러오는 방식은 다음과 같았다. 이렇게 되니 기존에 있던 마커리스트를 지워주는 코드를 작성하지 않아도 마커리스트가 변경돼면, 알아서 스크립트가 새로 로드되면서 굳이 사용할 필요가 없었다. useEffect(()=> { 1. 카카오지도 스크립트 로드하는 코드 2. 마커리스트 변경됐을때 실행할 코드 },[마커리스트]) 그러나 위 코드는 다음과같은 문제가 있었다. 지도 객체가 중복해서 로드되므로 줌 인, 줌 아웃 할때마다 전에 로드됐던 마커리스트들이 힐끔힐끔 보이는 단점이 있었다. 2. 시도해본 것 카카오 dev talk 에 나랑 같은 문제점을 가진 사람들을 찾아보니 지도 객체가 중복로드돼서 이런 버그가 발생한다고 해서 지도 로드 코드는 최초 한번만 실행한 후, 이후 마커리스트가..
TIL 24.03.29 redux-persist local storage 저장 암호화 1. 문제점 현재 로그인 기능 구현은 redux-persist 로 유저정보를 로컬스토리지에 저장하는 방식을 사용한다. 따라서 유저정보를 한번 불러오면 로그아웃 전 까지 유저정보는 스토리지에 저장되어 사용할 수 있다. 그러나 문제점은 로컬스토리지에 저장된 개인정보는 암호화가 되지 않고 그대로 보여주는 단점이 있음. 예를들어, 내가 공공장소에서 로그인을 하고 로그아웃을 누르지 않고 나갔는데 로컬스토리지에 저장된 추가적인 개인정보 노출이 문제가 될 수 있다. 이 방식을 해결하고자 블로그를 뒤졌는데 아무것도 안나와서, 최초(?) 로 작성해보려고한다. 2. 시도해본 것 local storgae 에 저장하면 암호화해서 저장할 수 있는 React Secure Storage 가 있는데, 이건 redux-persist ..
TIL 24.02.27 WebSocket 웹소켓 Web Socket 기존의 http 통신의 단방향 통신의 문제를 극복하고 실시간으로 통신할 수 있는 프로토콜. 주로 채팅앱, 알림, 예매 기능에서 사용됨 http 프로토콜과의 차이점 일방적으로 클라이언트가 요청을 보내고 서버로부터 응답받는 단방향 통신이며 연결의 지속성이 없다. 연결이 되어있으면 계속 양방향으로 실시간 통신할 수 있는 프로토콜이다.

티스토리툴바