React

1. 프로젝트 생성먼저 구글 계정으로 Firebase Console에 가입하고, 프로젝트를 만든다. 배포 기록이나 Firebase가 제공하는 모든 기능을 콘솔에서 대쉬보드처럼 보면서 관리할 수 있다. 내 프로젝트가 오른쪽에 생성된 모습 2. Firebase CLI 설치 npm으로 Firebase CLI 설치 npm install -g firebase-tools 3. 프로젝트 초기화 배포하려는 프론트엔드 프로젝트의 루트에서 프로젝트를 초기화하기 firebase init hosting 초기화 명령을 실행하면, interactive 질문이 쭉 나온다. Project setup? Please select an option:기존 로컬 프로젝트에다 Firebase 프로젝트로 연결하는 것이니, Use an exist..

현상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가 ..

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