[5팀 허정석] Chapter 1-1. 프레임워크 없이 SPA 만들기 - #19
Conversation
카테고리 적용 전 상태, 추후 컴포넌트 분리 표시
카테고리와 검색 필터를 합치는 방향 고려
페이지가 그려지기 전 함수 호출 문제 테스트 시 screen.logTestingPlaygroundURL() 활용
createRouter() 개념 이해
* 이벤트 리스너 연결 * DOM 재 랜더링 * 리스너 손실 해결을 위해 이벤트 위임 강화 (기존 객체 보다 상위로 변경)
선언적 UI 렌더링 * 필터를 직접 순회하여 속성을 동적으로 추가/삭제 방식 > 컴포넌트 상위에서 전달 받은 값으로 랜더링 시점에 결정 * 원본 데이터 불변성 유지
* Promise.all 을 사용해 병렬로 호출 개선 * UI 랜더링에만 사용되는 특정 필드 값 제거하고 데이터의 영향을 주는 상태만 관리
* 초반 로딩 화면 플래그 설정
카테고리 적용 전 상태, 추후 컴포넌트 분리 표시
카테고리와 검색 필터를 합치는 방향 고려
페이지가 그려지기 전 함수 호출 문제 테스트 시 screen.logTestingPlaygroundURL() 활용
createRouter() 개념 이해
* 이벤트 리스너 연결 * DOM 재 랜더링 * 리스너 손실 해결을 위해 이벤트 위임 강화 (기존 객체 보다 상위로 변경)
# Conflicts: # .github/workflows/ci.yml
선언적 UI 렌더링 * 필터를 직접 순회하여 속성을 동적으로 추가/삭제 방식 > 컴포넌트 상위에서 전달 받은 값으로 랜더링 시점에 결정 * 원본 데이터 불변성 유지
- 라우터 경로 재 설정
- 상세 페이지 진입
- 홈 화면 경로 설정
- base path 적용
* 평문으로 교체
- index.html 주석
|
ㅇㅇㅇ |
|
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ㅇㅇㅇ뭔가요 |
| if (decreaseQuantyBtn && quantityInput) { | ||
| const currentValue = parseInt(quantityInput.value, 10); | ||
| if (currentValue > 1) { | ||
| quantityInput.value = currentValue - 1; | ||
| } | ||
| return; | ||
| } |
There was a problem hiding this comment.
이 부분에 어떤 부분이 잘 작성했는지 확신이 없는데 어떻게 생각하시는지 궁금합니다 (예시)
| export const throttle = (callback, delay = 200) => { | ||
| let timeId; | ||
| return (...args) => { | ||
| if (timeId) return; | ||
| timeId = setTimeout(() => { | ||
| callback(...args); | ||
| timeId = null; | ||
| }, delay); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
처음으로 쓰로틀링을 적용해봤는데 이렇게 적용하는게 맞는지 확신이 안듭니다. 동작은 하나 더 좋은 방식이 있을까요?
There was a problem hiding this comment.
잘 구현하신 것 같아요!
추가 기능으로 callback 이 실행되기 전에 수동으로 취소할 수 있는 기능이 있다면 좋을 것 같아요!
There was a problem hiding this comment.
잘 구현하신 것 같아요! 추가 기능으로 callback 이 실행되기 전에 수동으로 취소할 수 있는 기능이 있다면 좋을 것 같아요!
수동 취소는 생각도 못했습니다. 감사합니다. 어떤 경우에 수동 취소가 필요한지 알 수 있을까요?
There was a problem hiding this comment.
잘 구현하신 것 같아요! 추가 기능으로 callback 이 실행되기 전에 수동으로 취소할 수 있는 기능이 있다면 좋을 것 같아요!
수동 취소는 생각도 못했습니다. 감사합니다. 어떤 경우에 수동 취소가 필요한지 알 수 있을까요?
쓰로틀이 걸린 상태에서 페이지 이동이나 컴포넌트 변경이 발생했을 때 쓰로틀에서 예약된 내용이 실행되지 않아야 하는 상황이 있을 것 같아요!
There was a problem hiding this comment.
쓰로틀링으로 성능 최적화 하신 부분 인상깊게 봤습니다!
잘 작성해 주셔서 충분해 보이는데
옵션을 매개변수로(e.g. options = { leading: true, trailing: false })
leading: 최초 이벤트 발생 시 즉시 콜백 실행
trailing: 마지막 이벤트 발생 후 일정 시간 지난 뒤 콜백 실행
이런식으로 함수 내부에서 분기되는 추가 로직들을 작성하면 필요에 따라 유요할 것 같아요!
| updateStateAndRender(newMainStatus) { | ||
| this.mainStatus = structuredClone(newMainStatus); | ||
| this.render(); | ||
| } | ||
|
|
||
| getCurrentState() { | ||
| return this.mainStatus; | ||
| } | ||
|
|
||
| setCurrentState(newMainStatus) { | ||
| this.mainStatus = structuredClone(newMainStatus); | ||
| } | ||
| } |
There was a problem hiding this comment.
router 가 제공하는 동작을 기준으로 생각해보면 updateStateAndRender 는 조금 이상한 것 같아요.
router 는 router.push / router.navigate 처럼 이동하는 로직만 있어야할 것 같아서요
updateStateAndRender 함수이름을 생각했을 때 차라리 Renderer.updateStateAndRender 처럼 렌더러로 분리해서 사용할 수 있게 하는 것도 방법일 것 같습니다.
별개로 궁금하셨던 겹치는 감에 대해서는 updateState 함수로 이름을 통합하고, callback 함수나 onSuccess 함수를 인자로 넘기게 해서 구현쪽에서는 state update만 하고 쓰는 쪽에서 render 를 쓸 수 있게하는 것도 방법일 것 같습니다.
router.updateState(newState, { onSuccess: () => render() });
그래서 setCurrentState 로직은 router.updateState(newState) 로 쓰고 updateStateAndRender는 router.updateState(newState, { onSuccess: () => render() }); 로 쓰면 함수 하나로 통합할 수 있습니다.
| { path: "/", component: home, isDetail: false }, | ||
| { path: "/product/:id", component: ProductDetail, isDetail: true }, | ||
| ]; | ||
| class Router { |
There was a problem hiding this comment.
라우터를 처음 클래스 형식으로 만들어봤습니다. 저 혼자 만든게 아니라 재미니와 같이 만들어봤는데요.
제가 아예 처음이다 보니 형식이나 구조가 맞는건지 전혀 모르겠습니다. 눈치 껏 쓰긴 썼는데 좋은 방법이 있다면 남겨주세요 감사합니다!
There was a problem hiding this comment.
render 부분을 라우터 외부로 분리하면 더 좋을 것 같아요!
| <div class="max-w-md mx-auto px-4 py-4"> | ||
| <div class="flex items-center justify-between"> | ||
| <h1 class="text-xl font-bold text-gray-900"> | ||
| <a href="${router.getAppPath("/")}" data-link="">쇼핑몰</a> |
| const cart = localStorage.getItem(CART_KEY); | ||
| return cart ? JSON.parse(cart) : []; |
There was a problem hiding this comment.
소소한 리뷰
| const cart = localStorage.getItem(CART_KEY); | |
| return cart ? JSON.parse(cart) : []; | |
| return JSON.parse(localStorage.getItem(CART_KEY) ?? '[]'); |
| @@ -0,0 +1,11 @@ | |||
| export const formatPrice = (price) => { | |||
| if (price === undefined || price === null) { | |||
There was a problem hiding this comment.
소소)
널리쉬 한 비교는 이렇게 해도 가능해유
| if (price === undefined || price === null) { | |
| if (price == null) { |
a90ad7b to
d5eb31b
Compare
6 participants
과제 체크포인트
배포 링크
허정석_1주차_과제_배포_링크와젤다
기본과제
상품목록
상품 목록 로딩
상품 목록 조회
한 페이지에 보여질 상품 수 선택
상품 정렬 기능
무한 스크롤 페이지네이션
상품을 장바구니에 담기
상품 검색
카테고리 선택
카테고리 네비게이션
현재 상품 수 표시
장바구니
장바구니 모달
장바구니 수량 조절
장바구니 삭제
장바구니 선택 삭제
장바구니 전체 선택
장바구니 비우기
상품 상세
상품 클릭시 상세 페이지 이동
/product/{productId}형태로 변경된다상품 상세 페이지 기능
상품 상세 - 장바구니 담기
관련 상품 기능
상품 상세 페이지 내 네비게이션
사용자 피드백 시스템
토스트 메시지
심화과제
SPA 네비게이션 및 URL 관리
페이지 이동
상품 목록 - URL 쿼리 반영
상품 목록 - 새로고침 시 상태 유지
장바구니 - 새로고침 시 데이터 유지
상품 상세 - URL에 ID 반영
/product/{productId})상품 상세 - 새로고침시 유지
404 페이지
AI로 한 번 더 구현하기
과제 셀프회고
혼자 했다면 못 했을 과제. 팀원과 AI의 합작품.
(AI도 미쳤다고 했다.....)
과제 시작 부터 막막했으나, 어찌저찌 배포 했다...그치만...통과를 못 하고 있는 상황 (08:59 준일님이 와서 팁을 알려줬다..!)
로컬과 TB는 확실히 다르다는 걸 또 깨닫는다..... 이번 과제로 많은걸 느꼈다.
우선 내 실력에 대한 깊은 좌절감이 ....
그래도 1주동안 정말 열과 성을 다해서 몰입했어서 후회는 없다.
그리고 제일 값진 건
팀원분들과의 첫 협업
이라는 사실!!! 진짜 혼자 였다면 안했을 것도 팀원들이 있어줘서 해냈다고 생각한다.정석호, 양성진, 여찬규, 윤영서, 이지훈, 김유현 최고
5팀 고백 박을게요 라뷰
기술적 성장
자랑하고 싶은 코드
개선이 필요하다고 생각하는 코드
학습 효과 분석
과제 피드백
AI 활용 경험 공유하기
Gemini CLI
이 친구가 없었다면 전 이 글을 쓰지 못 했겠죠?
프로젝트를 하면서 AI 툴에 기대어 거의(?) 바이브 코딩 급으로 진행했습니다. 그냥 기댔단 말입니다.
처음에는 문장 단위로만 얘기를 했었는데 이게 점점 3줄,4줄,.... 계속 줄줄이 소세지처럼 엮고 엮어서 질문하는 저를 발견했습니다.
개발자는 이제 글도 잘 써야 합니다.. 그치만 여전히 전 글을 못 쓰고 있죠...ㅎ
나를 모르는 사람에게 나만 쓸 수 있는 물건을 설명하고 사용하라고 하게 만들어야 하는게 쉽지 않듯이
이 친구와 얘기하는게 쉽지 않았습니다. 물론 지금도 쉽지 않습니다. 7살 애한테 얘기하는 기분이랄까요?
(눈높이를 맞추고 싶은데.. 얘 눈이 너무 높아요.)하지만 확실한건 이젠 없어서는 안되고 질문만 잘 던지면 상당히 기특한 친구이기에 제가 무던히 노력해야죠.
덕분에 새로운 경험도 해보고 화도 많이난 째미나이와 함께한 1주였습니다.
째미나이야.앞으로 9주 동안 잘 부탁해. 가끔씩 퍼지던데 그러지마 나 힘드니까.
정보 전달은 없고 너무 느낀점 위주로만 작성이 됐네요... 담엔 정보 전달도 노력해보겠습니다...
아 팁 있다. ( \ + Enter ) 줄 바꿈.
아래는 과제를 진행하면서 째미나이한테 요청한 내역들이예요!!!
쨰미나이 요청 리스트 업 (07.08)
째미나이 요청 리스트업 (07.09)
무한 스크롤링 요청
상세 페이지 요청
리뷰 받고 싶은 내용
이벤트 핸들링에 대해서 고민을 하지 않았었는데, 이번 과제를 통해 핸들링에 대해 관심이 생겼습니다. 개발하면서 거의 처음으로 핸들링을 구현 했어서 보완할 부분을 듣고싶습니다. 또 코치님이라면 어떤 기준과 방식으로 이벤트 핸들링을 했을지 궁금합니다.