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) =>..

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..

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 부분 수정. ..

1. 글을 쓰는 이유 미래의 내가 혹시나 같은 에러나 유사한 에러를 만났을 때를 대처하기 위함과 혹여나 다른 분들에게 도움이 될까해서 글을 써놓는다. 프로젝트에서 사용한 기술 스택은 Vite, React, Firebase 이다. Vite로 Github 에 배포하는 건 처음이라 많이 삽질한 내용을 적어놓으려고 한다. Firebase에서 사용할 환경 변수는 Github secrets를 이용했다. 이거 설정하는 건 아래 주소에 남겨두겠다. 2. Github Actions와 Auto Deploy 시작. Github Actions로 내가 git으로 push 작업이 일어나게 되면 자동으로 Build 부터 Deploy까지 자동으로 실행시켜주는 actions를 만드는 작업이었다. 처음 해보는 작업이었기에 구글링을 통해..

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