React
-
Toast Editor toolbar 에러React 2022. 5. 12. 15:17
🌱에러 Toast Editor를 사용하면서 툴바가 나오지 않는 에러를 만나게 되었습니다. mvp일정에 맞춰 개발을 하다 보니 코드 리뷰를 할 시간이 많이 없었고, 그러다 보니 이러한 에러가 발생했다는 것을 나중에 발견하게 되었습니다. 사진 1처럼 툴바가 잘 나와야 되는데, 사진 2처럼 툴바가 나오지 않는 문제였습니다. 🌱의식의 흐름 1. 다크 모드를 건드리다가 color 속성을 잘못 설정했을 것이다. 1번 생각은 다크모드를 지우고 다시 실행해보았지만 여전히 같은 문제가 발생했습니다. 따라서 Toast의 예시와 비교하면서 어떤 것이 빠져있는지 확인해보기로 했습니다. 2. reset css에서 어딘가가 잘못되었다. Toast에서 toolbar가 어떤 방법으로 렌더링 되는지 확인해보았습니다. Toast에서는 ..
-
[React] React-router는 내부적으로 history api를 사용하는지 확인하기React 2022. 3. 25. 21:07
history api와 hashbang이 등장하면서 html의 트렌드가 spa로 넘어가게 되었다고 생각합니다. React를 하면서 react-router는 떨어질수 없는 관계라 생각하는데요, react-router는 어떻게 만들어 졌을까요? react-router는 react-router-dom과 react-router-native두 가지 폴더가 존재하는데요 이에 따라 다양한 라우터들이 정의되어있습니다. 때문에 웹에서 사용하는것이라면 HashRouter 또는 BrowserRouter를 최상단에 정의해주어야 합니다. 🌱HashRouter 다음과 같이 되어있습니다. hashbang의 fragment와 같이 서버에 전송되지 않기 때문에 사용하지 않는것을 권장한다고 되어있습니다. 🌱BrowserRouter 다음..
-
[React / 에러 핸들링] react-helmet, react-snap 안될때 해결 방법React 2022. 3. 4. 23:54
사이드 프로젝트를 진행하면서 링크 공유 기능을 구현할 일이 생겼습니다. 이때 OG태그를 사용하면서 생긴 에러를 써보려 합니다. 메타데이터 메타데이터는 데이터를 설명하는 데이터입니다. 그중에서도 OG 태그라는 것이 있는데 Facebook이 웹 사이트에 더 풍부한 메타데이터를 제공하기 위해 발명한 메타데이터 프로토콜입니다. 메타데이터들을 사용한다면 검색엔진에게 더 많은 데이터를 제공하므로 좋습니다. 뿐만 아니라 og태그를 사용하게 된다면 링크를 공유했을 때 사용자에게 더 좋은 정보를 보여줄 수 있습니다. CRA와 meta data의 문제 프로젝트의 기술 스택은 cra였습니다. 해야 하는 일은 og태그를 사용하여 동적으로 url에 해당하는 이미지 및 사진을 보여주어야 합니다. 하지만 csr은 index.htm..
-
[React / 에러 핸들링] Modal컴포넌트 만들기React 2022. 2. 8. 02:30
모달 컴포넌트 스크롤을 막으면서 발생한 문제에 대한 기록입니다. 첫 번째 문제 e.preventDefault()와 e.stopPropagation()을 통해 이벤트를 막는 방법으로 스크롤을 막아야겠다는 생각을 했습니다. 하지만 어림도 없이 스크롤은 잘 되었습니다. 고민을 하다 실행 시점에서의 문제가 있다는 것을 깨닫게 되었습니다. mdn한글 문서를 보게 된다면 scroll은 view나 element가 스크롤될 때 scroll이벤트가 발생한다라고 되어있습니다. 정말 모호한 말이 아닐 수가 없습니다. 영어로 된 mdn을 보게 된다면 scroll event라고 명시가 되었는데, The scrollevent fires when an element has been scrolled. 즉, 요소가 스크롤된 다음 이벤..
-
[React / 에러 핸들링] useClickAway훅 만들기React 2022. 2. 4. 23:03
원티드에서 진행하는 프리온보딩 코스 과제를 하면서 컴포넌트 외부에 있는 클릭 이벤트를 감지하는 작업이 많아졌습니다. 따라서 내가 원하는 컴포넌트 외의 영역에 클릭 이벤트가 발생한다면 원하는 동작을 하는 useClickAway라는 훅을 만들게 되었습니다. 사실 동작 자체는 굉장히 간단했습니다. 초기 코드 아래는 제가 처음에 만든 코드입니다. import { useEffect, useRef } from 'react'; export const useClickAway = (awayEvent: () => void) => { const ref = useRef(null); const callback = (e: MouseEvent) => { const element = ref.current; if (!element) ..
-
[React] dropdown(selectBox) 시멘틱하게 만들기React 2022. 1. 24. 22:59
시행착오 select컴포넌트를 만들어야겠다고 마음먹은 후에 어떻게 만들어야 될지 많은 삽질을 했습니다. 하지만 가장 중요하게 생각했던 부분은 보이스오버가 잘 되는지, 시맨틱한 마크업인가? 를 생각하면서 개발하는 것이었습니다. 하지만 어디서부터 시작해야할지 감도 잡히지 않았고, 계속 만들고 갈아엎기의 연속이되었습니다. 왜 계속 갈아엎게 되나 생각을 하다보니 bottom-up 방식으로 만들다 보니 정작 내가 사용을 할 때 불편한 부분들이 계속 발견되었기 때문입니다. top-down으로 생각해보기 계속 selectBox먼저 만들다 보니 이런 문제가 생겼다고 생각이 들어 어떻게 내가 이 컴포넌트를 사용하고 싶은지부터 생각해보고, 그려보기로 했습니다. 어떤 Option이 선택되었는지 상위 컴포넌트에서 알아야 하기..