devlog_zz

Vite + React + Typescript + Jest 환경 구성 vite + React project 생성 npm create vite@latest jest 를 사용하기 위해 필요한 라이브러리를 설치합니다. npm i -D jest @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer jest 실행을 위해 package.json 에 명령어 추가하기 "scripts":{ ... "test": "jest" } npm run test 실행하면 아래와 같은 결과가 나온다. Jest 설정파일 추가 루..

setState() 후 state값을 바로 API 파라미터로 호출할 때 주의점 사용자가 화면에서 값을 클릭하면 API 를 호출하여 선택한 값의 내용을 가져오는 기능을 구현해봅시다. 아래와 같은 순서로 구현할 것입니다. 구현해보며 주의점을 설명하겠습니다. 화면에서 값을 클릭하여 setState()를 한다. state값을 가져와 API 호출을 한다. 결과를 보여준다. 먼저 리스트를 보여주고 값을 클릭하면 그 값을 화면에 보여줍니다. 예시코드 import {useEffect, useState} from 'react'; import axios from 'axios'; import './App.css'; function App() { const foods = ['pizza', 'chicken', 'hamburge..

vite 란 ? Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다. 개발 시 네이티브 ES Module을 넘어 Hot Module Replacement (HMR) 제공합니다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. vite의 장점 콜드-스타트(최초로 실행되어 이전에 캐싱한 데이터가 없는 경우)방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 ..

수정기능을 개발하는데 등록/수정을 하는 class와 조회했을 때 class가 달라 class-transformer의 plainToInstance를 활용해 등록/수정을 하는 class로 변환하여 구현하려고 하였다. 예를 들어 회원을 등록할 때는 User class 를 사용하고 조회할 때는 Member class를 사용한다고 가정하자. export class User { id!: string; password!: string; name!: string; } export class Member { id!: string; name!: string; memberTier!: string; postList!: Post[]; } 이와 같이 정의 되어있을 때 Member를 조회 후 이를 User class로 변환하여 수..

toLocaleString() 3자리마다 숫자를 끊어 콤마를 삽입하여 문자열로 반환하는 역할을 한다. 인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하며 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한다. number type setState 오류 돈을 입력하고 이를 set해주는 기능 구현할 때 1,000 이상으로 넘어가면 값이 입력이 안되고 NaN이 뜨는 에러가 발생했다. [charge,setCharge] = useState(0); ... setCharge(Number(e.target.value))} /> ... 1000을 입력하면 toLocaleString()에 의해 1,000으로 변한다. 1,000을 Number()로 변환하니 NaN이라는 값이 되어 입력이 안되었다. 해결방..

변수를 통한 객체 속성 접근 - javascript 객체 속성을 변수를 통해 접근할 때 대괄호 표기법 [ ] 안에 변수를 넣어 접근하면 된다. export class Route { id?: string; action?: string; } const setInfo = (field: any, id: string, value: any) => { let route = new Route(id); route[field] = value; } javascript 에서는 대괄호 표기법으로 [ ] 안에 변수를 넣어 사용해도 에러가 발생하지 않았다. 변수를 통한 객체 속성 접근 - typescript 하지만 TypeScript에서는 Element implicitly has an 'any' type because expres..

Next.js기반 프로젝트에 Jest Unit test 환경 구성 후 test 파일 실행 시 오류가 발생했다. Jest Could not locate module FileName.css (mapped as identity-obj-proxy) FAIL __tests__/index.test.jsx ● Test suite failed to run Configuration error: Could not locate module ../styles/Home.module.css mapped as: identity-obj-proxy. Please check your configuration for these entries: { "moduleNameMapper": { "/^.+\\.module\\.(css|sass|sc..

이전 state에 의존하는 state update 시 주의점 state update 할 때 새 state가 이전 state에 의존한다면 반드시 setState 함수의 인자에 함수를 넣어야 한다. 원인 리액트 state의 업데이트는 일괄 처리(batched) 될 수 있다. setState인자에 함수를 넣지 않는다면 예상치못한 결과를 불러 일으킬 수 있다. state가 여럿일 경우에 다른 state의 변화로 리렌더링이 거의 동시에 이루어지거나 하게 되면 useState 왼쪽의 state가 이전의 값임을 보장할 수 없을 때가 있다. state의 변화가 비동기적으로 일어나기 때문이다. (scheduler에 대해서 알아보기) setState가 호출되면 바로 state가 바뀌는 게 아니라 리액트에게 변경해야할 st..