본문 바로가기

CodeSoom- React 13기

 (34)
[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)아샬 강의 context 를 하려면 plugin을 설치해야한다. npm i -D jest-plugin-context jest.config.js 에 아래 코드 추가 'jest-plugin-context/setup', .eslintrc.js 파일에 아래 코드 추가 context: 'readonly', context 를 사용하는 이유? 터미널에 아래 코드 치면 npx jest --watchAll --verbose 아래처럼 tast 결과가 나오게 돼서 추적하기 좋음 TEST coverage npm run coverage input.test.jsx 처음 내 제출 코드 import { render, fireEvent, screen } from '@testing-library/react'; import Input from '...
[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)관련 참고사이트 Behavior Driven Development(BDD) BDD는 테스트(test), 문서(documentation), 예시(example)를 한데 모아놓은 개념 describe("pow", function() { it("주어진 숫자의 n 제곱", function() { assert.equal(pow(2, 3), 8); }); }); 스펙은 세 가지 주요 구성 요소로 이루어진다. describe("title", function() { ... }) 구현하고자 하는 기능에 대한 설명이 들어간다. 예시에선 함수 pow가 어떤 동작을 하는지에 대한 설명이 들어감. it 블록을 한데 모아주는 역할도 함 it("유스 케이스 설명", function() { ... }) it의 첫 번째 인수엔 특정 유스 케이스에 대..
[코드숨] 리액트 13기 -3강/React-Testing(Jest,React testing library,TDD) jest 설치 1. jest,babel-jest 설치 npm i -D jest babel-jest 2. VS Code 의 경우 type 설정을 안해주면, 자동완성에서 문제가 생길 수 있음, 아래 설치 npm i -D @types/jest 3. ~.test.js 파일로 만들면 test를 할 수 있다. simple.test.js 파일로 생성한 경우 아래와 같이 작성 가능 test('simple', () => { // assertion단언문=>A(actual실제로일어난일)가 B(expect기대하는것)여야한다. expect(1 + 1).toBe(2); // 1+1이 2여야한다. }); // 1번째인자:test이름(simple) / 2번째인자:test할 function 4. jest 실행 (=>6번이 더 편한 방..
[코드숨] 리액트 13기 - 2주차 주간 회고 CodeSoom 2022.10.17 - 2022.10.23 Facts (사실, 객관) Feelings(느낌, 주관) Findings(배운 점) Facts (사실, 객관) ㆍ리액트 이해하기 (ReactDOM.render, Components & Props, Hook- useState, 선언형 프로그래밍, 관심사의 분리) ㆍ과제 1 수행 : 카운터 앱을 만들고 각 컴포넌트 마다 파일을 분류한다. ㆍ과제 2 수행 : Todo 앱 만들기 - 입력하여 등록, Todo List 삭제, 없을시 해당 문구 띄우기 Feelings(느낌, 주관) 더 많은 공부의 필요성 제출한 과제의 코드 리뷰를 받으면서 몰랐던 정보를 많이 알게 되었다. import React from 'react'; 를 사용하는 것이 당연한 줄 알았는데..
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기(과제풀이) 1. 에러 Objects are not valid as a React child.... object 를 못보여준다. {JSON.stringify(..)} : JSON형태로 확인 가능 =>객체이기때문에 .title 이런식으로 메소드를 통해 이용해야했음 export default function List({ tasks }) { return ( {JSON.stringify(tasks)} ); } 2. 그냥 배열이면 이렇게 쓰지만 state 경우 이렇게도 작성이 가능하다 3. Destructuring 디스트럭쳐링 : 기존에 구조를 가지고 있던 객체(Array or Object)를 파괴(Destructure)하여 별도의 변수에 값을 할당하는 것 => 배열이나 객체 안의 어떤 값을 추출할 때 쉽게 받아오는 방법 >..
[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기(과제풀이) import Counter from 'Counter' //노드 JS같은 경우 공용으로 된건 이렇게 쓰지만 (O)import Counter from './Counter'; //우리가 만든건 이렇게 ./을 앞에 붙여줌 1. 오류: 이렇게 했을 때 Module not found: Error: Can't resolve './Counter' in 'C:\Users\user\Desktop\codeSoom\demo\src' ....Counter.wasm doesn't exist 오류가 난다면 해결: webpack.config.js 에서 아래 resolve를 추가해줘야함, 다시 npm start resolve: { extensions: ['.js', '.jsx'], }, 2. 아래 코드에서 맨 밑에 export 한꺼번..
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기 ▼ index.jsx 중간 제출 (파일나누기전 전체) import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function TodoForm({ onSubmit }) { const [todoText, setTodoText] = useState(''); const handleChange = (e) => setTodoText(e.target.value); const handleSubmit = (e) => { e.preventDefault(); if (!todoText) { // eslint-disable-next-line no-alert //밑에 alert에 대해 ESLint 비활성화하려면 위에꺼 작성 alert('할 일을 입력해..
[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기 useState에 객체로 쓰고 싶지 않았음 const [state, setState] = useState({ count: 0, }); const { count } = state; //{count}는 객체에서 count를 의미 아래와 같이 코드 작성 const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } function handleClickNumber(value) { setCount(count + value); } ex let object ={ a : "aaaa" }; // const a = object.a; 기존 javascript 문법 const {a} = object; https://sang12.co...

티스토리툴바