티스토리

presentKey

검색하기

블로그 홈

presentKey

presentkey.tistory.com/m

presentKey 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Context API 리렌더링 되는 경우 알아보기 👍 참고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 내.. 공감수 0 댓글수 2 2024. 8. 13.
react 프로젝트 세팅(prettier, stylelint, .vscode, path alias) 📌 설치 환경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.. 공감수 0 댓글수 0 2024. 8. 6.
yarn + vite + react + typescript + vscode 설정 (~ 모듈 또는 해당 형식 선언을 찾을 수 없습니다.) 🔥 오류 발생 '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.. 공감수 0 댓글수 0 2024. 3. 29.
react-slick 라이브러리의 페이지이동 오류해결 (Slider Syncing(AsNavFor)) 🚩 오류 발생 상황 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.. 공감수 0 댓글수 0 2023. 12. 12.
yarn CRA(create-react-app) 파일 수정 시 오류 해결 🚩 오류 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 공감수 0 댓글수 0 2023. 12. 11.
React Query로 infinite scroll(무한 스크롤) 구현하기 🚩 페이지 하단에 도달했는지 확인하는 방법 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.. 공감수 0 댓글수 0 2023. 11. 23.
Inactive tab인 경우, 타이머의 setInterval 동작 문제 개선 setInterval을 이용하여 타이머를 구현했었는데, 타이머를 등록하고 브라우저의 다른 탭으로 이동하면 시간이 제대로 맞지 않는 문제가 있었습니다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 그 이유는 브라우저가 백그라운드 탭의 부하를 줄이기 위해 setInterval이 지연 실행되고 있었습니다. ▶ 문제 해결 이전에는 단순히 setInterval을 1초 간격으로 실행해서 타이머가 늦어지는 문제가 발생했습니다. 시작 시점과 현재 시점의 경과된 시간을 Date.now()를 이용하여, 백그라운드 탭에서 활성 탭으로 돌아왔을 때 타이머 시간이 제대로 계산되도록 했습니다. .. 공감수 0 댓글수 0 2023. 9. 12.
scroll, resize tab의 active 상태 구현에 필요한 지식 기능 설명 공통 기능 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.. 공감수 0 댓글수 0 2023. 9. 12.
[크로스 브라우징] 모바일 Firefox 로그인 오류와 css 🚩 크로스 브라우징 어느 브라우저, 기기에서 사이트가 의도된 대로 동작하도록 제작하는 기법 모바일 Firefox에서 구글 로그인이 되지 않는 오류 발생 🚩 로그인 기존 구현 사항 Firebase Authentication을 이용해서 데스크탑에서 접속하면 구글 로그인이 popup 창으로 뜨고, 모바일 기기에서 접속하면 redirect 되도록 구현했었습니다. 데스크탑과 모바일 로그인 방식을 나눈 이유는 popup 방식으로 처리해도 모바일 기기에서 정상적으로 로그인이 되었습니다. 하지만 popup 차단 메시지가 발생하여 불편을 줄이기 위해 redirect 방식으로 변경했었습니다. // 모바일 판별 export default function isMobile() { return /Android|webOS|iPho.. 공감수 0 댓글수 0 2023. 5. 22.
[Bottom Sheet - 3] useRef로 컴포넌트 리렌더링 개선 이전 구현 사항 애니메이션 효과를 구현하기 위해 브라우저 가로 크기를 가지고 있는 screenWidth 상태와 form 영역의 높이를 가지고 있는 height 상태를 이용해 inline-style로 변화를 주었습니다. BottomSheet 컴포넌트는 screenWidth 내부 상태를 이용하기 때문에, resize 이벤트 발생 시 리렌더링 되고 있습니다. useRef 이용하여 개선하기 useRef는 .current 프로퍼티에 변경 가능한 값을 담을 수 있고, 이 프로퍼티가 변경되더라도 리렌더링을 발생시키지 않습니다. 그래서 screenWidth 값을 useState가 아닌 useRef를 이용했습니다. const screenWidthRef = useRef(window.innerWidth); useRef는 D.. 공감수 0 댓글수 0 2023. 5. 20.
[React Query] queryKey 관리를 위한 custom hook 참고 useMutation의 중복 로직 제거: https://east-star.tistory.com/43 컴포넌트 내부에 선언된 useQuery 기존에는 컴포넌트 내부에 useQuery가 선언되어 있어서 불편한 점이 있었습니다. 데이터 업데이트 후, invalidateQueries를 이용해 데이터 refresh 필요 분산되어 있는 queryKey, queryOption 확인을 위해 useQuery가 선언되어 있는 컴포넌트로 이동하여 확인 모임에 관련된 query들을 모아놓은 useClass 분산되어 있는 queryKey와 queryOption을 쉽게 관리할 수 있도록 useClass라는 커스텀 hook을 만들어서 문제를 해결했습니다. 그런데, 개발을 진행하다보니 useClass가 조금 거대해졌습니다. 그.. 공감수 0 댓글수 0 2023. 5. 17.
[Bottom Sheet - 2] 합성 컴포넌트 🧷 이전 포스트 [Bottom Sheet - 1] 잘못된 추상화 https://presentkey.tistory.com/11 🚩 최종 결과물 결과물 🚩 컴포넌트 구조 합성 컴포넌트를 사용해 화면 구현 이를 통해 컴포넌트 재사용성을 높이는 것에 대한 공부를 할 수 있었고, 이전 게시글의 문제점을 해결할 수 있었습니다. - 추상화가 잘못 되어 발생한 이해할 수 없는 컴포넌트 구조와 로직들 그리고 무수히 많은 props... - button 영역과 form 영역이 분리되어 있는점 - 입출금 form의 경우 input value를 공유하고 있는점 🚩 BottomSheet 컴포넌트 2~ 15번째 줄은 BottomSheet 애니메이션 및 브라우저 resize 이벤트에 관한 로직입니다. resize 이벤트에 thro.. 공감수 0 댓글수 0 2023. 5. 11.
[Bottom Sheet - 1] 잘못된 추상화 🧷 다음 포스트 [Bottom Sheet - 2] 합성 컴포넌트: https://presentkey.tistory.com/12?category=1339335 🚩 기존 구현 사항 기존 UI 기존 BottomSheet 컴포넌트는 main 페이지에서만 사용했고, 버튼을 클릭하면 해당하는 Form이 렌더링되고 있었습니다. 🚩 변경사항 1. BottomSheet 컴포넌트의 재사용성 높이기 - 기존 detail 페이지의 입출금 Form을 BottomSheet 컴포넌트로 나타내기로 했습니다. 2. 이동 효과주기 - 버튼을 클릭하면 BottomSheet 영역이 올라오고 내려오는 효과를 주고싶었습니다. 🚩 첫 번째 구현 시도 합성 컴포넌트를 통해 구현을 했습니다. 영상의 겉모습을 보면 의도한 대로 구현 된 것 같지만 여.. 공감수 0 댓글수 0 2023. 4. 30.
[React] 디자인 패턴 - State Reducer Pattern 참고 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/state-reducer https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 ✨ State Reducer Pattern 장점: reducer는 모든 내부 action들에 접근하여 오버라이드할 수 있습니다. 단점: reducer의 액션이 바뀔 수 있기 때문에,.. 공감수 0 댓글수 0 2023. 3. 6.
[React] 디자인 패턴 - Props Getters Pattern 참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/props-getters https://simsimjae.medium.com/react-design-pattern-props-getter-pattern-5d3cf6f0b495 ✨ Props Getters Pattern 장점: props 오버로딩을 통해서 부모 -> 자식, 자식 -> 부모 양방향 커뮤니케이션이 가능해집니다. 단점: props를 재정의 하기위해선, 노출된 props과 내부 로직을 제대로 이해하고 있어야 합.. 공감수 0 댓글수 0 2023. 3. 6.
[React] 디자인 패턴 - Custom Hook Pattern 참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/custom-hooks https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 ✨ Custom Hook Pattern 장점: Custom Hook은 states, handlers를 노출하여 많은 제어 권한을 가질 수 있습니다. 단점: 로직과 UI가 분리되어 있.. 공감수 0 댓글수 0 2023. 3. 5.
[React] 디자인 패턴 - Control Props Pattern 참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 github: https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/control-props https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 ✨ Control Props Pattern 장점: 모든 상태들을 제어 및 소유하고 있는 특정 컴포넌트가 있기 때문에, custom logic을 삽입할 수 있습니다. .. 공감수 0 댓글수 0 2023. 3. 5.
[React] 디자인 패턴 - Compound Components Pattern 참고한 사이트 https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6 github: https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/compound-component https://www.patterns.dev/posts/compound-pattern/ https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80 https://www.youtube.com/watch?v=aAs36U.. 공감수 0 댓글수 0 2023. 3. 4.
[React] JSX에서 배열은 어떻게 렌더링될까? - map() 메소드를 이용한 컴포넌트 렌더링 React에서 여러 개의 컴포넌트를 렌더링 할 때, map() 메소드를 이용합니다. 🐣 map() 메소드를 사용하면 새로운 배열을 반환하는데, JSX에서 배열이 어떻게 출력되는지 궁금해졌습니다. import React from 'react'; export default function Map() { const products = ['상의', '하의', '모자']; const listItems = products.map((product) => {product}); console.log(products); console.log(listItems); return ( {products} {listItems} ); } 먼저 console.log 결과를 보면, listItems는 배열이 맞습니다. const pro.. 공감수 0 댓글수 1 2023. 2. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.