항해99 플러스 프론트엔드 5기 1주차
1) 라우팅 구현
- History API를 사용하여 SPA 라우터 구현
- ’/’ (홈 페이지)
- ‘/login’ (로그인 페이지)
- ‘/profile’ (프로필 페이지)
- 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
- 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
- 주소가 변경되어도 새로고침이 발생하지 않아야 한다.
SPA는 왜 History API를 쓸까 ?
- UX 향상: 브라우저의 뒤로가기 앞으로 가기가 가능해진다
- SEO 서치: 서치엔진들이 각기 다른 상태들을 인덱스 할 수있다
- 북마크 가능한 URL
- 나은 분석: 상태 변경을 브라우저에 푸쉬하면 유저 인터렉션들을 트랙킹가능하다
라우팅 구현
도명갓
1) 라우팅 구현 과제중 마지막 주소가 변경되어도 새로고침이 발생하지 않아야 하는 task를 하던중 forEach에 줄이 그어져있지만 원인을 찾지 못했는데, 알고보니 querySelectorAll 대신 querySelector를 쓰고있었다는..
조심하자
1
2
3
4
5
6
7
8
document.querySelectorAll('a').forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
const newPathname = e.target.href.replace(location.origin, '');
history.pushState(null, '', newPathname);
render();
});
});
1
2
3
4
5
6
7
8
document.querySelector('a').forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
const newPathname = e.target.href.replace(location.origin, '');
history.pushState(null, '', newPathname);
render();
});
});
innerHTML은 빠르지만, 빈 깡통이다 라는걸 알았고, 브라우저가 렌더링을 완료하기 전에, HTML이 DOM으로 만들어져 붙여져서, 먼저 섣불리 실행될 수 있다, 그리하여 테스트가 실패를 하는거고, 그건 코드를 짤때 염두를 못했던 것이기에, 앞으로 생각하며 짜야한다를 깨달았습니다.
그러면서 타이밍 문제로 포커스를 잡아 setTimeout, requestAnimationFrame, MutationObserver같은 function으로 렌더링 후 시점에 이벤트 바인딩을 시도를 했었고, 그러다가 직접 DOM을 만들어서 진행햇습니다
그러다가 [object HTMLElement]이 화면에 보여지는 버그는 type error 때문이다를 알았고 root.innerHTML += Header();에서 Header()가 HTMLElement면, innerHTML에 object가 더해져서 저게 출력되고, 그리하여 문자열은 innerHTML, HTMLElement는 appendChild를 혼동하지않고 써야한다를 알았고
layout의 consistency는 상위 구조로 관리, container - inner - main이던, router에서 전체를 wrap 하는 방법이 있고
Test는 DOM이 붙은 후에야만 통과한다를 알 수있었습니다.
DOM을 만들어서 붙이고, router에 제가 한거 처럼 layout을 wrap하는게 좋은 practice 인지 모르겠습니다
학습 효과 분석 테스트코드도 처음 보고, JS도 처음 해본 입장에서, 뭐가 이렇게 따로따로 하는거지 싶었습니다. 그러면서 이것저것 찾아보고, 지피티도 돌려보고 공부도 해봤는데, 개념 자체는 너무 재밌는데 코딩이 겁도 나고 힘드네요
과제는 좀 어려웠고요, 처음보는 테스트 코드의 존재 유무는 너무 좋은거 같습니다. 팀원 분들, 학습메이트 (수빈님) 의 도움을 받으며, 중간중간 Q&A도 있고, 아직은 정신도 없고, 적응도 못하는거 같지만, 포기않고 계속 하면 언젠가는 저분들 처럼 술술 하루만에 하고 더 심화된 고민을 하지않을까 싶습니다. 항상 혼자 작업을 해왔어서 같은걸 여러사람이 하는게 신기합니다.
시간이 많지 않았어서, 혼자서 진득하게 작성한게 별로 없네요. 팀원들의 인풋, 구글에서 찾는 코드, 지피티가 주는 코드가 혼종이 되어있어서 제 코드를 완벽히 이해하고 있지않습니다. 다음주부터는 더 직접 써보고 학습노트도 읽어보겠습니다.
회고록도 더 자세하게 천천히 써보도록 하겠습니다!