2주차 mosong : html + vanilla js로 SPA routing system 만들기

[mike2ox]

선정 이유

• 최근 FE 데브매칭에서 1차 미션
• 바닐라 JS 연습
• history 객체 파악

추가 사항

• react-router-dom v6 로도 구성해서 비교해보기

삽질 정리 링크

• notion
• github

[mike2ox]

구현해보기 부분은 참고한 코드들 중 괜찮게 해볼만한 거를 리딩하고 리팩하는 방향으로 했습니다.

[rkskekzzz]

리뷰

전체적으로 간단하게 코드를 구현해주셔서 너무 이해가 잘 되었습니다! 항상 포스팅, 코드를 보면서 초보자가 다가가기 쉽게 작성해 주시는 것 같아서 엄청 인상깊네요!! ㅎㅎ 저번에 잠깐 찾아봤을 때에는 상당히 난이도가 어려울 것이라 생각했는데 직접 코드를 보니 js를 잘 이해하면 크게 어렵지 않았겠다는 생각이 드네요!

추가로 타입스크립트를 활용해서 작성해보면 어떨까요?

구글에서 URL안에 hash를 사용하는건 부적절하다고 언급함(SEO)

이라고 되어있는데 혹시 링크가 있으신가요 ㅎㅎ 이 내용은 처음 알았네요!

// router
const {
	initialRoutes,
	historyRouterPush,
	hashRouterPush
} = require('./router')

여기서는 import 를 사용하지 않고 require를 사용한 이유가 있나요?

hr태그는 /없이 <hr>로 쓰면 되는 것으로 알고 있습니다 ㅎㅎ 참고

[mike2ox]

@rkskekzzz 리뷰 감사합니다!!

추가로 타입스크립트를 활용해서 작성해보면 어떨까요?

다음에 라우팅 관련 주제로 스터디 준비할때 타입스크립트로 해보겠습니다.

구글에서 URL안에 hash를 사용하는건 부적절하다고 언급함(SEO)
이라고 되어있는데 혹시 링크가 있으신가요 ㅎㅎ 이 내용은 처음 알았네요!

생각보다 현장에서 SEO를 어떻게 더 높일까를 고민많이 한다는걸 알고있었는데 라우팅 시스템 구현하는 방식에서 hash를 권장하지 않다는게 그런 이유인걸 알아서 정리해놨습니다. 노션 하단에도 있고 링크로도 알려드리겠습니다 👍

// router
const {
	initialRoutes,
	historyRouterPush,
	hashRouterPush
} = require('./router')

여기서는 import 를 사용하지 않고 require를 사용한 이유가 있나요?

사실 es6기준으로 작성하려다가 요번에도 CRA없이 환경 구축을 시도해보았고 그러다보니 require로 그대로 놔뒀습니다.

hr태그는 /없이

---

로 쓰면 되는 것으로 알고 있습니다 ㅎㅎ 참고

감사합니다 😃 습관적으로 닫힘태그를 붙였습니다. 👍

[nyeoni]

좋은 글 잘 읽었습니다!! ㅎㅎ 해시 이용한 라우터 방식도 있다는 걸 처음 알았네요. 코드도 깔끔해서 바로 이해가 갔습니다ㅎㅎ 고생하셨습니다 :)