영원히 흘러가는 강

내가 하고싶은것!- 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("상품이 없습니다.");..

정상적으로 작동하던 admin이 갑자기 로그인이 안되어서 애좀 먹었다.... 최근 명령어 history 다 찾아보고... 내가 뭐를 잘못했지 생각하다가 우연히 보게된 유튭 매우매우 간단하게 setting.py에 있는 세션 관련 코드를 다 주석시켜보라네? 성공...ㅎ 😅🔨

HTTP 요청과 응답은 비상태성과 비연결성의 특징을 가지고 있다 그리하여 우리는 데이터를 주고받으며 기록하고 싶은 사항이 있다면 쿠키 , 세션 , 웹스토리지 등에 저장하여 사용한다. 아래는 JWT에 대해 알아보기에 앞서 쿠키 , 세션 , 웹 스토리지에 대해 알아보고 싶다면 확인해보자 https://ryugaram.tistory.com/159 쿠키 (Cookie) , 세션 (Session) , 웹 스토리지(Local storage,Session storage) 차이 우선 각각의 차이와 장단점을 알아보기전에 우리는 왜 이걸 사용해야하는걸까? HTTP 요청과 응답은 흔히들 비연결성과 비상태성을 가졌다고한다. - 응답을 주고받으면 바로 연결을 끊고 , 새로운 ryugaram.tistory.com JWT ? JW..

우선 각각의 차이와 장단점을 알아보기전에 우리는 왜 이걸 사용해야하는걸까? HTTP 요청과 응답은 흔히들 비연결성과 비상태성을 가졌다고한다. - 응답을 주고받으면 바로 연결을 끊고 , 새로운 요청시에 재연결을 한다해서 비연결성 - 요청과 응답의 상태를 저장하지 않거니와 이전 기록을 기억하지 못한다해서 비상태성 하지만 우리는 상태를 유지하고싶은 상황이 있다 이런 비연결성과 비상태성을 보완하기 위해 우리는 쿠키 , 세션 , 웹 스토리지라는 애들을 사용한다. 순차적으로 각각의 장점과 단점만 간략하게 작성해보려 한다. (set , get , remove는 담지 않으려한다.) 쿠키 (Cookie) 브라우저(클라이언트)에 key-value 형태로 저장하는 데이터 파일 유효기간을 명시할 수 있으며 유효기간이 지나지 ..