View Code? Open in Web Editor
NEW
This project forked from codesquad-members-2023 /fe-max--newsstand
HTML 0.39%
JavaScript 6.08%
TypeScript 81.08%
CSS 12.45%
fe-max--newsstand's People
fe-max--newsstand's Issues
고민
Grid, List 보기 버튼 공유하기: MainMediaArea 버튼을 왼/오 & viewerOption에 따라 click event 로직을 수행하도록 하기
Grid, List에 따라 각각 버튼 만들기
선택한 방법: 2번
아무리 props로 넘겨서 viewerOption에 따라서 Action을 다르게 처리할 수 있다고 해도 로직이 복잡해지고, 후자가 더 이해하기 편하다고 판단
Data
UI & Feature
Refactor
Flux Pattern
State와 Component를 분리한다.
Component는 State를 인자로 전달받아 UI를 만든다.
Component에서 발생한 Action을 dispatch를 통해 State를 변경한다.
dispatch 함수를 통해 action과 payload를 전달하여 reducer로 상태를 변경한다.
해당 상태를 subscribe하는 함수에 변경된 상태를 인자로 전달하여 실행한다.
변경된 새로운 props를 전달받은 컴포넌트는 현재 상태와 비교하여 변경된 부분만 반영한다.
Store - View 역할과 책임
구독 리스트를 관리하기 위해서 별도의 store(model) 객체나 함수를 구성한다.
Store는 View영역에 독립적으로 동작한다.
테스트 코드는 단위테스트를 익히는 목적으로, 함수나 메서드 단위의 테스트를 수행한다.
Vitest 테스트 도구를 활용한다.
리팩토링을 해야 하는 코드에 대해 테스트 코드를 구현한다.
리팩토링 코드를 테스트 코드를 돌려서 확인한다.
1. 최소단위 함수부터 테스트하기
반환값이 명확히 존재하고, 다른 함수를 호출하지 않는 dependency 가 없는 함수부터 테스트 한다.
요구 사항
순수한 store 구성
store는 view의 변화에 영향을 받지 않도록 구현한다.
store 내의 함수는 순수한 함수로 구현되야 하고, 테스트 가능해야 한다.
Subtasks
구현 과정 고민
Current
render 시 인자로 받은 새로운 props에 대해 이전과 변경된 부분을 반영해주기 위해서(상태 변경이 있는지, 이전 props와 비교하기 위해서) 컴포넌트에 이전 상태를 저장해두고 관리해야 한다. < 이걸 어떻게 해결해야 할까
초기 데이터 동기화하기 전과 후의 변화를 감지하기 위해 null이나 빈배열을 초기에 세팅한다.
이렇게 한 이유는? 각 컴포넌트가 자신의 렌더링에 필요한 상태만을 가지고 있기 위해서
그냥 이전처럼 컴포넌트 생성 시 인자로 받는게 나은가?
수정했던 이유는? props를 세팅하고 이전 prop과 현재 props을 비교하고 업데이트 해주는 로직에 중복이 많고 더러워졌다. 컴포넌트 생성 시에는 그냥 이를 구성하는 HTML Element들만 만들어주면 되기 때문에(props 설정과 분리), render 메서드로만 props를 전달받아 반영되도록 함
근데 상태 구독은 전체 newsStand 한번만 해주고, reducer도 하나로만 관리하고 있음
각 하위 컴포넌트는 NewsStandState 중 일부를 props(state)로 가지고 있어 생성한 interface의 내용 중 불필요하게 중복이 많다.
개선 방향
이전처럼 생성 시 인자로 받되 필요한 props만 저장해두기
To Be
스토어를 서로 영향을 주는 상태들끼리 묶거나 일정 크기로 여러개로 나눈다. (reducer도 여러개)
이렇게 하면 각 컴포넌트가 자신의 렌더링에 필요한 상태만을 가지고 있을 수 있어서 컴포넌트 생성 시 initialState도 props로 넘겨서 비교하기 용이해진다.
하나의 스토어를 두고 그 중 일부 상태와 특정 컴포넌트의 render 메서드를 mapping하여 Register한다. < 방법이 명확하진 않음
리덕스는 비동기 작업 처리를 어떻게 하지?
함수를 dispatch 한다. 함수를 전달한다.
구독 언론사에서 기존 리스트 UI, 그리드 UI를 어떻게 재사용할 수 있을까?
Subtask: #19 , #31
일단 tabOption에 맞는 UI를 method로 구분
고민
구독한 언론사 보기 UI 구현 시 전체 언론사 보기, 구독한 언론사 보기 상태에 따라 액션이 결정되어야 한다.
Before
GridViewer, ListViewer 각각에 버튼을 생성하고, 생성할 때 grid, viewer를 인자로 전달하여 이에 따라 액션이 결정된다.
기존 구조의 문제점: 현재 상태에 따라 수행해야 하는 액션이 다르기 때문에, render method에서 매번 알맞게 이벤트리스너를 추가해줘야 함 (여러번 추가됨)
해결 방안
생성자에서 인자로 props를 받아서 저장해두고, 이에 맞게 실행되도록 미리 정해둔다: 컴포넌트 생성 시에 이미 props에 따라 컴포넌트가 어떻게 렌더링이 될지 결정되어 있도록
컴포넌트가 clickEventHandler를 property로 가지고 있고 render될 때 받은 props에 따라 handler 함수가 결정된다. -> ViewerButton
Action은 하나로 두고, 리듀서에서 해당 Action에 대해 처리할 때 이전 state의 tabOption에 따라 상태를 변경한다. -> 바로 액션을 실행하지 않고 모달을 보여줘야 하는 경우
✔️ 4. 구독하기 서비스에 대한 별도의 모듈을 만든다.
구독하기 버튼
SubTasks
Refactor
왼쪽 뉴스 리스트와 오른쪽 뉴스 리스트 분리하여 props 전달
currentIndex, nextIndex에 해당하는 뉴스 헤드라인 생성 & wrapper
전체 언론사 그리드 보기 영역 UI
Data
UI
Feature
SubTasks
최신 뉴스 자동 롤링 영역
Data
설계
일단 Store에 데이터 바로 저장해둔다.
dispatch 함수로 reducer를 실행한다. NewsStandReducer는 Store의 데이터를 갱신한다.
UI
Feature
TODO
Purpose
라이브러리 공식문서 직접 읽고 API 사용하는 습관 들이기
Memo
Page.evaluate(callback)
: 해당 페이지에서 콜백함수를 실행한 결과를 반환
Page.$eval(selector, pageFunction)
: 해당 페이지 내에서 selector로 querySelector를 실행하고, 탐색한 결과를 pageFunction에 첫 번째 인수로 전달
$$ 으로 querySelectorAll도 사용 가능
WAS의 역할
클라이언트 요청에 대한 처리
Determining how an application responds to a client request to a particular endpoint
URI(path), specific HTTP request methods
Each route which is matched <=> handler function: 클라이언트 요청에 대한 핸들러 함수 실행
미들웨어
정적 파일 제공
데이터베이스 연동
템플릿 엔진 지원
CORS
좌우 화살표 클릭 시 dispatch payload로 이동 방향(direction)과 MOVE_GRID Action을 전달한다.
gridPressStartIndex 상태가 변경된다.
기본 상단 영역 UI
기본 상단 영역의 왼쪽에는 뉴스스탠드 로고를, 오른쪽에는 시스템 날짜를 표시한다.
Sub Tasks
페이지 새로고침하는 방법
1. window.location.reload
현재 리소스를 다시 불러오고, 완전히 새로고침된다.
모든 리소스를 다시 다운로드하므로 네트워크 트래픽이 더 많이 발생
2. history.go(0)
이전 상태와 동일한 페이지로 돌아가는 대신 브라우저 캐시로 페이지를 새로고침한다.
이미지, 스크립트 등 다시 다운로드할 필요가 없어 새로고침이 빠르다.
차이점
window.location.reload(): 페이지를 완전히 새로고침하고 이전 상태를 유지하지 않음
history.go(0)은 페이지를 새로 고치고 이전 상태를 유지
선택한 방법과 이유
history.go: 현재 변경되는 리소스가 거의 없음
이후에 서버와 연동하면 reload로 변경: 사용자가 구독한 언론사 리스트를 다시 받아야 하므로 페이지의 내용을 완전히 새로 고치고 리소스를 다시 다운로드해야 하기 때문
UI 생성에 필요한 데이터
카테고리
언론사 브랜드마크
최종 편집 일시
메인 뉴스 1개(썸네일, 타이틀)
서브뉴스 6개(뉴스 타이틀만)
Refactor
Current
전체 언론사 데이터 한번에 받아와서, currentCategoryIndex 와 pressIndex만 상태로 관리하고 있다.
Expected
카테고리 단위로 데이터를 요청해서, currentCategoryIndex, pressList, pressIndex를 상태로 갖는다.
데이터 받아와서 원하는 형태로 가공해서 스토어에 저장해두고 사용한다.
Refactor