Jest를 사용해보자! - 4편, Jest에서 절대경로 설정하기.

1. 글을 쓴 목적 절대 경로 설정을 하는데 애먹어서 작성한다~ 프로젝트의 기본 설정은 " Vite + React + TypeScript " 입니다. 2. 일단은 절대 경로를 설정해봅시다. 프로젝트를 하다보면 컴포넌트나 src들을 import 해와야한다. 규모가 커지면 path의 경로가 점점 길어지게 된다. import MyComponent from ../../../../../../../../../Component 이렇게 길게 작성하면 확인하기도 어렵고, 유지보수에도 좋지 않고, 아무튼 그냥 안 좋음. 그래서 직관으로 알아볼 수 있도록 설정하는 것이 "절대경로", Path alias 를 이용해주면 된다. 1) Typescript 설정해주기. 프로젝트를 typescript로 작성하기에 " tsconfig...

2023.11.22

Jest를 사용해보자! - 3편

1. 3편은 버튼 클릭 시, Count 올라가는 걸 만들거야. 1편은 셋팅, 2편은 로그인 폼까지만 만드는 걸 했다. 이번엔 button을 클릭하면 숫자가 1씩 증가하거나 감소하는 컴포넌트를 만들고 테스트를 해보려고 한다. 2. 기본적인 세팅을 해보자. App.test.tsx 파일이 아닌 Counting.test.tsx 파일을 만들어주고, src 밑에도 Counting.tsx란 파일을 생성해주고 코드를 작성해주었다. // Counting.tsx import { useState } from 'react'; export function Counting() { const [count, setCount] = useState(0); const onIncrease = () => { setCount((prev) =>..

2023.10.30

Jest를 사용해보자! - 2편

1. Jest를 사용해보자 - 1편 에 이은 2편 https://ykss.netlify.app/translation/unit-testing-with-jest-react-and-typescript/ (번역) Jest, React 및 Typescript를 사용한 단위 테스트 원문: Unit testing with Jest, React, and TypeScript 💡 소프트웨어 테스트는 무엇인가요? 소프트웨어 테스트(Software Testing… ykss.netlify.app 위의 블로그에서 간단하게 알려주셔서 이걸 활용해서 jest를 사용해보려고 한다. 1편에 이은 글이기 때문에 기본 세팅을 다 해놨다고 가정했다. 만약 못했다면 1편 글을 보고 오도록 하자. https://daily-dev-note95.t..

2023.10.27

Jest를 사용해보자! - 1편

1. Jest를 사용하기 전에 Yarn + Typescript + Jest + react-testing-library 프로젝트 생성은 yarn create vite my-react-app --template react-ts 추가로 의존성 설치는 1) yarn add -D typescript 2) yarn add -D jest jest-environment-jsdom 3) yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event 4) yarn add -D @types/jest 5) yarn add -D babel-jest ts-jest ts-node package.json 에서 scripts 부분 수정. ..

2023.10.26

웹 캘린더 포트폴리오 만들면서

1. 프로젝트를 시작한 이유 윈도우의 DesktopCal 이라는 프로그램을 통해서 일정을 관리하고 있었는데, 일정들이 다른 기기들과 공유되지 않아 불편함을 느껴서 프로젝트를 시작하게 되었다. 그리고 이전에 만들었던 포트폴리오가 제출하기엔 부족하다고 판단되었기 때문이다. 2. 사용한 기술 스택 Vite 이번 포트폴리오에 처음으로 사용했다. CRA보다 빠른 자바스크립트 툴이라고 해서 사용해보게 되었다. 처음 사용해보는 툴이라 사용하기에 망설였지만, CRA로 개발했던 프로젝트보다 빠르다는 느낌을 받아 사용해보기 잘했다는 생각이 들었다. React 이전 직장에서는 Vue.js를 사용했었다. Vue.js 보단 React가 더 많은 개발자들이 사용하는 언어라고 생각되어 이번 프로젝트에선 React를 선택했고, 앞으..

2023.10.11