똑같은 삽질은 2번 하지 말자

B(Block) 기본 하나의 아이템(component, box..)를 나타낸다. - 을 이용 .info-box { } E(Elements) 아이템(component, box..)를 이루고 있는 요소(element)를 표현할 때 사용한다. 아이템(component, box..) 이름 뒤에 2개의 밑줄 __ 을 사용하여 명명한다. .info-box__title {} .info-box__contents {} M(Modifier) 수정(Modifier)을 나타내는데 해당 아이템으로부터 기존의 속성에서 변경해서 사용하고 싶을때이다. component를 수정한다는 의미로, component명 뒤에 -- 를 사용하여 명명한다. info-box--blue {}

position: absolute 속성을 가진 자식은 부모의 position: relative or 을 기준으로 위치가 정해지는데 top right bottom left는 부모(position: relative or )의 어디 지점을 기준으로 삼을 것인지 지정 할 수 있다. top: 양수px - 상단기준. 아래로 이동 top: 음수px - 상단기준. 위로 이동 bottom: 양수px - 하단기준. 위로 이동 bottom: 음수px - 하단기준. 아래로 이동 left: 양수px - 좌측기준. 오른쪽으로 이동 left: 음수px - 좌측기준. 왼쪽으로 이동 right: 양수px - 우측기준. 왼쪽으로 이동 right: 음수px - 우측기준. 오른쪽으로 이동 뭔가 margin 개념으로다가 이해하면 좀더 쉽게 ..

code-spitting을 확인하는 과정중에 뭔가 제대로 기능 동작이 안되는것같은 느낌을 받았는데 preload prefetch 때문이었다. vue-cli에선 이 기능들이 기본으로 들어가 있기때문에 이걸 꺼줘야하는데 preload prefetch 기능을 끌려면 vue-cli로 프로젝트를 생성했기 때문에 웹팩설정파일이 노출이 안되어있는 상태이므로 vue.config.js에서 설정해준다. 첫 페이지 진입시 로드되는 컴포넌트를 봤는데 필요없는 친구들이 목록에 포함되어있는걸 확인했다. // vue.config.js module.exports = { chainWebpack: (config) => { config.plugins.delete('prefetch') config.plugins.delete('preload..

개요 vue-cli로 만든 프로젝트에서 webpack 설정을 변경하는 방법 이번에 webpack-bundle-analyzer을 써서 프로젝트의 번들사이즈를 분석해서 좀 줄이고자 해서 플러그인으로 추가하려고 하니 이 프로젝트는 vue-cli 4.x 로 생성한거라 webpack설정파일이 따로 존재하지 않았다? 그렇다 vue-cli 3.0이상으로 프로젝트를 생성했으면 webpack은 외부로 노출되어 있지않다. 잠깐 vue-cli 2 버전대와 그 이상을 비교해 보자면 vue-cli 2.x vue-cli 3.0 이상 Command vue init vue create webpack 설정파일 있음 없음 기본 생성 파일 그냥 깃헙 템플릿 다운 git clone 느낌 플러그인으로 이것저것 기능 추가가 가능 ES6 문법 ..

보호되어 있는 글입니다.

1:N , N:1 관계 정리 우선 ORM(ApplicationRecord < ActiveRecord)에게 테이블간의 관계를 확립시켜주는게 필요하다. 상품테이블이 있고 그 상품에는 브랜드와 카테고리라는 항목이 존재한다. 그렇게되면 모든 상품에는 하나의 브랜드, 카테고리가 존재하며 / 하나의 브랜드,카테고리에는 여러개의 상품이 존재한다. models/product.rb class Product < ApplicationRecord belongs_to :brand, foreign_key: :pr_br_id, primary_key: :br_id belongs_to :category, foreign_key: :pr_ca_id, primary_key: :ca_id end models/category.rb class ..

Typescript 로 마이그레이션 하면서 기록하고 싶은것들 2 vuex-module-decorator나 다른 타입 라이브러리들을 안쓰고 vuex에 타입시스템을 적용시키며 타입 추론이 되게하는 방법이다. (vue3가 되면 코어에 타입스크립트를 잘 씌울 수 있게 대응해 줬기때문에 vue2에서는 이렇게 한다는 느낌으로다가 그냥 가볍게 보자. ) 1. state에 타입을 씌우기 store/index.ts import Vue from "vue"; import Vuex, { StoreOptions } from "vuex"; import { state, RootState } from "./state"; Vue.use(Vuex); const store: StoreOptions = { state: state, }; e..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

이전 단계에서 기본적인 셋팅이 끝났으니 실제로 데이터를 넣어보자 우선 내가 쓰는 Firebase 요소들 (Realtime은 안쓴다.) 1. Nuxt + Composition API + Firebase에서 type추론이 잘 되는 firebase 플러그인화 https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject Nuxt TypeScript TypeScript Support for Nuxt.js typescript.nuxtjs.org 위의 this에도 context에도 변수를 넣기위해 combined-inject라는 기술을 이용했다.. (솔직히 아직 완벽하게 이해한것은 아님) nuxt/firebase는 안썼다.. 뭔가 설정하는게 이것저것 귀찮기..