[5팀 양성진] Chapter 1-1. 프레임워크 없이 SPA 만들기 #60
Open
Yangs1s wants to merge 38 commits intohanghae-plus:mainfrom
Open
[5팀 양성진] Chapter 1-1. 프레임워크 없이 SPA 만들기 #60Yangs1s wants to merge 38 commits intohanghae-plus:mainfrom
Yangs1s wants to merge 38 commits intohanghae-plus:mainfrom
Conversation
- 컴퍼넌트 분리 (상품 목록 관련 부분만) - 라우터 구성 - 메인페이지 (Home.js) 구성 - 상품 정렬 및 상품 갯수 limit에 맞춰서 갱신되도록 구현 - 상품명 검색 기반으로 상품 목록 갱신
- 무한스크롤 테스트까지 완료 및 상품목록 전체테스트는 통과 - 카테고리 CategoryFilter로 컴퍼넌트분리
- 상품 목록 페이지 수정 - 상세페이지 - 동적 라우팅
- 카트 스토어 추가, 기존 스토어 무한스크롤 내용 추가, 장바구니 추가 기능
- 무한스크롤 수정
- 무한스크롤 수정
- 무한스크롤 수정
|
화이팅 |
| }); | ||
|
|
||
| describe("7. 카테고리 선택", () => { | ||
| describe.only("7. 카테고리 선택", () => { |
There was a problem hiding this comment.
요거는 커밋이 되면 안될 것 같은데 테스트하다가 들어가신 것 같아유 👀
| import { openCartModal } from "../cart/CartModal.js"; | ||
| import cartStore from "../../store/cartStore.js"; | ||
|
|
||
| function Header(title = "쇼핑몰") { |
There was a problem hiding this comment.
이런 경우 props 처럼 객체 형태로 넘겨보면 어떨까요?
Suggested change
| function Header(title = "쇼핑몰") { | |
| function Header({ title = "쇼핑몰" }) { |
Comment on lines
+50
to
+54
| setTimeout(() => { | ||
| button.textContent = originalText; | ||
| button.classList.remove("bg-green-600", "bg-gray-500"); | ||
| button.classList.add("bg-blue-600"); | ||
| }, 1000); |
There was a problem hiding this comment.
마이너) 수동으로 돔 조작을 해주셨는데, render 로직에 포함시키는 등의 고도화를 해보는 것도 추천드립니다.
Comment on lines
+14
to
+15
| ${BreadCrumbs().render()} | ||
| <div class="flex flex-wrap gap-2" data-category-container>${renderCategoryButtons()}</div> |
There was a problem hiding this comment.
인터페이스 통일성이 있으면 좋을 것 같아요
Suggested change
| ${BreadCrumbs().render()} | |
| <div class="flex flex-wrap gap-2" data-category-container>${renderCategoryButtons()}</div> | |
| ${BreadCrumbs().render()} | |
| <div class="flex flex-wrap gap-2" data-category-container>${CategoryButtons().render()}</div> |
| window.history.pushState({}, "", url); | ||
| updateUI(); | ||
|
|
||
| window.dispatchEvent(new CustomEvent("loadList")); |
There was a problem hiding this comment.
자주쓰는 패턴은 함수를 미리 정의해두면 의미를 더 명확하게 만들 수 있을 것 같습니다
const dispatch = (eventName) => window.dispatchEvent(new CustomEvent(eventName));
dispatch('loadList');
Comment on lines
+133
to
+136
| if (categoryUnsubscribe) { | ||
| categoryUnsubscribe(); | ||
| categoryUnsubscribe = null; | ||
| } |
There was a problem hiding this comment.
소소) 전역변수를 쓰는 방식으로 했는데 만약 전역변수를 쓰지 말아야하면 어떻게 해야할지도 고려해보면 재밌을 것 같아유
Comment on lines
+138
to
+158
| filterContainer.addEventListener("change", (e) => { | ||
| const { id, value } = e.target; | ||
|
|
||
| if (id === "limit-select") { | ||
| const limit = value; | ||
| const url = new URL(window.location.href); | ||
| url.searchParams.set("limit", limit); | ||
| url.searchParams.set("current", 1); | ||
| window.history.pushState({}, "", url); | ||
| // loadList 함수를 호출하기 위해 커스텀 이벤트 발생 | ||
| window.dispatchEvent(new CustomEvent("loadList")); | ||
| } | ||
| if (id === "sort-select") { | ||
| const sort = value; | ||
| const url = new URL(window.location.href); | ||
| url.searchParams.set("sort", sort); | ||
| window.history.pushState({}, "", url); | ||
| // loadList 함수를 호출하기 위해 커스텀 이벤트 발생 | ||
| window.dispatchEvent(new CustomEvent("loadList")); | ||
| } | ||
| }); |
There was a problem hiding this comment.
이벤트가 하나의 함수에서 2가지 동작을 하고 있는데 나눠서 호출해도 좋았을 것 같아요!
하나의 함수는 하나의 동작만 하면 코드를 에측하기 더 쉬워집니다.
Comment on lines
+21
to
+24
| const fetchCategories = async () => { | ||
| const response = await getCategories(); | ||
| return response; | ||
| }; |
There was a problem hiding this comment.
fetchCategories 랑 getCategories랑 똑같은 함수인 것 같아요! 다음에는 굳이 래핑할 필요 없다면 래핑없이 그대로 쓰거나 기존 함수 이름만 바꿔도 좋을 것 같습니다.
JunilHwang
force-pushed
the
main
branch
2 times, most recently
from
a90ad7b to
d5eb31b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
배포 링크
https://yangs1s.github.io/front_6th_chapter1-1/
기본과제
상품목록
상품 목록 로딩
상품 목록 조회
한 페이지에 보여질 상품 수 선택
상품 정렬 기능
무한 스크롤 페이지네이션
상품을 장바구니에 담기
상품 검색
카테고리 선택
카테고리 네비게이션
현재 상품 수 표시
장바구니
장바구니 모달
장바구니 수량 조절
장바구니 삭제
장바구니 선택 삭제
장바구니 전체 선택
장바구니 비우기
상품 상세
상품 클릭시 상세 페이지 이동
/product/{productId}형태로 변경된다상품 상세 페이지 기능
상품 상세 - 장바구니 담기
관련 상품 기능
상품 상세 페이지 내 네비게이션
사용자 피드백 시스템
토스트 메시지
심화과제
SPA 네비게이션 및 URL 관리
페이지 이동
상품 목록 - URL 쿼리 반영
상품 목록 - 새로고침 시 상태 유지
장바구니 - 새로고침 시 데이터 유지
상품 상세 - URL에 ID 반영
/product/{productId})상품 상세 - 새로고침시 유지
404 페이지
AI로 한 번 더 구현하기
과제 셀프회고
프레임워크 없이 SPA를 구현하는게 머릿속에 잘 그려지지 않았고, 그래서 너무 낯설고 어렵게만 느껴졌습니다.
리액트나 뷰를 이용할떄, 그냥 라우팅이면 페이지를 이동하고 이런거고, 프레임워크에서 쉽고 당연하게 느껴진게
하나 하나 구현할때마다 그 원리와 이해를 모르고 있었구나 싶었습니다. 흥미로웠지만 한편으로는 너무 어렵게 느껴졌고,
벽이 느껴졌던거 같았습니다.
제 개인적으로는 시간에 쫓기다 보니 뭔가 spa를 원리를 알가면서 이해하는거에 초점이 맞춰지지 않고, 코드도 어느순간 내머리에서 만드는게 아니고 어떻게든 돌려보자는 식으로 변질이 된거 같아서 너무 아쉽고도 아쉬웠습니다. 테스트를 생각하고, 그 하나만 보고 코드를 고치고 이러다 보니까 어디서 또 안되고, 목표치를 어느정도 잡아놓으면서 했는데,그 목표치까지 도달하지 못했던거 같아서 아쉬었던거 같아요, 뭔가 배우고 알아가는게 있어야하는데 그런게 잘 안됐던거 뭔가 반성하게 됩니다. 남은 9주도 잘해보겠습니다.
기술적 성장
자랑하고 싶은 코드
없습니다..ㅠㅠ 어디다 내놔도 부끄럽네요..
개선이 필요하다고 생각하는 코드
전체적으로 좀 다 필요하다고 봅니다. 그냥 너무 보기 어렵고 제가 봐도, ai를 통해서 정리를 하고 고쳤지만. 뭔가 내것이 아닌 느낌 이런게 강하게 듭니다. 전체적으로 다 부족하고 제 생각과 두뇌도 개선이 필요한거 같아요..
학습 효과 분석
컴퍼넌트를 만들때, 패턴에 대한 고민, 그걸 알아가는 과정 이해, 이런것들이 좀 많이 배움이 있었던거 같습니다.
과제 피드백
저는 모호하거나 애매한건 저도 정확하게 파악을 잘못해서 잘은 모르겠습니다. 어려웠던건 테스트통과가 정도 였던거 같습니다.
좋았던건 직장다닐떄 못해봤던것들이 너무 많은데 이번주 과제로만도 새롭게 경험해봤던게 많아서 좋았던거 같아요,
배포나 테스트같은거, 그리고 기본기나 실력이 매우 부족해서 저한텐 난이도 좀 있다고 생각했지만 그래도 뭔가 어떻게든 만들어가는
과정이 재밌던거 같아요.
AI 활용 경험 공유하기
저는 claude와 커서를 주로 이용했습니다.
처음 과제할때는 무언가 안되면 문제점을 얘기해보고 어떤걸 참고하고 어떤걸 보는게 좋을지 조언을 구했다가.
나중에가서는 조금 의탁하게 되는 뭔가 복잡하거나 뭔가 정리해달라고 할때도 많이 사용했습니다.
ai가 일을 더 잘하게 만든 방법은 그냥 잘하면 칭찬하고 못하면 뭐라하고 ㅎㅎ..
뭔가 일을 더 잘하게 만드는건 잘 모르겠습니다. 사람마다 ai에게 주는 기대치마다 다르다고 생각합니다.
사실 제가 작성한 코드가 ai가 고쳐주면서.. 뭔가 내게 아니게 되버리는 뭔가 머릿속에 남지 않은거 같아서 반성합니다..
리뷰 받고 싶은 내용