React

🤔 code splittingreact 프로젝트를 빌드하면, 모든 코드(컴포넌트, 스타일)를 하나 또는 여러 개의 파일로 묶는 번들링 과정을 거치게 된다.사용자가 사이트에 접속하면 이 번들링된 파일을 다운받는데, 사용자에게 당장 필요하지 않은 파일들도 함께 포함되어 다운로드 된다.메인 페이지('/')만 이용하는 사용자도 '/user', '/setting' 페이지 등의 코드가 포함된 파일을 다운받는다. 번들 사이즈가 커지면 초기 로드 시간이 오래 걸리기 때문에 서비스에 악영향을 끼칠 수 있다. 이 문제를 해결하기 위해 필요한 코드만 다운받을 수 있게하는 code splitting을 적용해 볼 수 있다. react는 dynamic import를 위한 lazy() 함수를 제공하고 있다. 🔮 라우트별 cod..

👍 참고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()를 이용하여, 백그라운드 탭에서 활성 탭으로 돌아왔을 때 타이머 시간이 제대로 계산되도록 했습니다. ..