영원히 흘러가는 강

요약푸시 알림 등 여러 기능을 next-pwa로 활용을 하려면 멀티 서비스워커가 필요한데빌드시에 sw.js를 최적화하여 단일 서비스워커가 아니라면 중복 혹은 오류를 뿜는다.그리하여 아래의 코드로 변경 필요1. register:false => 자동적으로 서비스워커가 등록되지 않아야함2.최상위 클라이언트 컴포넌트에서 멀티 서비스워커 등록!1. 문제 인식하기next-pwa는 sw.js를 자체적으로 빌드시에 서비스워커로 등록하지만 초기화를 하여 sw.js에 코드 작성 불가원하는 서비스워커의 기능을 추가하려면 커스텀 서비스워커가 필요.동시에 두개의 서비스워커 등록이 불가함 인식   2. 원인 찾아가기1.  next.config.ts에 customWorkerDir:"worker"로 추가    - /public/wo..

요약페이지의 알림 허용과 시스템설정에서의 브라우저 알림 허용 확인하기 !!mac  : 시스템설정 - 알림 - 사용하는 브라우저의 알림 체크window :  windows 설정 - 시스템 - 알림 및 작업 - 앱 및 다른 보낸 사람의 알림 받기 켬으로 변경1.  문제 인식하기버튼 클릭시 푸시 알림이 오도록 기능을 추가하였으나 버튼 클릭시 푸시 알림이 오지 않음* 환경 : mac pc 웹뷰 2. 원인 찾아가기백엔드 - 프론트간의 통신으로 되어 있는 부분 제거하여 프론트에서의 단독 테스트로 진행프론트에서 중요 코드 (ex. return() / useEffect) 제외 주석처리더 간결하게 쉬운 테스트 코드로의 변경최종적이라고 생각했던 방법 또한 통하지 않아 코드가 아닌 환경에서의 문제라 판단하고 재검색   3...

평소 어떤 기술을 언제 사용할지 모르기에 많은 기술을 접해보고자 하는 마음이 있는데  just do it!!!이번 프로젝트에서는 모바일 친화적이고 주요 기능이 모바일 기능이다 보니 native와 pwa에서 고민을 하였다. 최종적으로 pwa 도입 확정!!native 대신 pwa를 선택한 이유는 이미 작성한 프로젝트가 있기에 새로 native로 작성하는 거보다 pwa 도입이 효율적이라고 판단하였다 물론 성능이나 기능 측면에서는 아쉬운 부분도 있지만, PWA는 점점 더 발전하고 있기 때문에 이를 테스트해보고 싶어서 이 글을 작성한다. 1. Next.js를 사용중이기에 next-pwa 도입 평소 사이드프로젝트에서는 stable 이긴 해도 최고로 높은 버전을 사용하고 있다.그래서 내 프로젝트는 Next.js 15..

인공지능 기술이 빠르게 발전하면서 개인 비서로 ai를 많이들 사용하고 있다.가장 유명한 chatGPT를 필두로 claude , gemini , v0 등 많은 LLM(Large Language Model) 이 있으며 각 회사별로 많은 고객을 유치하기 위해 노력 중에 있다.위와 같이 다양하고 계속해서 변경되는 가격 구조를 비교해보고 효율적으로 사용하고자 글을 작성해 본다.이 글에서는 AI LLM API의 가격과 효율적으로 선택하기 위한 정보를 제공하려 합니다.    상단 이미지는 23/24 LLM 시장 점유율이다.해당 순서대로 작성해보려 한다.* 단순 텍스트 지원 api만 비교 (real-time / image / audio 제외)   본론에 가기 앞서서 우리는 과금에 대비를 해야 한다. 과금에는 "토큰"이..

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