맥에서 npm 패키지를 설치하다가 오류가 난적이 있습니다.

해당오류는 gyp: No Xcode or CLT version detected! 과 같이 나옵니다.

저의 경우에는 nuxt 신규 프로젝트 하려고 명령어를 치다 다음과 같은 오류를 발견했습니다.

npx create-nuxt-app frontend 

이 명령어를 치니 패키지를 가져오는 부분에서 오류가 생겼습니다.

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)

이런경우 xcode 가 문제인 경우라 다시 재설치를 해주면 되겠습니다.

1. Xcode 설치 경로 확인

xcode-select --print-path

변경하지 않았다면 경로는 /Library/Developer/CommandLineTools으로 나타날 것입니다.

2. Xcode 제거

sudo rm -r -f /Library/Developer/CommandLineTools

위에 명령어를 실행하면 제거가 됩니다.

3. Xcode 재설치

xcode-select --install

위에 명령어로 Xcode를 다시 설치해주시면 됩니다.

저 같은 경우에는 명령어로 xcode 재설치가 안되서, 애플 앱스토어에서 설치를 했습니다.

참고문헌

https://medium.com/flawless-app-stories/gyp-no-xcode-or-clt-version-detected-macos-catalina-anansewaa-38b536389e8d

서버사이드 렌더링이 가능한 nuxt 를 하려고 한다.

nuxt 장점으로는 서버사이드 렌더링이 가능하다는 점과, vue 에서 각각 해줘야 하는 일들을 한번에 처리 가능하다는 점이다.

Nuxt.js 설치

create-nuxt-app을 npx를 통해서 설치하면된다. npx는 NPM 5.2.0 버전 이후 기본적으로 제공되기 때문에 별도로 설치할 필요는 없다.

$ npx create-nuxt-app <project-name>

이미 npm 을 설치했다면, npx 를 따로 설치할 필요가 없다.

나는 해당 폴더를 생성하고, 프로젝트 명을 frontend 라고 했다.

npx create-nuxt-app frontend 

입력하면 다음과 같이 프로젝트가 생성된다.

나는 vuetify 를 기본 ui 로 설정, eslint 및 jest 를 선택했다.

제대로 빌드가 된다면 다음과 같이 로그가 뜬다.

npm install 로 설치 후 npm run dev 로 실행 했다.

뭔가 nuxt 에서 업데이트가 많이 된것 같다. 바로 기본적으로 레프트 사이트바랑 헤더 네이게이션 등 기본 구조를 다 만들어 놨다.

참고문헌

https://kdydesign.github.io/2019/04/10/nuxtjs-tutorial/ [시작명령어 및 nuxt 기본 설명]
https://ko.nuxtjs.org/guide [nuxt 공식문서]

“entry” — String Vs Array Vs Object

웹펙에는 entry 라는게 있다.
entry 라는게 제일 시작점이다.

“entry”는 root 모듈 또는 시작 지점이 무엇인지 Webpack에게 알려준다. “entry”는 String, Array, Object 형태로 될 수 있다. 이것이 바로 혼란스러운 점인데 다른 타입은 결국 다른 목적에 사용된다고 생각하면 된다.

만약 당신이 시작지점이 1개라면 다음과 같은 output format을 사용할 수 있다.

다른 형식이지만 결국 같은 output

entry - Array

만약 당신이 서로간 의존성이 없는 여러개의 파일을 사용하고 싶다면 Array 형식으로 사용하면 된다. 예를 들어 HTML에 “googleAnalystic.js” 가 필요 할수 있다. 그러면 “bundle.js” 끝에 다음과 같이 추가하도록 지정하면 원하는 output이 된다.

의존성 없는 여러 파일 output

entry-object

만약 당신이 SPA(Single Page App)가 아니라 다중 페이지 어플리케이션을 개발한다면, entry-object를 사용하여 한번에 다중 bundle을 만들어서 사용 할 수 있다.
아래 설정 파일은 2개의 bundle JS파일을 생성한다.(indexEntry.js , profileEntry.js 가 나오며 index.html, profile.html에 각각에 사용할 수 있다.)

다중 bundle output

Usage:

//profile.html
<script src=”dist/profileEntry.js”></script>

//index.html
<script src=”dist/indexEntry.js”></script>

Note : “entry”의 객체 key가 파일 이름으로 매핑된다.

entry-combination

당신은 entry Object안에 Array 타입을 사용 할 수 있다. 예를 들어 아래 설정을 보면 3가지 파일이 생성된다.(3개의 파일이 있는 vendor.js 와 index.js , profile.js가 생성된다.)

Object안에 Array output

output — “path” Vs “publicPath”

-- 작성중

webpack CLI(Command Line Interface) VS webpack-dev-server

-- 작성중

빌드를 해서 할지 웹펙서버를 통해 서비스 하는 차이에 대한 설명. 참고문헌에 있다.

참고문헌

https://github.com/FEDevelopers/tech.description/wiki/Webpack%EC%9D%98-%ED%98%BC%EB%9E%80%EC%8A%A4%EB%9F%B0-%EC%82%AC%ED%95%AD%EB%93%A4 [Webpack의 혼란스런 사항들]

화면구성상 앞에 절대 위치로 텍스트를 놓는 경우 앞에 텍스트가 뒤를 가려서 클릭이 안되는 경우 가 있다.
텍스트가 앞에 위치해 있어도 뒤가 클릭되게 하려면 pointer-events 속성을 이용해서 뒷 배경을 정상적으로 클릭할 수 있게 할 수 있다.

pointer-events: 클릭 이벤트 허용 여부

pointer-events: none 을 사용하면 앞에 내용이 클릭이 안되고 뒤부터 클릭이 된다.

참고문헌

https://ahnheejong.name/articles/less-famous-css-properties/ [잘 알려지지 않은 유용한 CSS 속성들]

해당 지점위에 마우스 커서를 손모양으로 바꾸고 싶을때가 있습니다. 이 때 사용하는 CSS 속성이 cursor 입니다.

개요

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

auto: 자동
default: 기본값 (화살표)
pointer: 손가락 모양 (클릭 가능한 버튼)
wait: 로딩

사용법

.btn-wait { cursor: pointer }

<style type="text/css">
    .cursors span{
        display: inline-block;
        margin: 5px;
        padding: 5px 10px;
        background-color: #d2f4ff;
        border: 2px solid #09c;
    }
</style>

<div class="cursors">
    <span style="cursor: auto">Auto</span>
    <span style="cursor: crosshair">Crosshair</span>
    <span style="cursor: default">Default</span>
    <span style="cursor: pointer">Pointer</span>
    <span style="cursor: move">Move</span>
    <span style="cursor: e-resize">e-resize</span>
    <span style="cursor: ne-resize">ne-resize</span>
    <span style="cursor: nw-resize">nw-resize</span>
    <span style="cursor: n-resize">n-resize</span>
    <span style="cursor: se-resize">se-resize</span>
    <span style="cursor: sw-resize">sw-resize</span>
    <span style="cursor: s-resize">s-resize</span>
    <span style="cursor: w-resize">w-resize</span>
    <span style="cursor: text">Text</span>
    <span style="cursor: wait">Wait</span>
    <span style="cursor: help">Help</span>
</div>

결과물

참고문헌

https://ofcourse.kr/css-course/cursor-%EC%86%8D%EC%84%B1 [cursor 속성]

프론트에서 개발하다보면 api 중에 시간소요가 1초 이상 소요되어 화면에 랜더링 되기 전에 어떤 구성된 화면이 나왔으면 하는 순간이 있습니다.

왜냐하면 api 로 데이터를 받아올 때 까지 로딩되는 화면에는 아무런 리스트 화면도 보여주지 않으면, 사용자 입장에서 어색한 느낌이 있습니다.

이럴때 쓰는 로딩 방식보고 skeleton 로딩이라고 합니다.

vue 에 라이브러리가 있나 찾아보았는데, 라이브러리 보다 css 만으로도 처리가 가능한 리소스를 찾아 내용 정리합니다.

1. vue skeletonBox 소스

<template>
  <span
    :style="{ height, width: computedWidth }"
    class="SkeletonBox"
  />
</template>

<script>
export default {
  name: `SkeletonBox`,
  props: {
    maxWidth: {
      default: 100,
      type: Number
    },
    minWidth: {
      default: 80,
      type: Number
    },
    height: {
      default: `1em`,
      type: String
    },
    width: {
      default: null,
      type: String
    }
  },
  computed: {
    computedWidth () {
      return this.width || `${Math.floor((0.9 * (this.maxWidth - this.minWidth)) + this.minWidth)}%`
    }
  }
}
</script>

<style lang="scss">
.SkeletonBox {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  background-color: #DDDBDD;
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(#fff, 0) 0,
      rgba(#fff, 0.2) 20%,
      rgba(#fff, 0.5) 60%,
      rgba(#fff, 0)
    );
    animation: shimmer 5s infinite;
    content: '';
  }
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}
</style>

2. 사용예시

<template>
<table summary="샘플">
  <colgroup>
    <col style="width:200px"/>
    <col style="width:340px"/>
    <col style="width:150px"/>
    <col/>
  </colgroup>
<tbody>
  <template v-if="isFirstLoading">
    <tr>
      <th><skeleton-box/></th>
      <td colspan="3"> <skeleton-box /><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
    <tr>
        <th><skeleton-box/></th>
        <td colspan="3"> <skeleton-box/><skeleton-box/><skeleton-box/></td>
    </tr>
  </template>
  <template v-for="listItem in list">
   <!-- list 내용 -->
  </template>
</tbody>
</template>

<script>
import SkeletonBox from '@/components/common/SkeletonBox'

export default {
  name: 'ModalAttribute',
  components: {
    SkeletonBox
  },
  data () {
    return {
      isFirstLoading: true,
      list: []
    }
  },
}

위 소스코드가 예시로 짠 소스코드입니다.

간단히 설명하자면, isFirstLoading 이 true 이면, skelecton 박스가 보이게 되는 처리입니다.

아래 참고문헌의 코드를 그대로 구현 한 내용이고 다른 위의 예시 소스와 다른 내용은 라인 넓이를 랜덤함수로 구현된 내용은 수정했습니다.

넓이와 세로 px 값을 넣어줄 수 있어, 별다른 npm 다운 없이 위 소스코드만 복붙해서 사용가능합니다.

참고

https://markus.oberlehner.net/blog/skeleton-loading-animation-with-vue/  [skeleton 화면 구성]

익스플로러 및 하위버젼의 브라우져를 제공하기 위해서는 polyfill 라이브러리 사용해야함.

npm install --save @babel/polyfill

위의 명령어로 설치하면 7버젼 이상이 설치됨.

babel-polyfill 은 6버젼

웹펙이 있으면

{
  entry: ['@babel/polyfill', './app.js'],
}

아니더라도 제일 entry point 에

import '@babel/polyfill'; 

추가하면 된다.

참고문헌

https://www.zerocho.com/category/ECMAScript/post/57a830cfa1d6971500059d5a

eventLister 제거시 같은 메소드를 사용해야 함.
콜백 메소드로
window.addEventListener('keyup', function(event) {
//~
})
다음 처럼 사용시 이벤트 제거가 안됨.
event 는 vue beforeDestroy 생성주기에 작성을 해야함. 안그러면 event 가 계속 살아 있음.

 mounted () {
    // let context = this
    window.addEventListener('keyup', this.doStuff) // enter 클릭시 alert 창 닫기
  },
  beforeDestroy () {
    window.removeEventListener('keyup', this.doStuff)
  },
  methods: {
    doStuff (event) {
      if (event.keyCode === 13) {
        this.callEvent()
      }
    },
    callEvent () {
      this.$emit('close')
    }
  }