영원히 흘러가는 강

앞서서 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..