[2팀 김경민] Chapter 1-1. 프레임워크 없이 SPA 만들기 #59
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
gmkim716
changed the title
Comment on lines
+36
to
+40
| if (currentPath === "/profile" && !isLoggedIn()) { | ||
| window.history.replaceState({}, "", "/login"); // replaceState: 현재 페이지의 상태를 새로 고쳐서 history entry를 교체합니다 | ||
| render("/login"); | ||
| return; | ||
| } |
There was a problem hiding this comment.
로그인을 검증하고 redirect 시키는 로직이 router 외부에 있으면 더 좋은 것 같아요
저도 router 내부에 작성을 했다가 외부에서 검증하는 로직을 받아 처리하는것으로 변경하였는데 router이 재사용성이 더 높아지더라구요
다만 외부에서 받아서 처리하는 방법이 좋은지는 더 생각해보고 있는 상태입니다
Comment on lines
+47
to
+54
| document.addEventListener("click", (e) => { | ||
| const target = e.target.closest("a.nav-link"); | ||
| if (target) { | ||
| e.preventDefault(); | ||
| const path = target.getAttribute("href"); | ||
| navigate(path); | ||
| } | ||
| }); |
There was a problem hiding this comment.
이 코드도 router와는 별개로 분리가 되면 router를 더 재사용하기 좋아질 것 같아요
Comment on lines
+14
to
+17
| const username = e.target.querySelector("#username").value; | ||
| const email = e.target.querySelector("#email").value; | ||
| const bio = e.target.querySelector("#bio").value; | ||
| localStorage.setItem("user", JSON.stringify({ username, email, bio })); |
There was a problem hiding this comment.
저도 어떤 방식이 좋은지는 잘 모르나 이번에 알게된 걸 공유드립니다.
form에서 submit 한 경우에는 form 객체에서 데이터를 뽑아서 사용할 수 있습니다.
아래는 간단한 예시입니다. 이렇게 작성하면 각 id 마다 querySelector 로 찾고 value를 안뽑아도 되어서 좋더라구요
const formData = new FormData(target);
const { username } = Object.fromEntries(formData);
There was a problem hiding this comment.
대박!! form일떄 적용되는거군요?! 배워갑니다,,
https://ko.javascript.info/formdata
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api
제가 읽은 formdata관련 글들도 남기고 갑니당!
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) 이벤트 위임
과제 셀프회고
첫 번째 주차 과제부터 어려움을 느끼다보니 힘들었습니다. ai로 동작시켜두고 차분히 이해해나가고 싶었는데, 질문의 요지를 잘 파악하지 못한 채 테스트 통과에 급급했기 때문인지 rollback 시키는 일이 너무 많았습니다. 테스트 코드를 보는 과정, 테스트케이스 통과를 위해 e2e를 활용하는 과정에서 아직 도움이 많이 필요함을 느꼈습니다. 2주차 때부터는 학습 메이트 분들께 많이 질문하고 적극적으로 도움을 구해야 할 것 같습니다.
(npm run test:basic에서 통과되었던 코드들이 e2e 테스트를 진행하자 실패해서 혼자 힘으로 수행하는데 무리를 느꼈습니다)
클래스형으로 구현된 과제 코드를 보면서 함수형으로 전환하는 시도를 했었지만, 이 방식도 잘 되지 않았습니다. 일단 코드가 동작하도록 빠르게 과제를 수행하는 방법을 고민해봐야겠습니다.
다른 분들의 코드를 많이 보고 참고해야겠다는 생각이 들었습니다. 저와 같은 오류를 겪고 계셨던 분도 있었고, 체계적으로 코드를 정리해두신 분들의 코드를 보는 것많으로도 많이 배울 수 있겠다 싶었습니다
기술적 성장
historyAPI를 이용한 라우터, hash를 이용한 라우터
클래스형으로 동작하는 코드를 함수형으로 전환하는 시도
DOM 렌더링이 이뤄져야 이벤트 호출에 영향이 없다는 점을 알게 되었습니다.
코드 품질
클래스 형으로 동작하는 코드를 참고했었는데, 함수형으로 동작하는 코드 예시를 살펴보고 왜 두 방식의 차이가 발생하는지 이해해보면 좋을 것 같습니다
모듈화, 컴포넌트화를 잘 하시는 분들의 체계를 습득하고 싶습니다. 혼자서 구현만 신경쓰다보니 잘 정리해나가는 방법을 아직 모르겠습니다.
학습 효과 분석
next, react 등 사용하던 방식대로만 고수하다보니 실제 JS 동작이 어떻게 이뤄지는지, react는 어떻게 동작하는지 고민해보지 못한 것 같습니다. 멘토링 시간을 비롯해 기본기 학습이 중요하단 점을 배웠습니다
과제 피드백
리뷰 받고 싶은 내용