다른

 - 압축파일 내용 보기
   tar tvf test.tar

 - 압축풀기
   tar xvf test.tar
  - 압축풀기 특정경로
   tar xvf test.tar -C /app/fileupload/

 - 압축하기 디렉토리 통째
   tar cvf test.tar /app/img
 - 압축하기 개별
   tar cvf test.tar file_1, file_2

1. SCP란?

Secure Copy (SCP) 의 약자로, 파일 송수신에 사용되는 프로토콜.

2. 사용법

1) 원격 서버 -> 로컬로 파일 전송

 # scp [옵션][계정명]@[원격지주소]:[원본 경로 및 파일] [전송받을 위치]

예) IP 111.222.333.444 서버의 abc라는 계정으로 /home/abc/test.html 파일을 로컬서버 /home/abc/ 디렉토리에 전송받기
 -> scp abc@111.222.333.444:/home/abc/test.html /home/abc/
 

2) 로컬 서버 -> 원격 서버로 파일 전송

 # scp[옵션][원본 경로 및 파일] [계정명]@[원격지IP주소]:[전송할 경로]

 예) 로컬서버 /home/abc/test.html 파일을 IP 111.222.333.444 서버의 /home/abc/ 디렉토리에 전송 하기
  -> scp  /home/abc/test.html abc@111.222.333.444:/home/abc/
 

3) ssh 포트를 기본 22번으로 사용하고 있지 않는 서버로의 전송

 8000번인 SSH 포트를 사용한다면 아래와 같이 -P 옵션과 포트번호를 넣어준다.

 # scp -P 8000 abc@111.222.333.444:/home/abc/test.html /home/abc/
 # scp -P 8000 /home/abc/test.html abc@111.222.333.444:/home/abc/



4) 디렉토리 동째로 복사
scp -r [디렉토리 원격지IP]:[경로]
# scp -r abcd.war 100.212.31.11:/GCU/WA/dey/

약관동의 관련 작업을 하면서

체크박스 전체 선택 처리와 validation 체크 구현이 필요하여 작업한 내용을 정리해본다.

* HTML 영역

<input type="checkbox" v-model="agreeAll" value="all"> <!-- 전체선택 -->

<input type="checkbox" v-model="agreeChecked" value="agree1"> <!-- 동의1 -->
<input type="checkbox" v-model="agreeChecked" value="agree2"> <!-- 동의2 -->

* Script 영역

data: function () {
    return {
    	.....
    	agreeCheckList: ["agree1", "agree2"],	// 비교를 위한 전체 CheckList 변수
    	agreeChecked: [],			// 체크 된 목록을 담을 배열 변수
    	....
    }
},
computed: {
    agreeAll: {
        get: function () {
            return this.agreeCheckList.length === this.agreeChecked.length;
        },
        set: function (event) {
            this.agreeChecked = event? this.agreeCheckList : []; // 전체 대상을 넣거나 비우는 역할
        },
    }
}

간단히 설명하면

1. 전체선택 v-model 인 agreeAll 은 computed 로 만들어 줌.

2. agreeCheckList 는 전체 선택시 대상이 되는 모든 value 값을 미리 넣어두어 실제 체크 된 항목과 비교하기 위함.

3. agreeChecked는 실제 체크 된 항목만 저장되는 model

* 동의 여부 체크 로직

// 체크여부 확인
if( this.agreeChecked.length !== this.agreeCheckList.length ){

    const notChecked = this.agreeCheckList.filter(v => !this.agreeChecked.includes(v));
    if( notChecked[0] === "agree1") {
        alert('agree1는 필수입니다.');
        return;
    }
    if( notChecked[0] === "agree2") {
        alert('agree2는 필수입니다.');
        return;
    }
}

agreeCheckList 에 필터를 사용하여 agreeChecked 에 없는 항목을 리턴받아 처리하였다.

반복문으로 처리할까 하다가 항목이 두개뿐이라서 필터로 구현했다.

1. 구성 사양

2. 사용기

이번에 PC를 업그레이드 하면서 기존에 사용중이던 파워와 케이스는 아직 현역으로 사용하기 충분하여 재사용하고

나머지만 바꾸기로 하였습니다.

그래픽카드를 고르는데는 사실 고민이 많았습니다. 

4080 Super VS 4090  어떤걸 사든 후회할 것 같아서 많은 고민 끝에 4090으로 결정!

하지만 메인보드는 고민 하나도 없이 MSI 토마호크로 결정했습니다.

MSI 보드는 써본 적이 없었는데

퀘이사존 눈팅중에 리뷰(https://quasarzone.com/bbs/qc_user/views/119206)를 봤는데
크고 듬직한 방열판들을 보고 아주 만족스러워서 다음엔 꼭 MSI 보드로 사겠다고 생각하고 있었습니다.

MAG, TOMAHAWK, MAX 이런 단어들이 들어가는걸 보면 안봐도 성능이 너무 좋을것 같은 느낌적인 느낌.. ㅋㅋ

저 듬직한 방열판들을 보라!!. i9 오버클럭도 끄떡없지!

조립 후 구동샷입니다.

저 듬직한 방열판은 여기서도 보이는군요 ㅎㅎ

3. 총평

처음 써보는 MSI 보드 였지만 만족스럽습니다. 

전문적인 지식없이 간신히 조립만 할 줄 아는 수준이라 잘은 모르지만

깔끔하고 세련된 디자인에 편의성을 고루 갖춘 보드라 생각합니다.

전 / 후면 C타입 USB 지원,

WIFI / Bluetooth 포트 및 CMOS / 플래시 바이오스 버튼도 IO포트에 있어 편의성이 아주 마음에 들었습니다

고급 라인인 만큼 WIFI-7도 지원하고 (고.. 공유기를 바꿔야...)

구성품인 usb 나 설치 퀵 가이드도 설치 전에 한눈에 보기 편했습니다.

MSI 특유의 디자인의 케이블 스티커도 맘에 들었습니다.

개인적으로는 블루레이나 넷플릭스, 유튜브 등 영화나 드라마 영상 컨텐츠를 볼 때 PC를 많이 사용하는데

PC를 켜놨는지 모를정도로 조용합니다. 이건 보드의 안정성이 한 몫 하는 부분이 아닐까 싶습니다.

오랜만에 PC를 업그레이드 하게 되어 너무 기분이 좋습니다.

토마호크 맥스 덕에 오래오래 사용할 수 있을 것 같습니다.

ref 와 reactive 는 vue3에서 추가된 Composition api로, 이를 이용하여 반응형 data를 사용할 수 있다.

*특징
- ref : 어떤 타입이든 사용가능. 주로 원시타입 변수 사용.
- reactive : Object, Array등 객체타입만 사용가능.

*접근 방식
- ref : 
  script에서 사용 시 : .value 를 붙여 사용 

// 스크립트에서 ref 사용하기
import {ref} from "vue"; // vue에서 ref 객체 import
const 변수명 = ref(초기값); // 초기값은 option.

//example
<script>
  const refParam = ref();
  refParam.value = "ref 테스트"; // 값 변경
  console.log(refParam.value); // 값 출력
</script>

 vue tag에서 사용시 : {{변수명}} 로 사용

// tag 에서 ref사용
<template>
  {{refParam}}
</template>

<script>
  import {ref} from "vue";
  const refParam = ref("test1234");
</script>

  tag 속성에서 사용시 : 속성명 앞에 콜론(:)추가 및 변수명 그대로를 사용

// tag 에서 ref사용
<template>
  <div>
  	<Button :label=refParam />
  </div>
</template>

<script>
  import {ref} from "vue";
  const refParam = ref("test1234");
</script>

 - reactive

// reactive 사용하기

<template>
   <!-- {{객체명.변수명}} 과 같이 일반 object 처럼 사용한다 -->
  {{reactiveParam.param1}}
  {{reactiveParam.param2}}
</template>

<script>
  import {reactive} from "vue";	// vue에서 reactive import

  const reactiveParam = reactive({
    param1: 1,
    param2: "문자열"
  })
</script>