프리랜서 웹 개발자로 살기

웹페이지에 오디오 플레이어를 삽입하기 위해 react-h5-audio-player 패키지를 사용했다.자동재생이 되게 하고 싶었는데, 일반적인 브라우저 정책 상 사용자 동의 없는 자동재생은 막히기 때문에...뭐 이런.. useEffect를 이용해 어떤 사용자 상호작용이 1회라도 있으면 재생되게 했다.아니 그런데 ... 어떤 상황에서는 갑자기 에코가 발생하는 것이 아닌가?확인해 봤더니 카카오톡 인앱브라우저를 사용할 때 그랬다.카카오톡 인앱브라우저는 Autoplay를 막지 않는 것이다....Autoplay 옵션으로 재생이 되고 있는데 상호작용 이벤트로 또 재생을 시키니까 에코같은 효과가 났던 것이다.그래서 플레이어에서 재생 버튼을 눌러도 배경음악이 절대 안 꺼졌다...(당연히 에코는 꺼짐)Autoplay를 제..

card wrapper 내에 card들이 있는데, 각 card에 대해 비번호가 지정되기를 원했다.js로도 구현 가능했지만 추가/삭제 시에도 건너뛰는 번호가 없기를 바랐고,삭제 시마다 리플로우를 발생시키고 싶지도 않았기에 css를 사용해서 번호를 지정해 주었다.그리고 삭제 버튼 클릭 시 비번호를 이용해 'n번 템플릿을 삭제하시겠습니까' 라고 확인하고 싶었기에 다음 코드를 이용해 값을 가져오고자 했다. const label = card.querySelector('label'); const pseudoStyle = window.getComputedStyle(label, '::after'); const contentValue = pseudoStyle.getPropertyValue('content'); 처음..

토이프로젝트에서 결제 기능을 카카오페이로 구현하고자 했다. 카카오페이 온라인 결제는 단건 결제뿐만 아니라 정기결제 등등이 있는데, 단건결제가 현재 서비스에 적합하다고 판단해 단건결제를 구현했다. 카카오페이 API는 다음과 같이 온라인 결제에 대한 공식 문서를 제공한다. 카카오페이 | 개발자센터 새로운 기회와 가치를 함께 만들어봐요 developers.kakaopay.com { "cid": "TC0ONETIME", "partner_order_id": "2", "partner_user_id": "family1", "item_name": "스위트케어 간병 결제 (간병 메이트 변철수)", "quantity": 1, "total_amount": 6034320, "tax_free_amount": 0, "approv..

지난 글에서 DOM 조작으로 meta 태그를 변경하는 방식과 React helmet async 라이브러리를 사용하는 방법에 대해 시도해 보았다. 그러나 내 프로젝트는 Firebase로 배포한 것이기 때문에 해당 방법들은 적합하지 않았다. 문제 해결을 위해 Firebase Functions를 도입했다. Functions는 무료 요금제인 Spark 요금제에서는 사용이 불가능하고, 종량제 요금제인 Blaze 요금제로 변경해야 한다. Firebase Functions를 이용한 create-react-app SPA 앱의 SEO 처리 create-react-app으로 만든 SPA 앱에 Firebase Hosting과 Functions를 이용하여 SEO 처리를 하는 법에 대해 설명한 글. blog.roto.codes..

React로 서비스를 개발했는데, 이때 각 페이지의 정보에 맞게 og 정보를 설정할 필요가 있었다. 다음과 같은 방법을 사용해 보았다. 방법 1. DOM 직접 조작하기 [React] 페이지별 메타 태그 추가 서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.h satisfactoryplace.tistory.com 이 방식에는 다음과 같은 장점이 있다. 1. 라이브러리 의존성 없음: 별도의 라이브러리를 사용하지 않으므로, 프로젝트의 의존성을 줄일 수 있다. 2. 간단한 로직: 메타 태그를 설정하는 로직이 간단하다. 간단하므로 먼저 테스트해 보았다. 개발자 ..

"Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app)." 오류가 발생했다. useEffect 내에서 이 코드를 이용해 firebase를 초기화하고 있었다. const app = initializeApp(firebaseConfig); 검색해 보니 다음과 같이 우회할 수 있었다. [Firebase] Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app). 이미 초기화 되어있는 경우에 초기화를 중복으로 하여 발생하는 것으로 파악하였다.이러한 경우 아..