RAILEND
React-Redux 저장소(Store) 생성하기
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. //store.js import { createStore } from 'redux'; import reducer from './reducer'; const store = createStore(reducer); export default store; 리덕스의 store는 상태를 갖는 저장소이다. 그리고 단 하나의 리듀서라는 것을 갖는다. 리덕스의 createStore API를 통해 store를 생성하는데 그 첫번째 파라미터로 리듀서를 전달한다. 저장소(store)의 파일 이름은 store.js 로 생성해준다. //reducer.js..
코드숨_React _4주차_주간회고
Facts (사실, 객관) 코드숨 4주차 강의 듣기 과제1: To-do 리스트 Redux를 사용하여 리팩터링 하기 과제2: 레스토랑 정보 확인 및 예약 시스템 구축하기(TDD로 기능 구현) Refactor: 투두리스트 with 바닐라 자바스크립트 Feelings (느낌, 주관) 커리큘럼 구성이 좋다고 느끼고 있다. 리덕스를 활용하여 실습해보니 상태관리에 많은 이점이 있었다. 관심사도 더 잘게 분리되어, 코드의 가독성도 좋아졌다. 3주차에 이어 지금까지 계속 분리될 수 있다는 것이 놀라웠다. 지난 주 작성한 과제에 리덕스를 적용했다. 컴포넌트를 presentational과 container로 분리해주면서 테스트도 더 늘어났다. 리듀서 테스트에서 이벤트 발생에 따라 액션이 생성되고 상태가 변경되는지 테스트하..
2021-09-01 TIL
Facts (사실, 객관) 코드숨 4주차 과제 진행 가벼운 중량 운동 Feelings (느낌, 주관) 코드숨 4주차 과제를 시작했다. 리덕스를 학습했다. 상태관리는 더 이상 리액트의 관심사가 아니게 되었다. 프레젠테이션 컴포넌트와 컨테이너 컴포넌트에 대해서도 알게 되었다. 지난 주부터 관심사를 분리하는 작업을 계속 해왔지만, 아직도 분리할 것이 남아있다는 사실이 놀라울 뿐이었다. 관심사를 분리하기 전에 나의 뇌가 먼저 분리될 것만 같다. 이번 주의 과제 1은 테스트 코드를 완성한 todo app에 리덕스를 붙이고, 거기에 또 테스트 코드를 작성하는 과제였다. 강의를 참고할 수 있었고 익숙해지기 위해 한번 더 작성해 보았다. 리덕스를 활용하게 되면서 테스트에 관해 혼란스러웠던 점이 있었다. reducer나..
Flux와 MVC의 차이에 대해 공부하기
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. Flux는 왜 등장했나? Flux의 도입 배경에 MVC가 등장한다. MVC는 양방향 데이터 흐름의 특징을 갖고 있는데 이 특징이 문제가 될 수 있다. 만약 어플리케이션이 복잡해지고 비대해진다면, 양방향으로 흐르는 데이터가 어플리케이션의 복잡도를 기하급수적으로 증가시킬 수 있다. 이는 우리의 코드가 읽기 어려워지고 예측이 불가능해진다는 것을 의미한다. MVC란? Flux와 MVC를 비교하기에 앞서, MVC를 살펴본다. MVC라는 이름은 Model, View, Controller의 이니셜이다. 각각은 다음과 같은 기능을 수행한다. M..
코드숨_React _3주차_주간회고
Facts (사실, 객관) 코드숨 3주차 강의 듣기 과제: To-do 테스트 작성하기 Feelings (느낌, 주관) 처음으로 테스트 코드를 작성해봤다. 리액트 테스팅 라이브러리와 jest를 활용해서, 지난 과제였던 To-do 앱에 대한 테스트를 작성하는 과제가 주어졌고, 단순히 강의를 듣는 것만으로는 어려운 점이 많아 인터넷 자료를 참고할 수 밖에 없었다. 처음에는 각각의 컴포넌트 안에서 어떤 내용을 테스트해야 하는지 결정하는 것이 어렵게 느껴졌고, 나중에는 이 테스트에는 어떤 matcher를 활용해야 하는지, jest로 생성한 가짜 함수를 어느 정도까지 활용할 수 있는지에 대한 의문이 생겨나기도 했다. TDD는 프로젝트의 시작 단계에서부터 적용하는 일종의 방법론인 만큼, 자유자재로 내가 원하는 기능을..
2021-08-27 TIL
Facts (사실, 객관) 코드숨 3주차 과제 리팩토링 백준 알고리즘 문제 풀기 자바스크립트 코딩의 기술 리딩 Feelings (느낌, 주관) jest.fn()으로 만들어준 가짜 함수를 통해 change 이벤트의 실제 작동여부를 테스트하고 싶었는데, 그게 가능할지 의문이다. 실제로 가짜 함수의 리턴 값은 undefined이다. 만약 mockReturnValue를 통해 리턴 값을 지정해주더라도 테스트 내에서 렌더링된 컴포넌트의 이벤트리스너로서 기능할 수 있을 것 같지는 않아보인다. 가짜 함수를 어느 정도까지 구현할 수 있는지 알아보아야겠다. 백준 사이트에서 알고리즘 문제를 풀어봤다. 순서는 youtuber '라메개발자'님이 영상에서 추천해주신 경로를 따라가려고 한다. 단계별로 풀어보기에서 '정렬'까지 풀어..
2021-08-26 TIL
Facts (사실, 객관) 코드숨 3주차 과제 진행 중 Feelings (느낌, 주관) 코드숨 3주차 과제로 주어진 테스트 코드를 작성하고 있다. 리액트 테스팅 라이브러리나 jest가 처음이고, 테스트 코드의 작성 또한 처음이기 때문에 많은 시행착오를 겪고 있다. 단순히 텍스트의 존재를 확인하는 것 정도는 어렵지 않지만, 함수를 모킹하는 부분이 쉽지 않다. 특히 리액트 hook을 다루는 함수를 어떻게 모킹할 수 있는지 감이 오질 않는다. 단순한 이벤트 함수를 fireEvent를 활용해서 함수의 호출 여부정도는 쉽게 테스트가 가능하지만, input의 value가 내가 넣어준 인자대로 변경되었는지는 내 예상대로 검증되질 않았다. 과제의 난이도가 어렵고 진행이 더딜수록 서칭을 하는 시간이 늘어나고 집중력이 떨..
[jest] The error below may be caused by using the wrong test environment
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined 11 | const handleClick = jest.fn(); 12 | > 13 | const { container, getByText } = render(( | ^ 14 | > testEnvironment: 'jest-environment-jsdom' 하지만 굳이 아래와 같이 설정하지 않아도 잘 돌아가는 경우도 있었는데..
2021-08-23 TIL
Facts (사실, 객관) 코드숨 3주차 강의보기 카페 아르바이트 면접 Feelings (느낌, 주관) 드디어 3주차부터 테스트를 작성한다. 3주차 과제 템플릿을 clone했더니 이미 세팅이 다 되어있어서, 우선 과제는 제쳐두고 강의를 보며 테스트 도구들을 설치하고 세팅하는 것부터 시작했다. 지난 주 과제 폴더에서부터 시작했다. 아샬님이 강의에서 다루시는 파일과 내 파일의 구성이 다르기 때문에 그 차이점들에서 발생하는 에러들이 있었고, 그 덕분에 에러를 해결해 나가는 과정에서 메서드나 함수의 인자들을 좀 더 명확하게 인지할 수 있었다. 주말 아르바이트를 관두기로 했다. 근무시간이 너무 길기도 하고 근무강도 대비 시급이 형편없다는 판단 하에 내린 결정이다. 그동안 카페 일을 하러 갔다가 사실상 주방 일을 ..