React

👍 참고1. https://solo5star.dev/posts/42/2. https://velog.io/@velopert/react-context-tutorial#%EA%B0%92%EA%B3%BC-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%91%90%EA%B0%9C%EC%9D%98-context%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B03. https://velog.io/@dahyeon405/Context-API%EC%9D%98-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8C%80%ED%95%9C-%EC%98%A4%ED%95%B4 👀 Provider 내..

📌 설치 환경pnpm + vite + react + typescript + vscode  🎨 prettierprettier는 나 또는 팀원들이 작성한 코드를 일관된 스타일로 작성하도록 도와주는 도구이다. vscode setting에서 개인 설정을 적용할 수 있고, 팀원들의 코드 스타일을 맞추려면 프로젝트 루트 폴더에  .prettierrc.json 파일을 생성하고 원하는 설정을 넣어주면 된다.(프로젝트 prettierrc.json이 vscode 세팅보다 우선순위가 높다.){ "singleQuote": true, "jsxSingleQuote": true, "semi": true, "printWidth": 80}🧷 prettier 옵션: https://prettier.io/docs/en/opti..

🔥 오류 발생 'JSX.IntrinsicElements' 인터페이스가 없으므로 JSX 요소는 암시적으로 'any' 형식입니다.ts(7026) 'react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307) 🔧 설정 방법 1. yarn 버전 변경 (vscode 터미널 입력) yarn set version berry 2. vscode extension - ZipFs 설치 3. 에디터 SDK 설정 yarn dlx @yarnpkg/sdks vscode 명령어 입력 후, 등장하는 모달의 '허용' 버튼을 클릭하거나 ts, tsx 파일에서 ctrl + shift + p를 눌러 'TypeScript 버전 선택...' 클릭 '작업 영역 버전 사용' 클릭 4. yarn cache clean 5. yarn in..

🚩 오류 발생 상황 1. react-slick 라이브러리의 Slider Syncing(AsNavFor)을 사용중 (https://react-slick.neostack.com/docs/example/as-nav-for) 2. MainCarousel의 item을 클릭하면 해당 애니 페이지로 이동하지않는 오류 발생 (마지막 애니의 페이지로 이동) 3. Slider Syncing에서 onClick이벤트 발생 시, animeId가 제대로 전달되지 않는것으로 파악 const handleClick = (e: React.MouseEvent, animeId: number) => { if (dragging) { e.stopPropagation(); return; } console.log(animeId); // naviga..

🚩 오류 yarn으로 CRA 리액트 프로젝트를 만든 뒤, 파일을 수정하면 다음과 같은 오류가 발생합니다. 🚩 해결 1. yarn add -D eslint-config-react-app 2. 프로젝트 가장 상위에 .yarnrc.yml 파일 생성 후 다음 내용 붙여넣기 packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 3. yarn cache clean 4. yarn install

🚩 페이지 하단에 도달했는지 확인하는 방법 Intersection Observer API 타겟 요소(element)와 브라우저 viewport의 교차점을 관찰합니다. 타겟 요소가 사용자 화면에 보이는지 안보이는지 판단 화면에 보이면 지정한 콜백 함수 실행 scroll 이벤트와 달리 비동기적으로 실행되며, reflow를 발생시키지 않아 성능 이점이 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 🚩 useIntersectionObserver hook useIntersectionObserver() 구현 export default function useIntersectionObserver({ target, // t..

setInterval을 이용하여 타이머를 구현했었는데, 타이머를 등록하고 브라우저의 다른 탭으로 이동하면 시간이 제대로 맞지 않는 문제가 있었습니다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 그 이유는 브라우저가 백그라운드 탭의 부하를 줄이기 위해 setInterval이 지연 실행되고 있었습니다. ▶ 문제 해결 이전에는 단순히 setInterval을 1초 간격으로 실행해서 타이머가 늦어지는 문제가 발생했습니다. 시작 시점과 현재 시점의 경과된 시간을 Date.now()를 이용하여, 백그라운드 탭에서 활성 탭으로 돌아왔을 때 타이머 시간이 제대로 계산되도록 했습니다. ..

기능 설명 공통 기능 Sub Tab Item을 클릭하면, 해당 하는 Tap Panel 위치로 이동한다. scroll 이벤트 시, 각 Tap Panel 위치에 도달하면 해당 하는 Sub Tab Item이 active 상태가 된다. resize 이벤트 시, Tap Panel의 위치를 재설정한다. 모바일 기능 active 상태인 Sub Tab Item으로 자동 가로 스크롤 ▶ scroll에 따른 active 상태 변경 사용자의 scroll에 따라 Sub Tab의 active 상태가 변경될려면 다음 식이 성립하면 됩니다. 현재 스크롤된 값 > Tap Panel 절대 위치 현재 스크롤된 값을 구하는 방법은 window.scrollY 를 이용하고, 각 Tap Panel의 절대 위치를 구하는 방법은 window.sc..