728x90 반응형 VUE4 SPA(Single Page App)와 CSR(Client side rendering) SPA(Single Page App)이란? 기존의 앱: backend와 화면부분(frontend)이 연동 되어 있어, 새로 고침해야만 데이터가 변경됨. SPA: backend를 API로 사용하여 data만 가져오고, 페이지에서 렌더링을 진행함 - 이를 구현하는 것은 ajax, vue react등의 js 프레임워크가 있음. Client Side Rendering (CSR)이란? SPA에선 기존의 서버가 연동된 html template(jsp, jinja 등)과는 달리, 백엔드는 데이터만 전달하고, 클라이언트에서 화면을 렌더링한다. 따라서 기존의 것을 서버 쪽에서 렌더링하여 server side rendering이라 하고, SPA처럼 클라이언트 쪽에서 렌더링하는 것을 Client side rendering이.. 2021. 4. 6. infinite table - 양방향 무한 스크롤 테이블(vue) 사용예제 코드 components/common/InfiniteTable.vue {{ item.text }} 시간 내 조회 결과가 존재하지 않습니다. 이어하기 {{ prop["filter"](item[prop.value]) }} {{ item[prop.value] }} 조회 결과가 존재하지 않습니다. 시간 내 조회 결과가 존재하지 않습니다. 이어하기 InfiniteTable.vue 사용하기 2021. 3. 31. VUE: component와 parent간 data 이동 - vue의 component와 parent는 prop으로 data 전달한다. 문제 발생 vue에서는 component에서 prop값을 직접 변경하지 못하게 하여 parent의 값을 바꾸지 못하게 설계되어있다. 해결방안 이를 해결하기 위한 방안 중 합리적인 것은 다음과 같다. 1. vuex 사용 2. sync/ $emit 사용 3. $emit을 이용한 customized event 사용 사용해본 결과 이 중에서 가장 추천되는 것은 vuex이나, 직관적인 것은 sync와 $emit 사용이다. 이는 vue version 2.3 부터 사용이 가능하다. 1. parent import UserAgentSelection from 'selection.js'; var vm = new Vue({ el: "#app", c.. 2020. 4. 1. vue를 사용하는 이유 0. "관리"가 쉽다. - 기존의 SSR을 이용한 jsp, jinja등의 백엔드에 종속된 언어와 달리 코드 베이스가 커져도 관리가 쉽다는 것이 가장 큰 이유이다. 뒤의 1~2번 이 그를 뒷받침한다.. 1. 데이터와 뷰단의 분리가 잘 되어있다. 1) 기존의 html / vanillascript data 전송에 name을 쓰거나 실제로 뷰에 직접적으로 쓰지 않는 데이터라도 hidden tag가 강요됨 = 보여주는 부분과 data의 분리가 안됨 First name: 2) VUE 기존의 js와 다르게 view 단(보여주는 부분)과 data부분(데이터)의 분리 First name: DATA의 분리가 잘되서 뭐하는가? - 처음에는 html + vanilla script/ jquery 와 차이가 나지 않을 수 있다... 2020. 3. 10. 이전 1 다음 728x90
