Safari에서 mp3 파일의 재생이 밀리는 버그

문제 상황 if (this._audio.dataset.src === src) { if (Math.abs(clipStart - this._audio.currentTime) >= 0.3) { this._audio.currentTime = clipStart; } this.play(); return; } 현재 우리 mp3 재생은 버튼을 클릭시 서버에서 미리 받아온 clipStart 값을 통해 현재 audio 객체에 currentTime 설정해서 원하는 위치에 오디오를 재생시키도록 되어있다. 크롬에서는 문제가 없었지만 Safari 브라우저나 ios에서는 오디오 재생이 밀리는 문제가 발생했었다. 현재 서버에서 받아오는 mp3 파일이 135kb/s에 VBR..

• format_list_bulleted Frontend(Web, App)
• · 2025. 6. 29.
• textsms

내 로컬에 있는 DB table을 Railway에 배포한 DB에 등록하기

AI를 이용해서 Railway에 내 로컬에 존재하는 table을 등록하고 싶었는데 제대로 알려주지 않아 헤맸었다. 이를 위해 약간의 고민과 공식문서를 보고 알아낸 방법에 대한 글이다. 일단 내가 생성해서 배포하고자 하는 DB를 선택해준다. 필자의 경우 MySQL을 사용했다. 생성 후 tab에 Variables와 Settings를 이용하려고 한다. 일단 우리 로컬 터미널에 mysqldump -u root -p memo_app > memo_app.sql 위에 명령어를 입력해 로컬에 존재하는 table의 백업 파일 즉 덤프 파일을 만든다. mysql -h 프록시주소 -P 포트번호 -u 유저이름 -p비밀번호 DB이름 위에 명령어를 입력해줘서 Railway에 배포한 DB에 우리 로컬 table을 올려줘야..

• format_list_bulleted Backend
• · 2025. 4. 26.
• textsms

2025. 04. 21 ~ 2025. 04. 25 회고

지금부터는 따로 형식을 유지않고 회고를 작성할 생각이다. 이번 주 예전 ios 기기에서 뷰어앱이 crash 나는 이슈를 해결했다. 처음에 난 앱 개발자가 아니라서 막막했는데 에러 로그를 보니 didFinish(), didReceive() 함수등에서 버그가 발생했다는걸 보고 해당 로그를 기준으로 DeepSick에서 열심히 버그를 찾아서 반영해봤다. 여러 시행착오 끝에 앱이 crash나는 버그가 더 이상 발생하지 않았다. 뷰어에서 페이지 이동마다 스키마가 호출이 되는데 이 때 해당 함수들이 호출이 된다 근데 성능이 좋지 않은 기기에서 페이지를 빠르게 넘겨버릴 경우 기존 페이지이동의 didFinish, didReceive등의 함수가 호출돼서 앱이 crash 나는 원인이였다. 이를 해결하기 이해 해당 함수들을..

• format_list_bulleted 회고
• · 2025. 4. 26.
• textsms

클립보드 제어가 사파리에서 안되는 이유?

문제 상황 브라우저에서 복사를 하게 되면 클립보드라는 저장소에 임시로 데이터가 저장된다. 클립보드 메서드중 copy 메서드를 이용해 데이터를 저장하는데 사파리에서 클립보드에 복사되지 않는 이슈가 있었다. button.onclick = () => { setTimeout(() => { copyToClipboard(); }, 100);}; 위와 같이 사용자의 상호작용에 대한 클립보드의 상호작용내에 비동기 호출후 클립보드를 복사하는 동작은 제대로 동작하지 않는다. 사파리내에 보안정책 때문에 사용자의 이벤트로 바로 클립보드를 호출하는게 아니면 동작하지 않게 막고있다. 해결책button.onclick = () => { copyToClipboard(); }; 해결책은 생각보다 간단하다 사용자 이벤트에 ..

• format_list_bulleted Frontend(Web, App)/개발 일지
• · 2025. 4. 20.
• textsms

2025. 04. 14 ~ 2025. 04. 18 회고

작업 목록우리 서비스에 존재하는 모든 결제에 토스페이먼츠 연동 자사 라이브러리 버그 수정 및 릴리즈 배포 회고내부적으로 어떻게 동작하는지 코드를 보고 파악해야하는건 이해하겠는데 우리 서비스의 코드를 읽는게 조금 힘들다. 개인적으로 긴 글이 있으면 제대로 읽지 못하는 문제가 스스로한테 있는데 이를 코드에서도 반영되는거 같다. (국어를 못했던 이유...)의도적으로도 기존 코드가 길어도 읽도록 해야겠다. 기존 로직을 제대로 파악하지도 않고 서버분과 대화하는거 자체가 실례되는 행동이다. 이를 스스로 인지하고 있자. 이상하게 클립보드로 복사를 할 때 사파리에서 제대로 복사가 안되는 이슈가 있었다. 서버분이 원인을 찾아줬는데 사파리에서는 이벤트 발생후 바로 클립보드에 복사하는 로직을 수행시켜야지 한번더 함수를 거..

• format_list_bulleted 회고
• · 2025. 4. 19.
• textsms

encodeURIComponent, encodeURI 사용 이유

이게 뭔데?const uri = "https://example.com/search?query=안녕하세요";const encoded = encodeURI(uri);console.log(encoded); // https://example.com/search?query=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 직접 코드를 보는게 이해가 빠를꺼다. encodeURI는 :  /  ?  &  = 등의 특수기호는 변환하지 않고 나머지 문자들을 변환한다고 보면된다. 근데 여기서 특이한 점은 앞에 주소나 path는 인코딩 시켜주지 않는다는 점이다. 아마 이건 내부적으로 경로로 인정한 값을 제외한 값만 인코딩해준다encodeURI("https://example.com/search?..

• format_list_bulleted Frontend(Web, App)/JavaScript
• · 2025. 4. 12.
• textsms