CodeHoon

안녕하세요 상훈입니다.

react.js에서 return 내에 jsx로 html 요소를 작성해야할 때, 보통은 <div> 태그로 모든 항목을 감싸서 1개의 요소를 반환시키도록 합니다. 

그러나 이를 사용하고싶지 않을 때 Fragment를 사용할 수 있는데요,

이는 React Version 16 이상 사용이  가능합니다.

간단한 예시)

return (
	<div>
    	<h1> Hello? </h1>
    </div>
)

이렇게 return 부분이 작성되어져 있을 때,

return (
	<Fragment>
    	<h1> Hello? </h1>
    </Fragment>
)

혹은

return (
	<>
		<h1> Hello? </h1>
	</>
)

이렇게 작성할 수 있습니다.

안녕하세요 상훈입니다.

Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다. 

바로 App.vue |  Index.vue 에서 components를 넣는것이죠.

하지만, 차이점이 존재합니다. 

Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다.

예시를 보여드리자면,

<Hero /> 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다.

결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다.

이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다.

해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다!

이상입니다. 

안녕하십니까 상훈입니다. 

Vue.js 3, Vite를 이용하여 해당 프로젝트를 실행시키는데 아래와 같은 에러가 발생하였습니다.

해결방법

main.js 에 작성하였던 history: createWebHistory 부분 때문에 에러가 발생한 것 입니다.

createWebHistory 를 사용하기 위해 import를 하셨을 겁니다. 그런데, createWebHistory 는 함수로 작성해야합니다.

해당 에러가 사라지게 됩니다.

"도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 힘이 됩니다. 감사합니다.

참고

Vue.js 2, Vuetify, router, vuex, vue-chart.js 를 이용하여 프로젝트 외면을 꾸며주었다. 

물론 프로젝트 자체를 확인해보면 router, vuex를 사용하지 않은 것을 확인할 수 있다.

Vuetify의 active를 사용하여 버튼을 클릭하면 검정색 글씨로 변하는 버튼이 된다.

유튜브 강의 를 통해 볼 수 있었습니다.

강의 내용은 주로 Vuetify 내용을 다루고 있습니다.

Vue.js 에서 router 를 이용할 때 페이지 탭의 이름을 설정할 수 있다.

바로 router 의 index.js 에서 가능하다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

Home.vue의 meta.title : '  ' 의 값을 설정

그리고 rotuer 아래에 작성

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

전체 코드 예시

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

export default router

유용하게 사용하십쇼!

Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.

Vue.js 3 - tailwindcss3 를 사용하였습니다.

하는 방법 바로 가시죠.

우선 tailwind.config.js 파일이 /src 내에 있습니다.

이곳에다가 작성하는것인데요,

theme.extend. 내에 작성

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('pattern-bg.png')",
        'second-image-pattern': "url('sencond-bg.png')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.

사용 사례

이상입니다.

유용하게 쓰십쇼

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

해당 웹사이트 공유

에러 해결은 역시 stackoverflow

사용 환경 및 기술 : vue-cli 4.5.x, vue.js 3, router, reference, etc..

Vue.js 3 를 사용하여 동영상 강의를 시청, 그리고 드래그-드롭 기능을 구현하였다.

App.vue, Home.vue, DropZone.vue  이렇게 3가지 파일로 구분하였고, App.vue의 내용은 정말 없다

// App.vue
<template>
  <router-view/>
</template>

router/index.js 에서 Home.vue를 / 경로로 인식하게 하여 아예 Home.vue만 보이게 사용하였다.
(사실 굳이 router는 필요없었다.)

Home.vue에서는 DropZone.vue 파일을 컴포넌트로 사용한다.

// Home.vue

<template>
  <div class="home">
    <h1>Drag Or Drop</h1>
    <drop-zone @drop.prevent="drop" @change="selectedFile"></drop-zone>
    <span class="file-info">File: {{ dropzoneFile.name }}</span>
  </div>
</template>

<script>
import { ref } from 'vue'
import DropZone from '@/components/DropZone'

export default {
  name: 'Home',
  components: {
      DropZone
  },
  setup () {
    let dropzoneFile = ref('')	// ref를 통해 dropzoneFile이라는 변수로 drop-zone 컴포넌트에 데이터를 공유해준다.
    
    // drop : 파일을 끌고와 영역 안에 해당 파일을 놓았을 경우 발생하는 이벤트.
    const drop = (e) => {
      dropzoneFile.value = e.dataTransfer.files[0] 		// dataTransfer이라는 js의 기능을 사용하여 file의 첫번째를 인식
    }

    const selectedFile = () => {
      dropzoneFile.value = document.querySelector('#dropzoneFile').files[0]	 // DropZone.vue에 있는 input type="file" 태그
      // 파일이 인식되었을 때, 파일의 이름을 찾아서 출력해줌.
    }

    return { dropzoneFile, drop, selectedFile }
  }
}
</script>

Home.vue에 대한 간략한 설명.

. 'dropzoneFile' 이라는 변수를 ref로 선언하여 하위 컴포넌트에서 끌어다가 사용한다.
. event가 발생하는 것을 drop이 인식하여, dropzoneFile의 값에 이벤트의 값을 넣어준다. (올려놓은 파일에 대한 데이터 객체)
. 그리고 drop-zone의 변화에 따라 selectedFile이 호출되어 span 태그로 존재하는 dropzoneFile의 이름을 출력해줍니다. 
    - 파일이 인식되면 파일의 이름을 출력, 만약 인식되지 않았다면 파일의 이름이 없으니 공백으로 처리됨.

// DropZone.vue

<template>
  <div 
    @dragenter.prevent="toggleActive" 
    @dragleave.prevent="toggleActive" 
    @dragover.prevent
    @drop.prevent="toggleActive"
    :class="{'active-dropzone': active}"
    class="dropzone"
  >
    <span>Drag or Drop File</span>
    <span>OR</span>
    <label for="dropzoneFile">Select File</label>
    <input type="file" id="dropzoneFile" class="dropzoneFile"/>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'DropZone',
  setup () {
    const active = ref(false)	// 영역 인식 제어용
    const toggleActive = () => {	// 영역 인식 제어용
      active.value = !active.value		
    }
    return { active, toggleActive}
  }
}
</script>

DropZone.vue에 대한 간략한 설명

위의 사진처럼 dashed의 영역 안으로 drag file 요소가 인식되면 배경색이 변경될 수 있게 'active' 라는 변수를 선언하고,
    1. 영역 안으로 들어왔을 때 => active: true,  색이 초록색으로 변하도록 변경.
    2. 영역 바깥으로 나가거나 파일을 drop 시켰을 때 => active: false, 색이 흰색으로 돌아가게 변경.
    클래스 바인딩을 통해 active-dropzone 클래스로 active 변수를 바인딩 시켰다.

유튜브 강의 

Drag & Drop -MDN