[8팀 김민지] Chapter 1-1. 프레임워크 없이 SPA 만들기 - #35
Conversation
annkimm
changed the title
edbf180 to
c4caad2
Compare
011d832 to
00550b0
Compare
There was a problem hiding this comment.
민지님~첫 과제 너무 고생 많으셧어요!
과제 통과 못할줄 알앗는데 통과해서 너무 다행이에요 흑흑 ㅜㅜ
다음과제는 통과하고 나서 전체적으로 공부한다는 생각으로 “유지보수성”, “확장성”, “성능”, “역할 분리” 등등을 고민해보면서 코드를 짜면 더 좋을 것같아요
멘토링 시간에 꼭 이러한 부분들 적극적으로 질문 하면 너무 좋을것 같아요
수고하셨습니다 민지님~👍👍👍👍
p.s : 민지님 깃 커밋 컨벤션도 한번 공부하면 좋을것같아요, 컨벤션이 제대로 갖춰지면 코치님들, 더 나아가 협업하는데 있어서 훨씬 더 나은 협업을, 리뷰를 받을수 있어요!
There was a problem hiding this comment.
다음 과제는 꼭 완성을 목표로 합시다!!!아자아자!
저도 몰랐는데 CI에서 걸리면 리뷰가 제대로 안달리네요
| // 상품을 장바구니에 추가하고 수량을 2개로 증가 | ||
| await addProductToCart("pvc 투명 젤리 쇼핑백"); | ||
|
|
||
| // 모달이 열리는 타이밍 |
| import { screen } from "@testing-library/dom"; | ||
| import { userEvent } from "@testing-library/user-event"; | ||
| import { afterEach, beforeAll, describe, expect, test } from "vitest"; | ||
| import { afterEach, beforeAll, describe, expect, test, beforeEach } from "vitest"; |
There was a problem hiding this comment.
beforeEach는 테스트 코드 개별 함수에 셋팅하는 메서드에요 테스트코드 챕터 있으니 미리미리 알아두면 좋아요!
There was a problem hiding this comment.
컴포넌트 UI 규모에 비해 하나의 함수에 너무 많은 역할을 넣어놨네요, 코드 가독성과 유지보수성, 테스트 편의성을 생각하면 적절히 컴포넌트 단위로 분리를 먼저 했으면 더 빨리 과제를 진행했을 것 같아요!
그룹화 -> 구조화 -> 절차적으로 코드 진행 이런식으로 과제 진행 하면 점차 속도가 붙을거에요
| import { router } from "../main"; | ||
| import { Main } from "./Main"; | ||
|
|
||
| let state = { |
There was a problem hiding this comment.
state로 선언하고 전역에서 쓰이다보니 중복된 렌더링 코드가 여기저기 있을수 밖에 없네요
// 상태와 렌더 함수를 이 모듈에서 관리
export const state = {
products: [],
pagination: {},
filters: {},
category: {},
isLoading: false,
};
export function updateState(partialState) {
Object.assign(state, partialState);
}이런식으로 추상화 시켜서 state를 관리하면 좋을것 같아요
|
|
||
| state.isLoading = false; | ||
|
|
||
| document.body.querySelector("#root").innerHTML = Main(state); |
There was a problem hiding this comment.
최상단부터 최하단 까지 7번 나오네요, render() 함수 따로 선언하면 좋을 것 같아요
There was a problem hiding this comment.
민지님 코드 잘 짜주셨어요, 로컬스토리지로 장바구니 구현하는 부분도 잘 해주셨고, 무한 스크롤, URL 파라미터 기반 상태 초기화 흐름이 명확하게 잘 들어나는 것 같아요,
아직 확장성, 코드 응집도, 상수화 등 고민해야될 부분이 많은데 2챕터에서 그런부분들은 배울 수 있으니까 너무 고민하지 말고 일단은 흐름대로 코드 짜는걸 추천 드려요
| import { getProduct, getProducts } from "../api/productApi"; | ||
| import { _404_ } from "./NotFoundPage"; | ||
|
|
||
| let projectDetailState = { |
There was a problem hiding this comment.
이부분도 마찬가지로 전역함수로 선언되서 추상화가 안되고 여기저기서 쓰게되면 키값 자체가 바뀔 위험성이 있어요.
const 로 선언해도 키에대한 value 값은 바꿀수 있잖아요.
| } else { | ||
| projectDetailState.loading = true; | ||
|
|
||
| document.body.querySelector("#root").innerHTML = ProjectDetail(projectDetailState); |
There was a problem hiding this comment.
→ loading spinner 등 UX 표현이 아니라면, 첫 번째 렌더는 생략해도 괜찮습니다
아니면
if (projectDetailState.loading) {
return `<p>로딩 중입니다...</p>`;
}이런식으로 구분해서 UI로 구현해도 좋아요
| document.body.querySelector("#root").innerHTML = ProjectDetail(projectDetailState); | ||
| } | ||
|
|
||
| function onMiusClick() { |
There was a problem hiding this comment.
혹시 장바구니 갯수가 0이하가 되도 괜찮나요??그거에 대한 방어코드가 빠졋네요
a90ad7b to
d5eb31b
Compare
3 participants
과제 체크포인트
배포 링크
https://annkimm.github.io/front_6th_chapter1-1/
기본과제
상품목록
상품 목록 로딩
상품 목록 조회
한 페이지에 보여질 상품 수 선택
상품 정렬 기능
무한 스크롤 페이지네이션
상품을 장바구니에 담기
상품 검색
카테고리 선택
카테고리 네비게이션
현재 상품 수 표시
장바구니
장바구니 모달
장바구니 수량 조절
장바구니 삭제
장바구니 선택 삭제
장바구니 전체 선택
장바구니 비우기
상품 상세
상품 클릭시 상세 페이지 이동
/product/{productId}형태로 변경된다상품 상세 페이지 기능
상품 상세 - 장바구니 담기
관련 상품 기능
상품 상세 페이지 내 네비게이션
사용자 피드백 시스템
토스트 메시지
심화과제
SPA 네비게이션 및 URL 관리
페이지 이동
상품 목록 - URL 쿼리 반영
상품 목록 - 새로고침 시 상태 유지
장바구니 - 새로고침 시 데이터 유지
상품 상세 - URL에 ID 반영
/product/{productId})상품 상세 - 새로고침시 유지
404 페이지
AI로 한 번 더 구현하기
과제 셀프회고
처음에 project.list.test는 무한 스크롤 빼면 대부분 무난하게 잘 코딩이 됐는데,
가장 문제가 되고 뒤에 진도를 나가지 못했던 건
단위 테스트에서 라우터 이동해서 상세 페이지에 데이터가 나오는 부분이었다.
분명 실제 화면에서는 잘 나오는데 뭐 잘못된건지 알 수가 없었다.
처음에는 테스트 코드에서 라우터 이동을 잘 감지 못해서 안되는지 알았다.
그래서 라우터와 관련된 코딩만 주구장창 건드렸다.
근데 알고 보니 클릭하는 함수의 바인딩 문제가 해결되지 않는 이슈 때문에 잘되지 않았다.
근데 change 함수나 이런건 잘 됐는데 클릭 이벤트 함수가 명확하게 선택되지 않는 선택자 문제때문에
바인딩 이슈가 됐던걸까...
너무 늦게 해결해서 마지막에 리팩토링 없이 끝낸게 좀 아쉽다.
기술적 성장
있을까...
자랑하고 싶은 코드
없습니다.
개선이 필요하다고 생각하는 코드
모든 게 다...?
학습 효과 분석
과제 피드백
과제의 양이 너무 많았습니다...
많았어요...
AI 활용 경험 공유하기
리뷰 받고 싶은 내용
셀프 회고를 보시면 아시다시피 버튼 클릭해서 상세 페이지로 이동하는 부분에서 애먹어서 다 시간을 뺐겼습니다.
사아실 다른 검색이벤트나 select 이벤트는 잘됐는데 위의 부분이 안됐는지 잘 이해가 안되기도 하고...
이게 리액트의 전체 렌더링 과정에 대한 이해도의 부족이라서 그랬던 건지 잘 모르겠습니다.
만약에 렌더링 과정에 대한 이해 부족이라면 어떤걸 더 공부해야하나요?
아니라면 어떤 부분을 더 공부해야 할지 추천해주시면 감사하겠습니다.