CodeHoon

npm으로 생성한 프로젝트를 원하는 임의의 포트로 실행하는 방법

// 3100포트 번호로 해당 프로젝트 실행 
$ npm run serve -- --port 3100

■ 결과

localhost:3100  으로 해당 프로젝트가 실행됨

깃 허브(Github)에 있는 본인의 레파지토리(Repository) 와 연결하는 방법에 대해 포스팅하겠습니다.
순서대로 해주세요

본인의 깃 레파지토리 주소

빈 폴더 한곳에서 진행해주세요. (git과 연결되어있는 폴더 내부를 지양해주세요)

1. git init
2. git remote add origin "git repository url"

# repository와 연결이 잘되었는지 확인
3. git remote -v
4. git pull

# git repository에 이미 데이터 자체가 있다면,
5. git clone "git repository url"

만약 가장 처음 등록하여 개인 정보 자체가 없을 경우 개인정보를 등록해줍니다.

$ git config --global user.email "깃허브 이메일주소"
$ git config --global user.name "깃허브 이름"

그리고 본인이 원하는 내용 한개를 추가해서 add 하고 commit을 해주면 된다.

■ 이 글을 쓰게 된 이유

지난번에 git pull을 통해 repository와 연동하려고 하였는데 실패하고, 해당 내용이 모두 분실되어 다시 restore을 진행하고,
전체적인 폴더 구조를 변경하는 번거로움(분노)이 있었다. 

항상 먼저 작업을 할 때에는

▶ 하위 git 경로와 겹치지 않게,
▶ 해당 branch clone을 우선적으로 진행해주어 최신화를 해주는 것을 잊지 말도록 하자.

참고 블로그

깃허브(Git Hub)에서 코드를 가져오는 방법은 다양합니다.

1. 다운로드
2. 명령어 
3. etc

사실 여러 모든 내용이 전부 "Clone"을 하는 또다른 형태입니다.

그래서 근본인 clone 명령어만 수기하도록 하겠습니다.

$ git clone "repository url"

아주 간단합니다.

Vue.js에서 미니프로젝트를 제작하려고하는데 데이터베이스가 필요하다.

할때 FireBase를 사용하면 된다. Google에서 만들었다.

시작하기를 눌러서 시작 할 수 있다.

Firebase 프로젝트 "add" 를 눌러서 프로젝트를 생성할 수 있다.

프로젝트 명을 지정하고 "계속"을 누르면 끝. 만드는 것이 상당히 간소하다.

지난 포스팅에서 LAPLATA COIN을 리그 오브 레전드를 플레이하면서 얻을 수 있다고 포스팅한 내용이 있다.

현재까지 모은 라플라타 코인 내역은 아래와 같다.

게임을 할때도 있고 안할 때도 있는데, 그것을 감안하면 적절하게 모아지는 것 같다.

패배하면 5코인, 승리하면 8코인 정도 주는 듯하다.

상장했으면 좋겠다.

10억가야지~

Vue.js 에서 Bootstrap을 사용하고 싶을 때 cdn을 이용하는 방법 이외에 npm, yarn 등을 이용해서 직접설치를 한다.

그래서 나온 것이 BootstrapVue 이다.

# With npm
$ npm install vue bootstrap bootstrap-vue

# With yarn
$ yarn add vue bootstrap bootstrap-vue

이곳이 링크이다. 참고 바람

◆ Vue.js 3 에서는 아직 적용이 안되니 주의 바랍니다 ◆

Vue.js 에서 class에 변화를 주고 싶을 때 사용한다.
class태그의 변화는 data 객체에 있는 데이터의 변화로 인해 바뀌게 설정하는 것이 일반적이다.

<span 
  @click="changeStatus(index)" 
  class="pointer"
  :class="{'text-danger fw-bold': task.status ==='to-do',
  'text-warning': task.status === 'in-progress',
  'text-success': task.status === 'finished'
  }"
  >
  {{ firstCharUpper(task.status) }}
</span>

<script>
data () {
    return { 
      availableStatuses: ['to-do', 'in-peogress', 'finished'],
      tasks: [
        {
          name: 'Steal bananas from the stroe',
          status: 'to-do'
        }
    }
  },
  methods: {
  	changeStatus(index){	//메서드명
      let newIndex = this.availableStatuses.indexOf(this.tasks[index].status)	// status의 index 파악 후 newIndex 할당
      if(++newIndex > 2) newIndex = 0		// 만약 newIndex가 2초과시, newIndex = 0
      this.tasks[index].status = this.availableStatuses[newIndex]		// avaiableStatuses[] 배열의 내용 순차 입력
    },
  }
</script>

이렇게 span 태그를 클릭할 때마다 availableStatuses [] 내 내용이 순차적으로 span태그에 출력이 된다. 

이럴 때, 해당 문구(availableStatuses[ ]) 에 따라서 class를 바꾸고 싶을 때 사용한다.

해당 내용은 글로 보기에는 난해한 부분이 있으므로,
직접 손으로 작성해나가면서 이해하는것이 좋다.

이상

- 조금 더 쉬운 예제를 가지고 오는건 어떨까 싶기도하다.

Vue-cli webpack4.0 version 에서 sass를 개별 설치하려고

$ npm i node-sass
$ npm i sass-loader

를 했는데 에러가 발생하였다.

node-sass는 정상적으로 설치가 완료되었지만, sass-loader를 설치하지 못했다.

그래서 개발자버전으로 다운로드 하려했지만 또 에러를 뱉어냈다.

$ npm i sass-loader -D

■ 해결방법

Vue-cli webpack 4.0의 버전은 그에 맞는 알맞은 버전의 sass를 다운로드 받아야한다고 명시되어져있다.

$ npm install -D sass-loader@10.0.5 node-sass

10.0 version을 다운받아도 무방하다.