프론트엔드 정복하기

action.js 에서 const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request }; 위와 같이 서버통신 응답 값을 reducer로 넘기면, ===>>> reducer에서 console.log(action.payload) 하면 ===> 아래와 같이 서버에서 받은 data가 바로 찍히는 데, const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request, expandeTeam : ..., teamId : .... }; 위처럼 리듀서에 넘길 key를 p..

CRA(create-react-app)으로 앱을 만든 경우, setupTests.js 파일이 test 설정 관련 파일로 설정되어 있다. CRA로 앱을 만들지 않은 경우, 어떻게 config를 조정할까?! react-testing-library 공식 홈페이지에서는 react-testing-library 설정을 jest.config.js 로 하는 법을 알려주고 있다. testing-library.com/docs/react-testing-library/setup Setup | Testing Library React Testing Library does not require any configuration to be used. However, testing-library.com 즉, jest 설정하는 법을 보면..

테스트 중 아래와 같은 에러 메세지가 발생했다 ReferenceError: regeneratorRuntime is not defined test('', async()=>{ ... }) 테스트 코드를 위와 같이 작성했는데, async/await를 사용함으로 인해 발생한 에러라고 한다. 바벨이 async/await를 regeneratorRuntime로 설정해두었기 때문이라고 함. regeneratorRuntime 모듈을 포함한 babel-polyfill을 설치 후 import 하면 해결된다. npm install --save-dev babel-polyfill 그리고 index.js에서 위를 import 하면 된다! medium.com/@jongmoon.yoon/mocha-%EB%8B%A8%EC%9C%84-%..

react-testing-library 의 예시를 보여주는 블로그들을 보면, 어떤 곳에서는 describe와 it을 쓰고, 어떤 곳은 test를 쓴다. 차이는 무엇이고 어떤 것을 써야하는걸까??? react-testing-library 공식 홈페이지에서는 아래와 같이 설명하고 있다. testing-library.com/docs/react-testing-library/migrate-from-enzyme/#import-react-testing-library-to-your-test Note: you can also use describe and it blocks with React Testing Library. React Testing Library doesn't replace Jest, just Enzyme..

import React, { useState, useEffect } from "react"; export default function App(){ const [checkedInputs, setCheckedInputs] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedInputs([...checkedInputs, id]); } else { // 체크 해제 setCheckedInputs(checkedInputs.filter((el) => el !== id)); } }; return ( { changeHandler(e.currentTarget.checked, id값) }} checked={checkedInput..

이벤트 분류 React가 지원하는 이벤트 마우스 이벤트 onClick, onContentMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp 키보드 이벤트 onKeyDown, onKeyPress, onKeyup 클립보드 이벤트 onCopy, onCut, onPaste 폼 이벤트 onChange, onInpute, onSubmit, onTnvalid 포커스 이벤트 onFocus, onBlur 터치 이벤트 o..