devlog_zz

기존 Jest 로 test를 실행할 때 테스트 description 이 나오지 않고 통과한 개수만 나왔다. 해결방법 jset.config.js verbose: true jest.config.js에 verbose:true 추가시켜주면 아래와 같이 설명이 나오는 것을 확인할 수 있다.

test오류 typescript를 사용하는 react 프로젝트에서 test를 실행시켰을 때 아래와 같은 오류가 발생했다. SyntaxError: /Login.tsx: Unexpected token, expected "," (10:20) 타입 선언한 부분에서 오류가 발생했다. 오류해결 root > .babelrc 바벨 파일에 "@babel/preset-typescript" 추가해주기 { "env": { "test": { "presets": [ "@babel/preset-env", [ "@babel/preset-react", { "runtime": "automatic" } ], "@babel/preset-typescript" ], "plugins": ["@babel/plugin-transform-runtim..

vite 프로젝트 생성 아래의 명령어를 통해 vite 빌드도구를 활용하는 프로젝트를 생성한다. $ npm create vite@latest 프로젝트 생성후에는 자동으로 프로젝트 루트에 vite.config.ts 설정 파일이 자동으로 생성된다. proxy 설정 클라이언트가 서버로 바로 접근할 수 없기 때문에 (자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, React에서는 서버와 클라이언트가 포트가 다르기 때문에 정책에 위반되어 클라이언트가 서버에 접근할 수 없습니다. ) 클라이언트 → proxy → 서버 proxy 설정을 통해 서버의 API 호출을 가능하게 만들어보자. vite.config.ts import {defineConfig} from "vite";..

|| 피연산자 둘 중 하나 이상이 참이면 참을 반환 ( or의 개념 ) 피연산자들이 boolean값이 아니라면 첫 번째 truthy 값 반환 ?? value1 ?? value2 value1이 존재하는 변수(null이 아니고 undefined가 아닌)라면 그 값을 반환, 그렇지 않으면 value2 null 이나 undefined가 아닌 첫 번째 피연산자 찾기 (value1 !== null && value1 !== undefined) ? value1 : value2; 두 연산자의 차이점 || 는 첫 번째 truthy 값을 반환 ?? 는 첫 번째 정의된 값을 반환 javascript에서 truthy, falsy 의 개념 falsy undefined null 0 '' NaN false truthy 위의 5가지 ..

npx create-react-app my-app create-react-app을 통해 react app을 생성하려고 했는데 아래와 같은 오류가 발생했다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instruct..

위와 같이 1초마다 시간이 변경되는 화면이 있을 때 1초마다 화면이 렌더링되면서 화면에 모든 함수가 재호출 된다. compute() 함수도 매번 호출이 되어 콘솔창에 'test'가 찍힘을 확인할 수 있다. 즉 1초마다 refreshTime의 state가 변경되면서 App 컴포넌트가 리렌더링되기 때문에 모든 함수가 1초마다 호출된다. const App = () => { const [refreshTime, setRefreshTime] = useState(90); ... const compute = (date:string) => { console.log('test') } return( {refreshTime}초 {compute(date)} ) } export default App; 이렇게 매번 호출되지 않고 ..

useState 변경함수 바로 업데이트 안되는 이슈 - setState()는 비동기 함수 javascript의 동작 방식 console.log(1) console.log(2) console.log(3) 결과 1 2 3 위에서 아래로 순서대로 동작함 ajax, 이벤트리스너, setTimeout 와 같은 함수들은 비동기 함수이다. 이러한 함수들은 순차적으로 실행되지않고 실행이 완료되면 실행된다. console.log(1) axios로 get요청 후 console.log(2) 실행 console.log(3) 결과 1 3 2 axios get이 0.00초 걸리더라도 1,3이 실행되고 2가 실행된다. React의 setState() 와 같은 state 변경함수들은 전부 asynchronous (비동기적) 으로 처..

useEffect 호출 안되는 (변경 인지 못하는) 버그 잡기 ( Recoil ) const [ve1, setVe1] = useRecoilState(validateExecuted1) const [ve2, setVe2] = useRecoilState(validateExecuted2) useEffect(()=>{ },[ve1,ve2]) 다른 컴포넌트에서 setValidateExecuted1(true) 로 변경해주었는데 useEffect()로 값 변경 인지를 못하는 이슈에 부딪혔다. 처음엔 setValidateExecuted1이 안되나 해서 봤는데 호출은 잘 되었다. 뭐가 문제지 recoil 문제인가, useEffect문제인가 찾아보다가 원래 true였는데 true로 set해주어 useEffect입장에서는 변..