프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
8월 23일 (월)
📚 TIL
1. JavaScript 학습
2. 렌더링 방식과 웹 아키텍처 그리고 웹 성능 추적 학습
📮 Feelings
1. JavaScript 학습
history API
학습을 통하여 SPA와 MPA, CSR과 SSR에 대해 프론트엔드 개발자라면 알아야하는 핵심 개념에 대하여 연계학습이 가능하였다.
hashbang을 활용한 라우팅에 대한 사용자 경험을 나 역시 많이 겪어 보았는데 자세한 개념과 javascript에서의 hashchange 이벤트 처리를 통해 직접 구현을 할 수 있었던 점이 많은 공부가 되었습니다.
hashbang의 불편한 점을 직접 겪어보며 불편한 점을 개선한 history API의 등장 배경을 이해하며 사용법에 대하여 학습하니 훨씬 이해가 잘 되었습니다. 기초 사용법과 웹 브라우저의 history 객체의 상태를 여러가지로 다루는 부분에 대하여 학습할 수 있었고 확실히 hashbang 보다 querystring을 다루기에 깔끔한 url을 다루는 경험을 할 수 있었습니다.
더 나아가 SPA에서의 url을 통한 라우팅 기능 제공과 동적인 클라이언트 렌더링에 대하여 가져올 수 있는 장점을 이해할 수 있었고 SPA와 MPA의 장, 단점 비교를 통해 좀 더 깊게 렌더링 방식과 웹 아키텍쳐에 대한 추가 학습을 하게 되었습니다.
2. 렌더링 방식과 웹 아키텍처 그리고 웹 성능 추적 학습
브라우저 렌더링
정말 많이 읽어온 과정의 내용이지만 CSR과 SSR을 학습하며 확실한 이해를 위해 다시 한 번 나의 학습 기록을 정독하며 복습하였다. 역시나 새로 읽을 때 마다 궁금해 지는 내용이다르다고 느꼈다.
이번에는 이러한 렌더링 과정에서의 속도면에서 궁금증이 생겨 개발자 도구를 통한 웹 성능 추적방법에 대하여 여러 포스팅을 둘러보며 공부하게 되었다.
크롬 개발자 도구를 통한 웹 성능 추적
CSR과 SSR을 공부하며 초기 웹의 사용자에게 보여지기 까지의 걸리는 시간에 관한 내용이 궁금하여 학습하게 되었다. 많은 시간을 투자하여 공부한 만큼 전체적인 흐름과 내용에 대해서는 이해가 되었지만 아직까지 자세하게 파고 들었을 때에 생기는 궁금증을 해결하지 못한 내용들이 많았다.
대표적으로 http2의 서버푸쉬와 관련하여 최초의 DOM 트리가 형성되는 시점과 브라우저 렌더링 전체 과정이 이루어져 사용자에게 보여지는 로드 시점에 관한 내용에 대하여 자세한 내용을 아직 찾지 못하여 너무 긍금하고 당분간 이 주제에 관하여 계속 학습하여 나의 생각을 정리한 글을 포스팅하려고 한다.
마치며 🙏
오늘은 기본 학습 주제인 hitory API에 공부하며 언급되는 주제인 웹 애플리케이션을 만드는 패턴(SPA와 MPA)에 대하여 공부하게 되었고 그 과정에서 패턴에서 주로 사용되는 렌더링 방식인 CSR과 SSR에 대하여 학습하게 되었습니다.
렌더링 방식과 관련하여 브라우저 렌더링 과정을 다시 다루게 되었고 또 그 과정에서 브라우저의 웹 성능 지표 추적에 관하여 공부하게 되었습니다.
굉장히 많은 주제에 대하여 꼬리를 물고 파고들다 보니 아직까지 내용을 완전히 정리한 기록은 남기지 못하였지만 웹의 큰 흐름을 좀 더 파헤치며 공부할 수 있었습니다.
하지만 이 공부에 시간을 너무 쏟아부어서 하루 목표한 내용들에 대하여 공부하는데에 시간의 부족함을 느꼈습니다. 확실하지 않은 구글링을 통해 여라 자료들 중에 내가 찾던 지식인지 파악하는데에 시간이 오래 걸렸기 때문입니다. 그러다보니 시간에 쫒기게 되어 학습에 조급함 역시 느껴졌습니다.
그래서 하루의 시작에 정한 학습 목표에 대해 온전히 집중하여 마무리 한 후에 추가적으로 다루고 싶은 주제들을 기록해두어 조급하지 않은 학습을 이루도록 노력하도록 생각하게 되었습니다.
📅 Future Action Plans
-
Vanilla JS를 통해 학습했던 다양한 API를 활용하여 강력한 기능의 To Do App 만들기
-
4주차 CS 스터디 발표 주제 다시 정리하여 PPT 만들기
