프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
10월 1일 (금)
📚 TIL
Vue 학습
-
Open Graph
-
Heroku CD
📮 Feelings
Vue 학습
Netlify CD, Serverless Function
Netlify를 통해 정적 사이트를 배포하는 방법에 대하여 학습할 수 있었다.
개발을 진행할 때 내가 숨기고 싶었던 개발자 도구에서 네트워크창의 API 호출 과정을 숨기는 방법에 대해 항상 고민했었는데 Netlify의 Serverless Function을 통하여 개발자 도구 창에서 역시 API의 호출 과정을 은닉하여 보안을 강화하는 방법을 학습할 수 있어서 너무나도 재미있었다.
더불어 이러한 배포 과정 전에서의 로컬 환경에서의 작업을 깃헙에 커밋하는 과정에서 역시 dotenv를 통한 환경변수 설정을 다루어 코드에서도 API의 중요한 정보들을 은닉하는 방법을 더 자세히 공부하게 되어서 좋았다.
NuxtJS
SPA의 개발 방식에서 단점을 극복하고자 많은 노력이 있었지만 기존에 많이 사용했었던 전통적인 SSR 방식의 장점을 완벽하게 커버하기란 불가능 하였기에 SSR 방식에서 SPA의 장점들을 어느 정도 누려보기 위해 나온 프레임워크인 NuxtJS의 사용법에 대해 학습할 수 있었다.
이 개념을 통해 다시 한 번 SPA와 MPA에서 SSR과 CSR을 학습할 수 있는 좋은 시간을 가졌다.
Open Graph
흔히 SNS에서 자주 사용되는 미리보기 기능들에 대해 어떻게 구현이 되었을까? 라는 생각을 가지고 접근했던 적이 없었던 것을 반성하게 되었다.
생각해보면 어떻게 미리 사이트의 링크를 통해 사이트의 일부 정보를 미리 표현해주는지 동작 원리가 굉장히 궁금하게 되었고 Open Graph 태그들을 통해 html의 메타 데이터들을 표기하여 웹 사이트의 정보를 미리 표현하는 기초적인 방법들을 알 수 있게 되었고 내가 개발하는 웹의 디테일을 더 높일 수 있었다.
Heroku CD
Netlify가 html, css, javascript 기반의 정적 사이트를 배포하여 관리하기 용이한 서비스라면 Heroku는 우리가 개발한 서버를 배포하여 관리하기 용이한 서비스임을 알게 되었다.
vue나 react 같은 SPA에 대하여 클라이언트와 서버단의 코드들을 Netlify와 Heroku에 배포하고 서버와의 데이터 통신이 이루어지는 과정은 Netlify 서버에서 Heroku 서버로의 데이터 통신을 통해 우리가 로컬에서 구현한 클라이언트와 서버와의 데이터 통신을 구현할 수 있다.
위 과정을 통해 굉장히 유익하게 로컬환경이아닌 배포환경에서의 다양한 사용자들의 접근이 용이한 방법을 학습할 수 있어서 너무 흥미로웠다.
마치며 🙏
SPA에서 뷰를 활용한 라우팅 기능을 전체적으로 다루어 보는 시간을 가질 수 있어서 좋았고 많이 들어봤었던 babel을 다루어 보는 시간을 가져서 재미있었지만 아직까지 babel을 활용하기에 어려움을 느끼는 것 같고 더 시간을 가지고 깊게 공부해보는 시간을 가져야겠다.
그리고 CSS의 전처리 도구가 아닌 후처리 도구가 존재하는 것을 처음 알게되었고 하위호환성을 위한 babel과 postcss라는 훌륭한 도구들 역시 추후에 잘 활용할 수 있도록 더 깊게 공부해야겠다.
📅 Future Action Plans
- 투 포인터, 슬라이딩 윈도우 알고리즘 개념 정리
