웹 개발자로의 한걸음

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). 이미 초기화 되어있는 경우에 초기화를 중복으로 하여 발생하는 것으로 파악하였다.이러한 경우 아..

Firebase Authentication으로 로그인 페이지 구현을 시도했다. 파이어베이스 documentation에는 다음과 같은 글이 있다. [자바스크립트로 Google을 사용하여 인증 | Firebase 의견 보내기 자바스크립트로 Google을 사용하여 인증 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자가 Google 계정을 사용하여 Firebase에 인증하도록 설 firebase.google.com](https://firebase.google.com/docs/auth/web/google-signin?hl=ko) 여기서는 이런 코드가 예시로 주어진다. import { getAuth, getRedirectResult, GoogleAuthProvider } fro..