23.10.12
📚 오늘 공부한 것
- history api
😲 새롭게 알게된 것
history api MDN 문서
브라우저에서 페이지 로딩을 하면 세션 히스토리를 가진다. 페이지 이동마다 쌓이므로 앞뒤로 탐색, 이동이 가능하다.
⭐️화면의 이동 없이⭐️ url을 변경할 수 있다!!
history.pushState(state, title, url ) 🔗
현재 히스토리에 새로운 url을 "쌓는다"
history.replaceState(state, title, url ) 🔗
현재 히스토리를 "대체한다"
사용예 - 로그인 페이지, 게시글 작성 후 페이지
SPA로 만들기 위한 라우팅
그동안 실습이나 가벼운 화면 개발을 하면 VSCode 플러그인 중 라이브 서버를 사용해서 127.0.0.1에 서버를 열고 화면을 그렸다. 라이브 서버로 연다는 것은 index.html이 열리는 것이다. 하지만, url을 바꾸고 그에 따라 화면을 그리는 등 SPA로 만들기 위해서는 추가적인 설정이 필요하다.
http-server
우선 이 모듈을 이용하면 localhost에 서버가 열리고 이벤트 버블링과 history.pushState를 조합하여 원하는대로 Url을 바꿀 수 있다. 당연히 실제로 화면이 이동하진 않는다!
하지만! 이동한 url 상태에서 새로고침을 발생시켰을 때 , 그 Url을 가지는 html파일이 없다면 그대로 404에러가 발생한다. 이런 경우 루트의 Index.html 파일로 돌려주는 기능이 필요하다npx server -s
http-server에 세팅을 추가하면서도 위의 문제를 해결할 순 있지만, 이미 그 기능을 가진 serve모듈을 이용하면 된다!!
git reset , revert
파일을 잘못 커밋했거나, 추가된 내용을 같이 커밋하고 싶거나 등의 이유로 커밋을 취소하고 싶을 때 사용할 수 있다.
간략하게 적어두자면,
reset : 커밋 로그도 함께 지움. 올렸던 파일들은 스테이징상태로 돌아옴. 협업하는 상황에서는 지양할것.
revert : 코드는 돌아오지만 커밋 로그는 남아있다. 수정해서 커밋하면 새로운 그 커밋이 추가되는 것. 협업할 땐 revert !
🫨 느낀 점
로컬에서 서버를 열 때 경우마다 라우팅이 잘되기도 404가 나기도 했는데 이런 기본적인 문제였다 ... ! 라우팅을 하는 방법, 라우팅을 하는 과정을 이해하고 페이지들을 렌더링하도록 해야겠다.
history api에서도 뒤로가기 버튼 등을 만들어 history.back()정도만 써보았는데, url과 관련있는데 pushState, replaceState도 배웠으니 써먹어야겠다.
🤔 오늘 회고
강의보다 오래 걸린 사이드 프로젝트 보완하기 ..
구현해내고 나서 돌아보니 쉬운데, 로직을 생각하기까지 너무 오래걸렸다. 강의에서 배운 것 처럼 구현해야할 것을 정리하고 구현하기 위해서 필요한 요소들을 어떤 순서대로 만들어야 하는지 정리하는 과정이 도움이 된다고 느꼈다. 그 순서를 떠올리기까지가 험난해서 그렇지..
