CodeHoon

깃허브를 이용하여 특정 Repository의 Collaborator로 지정되었을 때, 직접 url에 작성하는게 아니라 클릭 몇번으로 들어가는 방법입니다.

* Collaborator 를 승인하였는지 확인하고 진행해주세요. *

1. GitHub에 로그인 하고 본인 프로필 아이콘 - Settings 로 들어가주세요.

2. Repository를 클릭해주세요

 

 

3. Collborator로 지정된 Repository들을 살펴보실 수 있습니다.

이상입니다.

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

감사합니다.

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}`

이곳에 보시면 git access token을 생성하는 방법이 자세히 작성되어져 있으니 확인 바랍니다.

21년도 중순부터 github에서는 비밀번호 대신, 이 accesstoken을 발급받아 사용하는 방식으로 전환해오려는 노오력을 하고 있다고 합니다.

access-token 만드는 법은 간단합니다.

■ 순서

본인의 계정 아이콘에서 settings
-> <Developer settings>
-> OAuth Apps
-> Personal access tokens
-> Generate new token
-> 만료일자 설정
-> check항목 설정
-> Generate Token - 비밀번호 복사, 저장 등

❗ 비밀번호는 두 번 다시 볼 수 없으니 복사 후 저장하시길 바랍니다.

블록체인 지갑의 비밀번호와 유사하게 암호화된 비밀번호를 생성해주고, 이를 저장하는 방식입니다.

만약 비밀번호를 잊어버리시거나 잃어버리셨으면, 새로 access-token을 발급받아주세요!

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