Facts
- 생일!!
- 하지만 코딩
- 라우팅 기능과 회원가입 api 요청 보내기
Feelings & Findings
그냥... 오늘 나의 기분
생일은 오늘이었는데 온라인으로 수업을 진행했기 때문에 어제 우테코 크루들이 오프라인에서 생일을 축하해줬다.
관심 받는 것을 좋아하지 않아서 축하해주지 않아도 된다고 했는데 막상 받으니 솔직히 좋았다.
각자 한 개씩 쪽지를 남겨줬는데 너무너무 고마웠다.
지금까지는 어제의 이야기였고, 오늘은 여자친구에게 선물을 받았다.
가방을 받았는데 노트북 전용 가방인 것 같다.
처음보는데 백팩으로도 사용할 수 있고, 자물쇠도 있고, 보조배터리가 있으면 충전할 수 있는 usb도 있다. 백팩을 사용하기 싫으면 손으로 들고다닐 수도 있다.
노트북을 항상 들고다니느라 무겁다고 한 것을 보고 노트북 가방을 사준 것 같다.
여자친구에게 항상 고맙고 얼른 성공해야겠다는 생각을 했다.
지하철 노선도 미션 진행 상황
바닐라 자바스크립트에서는 사용해본 적 없는 라우팅 기능을 사용해야 했다.
라우팅에는 전통적인 link가 있고, AJAX, Hash와 history가 있다.
link는 href를 사용하며 페이지가 새로고침되기 때문에 사용성이 좋지 않다.
새로고침되면 js를 다시 로드해야 하고, 리소스가 많이 소비되기 때문이다.
AJAX는 새로고침 없이 서버의 데이터를 받아서 바뀐 부분만 렌더링할 수 있다.
하지만 주소가 바뀌지 않기 때문에 새로고침 시 처음의 페이지가 렌더링되는 단점이 있다.
Hash는 정말 간단하게 href에 #을 넣어서 사용하는데, 주소도 변경되고 히스토리도 관리할 수 있다.
하지만 SEO 이슈가 있고, 주소 창에 불필요한 #이 들어간다는 단점이 있다.
구글은 SEO 이슈를 해결한다고 한다.(구글 갓)
history(PJAX)는 이 모든 것을 해결한다. 그리고 새로고침이 발생하지 않기 때문에 SPA를 구현할 수 있다. SPA는 AJAX나 Hash도 가능하다.
그래서 난 history로 라우팅을 사용하기로 했고, 시행착오를 적어보려고 한다.
history 시행착오
history로 SPA를 구현하기 위해서는 pushState, popState를 사용할 수 있다. replaceState도 있는데 아직 사용해보지는 않았다.
문제가 있었는데, history로 /about이라는 주소에 pushState를 한다고 했을 때, 주소만 바뀌고 실제 페이지는 바뀌지 않는 것이었다.
그래서 /about에 접속했을 때 필요한 html이나 template을 innerHTML로 넣어줘야 했다.
코치가 만들어준 html이 존재했고, template을 사용하지 않고 html을 그대로 넣을 방법이 없을까? 찾아보다보니 response.text()가 존재했고, 이것을 사용해서 html을 그대로 넣을 수 있었다.(살짝 의문인 것은 innerHTML을 지양하라고 했는데 innerHTML을 안쓰면 어떻게 할 수 있는지 모르겠다.)
그렇게 렌더링을 하고 나서 보니 이제 기존에 하던 방식과 조금 다르다는 것을 알게 되었다.
기존에 하던 방식은 처음부터 필요한 요소들을 모두 querySelector로 불러오고 시작했는데,
이것들은 렌더링이 된 후에나 요소를 찾을 수 있기 때문에 애매했다.
뭐.. 별 수 없이 렌더링 된 후에 요소를 찾도록 구현을 했고, 어찌어찌해서 회원가입까지 라우팅 기능 구현을 완료했다.
회원가입 요청
이제 회원가입을 요청하는 차례가 왔다.
백엔드에서 api를 주고, 우리는 보내기만 하면 된다고 해서 쉬울 것이라고 생각했다.
하지만... 그렇게 오래 해본 것은 아니지만 계속 500번 에러가 떠서 오늘은 이만하고 자기로 했다.
500번 에러는 왜 생기는지 모르겠다.
400번 대 에러는 많이 봤는데 500번은.. 어디 문제인지 감도 안잡힌다.
내일 오프라인을 가서 알아봐야겠다.
그래도 회원가입 요청 자체는 그렇게 어렵지 않았다.
백엔드가 준 문서 그대로 주소에 body, headers로 요청하면 끝이다!
이후에 토큰을 저장하고 있어야 된다고 하는데 아직 여기까지는 잘 모르겠고 우선 지금은 회원가입부터 해결하려고 한다.
하나하나 알아가는 재미가 쏠쏠하다!
프론트엔드 개발 공부는 정말 재밌는 것 같다.
Plans
- 로그인 기능까지 구현하기
- 유튜브 강의실 3차 구현하기
- 블로그 쓰기
- 책 읽기 - 블로그 스터디
