TIL - Day 14

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 14

---

🗓오늘은... 

이제 컴포넌트 방식에 대해 어느정도 안다고 말할 수 있지 않을까?

이번 주에 강의를 통해 두개의 작은 프로젝트를 컴포넌트 방식을 사용하여 구현해보고 있다. 이전에 학습했던 방식과 다른 점이 있다면 과제도 함께 진행하고 있기 때문에 배웠던 내용을 이해하고 사용하려고 노력하고 있다. 단순히 이해했다고 넘어가는 것이 아닌 사용해야 하기 때문에 컴포넌트 간의 의존성을 이해하게 되었다.

컴포넌트 구조와 데이터가 흐르는 방식을 생각해보며 과제를 진행하니 예상했던 것보다 더 빠르게 완성할 수 있었다. 내일 validation을 확인하는 코드를 작성하고 PR하려고 한다.

 

History api

강의를 통해서는 history api를 학습하였다. 이전에 React를 조금 사용해봐서 이 내용이 React Router와 아주 흡사하다는 걸 알고 학습하니 훨씬 흥미로웠다. Vanilla JS로 route를 사용하는 게 가능한지 언제 사용해야 하는지 잘 몰랐지만 이번 강의를 통해 어떤 방식으로 뒤로 가기, 앞으로 가기가 동작하는지, History 객체에 어떤 방식으로 쌓이는지 확인하게 되어 이해도가 더 높아졌다. 또한 그동안 마주했던 절대 경로, 상대 경로 문제가 왜 발생했는지 알게 되었다.

 

특강

코어 타임이 끝나고 로토님의 특강을 진행했고 이 강의에서는 서버 공부의 중요성을 조금 알려주셨다, 그리고 요즘 트렌드가 SSR로 다시 넘어오고 있고 SSG, DPR, ISR과 같은 새로운 내용들을 접하게 되었다. 프론트엔드 개발자라고 한계를 정해두는 것보다 변화에 대비하며 학습해야겠다고 생각했고 다양한 책도 추천해주셨는데 차근차근 읽어봐야겠다.

 

새롭게 배운 것

• 세션 히스토리의 존재와 이를 활용하는 방
• Vanilla JS로 SPA 구현하는 법 (history api는 화면 이동을 일으키지 않는다.)
• history.pushState, history.replaceState 사용법
• popstate 이벤트
• 렌더링의 역사 (server Template, CSR, SSR... 의 장점과 문제점들)

오늘 깨달은 점

• 시멘틱 태그 사용을 위해 페이지 이동을 하지 않더라도 a 태그를 사용해주는 것이 좋다.(preventDefault)
• history 사용 시 url에 내용이 없다면 홈으로 돌려주는 -s 명령어를 함께 사용해야 한다.
• 히스토리 사용할 때 절대 경로와 상대 경로에 유의해야 한다.
• 서버 공부를 위해 전통적인 방식으로 게시판을 만드는 것도 좋은 방법이다.

참고했던 자료

jamstack

For fast and secure sites | Jamstack

remix

Remix - Build Better Websites