전체 글 (62) 썸네일형 리스트형 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 내부에서도 절대경로를 수정해줘야 할 것 같아서 구글 검색과 공식문서를 통해서 .. Next.js와 Tailwind CSS를 이용해 로컬 폰트 설정하기 들어가기 tailwind CSS를 연습 해보기 위해서 새로운 프로젝트를 시작했다. Next.js와 Tailwind CSS를 결합해서 사용하기 때문에 차근차근 하나씩 시도해보려 한다! 그 중에서 제일 먼저 타이포그래피를 설정해보자! Next/Font Next.js는 기본적으로 폰트도 최적화를 지원한다. 외부에서 받아오는 글꼴에 대한 네트워크 요청을 별도로 하지 않아 보안에 안정적인 부분도 있다! 또한 대부분의 웹 페이지는 글꼴을 받아오는 동안에 기본 글꼴을 보여주느라 깜빡이는 현상이 있는데, next의 font 최적화에서는 해당 부분도 온전히 해결되었다. 로컬폰트 적용하기 나는 구글 글꼴에는 없는 폰트를 사용할 것이기 때문에 폰트 파일을 받아서 사용할 예정이다. 여기(공식문서에 나오는 영상)를 보면 CDN.. 좋은 테스트 코드 작성법 정리 애플리케이션의 품질과 안정성을 높이기 위해 사전에 결함을 찾아내고 수정하기 위한 행위 테스트는 주로 특정 모듈(컴포넌트)이 사양에 잘 동작하는지 검증 테스트 코드의 효과 좋은 설계에 대한 사고를 도와준다. 테스트 코드를 작성할 때 테스트 코드를 독립적으로 작성할 수 있도록 결합도를 낮추도록 설계하여 작성 가능 의미 있는 컴포넌트 단위로 분리가 가능하도록 설계 테스트 코드를 기반으로 빠르고 안정적이게 리팩토링 할 수 있다. 리팩토링: 결과의 변경 없이 코드의 구조를 수정 좁은 범위를 개선 하고 테스트를 한다면 문제를 발견하기가 훨씬 쉽다. 애플리케이션 기능의 이해를 돕는 문서가 된다. 올바른 테스트 작성을 위한 규칙 인터페이스를 기준으로 테스트를 작성해야 한다. 내부 구현에 대한 테스트는 캡슐화를 위반하여.. 이전 1 2 3 4 ··· 8 다음
