전체 글

문제POST/PATCH Mutation 요청시 캐싱을 무효화하여 데이터의 최신 상태를 유지하도록 적용해두었다.이미지 등록 POST > 이미지 목록 GET > 썸네일 이미지 PATCH > 전체 이미지목록 GET 순서로 호출되어 갱신된 데이터를 가져오도록 예상했으나, PATCH Mutation 요청 이후에 GET 쿼리가 실행되지 않아서, 썸네일이미지가 화면에 바로 반영되지 않는 문제가 있었다. Expected Behavior POST > GET > PATCH > GET  Current BehaviorPOST > GET > PATCH (브라우저 네트워크) POST > PATCH > GET (콘솔) 컴포넌트 코드//ImageContainer.tsx서버에 요청 보내는 코드 존재 썸네일 설정하는 함수 const ..

이슈authoriztion token정보로 api의 요청을 받아서 화면에 유저정보를 띄우는 마이 페이지가 있다.테스트를 돌리는데 테스트 환경에서 자꾸 유저정보가 빈값으로 나오는 이슈가 있었다. 컴포넌트 구현 유저정보를 get 해오려면 저장된 토큰정보를 가지고 서버에 요청해서 response로 받아와야한다.이때, 인증 토큰은 로컬스토리지에서 토큰 정보를 받아오는데, 로컬 스토리지에서 토큰정보를 받아올때 localStorage Web API를 사용해서 localStorage.getItem("token")로 바로 받아오는 것이 아니고, store라는 3rd party 패키지를 통해 스토리지에 접근한다. //package.json "dependencies": { "store": "2.0.12" }, 따..

의존성 패키지 "devDependencies": { "jest": "29.3.1", "react": "18.2.0", ... } 문제test 환경에서 png 이미지 파일을 못읽어오는 에러가 발생 error: `process()` or/and `processAsync()` method of code transformer found at fileTranformer.cjs "/fileTransformer.cjs" should return an object or a Promise resolving to an object.   원인jest는 기본적으로 코드를 JavaScript로 실행한다. Node가 지원하지 않는 syntax인 JSX, TypeScript 같은 코드를 곧바로 사용하려면 pla..

들어가기환경node 20.16 패키지 의존성react testing library 13.4.0redux toolkit 1.9.5 msw 2.3 vite 5.2.11typescript 4.9.4jest 29.3.1 msw 핸들러로 서버 응답 모킹, RTK Query로 API 호출하는 컴포넌트에서 발생하는 에러 모음zip... 테스트로 코드 품질을 향상시키고자 했으나 jest testing framework + msw 2 환경에서 셋팅하다가  정신 건강에 위협을 받았다msw 에서도 웃긴게 이렇게 셋팅하는게 귀찮으면 ~ 더 모던한 테스팅 프레임워크 사용하렴~ 이라고 권장..If you find this setup cumbersome, consider migrating to a modern testing fra..

테스트 내용 테스트 환경 jest | React Testing Library React Router의 useNavigate로 연결되어있는 페이지가 있다. 확인 버튼을 누르면 조건을 충족했는지 검사 후 다음 페이지로 이동하는 페이지이다. 이를 아래와 같이 테스트해야 했다. 약관동의 페이지에서 전체 동의 체크 후 확인버튼을 누르면, 다음 페이지인 이름 입력페이지로 이동한다. 테스트하려는 코드 Agreement.tsxexport const Agreement = () => { const navigate = useNavigate(); const [checked, setChecked] = useState(false); const handleClick = () => { if (checked) { navigate('/..

기존 셋업api 요청은 stage 서버의 url인 `VITE_ACCOUNTS_BASE_URL` 환경변수로 지정한 주소로 요청을 보내서 스테이징 서버 요청/응답을 직접 받는다. 서버에서 응답으로 주는 페이지 주소나 redirect 페이지 url 정보는 `VITE_LOCAL_HOST` 라는 환경변수 주소로 관리해서 개발하면서 바로바로 서버 응답에 따른 페이지 ui 를 확인한다. package.json "scripts": { "dev": "vite", "build": "vite build -m stage", "stage": "vite -m stage", } 환경변수 파일개발 모드 환경변수 스테이징 모드 환경변수  vite 개발서버 시작`npm run dev` 명렁어로 로컬에서 vite 개..

This post is what I took notes from the React Testing for Beginners By Programming with Mosh.What to testTesting ComponentsHow they renderHow they responsd to user actions No tests > Bad testsBad tests are worse than No tests.Poorly written tests can get in the way and slow us down.  Test the behaviour (What the application does), not the implementation (How it's implemented)  Integration Tests ..

서론사내 UI 라이브러리로 Mui를 사용하고 있는데 디자인 시스템에 따른 컴포넌트 스타일링 작업을 theme 자체를 커스텀하여 사용중이다. theme을 커스터마이즈해서 패키지로 분리하여 패키지에서 정의해둔 theme을 가져오면 어느 워크스페이스 프로젝트에서든 디자인이 한번에 적용되게 하여 유지보수를 하고있다. 즉 theme에 디자인 작업을 해두면 레포 내부의 모든 워크스페이스에서 다른 개발자들도 스타일링이 입혀진 컴포넌트를 바로 가져다가 쓸 수 있다.그런데 이번에 Select 컴포넌트를 커스텀하는데 넘나 삽질을 하였다... 라벨 여부에 따라 padding 간격을 조정해야했는데, Textfield 컴포넌트와는 다르게 직접적으로 label 프로퍼티를 가져올 수 없어 애를 먹었다. 그래서 기록해봄! Textf..