[3팀 김나연] [Chapter 1-1] 프레임워크 없이 SPA 만들기 #34
Conversation
This file contains 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
Blue-Kite
changed the title
lshyun955
reviewed
Dec 21, 2024
hdlee0619
reviewed
Dec 21, 2024
| import Header from "./Header"; | ||
| import Footer from "./Footer"; | ||
|
|
||
| const DefaultLayout = (component) => { |
There was a problem hiding this comment.
DefaultLayout으로 따로 분리하니까 더 깔끔해보이고 좋은 것 같아요..! 수정하기도 편할 것 같아요ㅎㅎ
| const activateStyle = "text-blue-600 font-bold"; | ||
| const deactivateStyle = "text-gray-600"; | ||
| const handleActivate = (x) => (x === path ? activateStyle : deactivateStyle); | ||
| const path = window.location.pathname; |
There was a problem hiding this comment.
Nav를 컴포넌트로 분리하고 주소에 따라 다르게 해주셨네요..! 저는 이렇게 못했는데 배워갑니다!
Comment on lines
+33
to
+44
| e.preventDefault(); | ||
| const form = e.target; | ||
| const formData = new FormData(form); | ||
| const data = Object.fromEntries(formData); | ||
|
|
||
| if (form.id == "login-form") { | ||
| handleLogin(data); | ||
| } | ||
| if (form.id == "profile-form") { | ||
| handleChangeProfile(data); | ||
| } | ||
| handleProfile(); |
There was a problem hiding this comment.
여기서 처리하는 이벤트가 각 컴포넌트에서 정의되면 더 좋을 지 않을까 싶은데 어떻게 생각하시나요??
제가 위 처럼 생각한 이유는 유지보수와 확장성 측면에서 이벤터가 동작하는 컴포넌트에서 정의하는게 더 좋다고 생각이 되어요. 만약 현재 프로젝트에서 추가로 페이지가 만들어진다면 여기 이벤트가 커지게 될테고 유지보수와 확장이 어려워 질 수 있는 것이죠
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
과제 체크포인트
기본과제
1) 라우팅 구현:
2) 사용자 관리 기능:
3) 프로필 페이지 구현:
4) 컴포넌트 기반 구조 설계:
5) 상태 관리 초기 구현:
6) 이벤트 처리 및 DOM 조작:
7) 라우팅 예외 처리:
심화과제
1) 해시 라우터 구현
2) 라우트 가드 구현
3) 이벤트 위임
과제 셀프회고
리액트 라우터 라이브러리의 사용법만 알고 사용하다가 이렇게 직접 비슷한 기능을 구현해보면서 관련 기능을 더 고민할 수 있었습니다.
라이브러리의 소중함(?)도 얻었습니다.
기술적 성장
해당 개념을 배우고 적용해 볼 수 있었습니다.
멘토링 시간에 경로에 따른 랜더링 관련되어 리펙토링을 여쭈어보았고 명령형/선언형 키워드를 말씀해주셔서 고민해볼 수 있었습니다.
테스트 경험이 없었는데 이번에 테스트 코드를 구경할 수 있어서 좋았습니다. 사이드 프로젝트를 끄적이고 있었는데 vitest를 살짝이라도 얹어보고자 합니다.
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용
선언형을 조건에 따라 화면을 조작하는 것이 아닌 약간 상수처럼 특정 상황의 ui를 정의해버린(?) 느낌으로 이해했는데 맞을까요...?
추천해주실 자료가 있다면 감사하겠습니다.