vanilla javascript로 과제를 하라고..? 아... 리액트가 그립다... 생각해보니 만들면 되잖아?vanilla javascript로 과제하기가 불편해서 나만의 프레임워크를 만들어 보고 싶어졌다.관련 글을 찾아보니 React 관련 글이 많았다. 역시 인기 1위답다.그래서 나만의 프레임워크는 일단 제쳐두고 React를 만들어보기로 했다.(react 컨트리뷰터가 되고싶은 야망, react를 알고싶은 마음도 있었다.) useState를 구현한 게시글은 많았다.하지만 실제로 사용해보니 문제가 있었다.함수형 업데이트를 지원하지 않는다는 것아마 구현만하고 실제 프로젝트를 만드는데 써보진 않았으셨을지도...ㅠㅠ 그래서 이 글에 함수형 업데이트까지 구현한 기록을 담으려고 한다. useState 구조useS..
팀 프로젝트에서 카드 등록 기능을 구현해야 했습니다.. 카드를 등록하는데 카드 스캔이 빠지면 아쉽겠죠? 이런건 어떻게 구현할까요? 팀원들의 반응은 다음과 같았습니다. 백엔드 팀원 : 이게 가능해? 프론트엔드를 처음 맡게 된 프론트엔드 팀원 : 이게 가능해? 개발 전에는 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 색상 추가하기 버튼을 클릭해서 색상을 리스트에 추가할 수 있다. 하지만 어떤 한명의 사용자는 색상 추가하기 버튼을 눌렀을 때 오류가 발생한다고 ..
