CodeHoon

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: [],
}

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

사용 사례

이상입니다.

유용하게 쓰십쇼

사용환경 : window10, node-v: 16.14.0, npm-v: 8.2.0, Vue.js(React.js, Angular) 

Vue.js의 프로젝트를 vue-cli를 통해서 설치하려는데 node-sass 관련하여 자꾸 오류가 났다.

node-sass 버전과 node 가 지원하는 버전간의 오류라고 한 블로그에서 확인하였지만, 버전은 잘 맞췄었다.

해결방법을 찾고 또 찾아 여러 가지 방법을 시도해보았다.

1. npm cache 정리
2. npm verify
3. node uninstall & install 
...

그리고 마지막에 와서야 dart-sass로 설치하였다. (이래도 되냐...ㅠ)

그런데 npm에서 node-sass를 검색하던 와중에 대문짝만하게 아래와 같은 내용이 작성되어져 있었는데, 간략하게 줄여보자면, 
" LibSass 및 Node Sass는 유지 보수는 무한적으로 유지할 것이지만 더 이상 사용되지 않습니다. 새로운 CSS나 Sass 기능에 추가 기능이나 호환성을 추가할 계획도 없다. 여전히 그것을 사용하는 프로젝트는 dart-sass로 옮겨야 한다." 라는 것이었다.

왜지..? 오늘에서야 이 글을 보긴하지만..

그리고 이제 다시 프로젝트를 설치해보았다.

성공하였는데 너무 찜찜하다.

에러 문구

npm ERR! code 1
npm ERR! path D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli 'D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` failed Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb could not find "python". checking python launcher npm ERR! gyp verb could not find "python". guessing location npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:484:19) npm ERR! gyp ERR! stack at PythonFinder. (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:509:16) npm ERR! gyp ERR! stack at callback (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\graceful-fs\polyfills.js:299:20) npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass npm ERR! gyp ERR! node -v v16.14.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in:

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.

Javascript의 기초 중의 기초를 공부하게 되어 포스팅하게되었습니다.

1. 변수 선언
2. 황금규칙 (2/5)
3. 식별자
4. 산술연산자
5. Null & Undefind
6. Template Literal

1. 변수 선언

  - 자바스크립트에서 변수는 형식을 가지지 않는다.
  - 자바스크립트에서는 ' ; ' 세미콜론을 사용하지 않아도 된다.
  - const, let 을 사용하자
    → var 는 구시대의 유물
      : 변수명을 잘못입력하게 되면 새로운 변수가 선언됨, 전역변수로 등록이 되어 사방팔방에서 나의 변수를 사용하게 된다.

2. 황금규칙 5가지 중 2가지

1. var 대신 let, const 를 사용하자
2. 엄격모드(strictmode) 를 사용하자 - var와 키워드 없이 사용하는 변수선언은 자제하자

3. 식별자

  - 변수명은 반드시 식별자(identifier)의 일반 문법을 준수해야 한다.
  - 식별자는 [ 유니코드 문자, 숫자, 언더바, $ ] 등으로 구성된다.
  - 숫자는 첫번째 문자가 될 수 없다.
  - ' $ ' 로 시작하는 이름은 보통 도구, 라이브러리 에서 자주 사용한다.
  - ' _ ' (로우바) 를 변수명 앞이나 뒤에 붙여 비공개 임을 표시하기도 한다.
  - ' _ ' 를 사용하는 것보다 Camel Case 를 사용하는 것을 지향한다.

4. 산술연산자 

  - ' ++ ', ' -- ' ...
  - 산술연산자를 사용하는 것을 지양하자.  후위연술자 빼고
  - 산술연산자의 자동형변환 에 의존하지 말자.

5. Null 과 Undefind

  - ' null ' 혹은 ' undefind ' 중 하나만 선택해서 사용하자
  - ' null ' 은 예약어, ' undefind ' 는 예약어가 아니다.
  - 추가적으로 ' NaN, Infinity ' 라는 지역변수도 선언을 지양하자.

6. Template Literal (템플릿 리터럴)

  - ' ${  } '
  - ' <pre> ' 처럼 개행이 가능하다
  - 중첩이 가능하다.

const greeting = `${id.length > 0 ? `${age[0]}. ` : '' } ${id}`

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 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한빛미디어에서 리뷰어 이벤트를 하기에 정기적으로 개발관련 서적이 있으면 좋은 나는 신청을 하였고,
운 좋게 당첨되었다.

그래서 해당 글을 포스팅하게 되었다.

배송은 신경쓰고 있지않았지만, 약 2일-3일 정도 걸린 것 같다.
(월요일 신청, 화요일 당첨, 수-목요일 수령 이런 느낌)

교재는 상당히 깔끔하게 생겼다.

1장을 바로 펼쳐보았다. 이미 아는 것들이 많았지만, 그래도 복습겸 1장을 다 살펴보았다. 

내용은 정말 딱 필요한 핵심 내용만 작성되어져 있어서 가독성이 매우 우수했다.

고급 비구조화 - 객체 부분에서 잠깐 한동안 쳐다보게 되었는데 그래도 찬찬히 읽으니 이해가 잘 되었다.

역시 책은 1장부터 봐야 제맛.

앞으로 주기적으로 해당 교재에 대한 내용을 포스팅하려고 한다.

이상입니다.