분류 전체보기 (117) 썸네일형 리스트형 [React] BATCH를 사용한 리스트 최적화 전략 이미지를 포함한 선수카드 컴포넌트가 무수히 많은(1000장 이상) 리스트가 있을 경우 스크롤을 진행하며 각 선수카드들이 빠르게 리렌더 되는 상황에서 어떤 식으로 최적화를 진행할 수 있을지 고민해보았다.유저가 보유한 모든 선수카드는 앱 진입 초기에 한번에 불러온 뒤 자체적으로 캐싱을 해서 앱 전체에서 사용하고 있다.이미지의 용량이 작지 않아, 동시에 렌더할경우 메모리 초과로 웹앱이 다운되어 virtual grid를 사용해 동적으로 렌더해주고 있었다.이 때 새로 획득한 선수카드의 경우 N태그가 붙는데 확인 후 해당 선수카드가 뷰포트에서 사라질경우 N태그는 제거되어야하는게 기획의 요구사항이였다.관심사 분리, 선수카드 캡슐화를 위해 선수카드를 랩핑하는 HOC를 하나 만들고 interSectionObserver를.. [AWS] 커스텀 도메인 구입 후 CloudFront에 연결하기 먼저 연결할 도메인을 구매한다. 나는 가비아에서 원하는 도메인을 간단하게 구매했다.AWS S3에 올려놓은 빌드에 도메인을 연결하기 위해 우선 CloudFront 배포를 생성해주어야 한다.빌드가 있는 S3버킷을 원본으로 새 CloudFront 배포를 생성한다.S3 origin에 연결할 버킷의 주소를 입력하면 된다.배포가 생성된 이후 github action을 위한 리액트 프로젝트의 deploy.yml를 수정해주었다.기존에는 master에 병합 시 빌드 후 S3버킷에 올리는것까지의 스크립트가 있었는데, CloudFront의 캐시 정책으로 인해 명시적으로 무효화를 해줘야지 CloudFront에 반영된다.CloudFront 배포를 생성했으면 배포ID를 레포지토리의 Secrets에 추가해준다. 이후 - n.. [React] Next Image를 사용하지 않을 경우 React 이미지 최적화 전략 이미지 최적화에는 여러가지 방법이 있다.기본적으로 Next Image를 사용하면 자동으로 압축 및 최적화가 적용된다.디자이너 포트폴리오 사이트를 개발해 주면서 SSR을 할 이유가 거의 없어, 간단하게 React로 프로젝트를 진행했다.받은 이미지 자체들이 워낙 크고 고화질이라 이미지 하나당 상당한 용량을 차지했다. 이미지 요청을 보내고 받은 이미지를 확인해 본 결과 대부분 15MB가 넘어갔다.초기 이미지 로드 속도는 당연히 느렸고 접속한 뒤 3초가 지나야 이미지가 로드되는 최악의 UX를 확인했다.최대한 자연스러운 UX를 유지하기 위해 framer-motion의 연출과 섞어서 몇 가지 최적화를 진행해주었다.우선 full-page를 적용했고, 메인에서는 대표작들이 스와이핑 가능하게 나오도록 했다. 일단 기본적.. [React] Test Code 배포 자동화, CI/CD 기존에 진행했던 프로젝트들은 모두 CI/CD환경이 구축되어있었다.gitlab, github, 카카오워크, slack 등 web hook을 이용하여 이벤트 트리거시 배포, 빌드 PR생성 등 메시지 생성 자동화가 구축된 환경에서 작업을 했지만 처음부터 끝까지 CI/CD 환경을 구축해 본 경험은 따로 없어 간단하게 테스트를 진행했다. 우선 Test용 레포를 하나 파주었다.git remote 후 npm create vite@latest . -- --template react로 react 프로젝트로 초기화시켜주었다.npm i -> npm run dev로 잘 열리는지 확인한 뒤 git checkout -b dev Dev로 체크아웃, 메인페이지에 있는 내용을 모두 제거해준 뒤 dev에 푸시했다.이제 dev에서 mai.. [React] useMutation, 클린코드의 관점에서 기술스택에 정답은 없다.대다수가 사용하고 있는 기술스택, 트렌디한 기술스택 등을 분명한 이유 없이 적용하는 것은 장기적으로 프로젝트를 진행해나가고, 유지보수를 하는 과정에 있어서 충분한 걸림돌이 될 수 있다. 나는 진행하는 프로젝트의 상황 및 이해관계에 따라 가장 적합한 기술스택을 선택해야한다고 생각한다. 현재 우리팀은 React-query를 사용하여 useQuery로 조회를, useMutation으로 서버 상태를 update해주고있다.orval을 사용하여 swagger 문서를 기반으로 쿼리를 자동 생성하고 결론적으로 const { mutate: claim, isPending: isLoadingClaim } = usePostMissionClaimByMissionId({ mutation: .. [RN] 메모리 누수로 인한 IOS 웹뷰 인스턴스 강제종료 (feat. 가비지 컬렉션) 문제상황기본적으로 현재 진행중인 프로젝트에서 유저가 보유하고 있는 선수 카드 리스트는 최적화를 적용해 앱 진입 시점에 한 번 받은 뒤 캐싱해서 사용한다. 이후 리스트에 업데이트가 있을 경우 해당 부분만 새로 업데이트해주는 전략을 가져가고있다. 선수카드는 만 장이 넘어가게 소유할 수 있고, 개별 카드의 이미지도 무겁고 리소스가 큰 탓에 메모리, 네트워크 요청에 많은 부담이 있을 수 있어 위와 같은 정책을 선택했고 렌더 또한 가상화 라이브러리를 사용해서 스크롤에 따라 필요한 순간 동적으로 렌더하고 있었다.하지만 마찬가지로 선수 리스트를 보여줘야하는 특정 컨텐츠에서 문제 상황이 발생했다. 해당 컨텐츠에서는 기획상 (언젠간 바꿔야 하는 부분이였지만) 결론적으로 모든 선수 리스트를 한 번에 받아오며, 당시 상황상.. [CSS] safari 폰트 관련 크로스 브라우징 이슈 WebView를 사용한 RN 프로젝트에서 ios는 폰트가 제대로 적용되지 않는 이슈가 있었다. 먼저 font-family의 적용 원리를 찾아보았다.font-family 의 원리font-family: [1순위], [2순위], [3순위], [...] 와 같은 원리로 현재 OS 에 있는 폰트가 적용된다고 알고 있습니다. 하지만 이렇게만 알면 안되고 정확한 알고리즘을 알아야 합니다. 알고리즘은 다음과 같습니다.[1순위]의 폰트가 OS 에 있는지 확인한다. 있으면 그것을 바로 적용한다.없으면 웹서버에 정의된 웹폰트가 있는지 확인한다.웹서버에 웹폰트가 있으면 다운을 받고, 없으면 [1순위]의 폰트는 없다 간주하고 [2순위]의 폰트를 검사하기 시작한다.1~3의 작업을 반복한다.문제는 OS에 적용하려고 했던 폰트가 없.. [React] Framer-motion, HOC 관련 Runtime Error import _ from "lodash";type HOC = ( WrappedComponent: any // functional or class component 모두 될 수 있다.) => React.FC;const MergeMotion = ( TargetComponent: React.ComponentType, hoc1: HOC, hoc2: HOC, hoc3?: HOC): React.FC => { return _.flowRight(_.compact([hoc1, hoc2, hoc3]))(TargetComponent);};export default MergeMotion;빛이 지나가는 이펙트를 주기 위해 여러 컨텐트에서 공통으로 사용되고 있는 Glow 컴포넌트가 있다.미션 페이지에서 리스트를 뿌려.. 이전 1 2 3 4 ··· 15 다음
