영원히 흘러가는 강

path('',ModifyCoupon.as_view()),  개인 프로젝트 진행중에 405 Method Not Allowed 에러가 발생! 우선 메소드가 잘못되었다니 프론트 - 백엔드간의 메소드부터 동일한테 체크해보았다결과는 이상없음...그리하여 검색을 해보니 슬래시의 유무에 따라 처리가 달라질수도 있으니 추가해보라고하여 아래와같이 끝에 /만 추가했더니  path('',ModifyCoupon.as_view()), 오류가 사라졌네..?무슨이유인지 검색해본 결과를 작성해본다. 사실 나의 경우는 실수로 중복될만한 url을 작성했다..ㅎ  url 설정시에는 슬래시의 유무에 따라 서로 다른 주소가 된다고 한다.ex)  /test 와 /test/  는 서로 다른 주소를 가리킨다. 슬래시가 없으면 파일   있다면 디..

앞서서 react-quill로 s3에 이미지 저장하고 등록하는 코드까지 구현했다.근데 각자의 이미지 크기가 있기에 크기가 죄다 중구난방이였다...ㅎ그리하여 quill image를 resize 해줄수 있는 라이브러리를 장차 3일에 걸쳐 찾아보게되었다 (다른거 검색하다 잠깐 찾아보는 3일..?)webpack을 건드려야한다는 아이도 있고 정상적으로 구동이 안된다는 아이들도 많았다,,,그리하다 찾게된 라이브러리인데 매우 간단하게 구현하여 공유차 작성해본다.xeger/quill-image 사용방법도 매우매우 쉽다.우선 설치부터 진행하자npm install @xeger/quill-image-actions --save-prodnpm install @xeger/quill-image-formats --save-prod이..

내가 하고싶은것!- react-quill을 이용하여 이미지 등록시에 presigned url을 이용하여 이미지를 미리 등록한다.- react-quill value에는 위에 등록한 주소를 넣어 하나의 필드로 저장한다.  presigned url을 이용하는 방법에는 1. 프론트엔드에서만 이미지 업로드2. 프론트엔드 ,백엔드 통신 이후 프론트에서 이미지 업로드첫번째 방법으로는 백엔드를 거치지 않고 프론트엔드에서만 활용하기에 장점만큼 단점이 크다.장점으로는 당연히 편리하다. (서버를 고려하지 않아도 되므로)단점으로는 보안에 매우매우 취약하다 (aws 과금 당해서 돈내기 싫다...)두번째 방법으로는 백엔드에 파일을 보내서 presigned url을 받아오고 프론트에서 그 주소로 파일을 올리는 방법이다.장점으로는 ..

내가 하고싶은것!- react-quill을 이용하여 이미지 등록시에 presigned url을 이용하여 이미지를 미리 등록한다.- react-quill value에는 위에 등록한 주소를 넣어 하나의 필드로 저장한다. 많은 에디터 라이브러리가 있지만 가장 대중적으로 많이 사용되는 react-quill을 이용하여 내 프로젝트의 상세페이지를 구성해보려한다.내 환경은 제목에서처럼  react + react-quill + Next.js + drf 이다. 위에서처럼 내가 하고싶은것 의 첫번째가 react-quill을 Next.js에 적용하는 사항이다보니이번편에서는 react-quill / Next.js를 많이 다룰 예정이다.   react-quill은 시작부터 오류를 뿜어내준다 ..ㅎ import ReactQuil..

내 프로젝트를 크롬에서 주로 확인하다가 firefox에서도 잘 동작하는지 확인해보려 켜보았다.첫 메인 페이지부터 내가 예상하지 못한 사항이 있네..?ㅋㅋㅋ그거슨 바로 firefox에서 scrollbar가 보여진다는 사항이였다.. 우선 많은 글들을 확인해보니 대부분의 글들에서는 plugin을 설치하라는 방법을 많이 제시하였다 물론 plugin도 좋은 사항이지만,,, 설치보다는 직접 구현하는게 낫겠다라는 생각에 더 많은 구글링을 하였고 찾은 결과는 아래와 같다.   global.css에 코드 추가하기@tailwind base;@tailwind components;@tailwind utilities;// add the code bellow@layer utilities { /* Hide scrollba..

프로젝트로 로컬에서만 진행하던 사항을 실서버에 배포해서 확인해보고 싶은 마음이 들었다.여러 배포 사이트를 확인했지만 간단한 사항이기에 무료 배포가 가능한곳으로만 알아봤고 pythonanywhere 이 채택되었다  그림이 없어 따라오기 힘들수 있겠지만 충분히 설명을 넣었다고 생각한다..  1. 로컬에서 진행해야할것 setting.py에 아래와 같이 추가 // 배포시 디버그는 falseDEBUG = 'False' // 허용 가능한 host에 pythonanywhere 주소 추가ALLOWED_HOSTS = [... , '.pythonanywhere.com']// static 파일 주소STATC_ROOT = os.path.join(BASE_DIR,'static')  그 이후 아래의 명령어 입력 python ma..

사이드 프로젝트에서 로그인 처리를 jwt를 활용하여 진행하였다. Next.js에서 middleware를 제공하고있기에 매 fetch 마다 검증하고 갱신하는게 아닌middleware matcher에 해당되는 부분에만 jwt를 걸기로 했다.   내가 작성한 jwt의 플로우는 아래와 같다. 1. 로그인 요청시 access,refresh 토큰을 저장한다. (당연히 refresh는 httponly) 2. middleware에서 matcher에 해당되는 페이지가 있다면 refresh 토큰이 있는지 확인  3. refresh가 없다면 로그인 페이지 / 있다면 refresh 토큰 검증 로직 진행 4. 검증 결과가 200이라면 아래의 5번 로직을 따름 / 아닐 경우는 만료이거나 잘못되었을 경우이기에 login 페이지로 ..

현재 사이드 프로젝트 진행 중에 이런 방법도 있구나 하면서 올리는 글!사이드 프로젝트에서 현재 zustand를 사용중에 있고 내가 맞딱드린 문제는 아래와 같다 커머스 관점으로 분석 및 개선 가능하게 장바구니를 서버에서 저장하기로 했다.!근데 장바구니 갯수를 불러와 layout등에서 전역적으로 사용해야하는데 어떻게 하지? 상품 페이지에서 장바구니에 담을때 , 장바구니에서 삭제할때 , 장바구니에서 옵션 변경하여 상품이 삭제될때위의 3가지의 변경점이 생길텐데 각각 어떻게 핸들링 해야할지 고민하다 zustand 공식 페이지에서 store 내부에서 fetch가 가능한 모습을 보고 작성하게 되었다. zustand에서는 비동기 액션이라고 정의해두었다. 공식문서에 나와있는 async actionconst useFish..

프론트엔드 개발자라면 코어 웹 바이탈 개선(CWV) 은 당연히 들어봤을것이고 적용도 해보았을거라고 생각한다.나도 단순 구현만 생각하던 시기에서 크게는 유저의 경험과 SEO를 생각하기 시작했고직접 내 프로젝트에 적용해가며 배워보려한다.!(이 글에서 코어 웹 바이탈 개선(CWV) 에 대한 효과나 장점 ,설명 등은 다루지 않으려 한다. 추후에 따로!)  LCP (Largest Contentful Paint)LCP : 세가지 코어 웹 바이탈 중 하나이며 한글로 설명해보자면 페이지 내 가장 큰 렌더링 요소의 렌더링 시간이다. 측정은 페이지 처음 로드 시작점부터이며 좋은 점수로는 2.5초 (2500ms) 내에 유저에게 전달되면 좋은 LCP이다. (여담으로 같은 페이지여도 큰 덩어리가 먼저 보이면 사용자 경험이 올라..

바쁘신분들을 위한 요약.!strict mode로 인한 두번의 호출 발생next.config.js에 아래의 코드 추가reactStrictMode: false,   useEffect !리액트 개발자라면 무조건 사용하게 될 요녀석 Next.js에서 사용하게 되면 렌더가 두 번 일어나게 되는데 내가 코드를 잘못작성했는지 한참 찾아봤었다  나의 경우에는 ,아이디를 가져와서 없다면 바로 로그인페이지로 보내버리고 콜백도 필요 없는 간단 페이지였다. useEffect(() => { const userId = JSON.parse(localStorage?.getItem("userId") || "{}"); if (userId?.state?.userId === 0) { alert("상품이 없습니다.");..