전체 글
-
HOC(Higher-Order-Components)를 활용한 사용자 인증 정보 관심사 분리React.js 2024. 10. 10. 11:50
현재 사용자의 로그인 정보가 필요할 때회원 정보를 상태관리 라이브러리를 통해 전역에 담아서 사용하는 경우회원 정보가 필요 할때마다 api를 요청SSR에서 HOF 고차함수를 활용하여 인증된 사용자를 props로 넘겨주기HOC 고차 컴포넌트를 활용하여 사용자를 체크하고 인증된 사용자의 정보를 가져오는 관심사를 분리어떻게 효율적인 방법으로 구현할 수 있을지에 대해 고민 했을 때 해당 4가지 방법을 떠올렸다.1. 전역 상태 관리 라이브러리 사용장점: 사용하기 편리하며, 어디서든 쉽게 사용자 정보를 접근할 수 있습니다.단점:보안적인 문제: 클라이언트 측에서 전역 상태에 민감한 정보(예: 토큰)를 저장하면, XSS 등의 공격에 노출될 수 있습니다.인증된 사용자 재검사 문제: 한 번 로그인한 이후 로그아웃 전까지 다..
-
Socket.io V3이상부터 auth를 이용한 인증시 발생하는 문제점Socket.io 2024. 9. 28. 10:17
현재 사용중인 socket.io 버전server: socket.io 4.7.4client : socket.io-client 4.7.4 socket.io 공식 문서 ( https://socket.io/docs/v4/middlewares/#sending-credentials )socket.io v3부터 haeder에 bearer token을 담아서 보내는것이 불가능 해진것같고 auth 객체를 이용해서 사용 해야 되는것 같다. 어떻게 header로 보내는 방법들을 찾아보았지만 다운그레이드 하지 않는 이상 방법이 없다. 낭비한 내시간 ㅠㅠ 문제 발생근데 여기서 매우 불편한 문제가 발생 했다. 그것은 바로 postman을 사용하여 socket.io의 테스트를 진행할 때 발생하는 문제이다. socket.io c..
-
-
Redis를 활용한 외부 Api 요청 개선하기Redis 2024. 9. 24. 21:46
현재 프로젝트에서는 Tour-Api 서비스를 이용하고 있는데 외부 api를 호출 할때 Redis를 이용하여 어떻게 하면 더 최소로 호출 하게 만들 수 있을지에 대해서 생각 해봐야한다.1. 외부 api를 request 마다 계속 호출하게 되면 비용 과금 문제가 발생한다.2. 똑같은 결과값을 가진다고 가정 했을 때 현재 서버에서 외부 Api 서버를 호출 할때 걸리는 시간이 발생 한다. 도의 정보를 가져오는 api 해당 api의 결과를 보게되면 알 수 있듯이 왠만하면 절대 바뀌지 않을 정보들이다."list": [ { "rnum": 1, "code": "1", "name": "서울" }, ..
-
NestJS에서 Redis를 활용한 좋아요 성능 개선Redis 2024. 9. 23. 16:32
현재 구조의 문제memberId와 feedId가 식별자 관계로 중복 데이터가 존재하지 않게 무결성을 보장 하지만 잦은 insert와 update는 성능 저하를 일으킨다.피드 좋아요 개선댓글 좋아요 개선1. Redis의 `Set` 자료구조를 이용하여 개선하기set 자료구조를 사용한 이유는 RDBMS에서도 무결성을 보장하기 위해 유니크 제약조건을 지키기 위해 식별자 관계로 PK를 사용 했는데 Redis의 set 자료구조를 사용하면 중복된 데이터가 없기 때문에 무결성을 보장할 수 있다레디스의 `set` 을 이용하여 이 기능을 간단하게 구현할 수 있으며, 빠른 시간 안에 처리할 수 있다. 1. 피드의 아이디를 사용해서 key를 생성2. 해당 피드에 좋아요를 누른 사용자의 ID를 아이템으로 추가하면 동일한 ID값..
-
react-query useQuery 커스텀훅으로 재사용하기React.js/React-Query 2024. 9. 20. 15:37
useQuery는 useMuation처럼 팩토리 메서드 패턴으로 커스텀훅으로 만들 필요는 없어 보였다. 그래도 중복되는 쿼리키를 가지는 useQuery는 관심사를 분리하여 재사용 할 수 있게 커스텀훅으로 만드는게 좋아 보였다. feed-id를 통해서 특정 feed를 가져오는 useQuery 커스텀훅으로 만들기feed를 수정하기 위해 피드를 가져오는 부분 Notification에서 feedId를 통해 특정 피드를 가져오는 부분 useFeedByIdQuery.ts 커스텀 훅으로 만들었을때 장점feedDetail에서는 refetch가 필요하고 CreateFeed에서 remove가 필요할때 커스텀훅을 만들어 사용하면 원하는 옵션을 호출하여 사용할 수 있다.options를 호출하는 부분에서 사용하여 enable..