FrontEngineer JungBam

mac에서 react-native를 빌드할 때 발생하는 에러 중 하나! mac이 다 좋은데 이 권한 이슈가 계속해서 발생하는 것은 참 슬프다ㅠㅠ 해결방법은 간단! 터미널에 아래와 같이 명령어 입력해주면 끝! chmod 755 android/gradlew

서버에서 어떠한 값을 받아서 그 값에 따른 매핑을 통해 컴포넌트를 렌더링 시킬 경우 테스트를 하기 위해서는 findby 메소드를 사용해야 한다.(비동기적으로 동작하는 값에 대해서 getby메소드를 사용했을 때에는 해당 요소를 찾을 수 없다.) import { render, screen } from '@testing-library/react'; test('비동기 요청 후 DOM 요소 확인', async () => { // 비동기 요청 실행 render(); const element = await screen.findByTestId('some-element'); // DOM 요소 확인 expect(element).toBeInTheDocument(); }); 너무나 당연한 이야기이지만 비동기 요소에 따라서 동..

jest를 이용하여 test코드를 작성하면 axios import 이슈가 발생한다. axios 깃헙에 jest test관련 이슈를 확인하면 해결방법이 몇가지 명시되어 있는데 해결방법을 해본 결과 버전을 다운하는 것 외에 다른 방법은 문제가 해결되지 않았다. Updating Axios from 0.27.2 to 1.0.0 breaks Jest tests in a create-react-app app · Issue #5026 · axios/axios I have several React applications created with a Typescript based create-react-app application (and using react-scripts@5.0.1, which depends on je..

Jest에서 컴포넌트 내부 이벤트 트리거를 테스트 하는 가장 일반적인 함수 두가지 userEvent와 fireEvent에 대해서 알아보자. 1. fireEvent 이벤트 객체를 생성하여 해당 이벤트를 컴포넌트에 트리거 시키는 함수 fireEvent는 컴포넌트의 이벤트 핸들러를 직접 호출하기 때문에 컴포넌트 내부의 특정 코드 경로를 테스트하는데에 적합하다. ex) fireEvent.click(element) 2. userEvent 클라이언트의 인터렉션을 모방하는 동작을 하는 함수 * 실제 사용자가 웹 페이지나 애플리케이션과 상호작용하는 것과 유사한 동작을 수행한다. 즉, fireEvent보다 사용자의 행위를 더 잘 시뮬레이션한다고 생각하면 되고 사용자의 행위에 따른 결과를 테스트하는 데에 더 적합하다고 할..

eslint-plugin 설치 npm install eslint-plugin-testing-library eslint-plugin-jest-dom .vscode/setting.json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } .eslintrc.json { "plugins": [ "testing-library", "jest-dom" ], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:j..

처음 리액트로 프로젝트를 진행할 때에 테스트 코드가 필요가 없었다. 작은 프로젝트나 유지보수, 서비스가 되지 않는 포트폴리오용 프로젝트를 진행하면서 많은 사람들이 가질 수 있는 생각이 '왜? 굳이? 테스트 코드를 작성해야되지?'라는 부분일 것이다. 나도 부트캠프를 하고 마지막 보드게임을 만들고 한달간 보드게임에 대한 유저의견 반영 및 성능 최적화를 진행하면서도 '테스트 코드? 필요없는데?' 라는 생각을 했던 것 같다. 하지만 이번 회사를 다니면서 절실히 깨달은 것이 두가지가 있는데 첫번째는 테스트 코드의 필요성, 그리고 두번째는 리팩토링의 필요성이었다. 이전에 내 생각에도 적었다싶이 워크플로우가 막장에 가까운 회사였고 개발문화가 정착이 되어 있지 않은 회사이다보니 문제점이 많았다. 그 중 가장 큰 문제는..

취준에 들어간 첫째주부터 2군데를 합격하고 그 다음주에 또 다른 2군데를 합격하고 4개의 회사 중에 회사 사람들이 가장 밝아 보였던 곳으로 입사를 결정했다. 대표가 제시했던 것들이 한창 코딩에 재미가 들렸던 나에게는 너무 달콤한 속삭임이었달까? - 11시 출근 5시에 퇴근해서 학원에 가서 공부를 하는 것(입사 후 3개월) - 차후 3개월 간 사수와 같이 근무를 하면서 어플 개발 준비를 하면 6월에 시작하는 프로젝트에 들어가게 될 것이라는 것 - next, RN 등 기술스택을 쌓을 수 있을 것 - 20년 차의 연구소장님이 들어올 것이라는 것 입사할 때에는 사수가 있었다. 사수의 실력을 떠나 같은 컨텍스트를 고민하는 사람이 있고 없고의 차이는 분명하다. 하지만 내가 입사한 주 금요일에 사수는 퇴사를 했다.(..

프리패칭을 하는 훅을 만들어서 사용하던 중 발생한 disabled... 데이터를 가져오지를 못하는 문제가 발생했다. disabled에 대해서 tanstack에 찾아보니 state에 대한 내용과 함께 enabled 옵션을 다루고 있었다. 내가 해당 훅에서 사용한 코드는 아래와 같다. const [checking, setChecking] = React.useState(false); useQuery( [queryKeys.TIMES, question.question_no], () => mainAPI.getTimes(question.question_no, user_no), { onSuccess: (res) => { setTimes(Number(res.data.times)); }, staleTime: 60 * 60..