영원히 흘러가는 강

요즘 인터넷 속도도 빠르고 네트워크 환경도 워낙 좋아서, , fetch 요청이 발생해도 체감되는 딜레이가 거의 없다.그래서인지 가끔씩 까먹고 구현을 하지 않는 경우가 있는데 최근 react-hook-form을 사용하면서 이런 상황을 마주했고,그리하여 유저의 액션 레벨에서 중복 요청을 막는 방법에 대해 작성을 해보려한다. 1. 일반 useState로 간단히 구성 ✅ 단순한 요청에 적합하고 , 쉽게 제어 가능하다. ❌ 로직이 복잡해질 가능성이 크다.const [isPending, setIsPending] = useState(false);const handleClickSubmit = async () => { if (isPending) return; setIsPending(true); try { a..

🐳 도커를 도입한 이유최근 개발자 면접에서 빠지지 않고 등장하는 질문이 있다.바로 "Docker 경험이 있나요?" 혹은 "CI/CD 구축해본 적 있나요?" 사실 프론트엔드 개발자 입장에서는 Docker가 백엔드나 인프라 쪽 이야기 일수 있겠지만 독립적인 환경의 필요성과 표준화된 환경의 필요하여 많이 사용하는거 같다이번 글에서는 Next.js 프로젝트에 Docker를 적용해보고,Next.js에서 제공한 경량화가 얼마나 차이나는지 볼까한다.🐳 Docker란? 공식홈페이지를 참고하자면 아래와 같다.Docker는 애플리케이션 개발, 배포 및 실행을 위한 개방형 플랫폼입니다. Docker를 사용하면 애플리케이션과 인프라를 분리하여 소프트웨어를 신속하게 배포할 수 있습니다. Docker를 사용하면 애플리케이션..

요약푸시 알림 등 여러 기능을 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..