팀 프로젝트에서 카드 등록 기능을 구현해야 했습니다.. 카드를 등록하는데 카드 스캔이 빠지면 아쉽겠죠? 이런건 어떻게 구현할까요? 팀원들의 반응은 다음과 같았습니다. 백엔드 팀원 : 이게 가능해? 프론트엔드를 처음 맡게 된 프론트엔드 팀원 : 이게 가능해? 개발 전에는 video태그로 카메라 영상을 띄우고 z-index로 ui를 표시한 후 html2canvas로 카드 이미지를 캡쳐할 계획이었습니다. 결론부터 말하자면 구현에 성공하긴 했지만 생각보다 난관이 많았습니다. 일단, html2canvas는 video를 캡쳐할 수 없었습니다... 구현 방법 1. video태그에 카메라 연결하기 먼저 카메라를 띄울 수 있어야겠죠? import React, { useRef, useEffect } from 'react'..
언젠가 React같은 큰 프로젝트에 기여를 해보고 싶다. React 작동 방식 공부도 할 겸 소스코드를 구경해보기로 했다. 💡오픈소스 이해하는 꿀팁 테스트코드를 먼저 보세요! 테스트코드를 먼저 보면 코드를 이해하는데 도움이 된다고 한다. 역시, 어렵다. 하지만, 한가지는 알겠다. 아래의 코드를 보자. ⌨️코드 원본 코드 링크 it('renders an empty fragment', () => { const Div = () => ; const EmptyFragment = () => ; const NonEmptyFragment = () => ( ); ReactDOM.render(, container); expect(container.firstChild).toBe(null); ReactDOM.render(, ..
누군가는 이 오류를 빠르게 해결할 수 있기를 바라며 글을 적습니다.. ㅠㅠ 📝오류 내용 예기치 않은 응용 프로그램 오류! 'Node'에서 'insertBefore'를 실행하지 못했습니다.새 노드가 삽입되기 전에 노드가 이 노드의 자식이 아닙니다. 🧐문제 상황 내가 배포한 서비스 "고냥이타운 생성기"에서 오류가 발생했다는 보고를 받았다. 저희는 다 정상이거든요? 근데 저분만 저래요 색닉생성기 - 색깔 클릭시 (저분만)저런데요..! 라는 내용과 함께 위의 스크린숏을 받았다. "고냥이타운 생성기"의 주소는 다음과 같다. https://generator.catmc.kr 색상 추가하기 버튼을 클릭해서 색상을 리스트에 추가할 수 있다. 하지만 어떤 한명의 사용자는 색상 추가하기 버튼을 눌렀을 때 오류가 발생한다고 ..
