전체 글 (281) 썸네일형 리스트형 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 프로토콜과의 차이점 일방적으로 클라이언트가 요청을 보내고 서버로부터 응답받는 단방향 통신이며 연결의 지속성이 없다. 연결이 되어있으면 계속 양방향으로 실시간 통신할 수 있는 프로토콜이다. TIL 23.01.18 react-toastify 중복 처리 기존에 있는 alert 창은 디자인이 마음에 안들어서 toastify 라이브러리를 이용하기로 했다. 참고문서 https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/ Limit the number of toast displayed | React-Toastify Notifications are useful to get the attention of the user. But displaying too many of them can also be counterproductive. fkhadra.github.io react-toastify 설치 명령어 $ npm install --save react-toastify $ yarn a.. TIL 24.01.10 React-hook-form value 객체 문제점 프로젝트 진행 중에 react-hook-form 을 쓰게 될 일이 있어서 사용했다. 특수하게 api 를 받아와서 결과 값을 도출하는 로직이어서 react-hook-form 에서 제공하는 data 를 바로 body로 넘기는 코드를 작성했다. 그런데 객체로 값을 넘겨줄때, 아래처럼 v.value 가 객체면 react-hook-form 에서 정한 value type에 어긋나기 때문에, 그 객체 자체를 전달해줄 수 없다. 따라서 JSON.stringify 로 문자열형태로 전달해주어야함 ; 그런데 이상태에서 값을 전달하면 api 를 제대로 받아올 수 없기 때문에 수정 해주어야한다. 시도해본 것 다음과 같이 react-hook-form 에서 제공하는 watch 를 사용했는데, 해당하는 register 의 v.. TIL 23.09.30 기술 interview (18) 18. http, https 차이점에 대해 설명해주세요. http(hyper text transfer protocol) 서버/ 클라이언트간에 데이터를 주고받기 위한 프로토콜 http 는 일반 텍스트 이므로 권한이 없는 당사자가 인터넷을 통해 쉽게 엑세스하고 읽을 수 있다. https(hyper text transfer protocol secure) 데이터 암호화가 추가 된 프로토콜 모든 데이터를 암호화 된 형태로 전송한다. 사용자가 민감한 데이터를 전송할 때, 제 3자가 데이터를 가로챌 수 없다. 이전 1 2 3 4 5 ··· 36 다음
