본문 바로가기

전체 글51

퍼블리싱 초기 설정 관련 포스팅 퍼블리싱 경험을 토대로 하나씩 기준을 세워 작업을 한다. 그것을 정리해서 문서화했다. 1. 웹폰트 - ie8 이하 프로젝트의 경우, 웹폰트는 폰트명 각각 설정한다. - ie8 이하 프로젝트의 경우, 폰트 굵기는 normal, bold만 설정된다. - ie9 이상 프로젝트의 경우, 폰트명 하나에 굵기를 다양하게 지정 가능(100~900) - FOUT 현상을 줄이기위해 local을 먼저 불러올 것 - ie8 이하를 고려하지 않는다면, 과감히 .eot 파일을 버리는 것도 용량을 줄이는 방법 중 하나. 2. 네이밍 규칙 3-0. 전체 공통 - 시작을 대문자, 숫자, 특문으로 시작할 수 없다. - 의미-형태-순서-상태 순서로 사용 - 숫자는 두자리 정수를 사용한다. (ex: 01, 02, 03...) 3-1. c.. 2021. 6. 29.
Vue.js SEO를 위한 pre-rendering (pre-render-spa-plugins) 이리저리 여러가지들을 참고하여 내가 했던 방식을 서술합니다. 현재 새로운 프로젝트를 시작했다. 해당 프로젝트는 Vue cli 를 통해서 만드는데 작은 프로젝트지만 확장될 가능성이 있으며 무엇보다 사용자에게 검색이 잘 되어야한다는 조건이 있다. (게시판 두개와 해당 게시판을 운영할 백오피스 정도의 규모) 내가 해당 프로젝트를 하면서 프로젝트에 녹이고 싶은 두가지가 있는데 그것은 다음과 같다. WAI ARIA를 사용할 것 SEO(검색 엔진 최적화)를 신경 쓸 것 그 중 두번째 이슈에 대한 포스팅이다. Vue router를 쓴다는 전제하에 이 포스팅은 작성되었다. 많이들 알겠지만 Vue.js에서 SEO를 위해 크게 세가지 방식으로 쓰이는 것 같다. SSR (Server Side Rendering) Pre-re.. 2021. 6. 29.
Vue.js 처음에 알았더라면 좋았을 사소한 것들. Vus.js를 처음 사용하는 사람이 알았으면 좋았을.. 사소한 것들을 정리 한다. 1. Alias (별칭) 보통 vue 에서 PATH 에 대한 별칭으로 @ (이하 /src/) 를 쓰는데 style에서는 단독으로 쓰여지지 않는다. style에서는 ~를 앞에 붙여 적용하면 @가 반영된다. @import "~@/assets/css/common"; // style 2. 라이브러리 버전에 따른 빈번한 오류 CDN이 아닌, CLI를 통한 Vue를 쓸때 라이브러리 버전이나, 웹팩버전이 여러가지인데 .. 무조건 최신의 것이 좋은 것은 아니라는 것이다. 라이브러리마다 또는 Vue버전마다 상호 작용하는게 달라서 이를 맞추지 않는다면 빈번한 오류를 경험하게 된다. vue-cli를 통해서 프로젝트 생성시 최신의 버전이 설치되.. 2021. 6. 29.
전역컴포넌트, 지역 컴포넌트 선언 및 정리 방법 1 ) 지역컴포넌트 선언 먼저 아래는 new Vue(생성자)를 이용한 Vue 의 기본단위인 인스턴스라고 한다. new Vue({ el: '#component', mixins: [mixin, linkUrlMixin, deviceMixin, webViewBridgeMixin], // 공통메서드 가져와 씀 created() { // 인스턴스가 만들어질 때 (데이터 초기화 목적) }, mounted() { // 인스턴스가 dom에 붙을때 (dom 조작 목적) }, data : function() { return { // 데이터 정의 } }, methods : { // 만들어두는 함수, 동작때 쓰임 }, computed : { // 계산식 , 변수화가 됨. }, props : [], // 다른 컴포넌트에서 .. 2021. 6. 29.
Vue.js 문법 정리 해당 게시물에 계속해서 업데이트합니다. {{변수명}} // 문법 new Vue({ el : '#test', data : {}, // 데이터 변수 method : {}, // 함수 computed : {} // 계산식 }) 1. v-html="vue변수명" - 태그 변수를 넣을때 사용. 부모 엘리먼트에 속성으로 넣어주면 안에 만들어짐. // js new Vue({ el : '#test', data : { tag : 'test' } }) // html //div 안에 tag의 할당된 태그가 넣어짐. 2. v-bind:속성이름 - 속성에 뷰 변수를 넣을때 사용 v-bind:href="vue변수명" - 약어 : // js new Vue({ el : '#test', data : { site : 'http://te.. 2021. 6. 29.
Vue.js 환경 만들기 환경 설정에 대한 정리 포스팅입니다. node.js 다운로드 및 설치 vscode 에 터미널로 프로젝트를 할 폴더에 npm install (vscode에 Veter 설치) 터미널 vue install -g @vue/cli​ // vue-cli 설치 vue create 프로젝트명 // 프로젝트 생성 * create 명령어 썼다가 오류 발생 찾아보니 vscode가 기본으로 설정되는 터미널이 파워쉘을 쓴다고 해서 문제가 된 듯하다. 기본 터미널을 cmd로 바꿔줘야한다고 한다. vscode 에서 ctrl+shift+p 로 shell default 를 cmd로 변경해도 같은 오류가 나서 결국 cmd 창을 켜서 했더니 프로젝트 만들어진다. 개짜증 * npm을 통해 다운로드한 모듈을 다음에도 패키지로 다운로드 할 수.. 2021. 6. 29.