이번에는 여러버전 node를 관리하려고 

nvm을 먼저 설치했다

 

window에서 nvm 설치해줌

https://github.com/coreybutler/nvm-windows/releases

 

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

 

해당파일 설치해줌

 

설치 완료 후 cmd나 터미널 창에서

nvm ls

명령어 입력 시 설치된 node들의 버전을 확인할 수 있다

하지만 설치 안했으니 아마 안뜰것임

 

release 된 전체 버전을 확인하고 싶을 땐

nvm ls-remote

 

lts 버전만 확인하고 싶을 땐

nvm ls-remote --lts

 

 

현재 깔려있는 node 버전을 확인해보니

18.16.1 이라고 나온다 앞에 *표시가 현재 사용중인 node 라는 것

nvm install 18.16.1

해당 명령어로 원하는 node 버전을 설치해준다

node -v

 

설치 후 버전확인 시 원하는 버전이 나오면 잘 설치 된것임

 

 

 

이제 Nest로 새 프로젝트를 생성해보자

일단 nest를 먼저 설치 한 후에!

npm i -g @nestjs/cli

 

설치중 . . .

 

설치 후 nest를 입력해보면 nest에 대한 명령어를 확인할 수 있다

이러면 nest도 설치가 잘 된것임

 

 

새 프로젝트가 설치 될 파일 주소로 이동 후

cd 파일명
nest new 파일명

위와 같이 입력해서 파일을 생성해준다

따란 새로운 프로젝트 생성 완료!

 

 

 

파일을 열어보면 기본적으로 다 셋팅이 되어 있다

 

 

 

 

ㅎㅎ.. 조금 기다리면 코드에 빨간색이 뜨는 걸 확인할 수 있다

플러그인 때문에 나는 오류 인듯 빨간줄이 떠도 실행은 되니까 일단 실행해보고

ㅎㅎ. .. .검색해서 해결해주자!

 

 

 

 

AWS MFA란 
- 다중인증으로 게임 계정 로그인할 때 OTP 같은 개념
 
 
MFA 활성화 하기
- AWS 로그인 후 오른쪽 상단에 계정 관리 탭을 선택해 보안 자격 증명 메뉴로 들어간다

 
할당된 MFA가 없다고 뜨는데 MFA 할당을 클릭해서 받으면 됨~! 

어렵지 않다
 
클릭하면 다중인증 디바이스 선택 페이지로 이동

간편하게 핸드폰 어플리케이션으로 진행

위에 호환 가능한 앱 목록이 있어 원하는 앱을 다운 받으면 된다

QR 코드 표시 클릭시 QR 코드가 나옴

 

핸드폰에 구글 otp 앱을 다운받아주고 구글 로그인도 하고~

 

앱 접속 후 하단 오른쪽에 + 버튼을 눌러 새로운 otp를 등록한다
QR 코드 or 설정 키 입력으로 추가해주면 된다

큐알로 진행했고 등록이 되면 코드 번호가 뜬다
오른쪽에 작은 팩맨 같이 생긴 게 시간제한이고 지날수록 빨간색으로 변하고 제한시간이 다 되면 다른 번호로 바뀜

해당 부분이 헷갈릴 수 있어 적어둔다!

 

MFA 코드 1 은 처음 보안 숫자

MFA 코드 2 는 제한 시간 후 다음 숫자

 

내 보안숫자로 예를 들자면 542537을 입력 후 다음 숫자를 MFA 코드 2 에 입력해주면 된다

MFA 설정 완료하고 로그아웃 -> 로그인 할 때 MFA 코드를 입력하라고 뜬다면 설정이 잘 된 것이다!

'개발 > 그 외' 카테고리의 다른 글

윈도우 nvm 설치  (0) 2023.07.14
인텔리제이(IntelliJ IDEA) 설치하기  (0) 2023.03.21

https://www.azul.com/downloads/?package=jdk#download-openjdk 

 

Azul Downloads

According to the Gartner report, “by 2025, more than 70% of Java applications will be deployed on third-party Java runtimes, up from 30% in 2019.”

www.azul.com

위 사이트 접속해

하단에 Java Version 부터 천천히 선택해주면 됨

Architecture 선택 잘 해주고.. 왜냐면 한번 다시 받았기 때문ㅎ

 

 

다운로드 받고 압축 풀어줌

 

Java 파일을 새로 만들고 파일 안에 zulu17을 넣어주었다

 

 

이름 너무 길어서 뒤에 다 잘라버림

 

내PC 오른쪽 버튼 -> 설정 -> 고오급 시스템 설정

환경변수 클릭

 

 

다들 만드는 JAVA_HOME

변수값에 zulu가 들어있는 파일 경로를 입력해준다

 

 

요기 그냥 클릭해주면 됨

 

 

 

JAVA_HOME 변수를 만들어주었으면

Path 값에 만든 변수를 입력해줌

 

bin 파일로 자바를 실행할 수 있기 때문!

 

잉? ...

 

java.exe의 버전이 실행 중인 Windows 버전과 호환되지 않습니다.

요런 문구가 계속 뜨는 것임...

ㅇㅏ까 왠지 잘못 설치했다 했어

 

 

아무래도 잘못 받았나보다

다시 받아주자

 

 

환경변수는 어차피 그대로니까 ㅎ 다시 받은 파일로 변경해주고 실행!

 

굿

 

 

 

설치완료

 

라우터를 세팅해보자

main.js 파일 열기

 

router 파일 생성

import { createWebHistory, createRouter } from "vue-router";
// 이동할 페이지 import
import List from './components/List.vue';

const routes = [
  {
  // 이동할 페이지 주소
    path: "/list",
  // 이동할 페이지 컴포넌트 설정
    component: List,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

해당 코드를 입력해준다

router 파일을 설정했으면 다시 main.js 파일로 돌아와서

 

 

use 안에 해당 파일을 넣어줌

다시 app.js 파일로 돌아와 router 로 가져올 요소의 위치?에 router-view 태그를 작성해준다

뭐 대충 이런식으로!

 

주소 변경시 다른 컴포넌트를 가져올 수 있다

 

 

 

 

 

ㅈㅔ일 부모 컴포넌트라고 가정하고 보자!

// ***************** App.vue
<template>
	// * 하단에 설명 기재
	<Banner v-bind:appValue="count"></Banner>
    
        <ul>
          <li v-for="(item, index) in products">
            <h4 :style="red">{{ index }} 번</h4>
            <div>{{ item.title }}</div>
            <img @click="onPopup(item)" :src="item.image" alt=""/>
            <button @click="item.count++"> ❤️ {{ item.count }}</button>
          </li>
        </ul>
    
        <!-- 팝업 -->
        <!-- v-bind:자식컴포넌트에 사용할 변수명="현재 컴포넌트 내의 modalItem" / @자식컴포넌트에서 작명한 변수명="현재 컴포넌트에서 자식컴포넌트의 데이터를 받을 메소드명" -->
        <!-- v-bind를 제외 :modalItem도 가능 -->
        <!-- 여러개 보낼 때 :item1="" :item2="" -->
        <Modal v-bind:modalItem="modalItem" v-if="modal" @closeFromModal="onModalState"/>
</template>

<script>
import testData from './assets/data/data';
// 컴포넌트 import
import Banner from './components/Banner.vue';
import Modal from './components/Modal.vue';

export default {
  name: 'App',
  // state(변수 입력하는 곳)
  data(){
    return{
      // 다른 js파일의 데이터를 가져온것임(객체형태)
      products: testData,
      modalItem: undefined,
      count: 100,
    }
  }
  // 함수 만드는 곳
  methods: {
    onPopup(item){
      // modal창을 보여줌
      this.modal = true;
      // 자식 컴포넌트(modal)에 보낼 값을 넣어줌
      this.modalItem = item;
    },
    onModalState(state){
      console.log('modal에서 가져온 값', state)
      this.modal = state; // false
    }
  },
  // 컴포넌트 가져오는 곳
  components: {
    // 원하는태그이름 :Banner --> 원하는대로 작명할 수 있음
    Banner,	// 축약된 형태
    Modal
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
ul,
.menu{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.menu{
  padding: 0 20px;
  background: cornflowerblue;
  height: 50px;
  border-radius: 8px;
}
img{
  width: 100%;
  height: 30vw;
  object-fit: cover;
}
ul{
  padding: 20px;
}
ul li {
  /* width: 100%; */
  width: 30%;
  list-style: none;
  margin-right: 10px;
  margin-bottom: 30px;
}
button{
  margin-top: 10px;
}
</style>

 

컴포넌트 가져오는 법

- template에 컴포넌트 태그 입력해줌

- script 내 component import

- script 내 components에 컴포넌트 명 입력

 

Banner컴포넌트의 style은 Banner.vue 파일에서 적용되어 오기 때문에 생략한다!

 

컴포넌트간 데이터 전송하는법

app.vue 파일에 보면 Banner태그 옆에 v-bind:appValue="count" 라고 적혀있는 것이 자식 컴포넌트에 props 값을 전달하는 방법이다

 

v-bind는 속성에 데이터를 연결할 때 사용(축약된 형태로는 :만 속성 앞에 붙여서 사용한다)

:id="", :class="", :href="" 등

appValue는 자식 컴포넌트에 기재 된 변수명, ( ** banner.vue 파일을 확인)

count는 부모 컴포넌트에서 어떤 값을 보낼지에 따라 해당 변수명을 적어준다(여기서 count는 100임)

 

// ***************** Banner.vue
<template>
  <div class="banner" @click="onClick()">
  	<p>클릭시 부모 컴포넌트의 count 값을 콘솔창에 찍는다</p>
    <button @click="onParentValue()">클릭시 부모 component의 data값 변경</button>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  // 부모 component에서 입력한 props명을 적어줌
  props: ["appValue"],
  methods: {
    onClick(){
    	// 클릭시 부모 컴포넌트의 count 값을 콘솔창에 찍는다
        console.log(' -> ', this.appValue) // -> 100
    },
    onParentValue(){
        this.$emit("childEvent")
    }
  }
}
</script>

<style>
.banner{
  width: 90%;
  background: lightgray;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto;
}
</style>

props: 에 appVaule로 부모 컴포넌트에서 가져온 값을 받을 변수명을 입력해준다

값이 여러개라면 ["appValue", "appList"] 이런식으로 여러개 입력하면 됨

 

 

예를 들어 modal 컴포넌트가 있다고 했을 때

// ***************** Modal.vue
<template>
    <div class="modal-bg" @click="onClose()">
        <div class="modal">
        <p class="title">팝업창</p>
        <Banner/>
        <div class="content">
            <p>{{ modalItem.title }}</p>
            <img :src="modalItem.image" :alt="modalItem.image" />
            <p>{{ modalItem.content }}</p>
            <p>금액: {{ modalItem.price }}, 좋아요 수: {{ modalItem.count }}</p>
        </div>
        </div>
    </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Modal',
  props: ["modalItem"],
  data(){
    // state 값
    return {
    }
  },
  // 함수 만드는 곳
  methods: {
    onClose(){
      this.$emit("closeFromModal", false )
    }
  },
  components: {
  }
}
</script>
<style>
.modal-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
}
.modal-bg .modal{
  width: 80%;
  height: 500px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  padding: 20px;
  overflow: scroll;
}
.modal .title{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
.modal img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 20px 0; 
}
</style>

modalItem 값을 props로 받아서 전달된 데이터로 화면에 보여주고

화면을 닫을 땐 emit으로 false값을 전달하여 자식 컴포넌트를 닫아준다

끝!

 

 

 

 

정리하자면

부모 컴포넌트 -> 자식 컴포넌트

- (부모 컴포넌트) html 컴포넌트 태그에 :변수명(작명)="보낼값이 들어있는변수" 입력

        ex) 예를 들어 :이거옮길것임="itemList"

- (자식 컴포넌트) props:에 변수명(작명)했던 거 등록해

        ex) props: ["이거옮길것임", "이거옮길것임2(여러개일때)"]

        ex) props: {

                  "이거옮길것임": Array

              },

 

 

 

 

 

'개발 > Vue' 카테고리의 다른 글

[Vue.js] vue router 설치, 사용  (0) 2023.07.20
[Vue.js] 빠르게 배우기  (0) 2023.07.17
Vue.js 시작하기: Vue 설치 및 프로젝트 생성  (0) 2023.07.14

+ Recent posts