# SCSS 폴더 구조 @/assets/scss ㄴabstracts ㄴ_mixins.scss ㄴ_variables.scss ㄴbase ㄴ_reset.scss ㄴ_typography.scss ㄴcomponents ㄴ_buttons.scss ㄴ_dropdown.scss ㄴlayout ㄴ_footer.scss ㄴ_forms.scss ㄴ_header.scss ㄴ_navigation.scss ㄴpages ㄴ_contact.scss ㄴ_home.scss ㄴ_index.scss// _index.scss // 위에 모든 SCSS를 한 곳으로 모으는 css @import "abstracts/mixins"; @import "abstracts/variables"; @import "base/reset"; @import "ba..
vue.js 에서 이미지 파일 접근 방식은 2가지가 있다. - 정적 파일 접근 - 동적 파일 접근 동적 파일 접근 시 이미지가 나타나지 않을 경우에 대한 해결방법을 정리한다. (require 로 받을 수 있다.) export const footerText = [ { title: "github", desc: "사이드 프로젝트 및 포트폴리오에 대한 정보들이 기록되어 있습니다.", logo: require("../assets/img/logo_github.png"), link: "https://github.com/sgpark94", } ]
computed - "캐싱" 기능을 갖고 있기 때문에 반복되는 연산으로 인한 사이트 과부화를 줄여줄 수 있다. (특히 사이트가 커질수록!) - 함수가 아니므로 (함수로 구현할 순 있으나) 결과적으로는 하나의 데이터로 사용되기 때문에 ()가 붙지않는다. 참고강의(유료) : 패스트캠퍼스 - Vue.js 압축 완성 올인원 패키지 Onlne. 2강 Vue 가이드 문서 따라하기 Ch 03. Vue 가이드 - 06. computed 캐싱
반응성(형) : vue instance 내 data 옵션에 미리 정의되어 있는 값만 가지게 된다. -> 당장 필요하지 않은 data 라도 반응성을 가지게 하려면, vue instance가 생성될 때 정의가 되어 있어야 한다는 점! 라이프 사이클 (Life-cycle) * 표기 : 많이 쓰임. 1) beforeCreate vue instance 생성 전 상태이므로, "data" 정의 시 undefined가 선언된다. - 이 사이에 반응성(형)이 주입된다. - 2) * created vue instance 생성 후 상태이므로, "data" 정의 시 선언한 값이 나타난다. 3) beforeMount html과 vue instance가 연결되기 직전인 상태로, html의 요소가 무엇인지 모르므로 refs의 값이..
Monaka 사이트 프로젝트에서 BE 없이 LocalStorage로 데이터를 저장해서 작업해보기로 하여,vuex-persistedstate를 추가해보았다. 1) vuex-persistedstate를 추가할 것.$ npm install vuex-persistedstate 2) store/index.js에 아래 밑줄 코드를 추가할 것. =>이 후 데이터 입력시 LS (LocalStorage) 에 value 와 key값으로 저장된다. c.f) 기능확인용으로 모듈화 없이 기능만 돌아가도록 간단히 한 것!모듈화를 할경우 파일도 추가해줘야 하고 필요할 때 찾아볼 것.
기본적으로 dist 폴더로 build가 되어서 github setting 페이지에서 확인시 build 에러메시지를 접하게 되었다. (Source를 보면 폴더선택에서 /dics가 아닌 /docs만 존재한다. 😥) 나는 아래와 같은 방식으로 해결해보았다! 1) vue.config.js 파일에 outputDir: 'docs' 를 추가한다. (c.f - publicPath는 프로젝트 url 마지막 부분에 /Monaka(프로젝트명)를 추가하고자 넣어준 것 !) 1-1) npm run bulid 후 docs가 생성된다. 2) commit / push 후 github setting 페이지에 다시 와보면 bulid가 성공적으로 된것을 확인할 수 있다.