[2팀 이진희] Chapter 1-1. 프레임워크 없이 SPA 만들기#41
Closed
bebusl wants to merge 22 commits intohanghae-plus:mainfrom
Closed
Conversation
bebusl
commented
Jul 12, 2025
Comment on lines
+1
to
+28
| export function renderViewComponent({ parent = document.body, component: propsComponent }) { | ||
| let currentView = null; | ||
| let component = propsComponent; | ||
|
|
||
| return { | ||
| unmount() { | ||
| if (currentView) parent.removeChild(currentView); | ||
| currentView = null; | ||
| component = null; | ||
| }, | ||
| render(props) { | ||
| if (!currentView) { | ||
| currentView = component(props); | ||
| parent.appendChild(currentView); | ||
| } else { | ||
| const newView = component(props); | ||
| parent.replaceChild(newView, currentView); | ||
| this.currentView = newView; | ||
| } | ||
| return parent; | ||
| }, | ||
| updateComponent(newComponent) { | ||
| this.unmount(); | ||
| component = newComponent; | ||
| return this; | ||
| }, | ||
| }; | ||
| } |
Author
There was a problem hiding this comment.
컴포넌트 단위로 view를 관리하고자 하는 의도로 renderViewComponent라는 유틸을 만들었습니다.
컴포넌트 구조 변경/업데이트 흐름이 적절한지
updateComponent 호출 후 render()를 호출해야 하는 구조인데, 이게 직관적인지 확신이 없습니다.
혹은 내부에서 자동으로 재렌더링까지 유도하는 게 좋을지 고민입니다.
추가로 let currentView로 DOM 요소를 참조하고 replaceChild 하는 방식이 명확하고 안전한지,
더 좋은 방식이나 패턴이 있을지 궁금합니다.
Comment on lines
+26
to
+43
| const routers = [ | ||
| { | ||
| pathname: "/", | ||
| component: ListPage, | ||
| // 접두사 BASE_PATH를 동적으로 붙임, $는 경로 끝 표시 | ||
| matchPattern: `^${BASE_PATH}/$`, | ||
| }, | ||
| { | ||
| pathname: "/product/:productId", | ||
| component: DetailPage, | ||
| matchPattern: `^${BASE_PATH}/product/[A-Za-z0-9_-]+$`, | ||
| }, | ||
| { | ||
| pathname: "*", | ||
| component: NotFoundPage, | ||
| matchPattern: `^${BASE_PATH}.*$`, | ||
| }, | ||
| ]; |
Author
There was a problem hiding this comment.
matchPattern을 수동으로 작성하는 대신, pathname 기반으로 정규식을 자동 생성하는 함수 분리하고 싶은데 어떻게 하는 게 좋을까용??(getMatchPattern(pathname) 같은)
BASE_PATH가 모든 route에 반복되어 있으므로 중복 제거 (e.g., prefix 공통 처리) 하고 싶은데 좋은 방법이 있는지 모르겠습니다.
There was a problem hiding this comment.
저는
path: /^\/product\/([^/]+)$/,
page: "detail",
parse: (match) => ({ productId: match[1] }),
이런식으로 만 적어두고 찾을때 매치되는걸 찾는식으로 했어요...!
for (const route of routes) {
const match = path.match(route.path);
if (match) {
return { page: route.page, ...route.parse(match, searchParams) };
}
}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
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.
과제 체크포인트
배포 링크
기본과제
상품목록
상품 목록 로딩
상품 목록 조회
한 페이지에 보여질 상품 수 선택
상품 정렬 기능
무한 스크롤 페이지네이션
상품을 장바구니에 담기
상품 검색
카테고리 선택
카테고리 네비게이션
현재 상품 수 표시
장바구니
장바구니 모달
장바구니 수량 조절
장바구니 삭제
장바구니 선택 삭제
장바구니 전체 선택
장바구니 비우기
상품 상세
상품 클릭시 상세 페이지 이동
/product/{productId}형태로 변경된다상품 상세 페이지 기능
상품 상세 - 장바구니 담기
관련 상품 기능
상품 상세 페이지 내 네비게이션
사용자 피드백 시스템
토스트 메시지
심화과제
SPA 네비게이션 및 URL 관리
페이지 이동
상품 목록 - URL 쿼리 반영
상품 목록 - 새로고침 시 상태 유지
장바구니 - 새로고침 시 데이터 유지
상품 상세 - URL에 ID 반영
/product/{productId})상품 상세 - 새로고침시 유지
404 페이지
AI로 한 번 더 구현하기
과제 셀프회고
렌더링 / 라우터를 어떻게 짜야할까 고민하다가 갈아엎는 과정을 반복했습니다.
처음부터 설계를 좀 완벽하게 해보고 싶어서 그 시간을 많이 썼는데 결국, 설계도 실패하고 요구사항을 하나도 지키지 못하게 돼서 매우 아쉽습니다.
데드라인을 지키는 일도 매우 중요하니 할 수 있는 선에서 과제를 마무리할 수 있도록 계획을 세워봐야 할 것 같습니다.
다음 과제부터는 과제 통과하는데 좀 더 집중해보려고 합니다.ㅠㅅㅠ 매우 아쉽네요
기술적 성장
클로져/옵저버/pub-sub패턴 등 오랜만에 복습하면서 더 제대로 학습할 수 있었던 것 같습니다.
DOM 조작에 좀 더 능숙해진 것 같습니다.
개선이 필요하다고 생각하는 코드
React처럼 DOM 엘리먼트를 손쉽게 조작하고 싶었는데,
하지만 기존 코드 구조에서는 특정 컴포넌트의 자식 컴포넌트를 삽입하거나 교체하기 어렵게 구현되어 있습니다.
구조를 더 유연하게 리팩토링하고 싶습니다.
학습 효과 분석
선언적 프로그래밍의 위대함을 깨달았습니다.
그리고 성급한 추상화를 하지 않도록 주의해야겠다는 생각이 들었습니다.
과제 피드백
리뷰 받고 싶은 내용
https://github.com/bebusl/front_6th_chapter1-1/blob/main/src/utils/createViewcomponent.js
현재 React처럼 컴포넌트 단위로 view를 관리하고자 하는 의도로
renderViewComponent라는 유틸을 만들었습니다. 하지만 몇 가지 불확실한 부분이나 개선 가능성이 있어서 아래 내용을 중심으로 리뷰를 받고 싶습니다:컴포넌트 구조 변경/업데이트 흐름이 적절한지
updateComponent호출 후render()를 호출해야 하는 구조인데, 이게 직관적인지 확신이 없습니다.currentView 관리 방식이 괜찮은지
let currentView로 DOM 요소를 참조하고replaceChild하는 방식이 명확하고 안전한지,