반응형 vuejs21 Vue.js 프로젝트 구조 추천 Vue.js 를 이용하여 프로젝트를 생성 후, 고민이 빠지게 되는 것 중 하나가 프로젝트 구조입니다. Back-End 프로젝트의 경우 대부분 비슷한 구조를 갖고 개발을 시작하기 때문에 협업을 할 때 서로 이해하기가 좋지요. 가령 Service, Controller, Dao(Mapper), Dto(Model) 등으로 분류 후 하위에 구체적인 구현체를 생성합니다. Vue.js 의 Convention 가이드에도 프로젝트 구조는 특별히 언급이 되어 있지 않습니다. 그래서 여러 사람들의 프로젝트의 그 간의 경험으로 개발 및 유지보수에 좋은 구조를 소개드립니다. Vue.js 는 Router, Store, API 그리고 각 페이지를 정의한 Component 로 구분할 수 있습니다. 그리고 mixin, plugin, .. 2021. 7. 19. Vue.js : Store Module Vue에서 Store를 정의하다보면 하나의 큰 객체 안에 너무 많은 데이터를 저장하게 됩니다. 규모가 커지며 저장소가 매우 비대해지기 때문에 모듈 단위로 나누어 Store를 관리할 수 있습니다. 다음과 같이 모듈을 나누어 정의하고, Vuex의 modules를 이용하여 분리할 수있습니다. 그리고 modules 내 정의한 모듈 이름에 따라 호출이 가능합니다. const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ mod.. 2020. 4. 24. Vue.js : 조건부 렌더링 사용하기 프로그래밍을 하면 반복문, 조건문을 자주 사용하게 됩니다. Vue 에서도 조건문에 해당하는 문법을 지원하고 있습니다. 다음과 같이 v-if, v-else-if, v-else를 활용하여 조건부 렌더링을 수행할 수 있습니다. A B C 그리고 v-show를 활용하면, 항상 렌더링되어 DOM안에 정의되어 있도록 할 수 있습니다. 다만, 조건에 따라 화면에 보여줄지를 결정할 수 있는 것이지요. Hello World ! 따라서 조건부 행위가 자주 일어난다면 v-show를 사용하고, 그렇지 않다면 v-if를 활용하면 됩니다. v-show는 초기 렌더링 비용이 높고, v-if는 조건부 행위 따른 렌더링 비용이 높기 때문입니다. 2020. 4. 24. Vue.js의 v-flex 사용하기 Vuetify.js를 이용하여 Moden-Web방식의 페이지를 보다 쉽게 구현할 수 있습니다. Vuetify를 이용한다면, v-container, v-layout, v-flex 3계층으로 구성하여 코드를 작성하게 됩니다. 상황에 따라 v-container 대신 v-form을 사용하기도합니다. (v-flex로 이루어진 하위 컴포넌트를 상위 컴포넌트에 넣을 때) v-flex를 사용하게 되면, xs, sm, md, lg, xl 등의 키워드를 보게 됩니다. 기존 Bootstrap 등 다른 Framework도 마찬가지이지요. 각 키워드의 의미 xs : mobile sm : tablet md : notebook lg : desktop xl : 4k monitor 너비 사이즈를 총 12라고 보고, 이를 적절하게 나누.. 2020. 4. 24. Vue.js 완벽가이드 : (13) 서비스 배포 환경 구성 13. 서비스 배포 환경 구성 13-1. CLI로 생성한 프로젝트 배포 npm run build는 배포 명령어 입니다. 그 동안 만든 vue-news 폴더의 터미널을 실행합니다. 그리고 npm run build를 실행하면, dist라는 폴더와 파일이 생성됩니다. dist내 파일을 업로드하여 서비스를 구동할 수 있습니다. 13-2. Netlify를 이용한 배포 실습 netlify 사이트를 접속하여 sign-up을 하고 github를 선택합니다. 그리고 github의 repository를 선택합니다. build command에 npm run build를 입력하고, publish directory에 dist를 입력합니다. 그리고 deploy를 실행합니다. preview를 클릭하면 사이트를 미리 확인할 수 있습.. 2020. 4. 23. Vue.js 완벽가이드 : (12) 컴포넌트 디자인 패턴 12. 컴포넌트 디자인 패턴 컴포넌트 디자인 패턴 Common - 기본적인 컴폰언트 등록과 컴포너트 통신 Slot - 마크업 확장이 가능한 컴포넌트 Controlled - 결합력 높은 컴포넌트 Renderless - 데이터 처리 컴포넌트 12-1. Common 디자인 패턴 End 단의 컴포넌트가 표현되도록 구성하고 상위 컴포넌트에서 호출하는 기본적인 방식을 말합니다. /components/AppHeader.vue를 작성하여 Header 역할의 Component를 작성합니다. Vue Project에서는 다음과 같이 사용이 가능합니다. /components/FetchData.vue에서 response와 loading 데이터를 생성하고, render의 $scopedSlots을 이용하여 데이터를 노출시킵니다. .. 2020. 4. 23. 이전 1 2 3 4 다음 반응형
