Dev갱이 Dev갱이

코드를 볼때부터 DRY를 지키지 않은 코드라는것을 바로 알 수 있다.심지어 해당 코드 중복 방식은 무려 56개의 컴포넌트에서 사용되고 있다....  커스텀훅으로 코드 리팩토링 하기목표Loading, Report Noti 관려 라이브러리들을 커스텀훅에서 import 하고 사용하기mutationFn과 mutationKey를 커스텀훅이 호출 하는곳에서 넘겨주기 OnMutate와onError는 거의 동일하게 사용되기 때문에 고정이고처리 완료되어 성공 했을때 Report.success 부분에 옵션들과 callback 함수를 통해서 성공 후의 작업들을 처리하게끔 작성 하였다.만약에 성공후의 data를 가공하거나 해야될 경우에는 코드를 수정 해야 될것 같다.  목표대로 Noti 관련 라이브러리들을 캡슐화 되었고 mu..

dotenv 사용시에 똑같은 환경변수에 값만 바뀌었을때 제대로 바뀌지 않는 문제가 있다.S3 업로드 키의 환경변수값을 변경 했을때 애플리케이션 상에서 log를 출력하면 정상적으로 바뀐것으로 나오나 실제로는 제대로 변경 되지 않아서 AWS Access Key Id you provided does not exist in our records 에러가 발생한다.해당 문제가 발생하는 원인을 나는 캐싱 문제라고 생각 했다. 아마도 이전 AWS key값이 캐싱되어 환경변수의 값이 변경되었음에도 이전 캐싱된값을 계속 가져오는것이라고 생각했다. 해결을 위한 조치 node_modules 삭제와 dist 파일 삭제docker 이미지 전체 삭제 및 다시 빌드$ docker-compose -f docker-compose-dev..

Access Key도 정상적이고 역할도 정확하게 주었는데 도대체 왜 안되는걸까  https://docs.aws.amazon.com/ko_kr/redshift/latest/dg/s3serviceexception-error.html S3ServiceException 오류 - Amazon RedshiftS3ServiceException 오류 가장 일반적인 s3ServiceException 오류의 원인은 형식이 잘못 지정되었거나, 잘못된 자격 증명 문자열이 있거나, 서로 다른 AWS 리전에 있는 클러스터와 버킷이 있거나, Amazon S3 권docs.aws.amazon.com잘못된 액세스 키 ID 액세스 키 ID가 존재하지 않는 경우, 다음과 같은 오류 메시지가 표시됩니다. 공식 문서를 보니까 그렇다고 한다. ..

REV결과를 역순으로 반환합니다.기본적으로 zrange는 오름차순으로 결과를 반환하지만, REV 옵션을 사용하면 내림차순으로 반환합니다.BYLEX사전식 순서(lexicographical order)로 정렬된 요소들을 반환합니다.문자열 비교를 기반으로 정렬하며, 숫자 스코어가 아닌 문자열 값 자체를 기준으로 합니다.WITHSCORES각 요소와 함께 해당 요소의 스코어도 함께 반환합니다.결과에 각 멤버의 스코어 정보가 포함됩니다.LIMIT결과의 개수를 제한합니다.주로 OFFSET과 COUNT 두 개의 인자와 함께 사용됩니다.예: LIMIT 0 10은 처음 10개의 결과만 반환합니다.BYSCORE요소들을 스코어 기준으로 정렬하여 반환합니다.이 옵션을 사용하면 스코어 범위를 지정하여 결과를 필터링할 수 있습니다

최근 검색어 기능최근 검색어는 10개를 저장할 수 있고 최근 10개의 검색어를 가져온다검색어가 10개를 초과하면 가장 오래된 검색어를 삭제하고 저장한다.Redis의 Sorted Set 자료구조 사용일반적인 Set 자료구조는 요소들의 순서가 보장되지 않고 중복을 허용하지 않는다는 특성을 가지는데 반해 Sorted Set 자료구조는 중복을 허용하지는 않고 개별 요소들이 특정한 기준에 따라 정렬되어있는 자료 구조이다.최신 검색어 저장 기능에 Sorted Set을 사용중복을 허용하지 않기 때문에 중복된 검색어는 저장 하지 않는다.특정한 조건 (검색된 시간)에 따라 정렬되어서 저장할 수 있기 때문에 제일 오래된 검색어부터 삭제 할 수 있다. zdd는 sort set 자료구조에 저장하는 메서드zcard는 sort ..

최초로 랜딩 페이지에 왔을때 getSessionStorage를 통해서 해당 데이터가 없을 경우에 Slash 이미지를 보여주고 해당 스토리지에 데이터를 저장한다.  SessionStorage를 사용한 이유브라우저 창을 닫았을 경우 사라지는 휘발성 데이터여야 한다. 브라우저창을 닫고 다시 들어 왔을때 최초 접속이기 때문이다.브라우저 창을 닫지 않는 상태에서 다시 랜딩페이지로 갔을경우 splash 이미지가 로딩되지 않아야 하기 때문에

page router 기반에서 SSR 사용을 위해 사용 되는 getServerSideProps여기서 굉장히 불편한 상황이 발생하는데 바로 원하는 ssr에 사용될 로직을 사용하지도 않았는데 accessToken과 cookie를 넣어서 인증된 사용자인지 검증하는 로직을 ssr 사용되는 모든 페이지에 사용 되야 하는 번거로움이 따르고 아주 많은 중복 코드가 발생한다.withAuthServerSideProps.ts로그인 상태일경우 acceeToken을 header Bearer 토큰에 넣어주고 refreshToken을 cookie에 넣어준 상태의 axios 인스턴스를 반환해주고 로그인 상태가 아닐경우 로그인 페이지로 이동시키는 고차함수GroupDetailInviteCodePage.tsx 에서 SSR 사용시 이미..

Reference- ( https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 )  SSR으로 axiosRefreshAPI가 실패 할 경우 reriect를 이용하여 메인 페이지로 보내게 SSR 실행하게 만들었다.  해당 Home 컴포넌트가 호출 되면서 useLayoutEffect에 경고 에러가 발생했다. Reference를 참고하여 2번째 방법으로 해결했다. function Parent() { const [showChild, setShowChild] = useState(false); // Wait until after client-side hydration to show useEffect(() => { setShowChild(tr..