Frontend/React40 cra + typescript + jest 최근에 react로 만든 어플리케이션에서 jest를 적용해야 했었습니다. 적용하면서 막혔던 부분들에 기록해 두려 합니다. 요약순서 1. 필요 라이브러리 설치 2. package.json 수정 2. jest config.js 설정 3. test 파일 작성 4. test 실행 cra with typescript 로 생성한 프로젝트에서 1. 필요 라이브러리 설치 yarn add -D jest @types/jest ts-jest jest : javascript 테스트 프레임워크 입니다. @types/jest : jest의 타입 정의를 포함하고 있는 라이브러리 입니다. ts-jest : typescript로 작성된 프로젝트들을 테스트 할 수 있게 해주는 typescript 전처리 라이브러리 입니다. 2. pack.. 2022. 2. 23. 넘블챌린지 [Square Select Game] 넘블챌린지의 새로운 프론트엔드 챌린지를 하게 되었다. 큰 단위는 아니지만 짧은 스프린트로 뭔가를 계속 만들어가고 거기서 고민을 하고 있다는 것에서 긍정적이라 생각한다. 이번 챌린지를 하면서도 크고 작은 고민들을 했고 그 고민들에 대해 기록하려 한다. 프로젝트의 구현 영상은 위에 gif로 첨부를 해두었다 사각형이 여러개 나오고 그중 색깔이 다른 하나를 제한시간 안에 클릭하면 다음 stage로 넘어가게 된다. 색깔은 점점 구분하기 어려워 진다. (stage 17에서 어려움을 겪는 모습을 확인할 수 있다....) 주요 코드에 대한 설명 // App.tsx // ScoreBoard.tsx export default React.memo(ScoreBoard); // GameBoard.tsx export defaul.. 2022. 2. 10. cannot get /path react + webpack(직접설정) 을 사용하여 개발을 하고 있었고 react-router-dom을 통해 프론트에서의 라우터를 관리해주고 있었다. 다른 문서 작성을 위해 테스트 하던중에 이상한 점을 발견했다. 해당 url 접근시 페이지가 없을 경우 404 페이지를 띄워주고 싶었는데 cra + react-router-dom을 이용한 프로젝트에서는 문서대로 처리가 가능했고 직접 webpack을 세팅해준 프로젝트에서는 위와 같은 화면이 노출되고 있었다. https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes React Router | Overview Declarative routing for React apps at any .. 2022. 2. 7. cra typescript 초간단 세팅 CRA(Create React App)에 typescript를 적용하고 eslint와 prettier까지 적용해보는 스크립트 입니다. [blah blah] -> 괄호안의 내용을 blah blah가 의미하는 것으로 변경하면 됩니다. npx create-react-app [projectName] --template typescript // typescript로 cra 수행 yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin yarn add -D eslint-plugin-react yarn add -D prettier eslint-config-prettier eslint-plugin-prettier yarn remove p.. 2022. 1. 17. 이전 1 ··· 4 5 6 7 다음
