6. Error

[Error] Cannot find module 'react' or its corresponding type declarations

1.에러 발생 상황 React를 실행하려는데 다음과 같은 에러가 발생했다 react와 react-dom이 존재하지 않는다는 문제 2.해결방법 직접 react와 react-dom을 설치해 에러를 해결했다 npm i react react-dom

2024. 2. 7. 15:06

2. FrontEnd/React

[React] react-i18next로 다국어 처리 적용하기

회사에서 맡은 프로젝트 중 관리자 페이지 웹사이트에 다국어처리를 적용하게 되었다. 우선, 관리자 페이지여서 SEO는 따로 필요 없었기 때문에 React이고, 이에 따라 react-i18next 적용해서 했던방법을 정리하여 나중에 기억안날때 꺼내볼 목적이다. (참고 : 서버에서 다국어 지원을 제공하는 next-i18next 라이브러리도 있음) 1. 패키지 설치 $ yarn add react-i18next i18next $ npm i react-i18next i18next 2. 폴더 구조 (옵션이지만 이렇게 하는게 이쁨) src > locales폴더 만든 후, en / ko폴더 안 json으로 넣었다. 현재는 관리자페이지만 다국어 처리 적용을하여 json으로 관리해도 될 만큼의 작은규모라 이렇게 하였음 대규..

2023. 11. 20. 13:26

2. FrontEnd/TDD

[TDD] Cypress를 사용하여 E2E테스트

E2E(End to End) : 사용자의 관점에서 테스트를 진행하는 것 사용자가 서비스에 접속했을 때 하는 행동들과 그 행동들에 의해 동작되는 여러 액션들을 테스트할 수 있기 때문에 사용자가 사용하는 관점에서 발생될 수 있는 문제들을 파악하는데 도움을 줍니다. E2E 테스트를 포함하여 React에서 진행되는 테스트들은 다음과 같이 있습니다. 단위 테스트 통합 테스트 E2E 테스트 E2E 테스트는 브라우저를 통해 실제 사용자가 서비스를 사용하는 부분을 테스트하기 때문에 위의 테스트들 중 가장 큰 리소스를 필요한다 (=즉, 테스트를 진행하는데 상대적으로 많은 비용이 필요하며 무겁기 때문에 속도도 느린 편) 그래서 E2E 테스트는 전체 테스트에서 10% ~ 20% 정도만 차지할 정도로 구성을 하기에 꼭 필요로..

2023. 11. 10. 09:46

2. FrontEnd/TDD

[TDD] Jest 사용법

Jest를 설치 npm install jest --save-dev yarn add jest --dev Jest를 테스트 러너로 설정 package.json > 테스트 필드에 Jest를 추가 { "scripts": { "test": "jest" } } Jest가 테스트 코드를 포함하는 파일로 인식할 수 있도록 테스트 파일의 이름은 .test.js로 끝나야 함 테스트를 실행 npm run test yarn test 특정 파일만 실행하고 싶으면, 다음과 같이 테스트 파일을 지정 npm run test componentName.test.js yarn test componentName.test.js 테스트를 시작하면 Jest는 콘솔에 실패 또는 통과 로그를 출력 $ jest PASS ./componentName...

2023. 11. 7. 17:54

2. FrontEnd/React

[React Query] isLoading vs isFetching

▶️ isFetching 비동기쿼리가 해결되지 않음 Fetching을 완료하지 않았다는 의미 쿼리가 Axios호출이거나 GraphQL호출일 수도 있다 ▶️ isLoading isFetching에 대한 하위집합 데이터를 가져오는 상태이고, 표시할 캐시 데이터도 없다는 의미 쿼리함수가 아직 해결되지 않은 것이고, 캐시된 데이터도 없다 즉, 이 쿼리를 만든 적이 없다는 의미 no cached data, plus isFetching 많은 차이가 없어보이지만, 나중에 페이지 매김(pagination)을 진행할 때 캐시된 데이터가 있을 떄와 없을 때를 구분해야하한다. 👍🏻참고자료 https://www.udemy.com/course/react-query-react/

2022. 10. 3. 15:14