CodingCredit

Next.js 공부겸 개인 운동노트페이지를 만들고 있는 도중에, 정부공개데이터를 사용하기위해서 외부 API 통신중에 cors에러가 발생했다. 기존 React로만 통신할 때는 프론트단에서 proxy설정을 해주거나 서버를 구성했다면 서버단에서 allow origin을 추가해줘서 cors에러를 해결하곤 했다. Next에서 처음 마주친 cors인 기념으로 2가지 해결방법을 기록해보도록 하겠다. 방법1. 프론트단에서 해결하기 - proxy 설정 React에서 proxy를 설정할 떄는 라이브러리 사용, package.json에 설정을 추가, webpack설정에 devserver에 proxy를 설정하는 등의 방법들을 사용했었다. Next.js에서 proxy를 설정하는 방법 중 하나는 next.config.js의 Re..

React-router-dom 이 v6로 업그레이드되면서 사용법들이 많이 바뀌었다. 매번 찾기도 그래서 기존에 많이 사용하던 것들이 어떻게 바뀌었는지 정리해보도록 하겠다. 바뀐 모든 기능을 정리하기보다는 기존에 자주 사용하던 기능들만 어떻게 바뀌었는지 정리해보겠다! App에서 중첩 라우팅 설정 Switch, exact가 삭제되었다! 라우터가 중첩될 때 썼던 Switch, exact가 삭제되고 이제는 중복되는 경로의 태그에 /*를 입력하고 자식태그로 넣어준 뒤에 부모태그의 컴포넌트에 Outlet을 넣어준다. // 기존 App function App() { return ( ); } // V6 App import { BrowserRouter, Route, Routes } from "react-router-do..

Github actions: Basic(with YAML) 위 글에서 YAML문법과 workflow의 기본구성에대해 알아보았다. 이번 글에서는 직접 워크플로우를 작성해보도록 하겠다. 😎 👨🏻‍💻 워크플로우 작성하기 이번 글에서는 테스트자동화를 위한 workflow를 작성해보도록 하겠다. 먼저 어떠한 순서로 작업들이 이루어질지 구상해보고 실제 코드로 옮겨 작성해보자. 이벤트 및 작업환경 설정 main 브랜치로 체크아웃 Node.js 환경설정 npm 캐싱 패키지 설치 테스트 실행 PR 시, 테스트 실패할 경우 자동 closed 및 comment 작성 슬랙에 알림 0. 이벤트 및 작업환경 설정 on: push: branches: [ main ] pull_request: branches: [ main ] job..

🧐 Github actions? Github actions는 Github에서 제공하는 workflow를 자동화할 수 있는 도구이다. 즉, Github에서 직접 제공하는 CI/CD 도구라고 할 수 있다. CI로 쓴다는 의미는 테스트 실행이나 빌드 검사, 컨벤션 검사를 통해 코드가 의도대로 동작하고 잘 작성되었는지를 확인할 수 있다는 의미이고 CD는 서버에 배포하거나 레지스트리에 발행하는 등의 행위를 할 수 있다는 의미이다. 이러한 CI/CD 도구에는 Travis CI, CircleCI 등이 있지만 Github actions는 작성이 쉬우면서도 확장성이 좋고, Github 마켓 플레이스에서 여러 사람이 공유한 Workflow를 찾을 수 있으며, 자신이 직접 만들어서 공유할 수도 있다는 장점이 있다. 📚 YA..

😎 React Compontets testing 리액트 공식페이지를 보면 components testing에 아래와 같이 두가지 라이브러리를 추천하고있다. Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have mor..

🧐 Hooks testing? 리액트 프로젝트에서 react-hooks를 사용한다면, 공통된 로직이든 상태관련 로직이든 다양한 custom hook을 만들어 사용하게된다. 따라서 reducer나 component 테스팅뿐만 아니라 이러한 custom hook들이 의도대로 작동하는지도 테스팅해주는 것이 좋다. 하나의 component에서 사용되는 hook이거나 간단한 로직의 hook이라면 직접 테스팅하는 것이 쉽겠지만, 복잡한 로직의 hook이나 API요청이 있는 hook등은 직접 테스팅하는 것이 조금은 복잡할 수 있다. testing-library/react-hook 라이브러리를 사용하면 이러한 hook들을 쉽게 테스팅할 수 있다. 📚 testing-library/react-hooks testing-li..