frontend

여기서 사용할 문법은 Jest, Cypress 둘 다 동일하지만 Jest가 터미널 로그 확인이 더 수월해서 Jest로 문법을 익혀보았다. 환경설정 yarn add -D jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom 위와 같이 패키지 설치를 진행한다. jest.config.ts  위 파일을 하나 만든 후 module.exports = { preset: "ts-jest", testEnvironment: "jest-environment-jsdom",}; 위의 내용처럼 설정해준다.package.json 파일 내에 위 내용을 선언해주어도 동작하지만..

프론트 프로젝트를 하다보면 매번 고민하는 것 중 하나가 효율적인 폴더 및 파일 구조이다.나도 해당 질문에 대해 자세히 알지 못해서 매번 고민하던 와중, 디자인 시스템을 공부하면서 아토믹 디자인에 대해 알게 되었다.더 알아본 결과 정말 괜찮은 구조라 생각되었고 내 프로젝트에 도입해 보기로 하였다. 아토믹 디자인(Atomic Design) 이란? 아토믹 디자인은 화학적 관점에서 아이디어를 얻은 디자인 시스템이다.  아토믹 디자인은 위와 같은 단계별 기준을 가지고 있다.우리들의 궁극적인 목표인 Pages를 만들기 위해 Atom부터 시작하여 구체화하는 과정을 거치게 된다. Atom Atom이란 더 이상 분해할 수 없는 기본 컴포넌트이다.   위와 같이 label, input, button과 같이 기본 HTML ..

프론트엔드에서 애니메이션 주입은 필수적이다. framer-motion 등 많은 애니메이션 라이브러리가 있지만 이번에는 DOM을 조작하여 애니메이션을 부여할 수 있는 react-transition-group 라이브러리를 활용하였다. 크게 4가지 컴포넌트가 있다. Transition CSSTransition SwitchTransition TransitionGroup 주로 사용할 컴포넌트는 CSSTransition과 TransitionGroup 이다. CSSTransition CSS로 변화를 주어 애니메이션을 실행시키고 싶다면 `CSSTransition 컴포넌트를 활용한다. 이 컴포넌트는 Transition 컴포넌트의 모든 요소를 상속받는다. 나는 CSSTransition 컴포넌트를 활용하여 Toast 기능을..