전체 글 (64) 썸네일형 리스트형 [Vite] Bundle 사이즈 최적화 하기 평화롭게 개발을 하던 어느날... 빌드를 돌렸는데 Vite가 노란색으로 읽고 싶게 경고를 주었다.500kb가 넘는 chunk가 있으니 코드 스플리팅을 하라는 친절한(?) 경고였다. 번들 크기가 1.7MB라 생각보다 크기도 하고, 성능 측정도 해볼겸 번들 사이즈를 줄여보기로 했다! 1. 현재 번들 크기 확인하기빌드 했을 때 나온 번들 크기가 정확하게 어떻게 되고 있는지 확인해보기 위해 rollup-plugin-visualizer를 이용하여 확인해보기로 했다. yarn add -D rollup-plugin-visualizeryarn build //vite.config.tsimport { visualizer } from "rollup-plugin-visualizer";...export default defi.. iOS 15 Input 입력 안되는 이슈 해결기 웹뷰 기반의 애플리케이션을 개발하던 중에 iOS 특정 기기에서 필드 입력이 안되고 있다는 이슈를 제보 받았다. 현상을 확인해보니 정말 입력이 안되고 있었다.... 입력필드가 덮인줄 알고 여러방면으로 디버깅 했지만 덮여있는 상태는 아니었고(키패드가 올라오는데 안덮이는게 당연하긴 하네..;) QA팀에서 확인 해주셨을 때 입력이 안되는 버전은 다음과 같았다. iOS 14,15 버전Mac :Monterey GPT와 구글링을 총 동원하여 찾아보니 이유는 다음과 같았다. 웹뷰 내에 들어가야 하는 애플리케이션이기 때문에 css에서 기본적인 user-select:none;으로 설정해놓았다. 이 부분이 문제였는데, 이 설정이 사용자가 텍스트를 선택하지 못하게 하기 때문입니다. 이로 인해 Webkit에서 input 필드.. Next.js AWS EC2에 배포하기(1) 들어가기이번 사이트 프로젝트를 Next.js를 사용하고 있는데 이제는 프로젝트가 절반 이상 진행 되었고, 배포할 필요성을 느껴 배포를 하려 한다. Vercel에 배포하면 편한데 굳이 EC2에 배포를 하는 이유는 두 가지이다.1. Vercel에 팀 프로젝트는 유료이고 개인 hobby 프로젝트는 이미 한 개 배포중이라서 무료로 사용할 수가 없다.2. 상황에 따라 실무 할 때에도 인프라에 따라 Vercel을 사용하지 못할 수도 있는데 다른 배포 방식도 알 고 있어야 하지 않을까?사실 1번 적 측면이 가장 크다..(돈 아껴야지..) 그래서! 개인적으로 가지고 있는 EC2에 배포를 해보려한다.일단 이 글은 EC2 인스턴스 생성 및 접속에 대한 부분은 글의 논점과 다르다 생각하여 다루지 않을 것이다. EC2를 생.. 내 사이트 성능 개선하기(2) 이번에는 내 포트폴리오 사이트의 접근성을 개선해보고자 한다.접근성 지수가 높아야 봇이 웹 사이트의 정보를 잘 가져갈 수 있어서 SEO에 유리할 수 있다. 접근성에 유리한 요소는 접근 가능한 라벨, 색 대비, 시멘틱 태그 등이 있다. 1. 버튼에 접근 가능한 이름 붙이기사이드바를 여는 버튼에 네이밍이 없다는 결과를 받았다.이 부분을 개선해보자 버튼에 접근성에 대한 정보가 없으니 추가해주자. 2. 시멘틱 태그 개선하기마크업 과정 중에 li 요소를 빠트린 것 같다. 확인해보자. {blogData.map(({ link, imgSrc, title }, index) => ( .. 내 사이트 성능 개선하기 이번에 Next.js와 Tailwind CSS를 공부할 겸, 인터렉션 UI에 대해 공부할 겸 내 포트폴리오 사이트를 제작했다. 간단하긴 하지만 나름 나를 보여줄 수 있는 사이트기 때문에 열심히 제작했다! (사이트 보기) 아직 부족하긴 하지만 이 페이지를 개선하면서 또는 여러 기능들을 넣어보면서 실험용(?) 페이지로도 사용할 생각이다. 그렇게 다 만들고 나의 사이트의 성능은 얼마나 되는지 측정해보기로 했다. 1. 폰트 최적화성능에서 경고 표시가 뜬 것 중 하나가 폰트였다. 내 사이트에서 사용되는 폰트는 3개였고, 모두 로컬 폰트로 사용하였다.크게 문제가 되었던 부분은 Pretendard 폰트가 문제였는데 이 부분을 개선해보도록 하자. const pretendard = localFont({ src: [.. [Jest] The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. 오류 해결하기 평화롭게 테스트 코드를 짜고 있던 중 다음과 같은 에러를 만났다. 토스트 UI를 호출하는 useToast hook을 검사하려 하는데 오류가 난 것이었다. 테스트 코드 자체는 이상이 없었는데 에러가 발생해서 바로 구글링을 시작하려 하는데.. The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. 스코프 바깥에 선언이 되었다고 ..? 게다가 오류 형태도 참조에러기 때문에 무언가 있다고 생각해서 jest 공식 홈페이지를 뒤지기 시작했고 곧 정답을 찾을 수 있었다! Since calls to jest.mock() are hoisted to the top of the file, Jest prevents a.. MSW의 delay infinite는 테스트 성능에 이상이 없을까? 리액트 테스팅 라이브러리와 MSW를 이용하여 다음과 같은 hook을 테스팅 하고 다음과 같은 리뷰를 받았다. import { useQuery, useSuspenseQuery } from '@apollo/client'; import { MeQuery } from '@generated/graphql'; import { useErrorBoundary } from 'react-error-boundary'; type MeQueryProps = { id: string; }; export type useMeQueryReturnValue = { isLoading: boolean; isError: boolean; Name: string | null; }; const useMeQuery = ({ id, }: Present.. [vitest] Failed to resolve import "path" from 'component'. Does the file exist? 에러 해결하기 Next.js 14버전과 vitest를 사용하여 테스트 환경을 구성하던 중 다음과 같은 오류를 만났다. Failed to resolve import "@/utils/test/render" from "src/app/components/GNB.spec.tsx". Does the file exist? 환경 구성도 잘 되어져 있고, 문제가 없었는데 파일 참조를 못하는 오류가 발견된 것이다.. 프로젝트에서 절대 경로를 사용하도록 다음과 같이 설정했었는데 해당 부분에서 문제가 생긴듯 하다. //tsconfig.json compilerOptions: { ... "paths": { "@/*": ["./src/app/*"] } } vitest 내부에서도 절대경로를 수정해줘야 할 것 같아서 구글 검색과 공식문서를 통해서 .. 이전 1 2 3 4 ··· 8 다음
