CodeSoom- React 13기 (34) 썸네일형 리스트형 [코드숨] 리액트 13기 - 5주차 주간 회고 CodeSoom 2022.11.07 - 2022.11.13 비동기 처리 과제 : 레스토랑 조회 구현하기 TDD로 레스토랑 조회 구현을 하는 과제를 이번주에 수행하였다. TDD를 아직 혼자서 작성하는 건 어렵게 느껴진다. 과제를 진행하다가 해설 강의를 보고 코드를 이어서 작성하는데 계속 오류가 나서 슬펐다..😥 각 Container 컴포넌트의 Test를 작성할 때 오류가 났는데 describe -it 에서 it의 바깥과 안에 작성함에 있어서 범위 오류가 났던 것이었다..! 이를 통해 render 함수를 불러오거나 useSelector 를 작성 등.. 작성하는 순서와 범위를 고려하며 코드를 작성해야하는 것을 깨달았다. TDD를 작성하면서 다양한 오류를 겪고 있는데 결국 기초부터 잘 이해하는 것이 중요한 것 .. [코드숨] 리액트 13기 -5강/과제1(레스토랑 조회 구현하기) 풀이 참고 App.jsx 에서 0. 지역, 분류 목록을 얻기 1. 지역 선택 -Regions __mocks__ >api.js 설정 18. action.js - fetchCategories 도 설정할 것임 19. reducer.test.js - setCategories test도 추가 + import {setRegions, setCategories, from './actions'; 위에도 추가 20. action.js 에도 setCategories 추가 21.reducer.js 에도 추가 22. reducer.js 에서 다음 형식처럼 변경하고 함수[action.type] 해서 불러오면 더 좋을 것같음 >> 기본값이나 해당 action 값 나오도록 설정 >>이후 각 부족한 컴포넌트 추가, Test작성 ( ex: Reg.. [코드숨] 리액트 13기 -5강/과제1:레스토랑 조회 구현하기 오류 오류 regions.jsx 에서 map을 돌렸지만 화면에 출력되지 않고 아래와 같이 에러가 뜸 Cannot read property 'map' of undefined 원인 React는 map(...)을 반복실행할 때, 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다. 해결 state의 기본 설정에서 오류가 났던 것이기 때문에, 다시 살펴보았더니 regions가 오타났던것.오타를 수정하니 해결되었다. https://devbirdfeet.tistory.com/47 React 실행오류 Cannot read property 'map' of undefined Updated 2022/10/07 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터.. [코드숨] 리액트 13기 -5강/비동기(REST API, async/await,fetch,Redux Thunk) 비동기 처리 비동기(Asynchronous) 동기식 처리 모델 vs 비동기식 처리 모델 웹 프론트엔드의 복잡성은 계속 증가하고 있습니다. 반면 JavaScript는 싱글 쓰레드 기반 이벤트 루프로 실행되기 때문에 동기 로직이 많아질수록 브라우저에서 앱의 사용성이 급격히 줄어들 겁니다. 따라서 현대의 JavaScript를 다루는 개발자라면 비동기와 동시성(concurrency), 나아가 병렬성(parallelism)에 대한 이해가 필수적입니다. Promise Promise - MDN Promise 쉽게 이해하기 현재 JavaScript를 다루는 개발자라면 Promise에 대한 이해는 필수적입니다. 흔히 Promise에 대한 자료를 보면 callback hell을 해결해준다는 말이 많지만 이는 Promise.. [코드숨] 리액트 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(/추가/); }.. 이전 1 2 3 4 5 다음
