web/Vue7 SPA 와 SSR vs CSR 프론트엔드쪽을 공부하다가 헷갈리는 개념을 정리해 보았다. ✔️ SPA(Single Page Application) SPA 란 말 그대로 한개의 페이지를 가진 어플리케이션이다. 왜 SPA 로 개발하느냐고 묻는다면, 사용자 친화적 초기 렌더링 후 데이터만 받아오기 때문에, 상대적으로 서버 요청이 적음 Virtual Dom(가상 돔) 프론트 엔드와 백엔드 분리로 개발업무 분업화 및 협업이 용이 개발이 상대적으로 효율적 페이지 전환 시에 서버로부터 새로운 페이지를 받아오지 않고, 클라이언트 측에서 필요한 데이터만 동적으로 로드하여 화면을 갱신 정도를 말할 수 있겠다. 기본적으로 SPA 는 클라이언트 사이드 렌더링이지만 그렇다고 SPA == CSR 은 아니다. 이제 아래에서 SPA 에서의 SSR 과 CSR 에 대.. 2024. 2. 13. JWT에 대한 고찰 로그인시 JWT 를 어디다 보관해야할지, 어떻게 보관해야 안전할 지 골똘히 생각하다가 정리하는 포스팅.. 일단 JWT 를 왜쓰는걸까? 남들이 다 써서^^? 걍 기존 시스템이 jwt라? 위에서 시켜서?? 물론 남들이 많이 쓰는덴 다 이유가 있다. JWT 는 stateless 해서 쓴다. 사용자 정보를 DB에 저장해놓고 요청할때 마다 I/O 해서 검증하는건 stateful 한 방식인 세션방식이다. On-premise(온-프레미스) → Cloud(클라우드) 시스템으로 넘어가면서 수평적확장(Horizontal Scale Out) 방식을 쓴다. 즉, 사용자가 1000명이었을 땐 서버가 1개였다가 갑자기 급증해서 10000명이 되면 클라우드 플랫폼이 이를 감지하여 서버를 10개 늘리는걸 수평적 확장이라 한다. 이게.. 2023. 9. 13. Nuxt(Vue) 로 admin page 만들기 (2) 이번엔 로그인페이지를 갖다붙여보려한당! 1. page/login.vue 로그인컴포넌트 생성 Admin Login Login Sign Up 2. 기존에 layouts/default.vue 의 컴포넌트가 레이아웃으로 적용되면 안되기에 로그인용 레이아웃을 또 따로 만들어주었다. import { Component, Vue } from 'nuxt-property-decorator'; @Component({ name: 'fullPage' }) export default class fullPage extends Vue {} 3. login.vue 에 레이아웃 변경. export default { name: 'Login', layout : 'fullPage', ..... } 4. http://localhost:3000.. 2023. 9. 5. Nuxt(Vue) 로 admin page 만들기 (1) Vue가 지원하는 Admin 템플릿들은 꽤나 많다. 나는 그 중에 Vuetify를 써서 구현해보려한다. 해당 페이지에서 공짜로 지원하는거 중 맘에 드는걸로 골라 다운받은 후 프로젝트에 붙여넣었다. https://themeselection.com/vuetify-admin-template-github/ Top 10+ Vuetify Admin Template GitHub 2023 The collection of Vuetify Admin Template Github. Develop interactive web apps with help of these Vuetify Admin dashboards from GitHub. themeselection.com 내가 받은건 Vuetify + Material 기반이다. 다.. 2023. 9. 4. 이전 1 2 다음
