전체 글

현상npm run dev로 개발환경 실행하고 브라우저 오픈시 아무런 화면이 나오지않고 로그에는 아래와 같은 에러가 찍히는 현상 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/msw.js?v=3f957acc' does not provide an export named 'rest'  원인vite의 캐시파일이 최신화가 되지 않아 나타나는 문제 프로젝트 package.json에서 관리하고 있는 dependency 의존성이 캐시되어있는 의존성이랑 다를 때 발생 해결node_modules 내부에 있는 vite 캐시파일인 `.vite 폴더` 삭제  이후 다시 npm run dev 재실행 이래도 되지않는다면..? `node_modules` 내..

문제 2가지 인풋이 있다. "비밀번호"를 라벨로 가지는 인풋 1개와 "비밀번호 확인"을 라벨로 가지는 인풋 1개 테스트를 돌리는데 이상하게 "비밀번호 확인" 인풋에 입력되어야하는 값이 계속 위의 "비밀번호" 인풋에 입력되는 현상이 있었다.디버깅하기 너무 어려웠던것은, 테스트에서 에러나는 부분은 비밀번호 확인 인풋 DOM 요소를 찾지 못해서는 아니었다. 비밀번호 확인 인풋은 찾아지는데, 그게 제대로된 아래 비밀번호 확인 인풋이 아닌 위의 비밀번호 인풋으로 찾아지는 문제였다. 도대체 왜이럴까.. 하다가 Testing Playground에서 시도해보다가 드디어 원인을 찾았다. 원인컴포넌트비밀번호비밀번호 확인 테스트코드screen.getByLabelText('비밀번호') input의 id가 같은 경우, id가 ..

며칠전 동료의 코드를 보다가 바보같은 질문을 하게되어 다시 정리해보는 JSON의 개념 서버에 요청을 보내는 바디를 `JSON.stringify()`로 변환하는 코드를 보는데 갑자기 헷갈렸다. stringify는 말그대로 자바스크립트 객체를 문자열로 직렬화시켜주는 것아니던가? 왜 서버에 요청보낼때 stringify를 시키는거지..?? 나는 .. JSON과 JavaScript의 object를 헷갈리고있었던 것이었다.. 😱 먼저 JSON이 뭔지를 정확히 알아야한다. JSONJSON(JavaScript Object Notation)은 데이터를 주고받을수 있는 일반 텍스트 포맷을 뜻한다. JavaScript의 객체 표기법을 본따서 JSON syntax가 만들어졌다.JSON 포맷은 텍스트일뿐 JavaScript와..

문제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..

더보기5월에 기존 처음 창립 멤버였던 CTO님 퇴사로 그와 함께 들어온 많은 엔지니어들이 회사를 떠났고 회사는.. 어딘가 붕 떠 있는 이상하고도 계속 축 처진 느낌이 드는 분위기가 계속되었다. 홀로 남겨진 주니어들은 갈 길을 잃은 듯한 상황에 놓여졌다. 누군가 결정을 해줘야하는데 아무도 결정해주는 사람이 없고... 이걸 지금 개발해도 분명 또 바뀔 것 같은.. 다들 동기부여가 많이 사라진 채 정체기를 보내고 있다. 새로운 매니징레벨의 부임을 앞두고 있는 상황이었는데.. 갑자기 회사는 월급이 안나오고..?? 나중이 된 지금은 이제 알게되었지... 하반기에는 새로운 era가 시작됨과함께.. 거의 모두가 퇴사를 하게되는.. 상황이.. 도래했다. - 데일리 스크럼 진행새로운 era로 들어서면서 매일 아침 데일리..