CodeHoon

불로소득 진짜 원한다.

어디서 로또 안떨어지나.

#이모티콘11주년

안녕하세요. 상훈입니다.

✔ 발생 환경

Java - springfox 를 의존성 주입하여 프로젝트 git에 push 한 것을 pull 받아 바로 구동하려고하는데 

환경 : VSCode.

빨간줄이 떠버렸습니다.

The import springfox cannot be resolvedJava(268435846)

이런 안내문구와 함께요.

✔ 오류 발생 원인 

😢 이 에러가 발생한 건 Build 때문입니다.

✔ 해결 방법

✨Build를 진행하도록 하겠습니다.

build.gradle  > 우클릭  > Reload Projects 를 해주세요.

이렇게 새로운 빌드가 되는것을 보실 수 있습니다.

build가 완료되면 에러표시가 사라진것을 보실 수 있습니다.

만약 그래도 안사라지시면, vscode를 한 번 종료 후, 재구동 시켜서 build를 진행해주세요!

이상입니다.

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

putty ssh-key 발급방법입니다.

1. puttygen 접속

2. Generate 클릭

3. 진짜로 마우스 오버해서 흔들어야 됨..

4. 사용할 id, pw 작성

Key comment : id
Key passphrase : pw
Confirm passphrase : pw chk

5. Save Private Key 클릭

저장해주세요. (putty 에서 파일 불러오기 할 것이기 때문에 삭제 하시면 안됩니다)

6. putty 실행

7. ppk 파일 open 해주세요

완료.

8. 만약 GCP (구글 클라우드 플랫폼) 을 사용중이라면,
권한이 있는 사람에게 key 값을 보내주어 해당 key 의 접속허용을 설정해야한다.

참고

gcp(google cloud platform)으/로 Ubuntu linux 서버를 만들고, ssh 외부 접속 허용을 해놨는데 계속 접속이 안되나 했네요.

안녕하세요 상훈입니다.

Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다.

1) Nuxt.js 3
2) Vue.js 3
3) TailwindCss
4) TypeScript
5) Vue Router
6) Vuex
7) gh-pages

를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.)

1. 디렉터리 구조

2. nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

3. postcss.config.js

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. tailwind.config.js

// tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. tailwind.css (기호에 따라 파일명 설정 index.css, main.css 등)

// assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이렇게 설정하고 구동시 정상출력을 확인하였습니다.

안녕하세요 상훈입니다.

Nuxt 3.0 버전을 이용해 gh-page 를 사용하여 git hub page를 자동 배포되도록 설정하려고하는데,
deploy가 동작하지 않았습니다.

npm run deploy

> deploy
> gh-pages -d build

ENOENT: no such file or directory, stat ~

이 말인즉슨 해당 경로에 파일 혹은 폴더가 없다. 

라는 뜻인데요, 저희 프로젝트의 기본 경로를 보시면 동일한 경로가 없을 것으로 판단됩니다.

package.json을 확인해주시면,

"deploy" script 의  gh-pages -d .output/public  이라고 작성되어져있는데, 마지막 .output/public 은 빌드된 내용이 출력될 경로를 나타내줍니다.

그래서 만약! generate 를 안해주셨다면, npm run generate 를 먼저 해주세요.

저는 generate를 안했었기 때문에 경로가 존재하지않아 발생한 오류였습니다. dist 폴더 or public 폴더 등등

(그림에서 안내해준 내용을 잘 읽어보시면, pulbic 이 .output/public 에 생성되었다고 작성되어져있습니다.)
(추가 :  .output/public 을 정적배포가 가능하다고 출력되었습니다.)

이상입니다.

그리고 이제 deploy 를 해주면 됩니다.  npm run deploy 

결과적으로 업로드 성공되었습니다.

이상입니다. 감사합니다.

다음번에는 Action을 통해 자동으로 배포되도록 설정해보려고합니다.

안녕하세요 상훈입니다.

지난포스팅에서는 personal access token을 생성하는 방법에 대해서 포스팅하였습니다.

액세스 토큰을 아직 생성하지 않으셨다면, 아래 포스팅을 먼저 확인해주시고, 생성해주세요.

2022.12.01 - [Git] - [GitLab] Personal Access Token 생성하기/방법

GitLab 과 SourceTree를 연결하는 방법을 포스팅하도록 하겠습니다.

Remote 탭에 있는 계정추가를 눌러주세요.

호스팅 계쩡 편집 팝업이 출력되었습니다.

여기서 한 번 분기가 발생하는데, 개인 서버를 호스팅했냐 안했냐에 따라서 갈립니다.

개인호스팅 서버가 있다 : GitLab CE
개인호스팅 서버가 없다 : GitLab

으로 진행해주세요. 저는 CE로 진행하도록하겠습니다.

호스트 url 을 작성해주시고, 

[Personal Access Token 새로고침] 을 눌러주세요.

이런 창이 뜨게 되는데, 

1) 사용자이름
2) 암호 : 복사한 액세스토큰 값
입니다. 확인 해주세요.

1) 사용자이름

@hoon이라고 써져있네요. 제 사용자명은 골뱅이를 제외한 "hoon" 입니다.

올바르게 인증이 되었다면,

인증 성공이 출력됩니다.

연결이 성공적으로 되었습니다. 감사합니다.

참고

안녕하세요 상훈입니다.

GitLab - SourceTree를 사용하려고하는데, Personal Access Token을 요구하더라구요.

그래서 해당 포스트에서는 1단계인 엑세스 토큰 생성하는 방법을 작성하도록 하겠습니다.

1. GitLab 접속
2. 액세스 토큰 생성 페이지 접속
3. 생성

Settings - Access Tokens 에 진입합니다.

1) Token Name
2) Select a Role
3) Select Scopes

이 세가지를 모두 완료해주시고, [Create project access token] 을 눌러주시면 토큰이 생성됩니다.

상단에 액세스 토큰이 출력됩니다.

생성된 토큰을 사용해주시면 됩니다.

안녕하세요 상훈입니다.

깃혀브를 이용해서 아래와 같이 프로젝트 2개를 하나의 깃 Repository에 넣고싶은데, 안되고 있었습니다.

그런데 아무리해도 git add 가 안돼서 왜그러지 싶었습니다.

다른 경우일 수도 있지만, 제 경우에는 올릴 02-nuxt.js 라는 폴더 내에 .git 이라는 깃 파일이 있었기 때문이었습니다.

.git 폴더는 repository에 연결할떄 필요한 폴더이기 때문에, 이곳에서는 필요가 없는 폴더입니다.

> 프로젝트를 생성할때 같이 생성되었습니다.

bash 를 사용하여 지우도록하겠습니다.

$ rm -r .git

재확인을 통해, 이제 정상적으로 삭제가되었고 git 관련 파일이 없는것을 확인하였습니다.

남은건 add, commit, 그리고 push 뿐이죠. 

성공하였습니다.

안녕하세요 상훈입니다.

Nuxt.js 프로젝트를 생성하고 구동시키려는데, 아래와 같은 오류가 출력되면서 정상동작하지 않았습니다.

Error:0308010C:digital envelope routines::unsupported

그래서 확인을 해보니 Node 명령어를 변경하여 처리하라고 작성되어있더군요. 
결과는 실패. 

그래서 Node.js의 버전 자체를 낮추어 구동시키는 방법이 있다고 합니다.

현재 버전과 바꿀 버전은 아래와 같습니다.

현재는 18.12.1 버전을 사용하고있습니다. 
(2022-11-11 기준 안정(최신) 버전)

16버전에서만 Nuxt가 정상적으로 돌아간다는 말도 있었거든요.

처음에는 14버전도 깔아서 구동해보니 정상동작하였습니다. 
아무튼 16버전으로 깔도록하겠습니다.

아래의 사이트에서 

nvm-setup.zip (윈도우 기준) 을 다운로드 + 설치 해주세요.

그리고 vscode등을 재실행해줍니다. 

$ nvm

이렇게 되면 정상적으로 설치가된것입니다.

그리고 다운로드 > 리스트 확인 > 항목 사용을 눌러주세요.

// 16.13.0 버전 다운로드
nvm install 16.13.0

// 리스트 확인
nvm list  

// 16버전 사용하기
nvm use 16.13.0

설치가 완료되었고, 사용처리까지 하셨으면 이제 프로젝트 구동해주세요.

감사합니다.

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

안녕하세요 상훈입니다.

Vue.js 3 + Vue Router 를 사용하여 페이지를 넘기고 params에 원하는 값을 전달하는 경우를 포스팅하도록 하겠습니다.

이렇게 컨텐츠 한개가 객체(Object)로 적용하겠습니다.

item : {
	title: 'asdasdasdas',
	content: 'asgasfasf',
	date: new Date()
}

이런식으로 객체는 구성되어있습니다.

string만 데이터를 전달하는것과 거의 동일합니다.

1. 데이터를 전달할 Vue파일

//List.vue
<template>
<div v-for="(item, index) in itemList" class="w-full flex">
        <div class="w-8 h-7">{{ index++ }}</div>
        <div class="flex-1" @click="moveToDetail(item)">{{ item.title }}</div>
        <div class="w-32 h-7">{{ item.date }}</div>
</div>
</template>

<script>
...
 methods: {
    moveToDetail(item) {
      this.$router.push({
        name: "ContentDetail",
        params: { item: JSON.stringify(item) },
      });
    },
  },
 ...
 </script>

title을 클릭하면 item 객체를 전달하는 것으로 선언하였습니다.

저기서 item 객체를 문자화 하였는데요.
이유인즉슨, 파라미터를 넘겨줄 때 그냥 넘기게되면 이도저도 안되는 [Object object] 가 넘어옵니다. 
그래서 stringify로 문자화한 후에 내용을 넘깁니다.

2. route.js (/route/index.js) -브릿지 역할

 //routes
 
 {
    path: "/ContentDetail/:item",
    name: "ContentDetail",
    component: () => import("../components/Contents/ContentDetail.vue"),
    props: true,
  },

1. path 속성에 :item이라는 key의 이름으로 값을 전달할 것을 지정.
2. props: true  > props를 true로 설정하여 props를 전달할 수 있게 설정하였습니다.

3. 전달받을 Vue 파일

<template>
<div>
      <div"> Title: {{ paramObj.title }} </div>
      <div> Content: {{ paramObj.content }} </div>
      <div> date: {{ paramObj.date }} </div>
</div>
</template>

<script>
...

props: {
    item: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      paramObj: {},
    };
  },
  mounted() {
    this.paramObj = JSON.parse(this.$route.params.item);
  },
 
 ...
</script>

1.props로 params를 전달받을 것을 명시
2. item 키를 가진 문자를 받아올 것으로 명시 (JSON.parse를 통해 객체화 실시예정)
3. item 객체를 할당할 ref 선언(data)
4. 컴포넌트가 마운트 완료되고, params 로 받아온 객체를 할당.

짧지만 긴 포스팅을 마치겠습니다.

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

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

안녕하세요 상훈입니다. 

모달팝업을 만드는 방법을 포스팅하려고 합니다.

추가적으로 바깥 영역을 클릭했을 때 모달이 사라지게 하고 싶습니다.

1) Modal Show 버튼을 클릭 시 Modal Popup 출력.
2) 바깥영역, close 버튼을 클릭 시 Modal Popup 숨김.

이 두 가지 동작이 가능하게 하려고합니다.

// App.vue > 모달 창을 포함하고 있는 메인 뷰
<template>
  <div>
    <button type="button" @click="showModal">Modal Show</button>
    <ModalView
      v-show="showStatus"
      v-model="showStatus"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
import ModalView from "./Modal.vue";

export default {
  components: {
    ModalView,
  },
  data() {
    return {
      showStatus: false,
    };
  },
  methods: {
    showModal() {
      this.showStatus = true;
    },
    closeModal() {
      this.showStatus = false;
    },
  },
};
</script>

showStatus 라는 ref 를 기본 값으로 false 로 놓고, true가 되었을 때만 팝업이 뜨도록 처리하려고 합니다.

이벤트 핸들러가 호출하는 메서드로 showModal() 과 closeModal() 을 생성하였습니다.

직관적으로 show는 show를, close는 close를 작성하여 shoStatus 의 값을 true/false로 변경하겠습니다.

// Modal.vue
<template>
  <div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">
      <h2 class="modal-text-header">Modal View</h2>
      <div class="block-content"></div>
      <div class="modal-bottom">
        <button class="modal-btn" @click="closeModal">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: { showStatus: Boolean },
  methods: {
    closeModal() {
      this.$emit("closeModal");
    },
  },
};
</script>

props로 showStatus를 전달받아 바깥영역, 닫기 버튼을 클릭하면 $emit을 통해 closeModal 이벤트를 발생시킵니다. 

그리고 App.vue에서 closeModal 메서드를 호출하게 되어 모달 팝업을 숨김처리합니다.

다른건 다 그렇다고 치고, 코드를 자세히 살펴보시면, 특별한 처리를 하지 않았는데, 모달창의 영역을 클릭하였을 때는 팝업이 안닫히지만, 그 외의 영역을 클릭하였을 때는 닫히는 것을 볼 수 있습니다.

처음에는 css의 z-index 를 설정하면 영역 컨트롤이 가능한줄 알고 열심히 z-index를 설정했었죠.

그러나 vue.js 공식 문서에 숨겨져있는 한 내용을 확인하게되었습니다.

바로 이 부분입니다.

<div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">

바로 @click.stop 입니다. 이게 바로 핵심.

@click.stop을 작성해준 부분의 영역은 클릭이벤트 전부를 멈추게 만듭니다. 

추가적으로 button에 @click 이벤트 핸들러를 제공한것처럼 명시하지 않는다면 말이죠.

이렇게 작성해주시면,  모달 영역을 클릭해도 닫히지 않는 모습을 보여줍니다. 

이상입니다.

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

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

안녕하세요 상훈입니다. 

뷰에서 props를 계속 내려주고 또 내려주고 끝없이 내려주면 정신적으로 피폐해질 수 있습니다.

물론 간단한 토이 프로젝트일 때에는 굳이 Vuex 혹은 Reactive 를 사용할 필요가 없습니다.

그러나 어느 정도 규모가 점점 커질 수록, props를 관리하기가 힘들어지고, 그에 따라 오류가 쉽게 발생하게됩니다.

그 때 필요한것이 Reactive 입니다. Vuex의 기초단계기도 하지요.

1. Reactive.vue
2. component1.vue
3. component2.vue
4. store.js

이렇게 4가지 파일을 준비하겠습니다. (component2 는 값의 변화가 동시에 적용되는지 확인용입니다.)

1. Reactive.vue

//Reactive.vue == Main vue
<template>
  <div>
    <h2>Reactive</h2>
    <br />
    <h3>Component01</h3>
    <Component01 />
    <br />
    <h3>Component02</h3>
    <Component02 />
  </div>
</template>
<script>
import Component01 from "./Component01.vue";
import Component02 from "./Component02.vue";

export default {
  components: {
    Component01,
    Component02,
  },
};
</script>

2. component1.vue

// Component01.vue
<template>
  <div>
    <h2>this is comp1</h2>
    <p>{{ store.count }}</p>
    <button type="button" @click="store.increment()">+</button>
  </div>
</template>
<script>
import { store } from "./store.js";
export default {
  data() {
    return {
      store,
    };
  },
};
</script>

3. component2.vue

<template>
  <div>
    <h2>this is comp2</h2>
    <p>{{ store.count }}</p>
    <button type="button" @click="store.decrement()">-</button>
  </div>
</template>
<script>
import { store } from "./store.js";
export default {
  data() {
    return {
      store,
    };
  },
};
</script>

4. store.js

import { reactive } from 'vue';

export const store = reactive({
    count: 0,
    increment() {
        this.count++;
    },
    decrement() {
        this.count--;
    }
})

각 컴포넌트에서 props로 내려주는것 없이  > 불편함에서 해방

바로 store.js 를 import 해주시고 store 객체 내의 값을 사용합니다.

1) store.count
2) store.increment()
3) store.decrement()

보시다시피 Reactive.vue (Main vue) 에서 props로 내려주는 것 하나 없이 컴포넌트 선언만으로도 가져와서 사용하였습니다! 🤲

이상입니다.

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