kasumil의 코딩 공작소

최근 Next.js 기반 서비스에서 배포 이후 발생하는 Prefetch 404 문제를 해결하면서 고민했던 내용을 정리해보려고 한다.현재 서비스는 Azure의 Slot Swap 방식으로 배포하고 있으며, 별도의 여분 서버에서 구버전과 신버전을 동시에 서비스하는 구조가 아니다.이 때문에 배포 직후 기존 버전의 페이지를 사용하고 있는 사용자에게서 Prefetch 버전 불일치 문제가 발생할 수 있었다.1. 문제 상황현재 배포 구조를 단순화하면 다음과 같다.Client ↓www ↓Active Slot예를 들어 기존 버전이 A이고 새로운 버전 B를 배포했다고 가정해보자.배포 이후에도 이미 A 버전의 페이지를 열어둔 사용자가 존재할 수 있다.사용자 브라우저└─ A 버전 Client이 상태에서 페이지 내부의 Pre..

X-Content-Type-Options: nosniff 해당 옵션이 켜져있을 경우 이니시스 pc 결제시 모달창을 끌 경우 화면이 블랙스크린이 되어버린다.해당 옵션 찾느라 고생함.

애저 서버에서 HSTS를 설정하고, 프론트 서버에도 HTTP Strict-Transport-Security, HSTS 설정했더니갑자기 결제모듈이 죽었다.사이트가 터지는줄 알았는데, nextjs tree는 살아있고 iframe 태그만 죽었던 것..왜냐하면 서버에서 설정해도 http로 접속해져서 넣은거였는데, 알고보니 헤더가 중복되어 발생하는 문제이건 아니겠지하고 최종테스트까지 넣은건데 당황스러웠다.이거때문에 별수없이 프론트는 hsts를 수동으로 리다이렉트하게 넣었다.서버는 자동으로!

왜 이 프로젝트를 시작했는가업무를 하면서 화상회의, 문서 작성, 코드 리뷰, 메신저가 모두 분리되어 있다는 점이 불편했다.회의는 Zoom,문서는 Notion,대화는 Slack,코드 리뷰는 GitHub에서 이루어지는데 작업 흐름이 계속 끊겼다.특히 개발자 협업에서는 화면을 공유하면서 문서를 함께 수정하거나 실시간으로 의견을 남기는 일이 자주 발생하는데, 기존 서비스들은 특정 영역에만 집중되어 있었다.그래서 하나의 공간 안에서실시간 화면 공유음성 대화공동 문서 작성작업 이력 추적을 동시에 수행할 수 있는 협업 워크스페이스를 만들어 보기로 했다.프로젝트 목표Atlas Workspace는 개발자와 팀을 위한 실시간 협업 플랫폼이다.단순 화상회의 서비스가 아니라 다음과 같은 경험을 제공하는 것을 목표로 했다.하나..

웹앱에서 유튜브 영상을 유저들이 추가할 수 있게 해놨는데, 이때 들어오는 iframe이 의도치않게 새창열기를 한다.유튜브 앱을 미설치할 경우 뒤로가기가 가능해서 돌아갈 수가 있는데,설치된 경우 백화현상(흰화면)이 출력되는 문제가 발생하더라.이를 해결하기 위해서 공식문서를 봤는데, 샌드박스라는 속성을 넣어주면 되더라.default가 차단. 속성이 없으면 모든 기능 허용여기서 allow-popups을 빼서 적용하면 새창열기가 차단되서 앱을 업데이트 하지 않아도 되니까일단 임시로 적용해서 모두 막음.그렇다고 그냥 '' 하면 유튜브조차도 안불러와진다.https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox HTML in..

파일업로드 기능을 구현했다. 서버에 업로드 전에 당연하게 프리뷰를 위해 blob으로 이미지를 만들어 화면에 뿌려줬는데,pc, ios, aos를 구현했다. 근데 이상하게 잘 안된다?aos가 유난히 지랄나는 것. 알고보니 삼성 갤러리에서 사진을 전달할때 정보가 완벽하지 않은 것. aos 파일픽커로 들어가니 끊어지지 않는다. 파일이 깨지는 것도 없음.해당 내용을 보고 서버 업로드로 전환하기로 했는데, 네이버도 분석해보니 업로드 하는 방식으로 구현하고 있더라.그래야 ios, aos 버전업데이트에 영향을 받지 않다보니 그런거 같더라.역시 알아야지 왜 이방식을 쓰는것인지 알겠더라.

개발 중간 식겁한 현상이 있었다. 사진이 추가 되었는데 하단이 클릭되지 않는것..문제는 UAT(유저 액션 테스트- 인수테스트)가 다음날이라는 것...아시바 이거 어쩌지 했는데? ai가 찾아줬다.추가할때 바로 하단에 p태그를 삽입하는 것.그러면 입력공간이 쳐진거라 바로바로 붙을 수 있다.내 경우 onReady={ } 안에 해당 하는 dom이벤트를 감지해서 붙여주는 방식으로 구현했다.

구형폰에서는 잘되는데, 최신폰은 안되더라. 왜? 이런가 봤더니 최신이 맞는 내용.졸라 러프하게 보고 있더라.해결해보니까 이전 코드가 왜 이게 되지 하는 수준이었다...아무튼 사진은 file.arraybuffer()로 가져와서 blob으로 넣어 URL.createObjectURL(blobData)로 만들어 넣어주자.그렇게 해결했더니 ios, aos 모두 잘되더라 ㅎㅎㅎ 2026.01.06 - [취업/React.JS] - [nextjs]파일 업로드는 그냥 서버 업로드가 답이다. [nextjs]파일 업로드는 그냥 서버 업로드가 답이다.파일업로드 기능을 구현했다. 서버에 업로드 전에 당연하게 프리뷰를 위해 blob으로 이미지를 만들어 화면에 뿌려줬는데,pc, ios, aos를 구현했다. 근데 이상하게 잘 안된다..

ckeditor를 이용한 개발중인데, 특이하게도 ckeditor는 뷰어가 없더라.그래서 그게 어딨지 했는데, 찾아보니까 영문이라 찾기가 어렵더라..한글로 문서가 있길래 참조했다.https://velog.io/@oo009pbh/%EC%9D%B4%EC%8A%88%ED%95%B4%EA%B2%B0-CKEditor-5-View-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9 [이슈해결] CKEditor 5 View 스타일 적용에디터에서는 리스트, blockquotes, 이미지 정렬 등의 작업을 진행하고 저장을 했지만. 해당 html 코드를 보여줄때 저장한 버전과 다르게 나오는 문제가 있었다.https://ckeditor.com/docs/ckeditor5/latest/instal..

아이폰의 경우 프리뷰를 보여줄때 png의 경우 decode가 터진다는 것을 배우고,내용은 알았는데, 실제로 겪어본 건 처음이었다.안드로이드에서 프리뷰를 보여줄때 리사이징해서 보여줘야한다는 것을 알았다.아무생각없이 프리뷰 원본 사이즈를 blob으로 변환해서 img src로 넣었다가 메모리가 터지더라 OOM떠서 이미지 깨짐 발생.그거보고 뭐지 하다가 되는것보니 리사이징 처리.200px 가로, 세로 넘었을 경우 비율에 맞게 축소해서 리사이징 처리해서 프리뷰로 보여주고 하는 방식으로 구현했더니메모리 문제가 사라졌다