강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 실습 - 리액트 테스팅 라이브러리 2라이브러리 기본 API 문법 익히기 (2)/components 디렉토리에 MyInput.tsx 파일 추가MyInput.tsx 에서는 nextui의 Input 그대로 export/components 디렉토리에 MyInput.test.tsx 파일 생성 후 테스트 작성 테스트 대상 코드import { Input } from "@nextui-org/react";export default function App() { return ( );} 가이드 코드import * as React from "react";import { render, wai..

강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 실습 - ToDoMVC 모델 테스트하기“jest” branch로 체크아웃/frameworkless 디렉토리로 이동하여 npm 모듈 설치/frameworkless/model 위치에 model.test.js 파일 생성 후 테스트 작성내 코드import createModel from "./model";describe("model.js", () => { let model; beforeEach(() => { model = createModel(); }); test("초기 상태 확인", () => { const state = model.getState(); expect(state.todos).t..

강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 실습 - Matcher를 이용해 유닛 테스트 작성하기 1기존 next.js 프로젝트 계속 사용다음 링크 참조하여 jest 설치 및 실행 환경 설정테스트할 함수는 아래 코드를 참조루트 위치에 /utils/chunk.ts 파일 생성 후 위 링크의 코드 복사chunk.ts 파일과 같은 경로에 chunk.test.ts 파일 생성 후 테스트 코드 작성테스트를 실행시키기 위해 프로덕션 코드에 약간의 변경 필요chunk 함수의 파라미터와 관련하여 코드가 수정될 부분 존재-> 이 약점(버그) 찾아서 테스트 코드 작성하고 프로덕션 코드도 수정// 테스트할 코드/** * 'size' 길이만큼 그룹으로 분할된 요소 배열을 만듭..

강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 테스팅의 필요성테스트는 왜 필요한가?코드 작성시 버그를 줄여줌버그 발생 시, 이런 테스트가 있었더라면 발생한 버그를 미리 잡을 수 있었을 테스트를 새로 작성함으로써 수정기존 코드를 변경(리팩토링)할 때 기존에 동작하던 것들이 고장나지 않는 것을 보장해줌주요 동작들에 대해 주요한 시나리오는 전부 테스트해야안심하고 새로운 버전을 빠르게/자주 출시할 수 있게 도와줌main 브랜치 테스트가 모두 통과되면 good to go 테스트 설계: 무엇을, 어떻게테스트 대상유닛 테스트 : 하나의 기능 단위 ⇒ 하나의 함수, 하나의 클래스통합 테스트(integration test) : 여러 유닛들이 함께 사용될 때 기대한 대로..

강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다.  실습 - 스크롤 링크드 애니메이션목표 https://codesandbox.io/p/sandbox/scrolling-wave-b07dmz?file=%2Fsrc%2FApp.tsx codesandbox.io  정답코드import * as React from "react";// import { useScroll, animated, useSpring } from "@react-spring/web";import { useScroll, useSpring, useTransform, motion } from "framer-motion";import styles from "./styles.module.scss";const ..