본문 바로가기

전체 글

 (265)
[코드숨] 리액트 13기 - 4주차 주간 회고 CodeSoom 2022.10.31 - 2022.11.06 Redux 적용하기 과제 1: To-do 리스트 Redux를 사용하여 리팩터링 하기 과제 2: 레스토랑 정보 확인 및 예약 시스템 구축하기 이번주 강의 내용에서는 Redux로 상태 관리를 하는 방법을 배웠는데 App에서는 사실 View가 어떻게 그려지는 지 관심만 갖게 하고 상태가 어떻게 처리되는지는 모르게 해야 함을 알게 되었다..! 그리고 Redux를 사용하여 지난번 과제였던 To-do 리스트를 리팩터링하고, 레스토랑 리스트를 등록하는 과제를 수행했다. 테스트하는 문구를 적절하게 입력하는 것이 은근 어려웠는데, 코드 리뷰를 통해 테스트 코드로 어떤 상황을 테스트하고 있는지를 다시 생각해보라고 말씀해주셔서 작성한 테스트 코드를 다시 살펴 보며 ..
[코드숨] 리액트 13기 -4강/Redux적용하기(Action,Reducer,Store,Provider,useDispatch,useSelector) Redux 적용하기 Flux Architecture 이전엔 App 컴포넌트에서 상태 관리를 모두 담당했었습니다. 이번엔 Redux를 통해서 App에서 상태 관리를 분리하는 방법을 배웁니다. Flux Architecture 한글 Flux Architecture 영문 Flux는 페이스북이 제시한 클라이언트 웹 애플리케이션 아키텍쳐입니다. 위의 문서를 반드시 정독해주세요. 아마 여러 가지로 어려운 내용이 있을 겁니다. 실제 Redux는 구현이 좀 다른 부분이 있기 때문에 각 항목에 대해 디테일하게 모두 숙지하실 필요는 없습니다. 다만, 단방향 데이터 Flow란 점과 Action이 Dispatcher를 통해 Store에 전달되는 흐름이 핵심이란 걸 기억해야 합니다. Redux - Flux Architecture..
[코드숨] 리액트 13기 - 3주차 주간 회고 CodeSoom 2022.10.24 - 2022.10.30 리액트 Testing 과제 : To-do 테스트 작성하기 이번 주는 TDD에 대한 어려움을 겪었던 한 주였다. 처음으로 TDD를 접해보니까 과제를 진행할 때 무엇을 테스트해야할 지, 어떻게 코드를작성해야되는 지도 잘 몰랐다. 그래서 지난번 기수들의 코드와 코멘트를 살펴보고 트레이너님이 알려주신 링크와 다양한 참고사이트를 통해 테스트 코드를 작성하는 법을 공부했다. 그래도 작성에 어려움을 겪어서 나중에 아샬님의 해설 강의를 보고 코드를 이해하는 시간을 가질 수 있었다. test대신 코드의 행동을 더 섬세하게 설명하는데 적합하다는 describe-context-it 구조를 사용하여 테스트 코드를 작성하였는데 계층 구조로 구분할 수 있어서 유용했다. ..
[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)-review 반영 전에 제출한 App.test.jsx import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import App from './App'; describe('App', () => { const renderApp = () => render(()); it('App 컴포넌트 랜더링이 된다', () => { const { container } = renderApp(); expect(container).toHaveTextContent(/To-do/); expect(container).toHaveTextContent(/할 일이 없어요!/); expect(container).toHaveTextContent(/추가/); }..
[코드숨] 리액트 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번이 더 편한 방..
유데미 -Git으로 만드는 전설의 레시피 (branch생성,merge,PR) 3-6.branch: 새로운 레시피를 어떻게 안전하게 개발할 수 있을까? 3-7. merge : 다른 브랜치에서의 작업한 내용을 합치고 싶다면 merge하세요! 3-8. pull request : merge를 신중하게 하기 위해서 해야할 것 branch A, B.. : 평행우주 / 작업을 각 브랜치에서 한후 main브랜치에서 나중에 합쳐준다. 새로운 Branch 생성 1. 브랜치 생성 (bibimbap 예시로) git branch bibimbap 2. 브랜치 이동 git switch bibimbap =>그리고 add, commit 등 작업을 한 상황이라 가정 +switch -c 하면 바로 생성하고 이동할 수 있음 다른 브랜치에서 작업한 내용을 합칠때는 merge 1. main 브랜치로 이동 git swi..

티스토리툴바