react

React test Warning test was not wrapped in act error 해결 방법 console.error Warning: An update to FileIcon inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ 10 | icons 11 | .getClass(name) > 12 | .then((k) => setKlass(k)) | ^ 13 | .catch(() => n..

React TDD 개발 시작 (확장자 추천) npx create-react-app my-app 기본적인 test 라이브러리는 npx create-react-app을 하면서 설치되기 때문에 추가로 설치해줘야 하는 패키지는 없습니다. npm test 터미널에 npm test를 입력해서 테스트를 시작할 수 있고, 한 번 시작해 놓으면 파일이 바뀔 때마다 자동으로 테스트가 돌아갑니다. 만약에 테스트를 종료하고 싶으면 Ctrl C를 누르면 됩니다. 처음 npm test를 할 때나, w를 누르면 아래와 같은 옵션을 볼 수 있습니다. a는 모든 테스트를 돌리고 싶을 때 f는 실패한 테스트를 돌리고 싶을 때 p는 정규 표현식으로 특정 테스트 파일을 돌리고 싶을 때 사용합니다. (맨 처음에는 a로 테스트해 보는 게 좋고..

React fetch 사용법 Loading, Error, GET, POST React에서 HTTP 요청을 보내는 방법은 크게 2가지라고 합니다. 첫째는 axios를 사용하는 것, 두 번째는 fetch를 사용하는 것. 이번 포스팅에서는 fetch를 사용하여 GET, POST를 시도해 보고, 그에 따른 Loading 처리하는 방법, Error처리하는 방법까지 다룹니다. React - backend 통신하는 방법 데이터를 얻고 싶다. React App Database server 가장 빠른 방법은 데이터베이스와 직접 통신하는 방법일 텐데, 프런트에서 바로 데이터베이스에 접근하게 된다면, 일반 이용자들도 데이터에 접근 가능하기 때문에 반드시 피해야 합니다. React App Backend App Database..

React를 시작하기로 마음먹었다면 이 포스팅을 보면 됩니다. 이번 포스팅에서는 리액트가 무엇인지, 컴포넌트가 무엇인지, node.js를 다운로드한 다음에 리액트 프로젝트를 띄우기 위한 create-react-app을 입력하는 방법, npm install을 사용하는 이유에 대해서 알아봅니다. React 시작하는 방법 React는 무엇인가? 리액트는 선언적이고 (declarative), 효과적이고 (efficient), 유연한 (flexible) 자바스크립트 라이브러리입니다. React를 이용하면 여러 개의 컴포넌트(component)로 복잡한 UI를 만들 수 있습니다. 참고로 바닐라 자바스크립트는 절차형 프로그래밍(imperative)입니다. 절차형(imperative)응 컴퓨터가 이해하기 쉽도록 명시적..