Unit: Vitest_or_Jest, Component: Testing Library, E2E: Playwright_or_Cypress목차1. 테스트 유형2. 테스트 도구3. 테스트 도구 조합4. Unit 테스트 - Vitest, Jest5. Component 테스트 - Testing Library6. E2E 테스트 - Playwright, Cypress 1. 테스트 유형프론트엔드 테스트도구는 웹 애플리케이션이 의도대로 동작하는지 검증하는 도구이다.UI는 변경이 잦고 영향 범위가 넓은데 수동 테스트를 하면 반복 비용이 크고 누락이 발생하기 쉽다.따라서 테스트 도구를 사용해서 자동화된 테스트로 안정성과 개발 속도를 확보하는 것이다. 프론트엔드 테스트 유형은 세 가지가 있다.1. Unit 테스트 - ..

상태: UI 렌더링에 영향을 주는 변경 가능한 데이터 / 상태 관리: 과도한 리렌더링을 막기 위해 잘 관리하는 것(종류 - local, global, server)목차1. 프론트엔드의 상태 1-1. 상태란? 1-2. 상태의 종류2. 상태(state) vs Ref3. 프론트엔드 상태관리4. React 기준 상태의 흐름 1. 프론트엔드의 상태1. 상태란?프론트에서 말하는 "상태"란 UI 렌더링에 영향을 주는 변경 가능한 데이터를 말한다.상태가 변경될 때마다 리액트는 그 상태를 가진 컴포넌트를 재렌더링하여 최신 상태로 유지하는데,따라서 이 상태를 어떻게 관리하느냐에 따라 서비스의 성능이 달라진다. 일반 변수와 다르게 상태는 아래와 같은 조건을 가진다.변경 가능 (mutable)React와 같은 프레..

flex-shrink의 동작 순서 이해하기목차1. 문제 상황: div 내에서 hover 시 보이는 컴포넌트가 찌그러짐2. 해결1: 고정 너비를 지우고 IconButton에 shrink-0 주기3. 해결2: IconButton에 block 대신에 flex 주기1. 문제 상황: div내에서 hover 시 보이는 컴포넌트가 찌그러짐썸네일에서는 잘보이라고 IconButton을 일부러 검정색으로 뒀는데, 실제 디자인은 왼쪽 그림과 같이 배경과 비슷한 파란색이다. 티가 잘 안난다고 생각해서 찌그러진 상태로 두고 일단 다른 더 급한 작업들을 진행하다가피드백 방에도 올라오고, 더 중요한 기능들이 좀 완성이 돼서 드디어 고치기 시작.. 간단한 부분이지만 은근 헤멨었어서 블로그를 작성해본다. 해당 부분은 아래와 같은 형태..

useEffect 의존성 해결로 fetch 반복 문제 해결컨테이너 높이 확실하게 잡아서 스크롤 시 fetch 되도록 해결목차1. 기존 InfiniteScroll 상태2. 문제1) useEffect 내부에서의 반복 호출 문제3. 문제2) DOM 누적 문제4. 수정 후 성능5. 배포 후 테스트6. 정리 1. 현재 보이는 문제와 기존 InfiniteScroll 상태1. 현재 보이는 문제두가지 상황이 반복되어서 나타나고 있었다.1. 처음 페이지 로드 시 Fetch가 연속해서 실행되어 DOM에 모든 카드가 렌더링됨2. 1을 해결해보면 Scroll을 바닥까지 내려도 fetch가 아예 되지 않음 2. 기존 InfiniteScroll 상태수정을 하고 하다가 기존 상태는 아래와 같다.시간이 좀 부족한 관계로 일단 기존 ..

ChromeDevTools, 콘솔로 최적화 전 수치 측정하고 tanstack/react-virtual 활용해서 가상화 넣음목차1. 초기 상태2. 측정 기준 정의3. 브라우저 기반 측정 - Chrome DevTools4. 개발 코드에 콘솔 심기 4-1. API Total Time 4-2. Scroll Fetch Latency 4-3. Render Time 4-4. 콘솔 로그 확인하기5. InfiniteScroll에 가상화 적용하기 1. 초기 상태무한스크롤 최적화 하기 전 후 상태를 비교하기 위해 데이터를 한 500개 넣어보자!하고 넣는데한 100개만 되어도 속도가 너무 느려서 데이터 넣는 것도 어려운 것이다.처음 렌더링할 땐 20개로 시작해서 괜찮으나, 스크롤해서 20개씩 불러오며 6..

요약목차1. 친구 계정으로 클로드 구독 체험하기2. Figma cowork 연결하기1. 친구 계정으로 클로드 구독 체험하기뭔가 하려고 클로드 일단 구독을 했는데 쓴 적이 없으니 필요하면 말하라고 한 친구가 있었다. (그 때 덥썩 받을걸)잊고 있다가 최근 좀 오래걸렸는데 답도 없던 에러를 해결하며 그게 생각이 나서 구걸했다. vscode에 5달러 짜리 한 번 써보니까 진짜 좋길래.. 그래서 유료 클로드를 얻은 김에 열심히 활용해보려고 한다.2. Figma cowork 연결하기1. Claude Code일단 클로드를 열어보자. 클로드 사이드바에 보면 이렇게 사용자 지정 탭이 있다.도구 연결로 가보면 뭐 이것저것 많은데 일단 나는 Figma를 연결해봤다.들어가서 피그마 계정 로그인하면 뭔가 끝남. 2. F..

요약middleware - bff - vercel - backend 체크하다 vercel env에서 문제를 발견함목차1. 상황: 로컬에서는 로그인이 잘되는데 배포본에서는 안된다2. 현재의 인증 흐름 정리하기3. 문제 발생 지점 확인하기 - middleware, serverApiClient4. Sentry 연동하기5. Vercel env 값 확인하기6. 배운 것1. 상황: 로컬에서는 로그인이 잘되는데 배포본에서는 안된다.구글 OAuth 로그인 후 배포주소로 백에서 리다이렉트 되는 것을 수정이 불가능하다 하여프론트에서는 백엔드로부터 전달받은 Docker로 http:localhost:8080에서 테스트를 하며 개발을 쭉 하고 있었다. 백엔드 문제로 배포주소에서 로그인만 하면 튕기다가 그게 해결이 돼서 드디어 ..

Docker로 백엔드 서버를 가져와서 구글 리다이렉트 로컬로 성공시키기목차1. 상황: 구글 OAuth로 로그인하면 배포된 페이지로 리다이렉션이 발생2. 해결: 도커 파일을 설치해 백엔드 로컬호스트 주소로 리다이렉션 시키기3. 도커 파일 설치 1. 상황: 구글 OAuth로 로그인하면 배포된 페이지로 리다이렉션이 발생1. 상황상황은 이렇다. 백 인증 구현이 아직 미완성된 상태에서 프론트는 "개발용 로그인" 버튼을 만들어서 직접 로그인 토큰을 넣어 개발을 진행하던 중..드디어 구글 로그인 로직이 제대로 완성되었다는 사실! 그래서 나도 기존 임의로 작성되어 중복 코드 투성이에 약한 보안이 신경쓰였던, 프론트측 인증 로직을 개편했다.BFF 패턴 적용하고 레이어 계층 나누고 이것저것.. 이건 좀 복잡해서 일단 P..

cloudflare로 이미지 다운받기목차1. cloudflare 계정 생성 및 버킷 추가2. data 추가3. 다운로드 링크 1. cloudflare 계정 생성 및 버킷 추가이미지 공유 링크를 만들기에 cloudflare가 무료로 내가 필요한 범위를 제공하기에 가장 적절하다고 생각해서 cloudflare로 선택했다.내가 필요한 건 클릭을 통해서 이미지 파일을 다운받는 것이 전부고, 다운로드양이 유료플랜만큼 많아지지 않을 거라 생각했다.https://www.cloudflare.com/ko-kr/ 모든 곳에서 연결하고, 보호하고, 구축하기복잡성과 비용을 줄이면서 직원, 애플리케이션, 네트워크를 어디에서든 더 빠르고 안전하게 만듭니다.www.cloudflare.com 1. domain 추가아직 도메인 구매를 ..

블렌더로 3D 오브젝트 만들고 Three.js로 반응형을 고려한 웹 렌더링 하기목차1. 웹 메인 페이지에 커서를 추적하는 3D 오브젝트 넣기2. 준비물: Three.js와 3D 오브젝트(를 직접 만들어 봤다)3. blender로 3D 오브젝트 만들기4. Three.js로 웹페이지에 객체 넣기1. 웹 메인 페이지에 커서를 추적하는 3D 오브젝트 넣기일단 기존 피그마로 대충 디자인한 메인 화면은 아래와 같았다.이렇게 그냥 쭉 아래로 스크롤하는 메인 화면이다. 그런데 리팩토링으로 남겨두려했지만 메인 작업을 시작하려니 너무 못생겨서 하기가 싫은 거다.그래서 일단 고려만 했던 Three.js를 바로 투입해보기로 했다. 어차피 갈아엎게 될 메인이라면.. 스트레스 받지 말고 갈아엎기로 2. 준비물: Three.j..

prettier, eslint에서 endOfLine을 "auto"로 두자목차1. 상황: 맥에서만 작성했던 코드를 윈도우에 클론했더니2. 원인: eslint-plugin-prettier3. 해결: eslint.config.mjs의 prettier 세팅 수정1. 상황: 맥에서만 작성했던 코드를 윈도우에 클론했더니Delete `␍` 에러가 엄청 뜬다 윈도우 환경에서 ESLint 사용 중 Delete ␍ eslint(prettier/prettier) 에러가 발생하는 원인은 줄바꿈(CRLF ↔ LF) 불일치다.␍는 Windows의 CRLF 줄바꿈에 포함된 Carriage Return(\r) 문자이며,ESLint에서 실행되는 Prettier 규칙이 LF만 허용할 때 발생한다. 현재 사용하던 eslint 규칙이 다른..

요약yml 문서 작성해서 github actions로 prettier, lint, tsc 체크하고 vercel 배포하기코드래빗 웹페이지에서 리뷰 세팅하기목차1. github_actions로 CI 돌리기2. ci.yml - lint/tsc 체크 및 라이브러리 자동 업데이트3. deploy.yml - main vercel 배포4. pr-title-check.yml - pr title 검사5. 코드래빗 리뷰 1. github actions로 CI 돌리기ci 세팅을 github actions로 할 거여서 이슈 생성하고 .github/workflows에 yml 파일들을 작성해봤다.할 일들은 아래의 내용들이다.lint/tsc 체크main vercel 배포CodeRabbit 리뷰pr title 검사라이브러리 자동 업..