프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 30일 (목)
📚 TIL
Vue 학습
📮 Feelings
Vue 학습
Router 기초
SPA에서 페이지 이동이 이루어지는 것 처럼 보이게 하는 라우터 기능을 사용하는 방법에 대하여 학습하게 되었다.
기본적으로 라우팅을 통해 전달해주는 정보들과 전달해준 정보를 토대로 라우팅 기능이 적용되어 DOM이 형성되는 과정을 직접 비교하며 학습할 수 있어서 이해하는데 큰 어려움이 없었다.
SPA에서 웹의 여러 페이지들에 대한 정보를 표현하는 컴포넌트들을 프로젝트에서 routes 폴더를 통해 분류하는 방법으로 프로젝트 구조를 깔끔하게 정리할 수 있겠다라는 생각을 할 수 있었다.
Router 모드
라우터 기능에 존재하는 2가지 모드에 대해 차이를 비교하며 학습할 수 있었다.
웹에서 흔히 사용되어지는 HTML5 모드를 중점적으로 다루었는데 이는 서버에서의 기초 경로에 대한 세팅이 필요하므로 내가 개발을 진행하는 상황에서는 로컬서버에서 기본 경로 설정을 웹팩에서 진행하는 방법을 배우게 되었다.
이를 통해 해시모드에서 발생하는 불필요한 '#' 기호를 제외하고 흔히 볼 수 있는 웹 url로 라우팅을 다룰 수 있게 되어서 재미있었다.
Router 네비게이션 가드, 메타 필드
네비게이션 가드와 메타 필드를 통해 라우팅 동작이 이루어지는 상황에서 일련의 검증 과정을 걸치는 로직을 작성하는 방법에 대해 학습할 수 있었다.
대표적인 경우로 사용자 로그인과 관련하여 간단하게 구현하면서 동작 과정의 흐름을 이해할 수 있었다.
이를 통해 토큰과 관련된 인증 절차 역시 추후에 구현할 수 있겠다라는 생각을 하게 되었는데 예전에 구현해보았던 JWT 로그인 인증 방식이 생각나서 왜 이러한 검증 과정이 중요한지에 대해 쉽게 인지할 수 있었다.
Router 스크롤 동작
SPA에서 라우팅 간에 자연스럽지 않은 스크롤 위치가 유지된 상태의 라우팅을 방지할 수 있는 방법을 배우게 되었다.
추가로 다양한 라우팅 상황에서의 다양한 스크롤 기능을 구현하는 기초 방법들을 배울 수 있었는데 이를 배우면서 하나의 페이지에 수직으로 네비게이션 동작들이 스크롤 되는 웹을 만들어보고 싶어졌다.
그래서 scrollBehavior 함수에 대해서 더 깊게 찾아보게 된 것 같다. 그리고 간단하게 직접 구현에 성공하게 되었고 다양한 상황에서의 자연스러운 라우팅 스크롤을 구현할 수 있게 된 것 같다.
Babel 구성
간단하게 babel을 통해 상위 버전에서의 자바스크립트를 하위 버전에서의 통용되는 문법으로 변환해주는 babel을 다루어보았다.
일단 굉장히 어려웠다. 수많은 플러그인들과 특정 브라우저에 대한 지원 등이 처음 사용해보는 나로써는 더 학습해야 하는 분야라는 생각이 들었고 간단하게 웹팩과 함께 사용하도록 설정까지 구성해보았는데 더 많은 연습이 필요하다고 느끼게 되었다.
최신 문법으로 작성된 코드를 기존에 개발이 되어진 예전 코드들에 어우러지게 적용하는 방법이 역시 예상대로 어려웠다. 이렇게 기존의 코드들과 잘 어우러지게 하는 역할도 필요한 능력이라는 생각이 많이 들게 되었다. 꾸준히 학습해야겠다.
PostCss, Autoprefixer 구성
css 후처리기인 postcss를 학습하며 autoprefix 기능을 다루어 보었다. 이를통해 전처리기 처럼 제한된 기능이 아닌 다양한 플러그인들을 활용하는 후처리기를 알게 되었고 Webkit과 마이크로소프트 브라우저 등과 호환이 되기 위해 autoprefix를 자동으로 적용해주는 편리한 도구를 알게되어 새로운 개념을 많이 알게 되었고 더 자세히 알아보아야겠다.
마치며 🙏
SPA에서 뷰를 활용한 라우팅 기능을 전체적으로 다루어 보는 시간을 가질 수 있어서 좋았고 많이 들어봤었던 babel을 다루어 보는 시간을 가져서 재미있었지만 아직까지 babel을 활용하기에 어려움을 느끼는 것 같고 더 시간을 가지고 깊게 공부해보는 시간을 가져야겠다.
그리고 CSS의 전처리 도구가 아닌 후처리 도구가 존재하는 것을 처음 알게되었고 하위호환성을 위한 babel과 postcss라는 훌륭한 도구들 역시 추후에 잘 활용할 수 있도록 더 깊게 공부해야겠다.
📅 Future Action Plans
- Vue 학습
- Netlify CD, Serverless Functions
- Nuxt JS
- Open Graph
- Heroku CD
