Vue3 Router

router는 ~/경로와 같이 이동 경로를 설정할 수 있는 라우팅을 지원한다. 라우터를 사용하기 위해 router.js, main.js, App.vue 3가지 파일을 수정해야 한다. router.js: 없다면 생성 import { createWebHistory, createRouter } from "vue-router"; import Home from './components/HelloWorld.vue' import SampleComp from './components/SampleComp.vue' const routes = [ { path: "/", name: "home", component: Home, }, { path: "/sample", name: "sample", component: SampleC..

  • format_list_bulleted 기타 주제/웹
  • · 2022. 9. 30.

Vue3 Component

Vanila Js를 사용하다가 Vue를 해야겠다고 마음 먹은 가장 큰 이유가 Component이다. 컴포넌트를 활용하면 블록을 조립하듯 여러 블록을 별도로 선언해두고 필요할 때 가져와 조립할 수 있다. 이렇게하면 중복되는 코드를 줄일 수 있고, 동시에 유지보수도 편해진다. Component ... 헤더 부분을 작성해 별도의 vue 파일을 만든다. 그리고 이 코드를 다른 vue 파일에서 재활용할 수 있다. 해당 vue 파일을 import한 후, components에 등록한다. 그러면 형태로 활용할 수 있다. props 함수의 재활용을 위해 파라미터를 사용하듯, 컴포넌트에서는 props를 통해 데이터를 넘겨줄 수 있다. {{para}} props에 사용할 파라미터를 선언해준다. 이때 데이터 타입이나 기본값을..

  • format_list_bulleted 기타 주제/웹
  • · 2022. 9. 30.

Vue 시작하기

보호되어 있는 글입니다.

  • format_list_bulleted 기타 주제/웹
  • · 2022. 9. 30.

SCSS + Tailwind 세팅

npm을 활용해 패키지를 다루기 때문에 node.js가 설치되어 있어야 진행 가능하다. 설치 gulp > npm i -g gulp-cli > npm init > npm i gulp -D gulp 문서에 적힌 설치 방법이다. npm이 설치된 후, 위 코드를 순서대로 입력해 gulp를 설치한다. (npm init할 때 내용 입력을 요구하는데 엔터를 눌러 자동 설정할 수 있다.) SASS (SCSS) > npm i sass gulp-sass gulp-csso node-sass -D gulp-csso는 css 코드를 최소화할 때 사용하고, 다른 패키지는 scss를 css로 변환할 때 사용한다. Tailwindcss > npm i gulp-postcss tailwindcss autoprefixer -D tailw..

  • format_list_bulleted 기타 주제/웹
  • · 2022. 1. 30.

[TIL] Django - pk로 페이지 접근, 404 설정

보호되어 있는 글입니다.

  • format_list_bulleted 기타 주제/웹
  • · 2022. 1. 20.

[TIL] Django - Class Based View

보호되어 있는 글입니다.

  • format_list_bulleted 기타 주제/웹
  • · 2022. 1. 19.