🎄메리크리스마스🎄

외래 키 제약 조건 비활성화 방법

ALTER TABLE 테이블명 NOCHECK CONSTRAINT 제약조건명;

외래 키 제약 조건 활성화 방법

ALTER TABLE 테이블명 WITH CHECK CHECK CONSTRAINT 제약조건명;

모든 외래 키 제약 조건을 한 번에 비활성화/활성화하기

-- 모든 제약 조건 비활성화
ALTER TABLE 테이블명 NOCHECK CONSTRAINT ALL;

-- 모든 제약 조건 활성화
ALTER TABLE 테이블명 WITH CHECK CHECK CONSTRAINT ALL;

에러메세지 내용

Module Error (from ./node_modules/eslint-loader/index.js):
error: Use object destructuring (prefer-destructuring) at src\views\mr\BrandPerformance.vue:296:13:
  294 |       const compComboId = '#PRODUCT_BY_RANGE#';
  295 |       const yyyymm = this.query.yyyymm.replace(/-/gi, '');
> 296 |       const prodRangeCd = this.query.prodRangeCd;
      |             ^
  297 |       const rs = await this.compCodeList(compComboId, yyyymm, prodRangeCd);
  298 |       const clsRow = rs.data.resultList;

위 에러는 this.query.prodRangeCd를 구조 분해를 통해 가져오지 않았기 때문에 발생한다.

객체 구조 분해를 통해 this.query의 속성을 좀 더 간결하게 추출하라는 내용이다.

this.query 객체에서 여러 속성을 가져온다면 구조 분해를 통해 코드의 가독성을 높일 수 있다.

수정 반영

const { yyyymm, prodRangeCd } = this.query;
const compComboId = '#PRODUCT_BY_RANGE#';
const formattedYyyymm = yyyymm.replace(/-/gi, '');
const rs = await this.compCodeList(compComboId, formattedYyyymm, prodRangeCd);
const clsRow = rs.data.resultList;

이렇게 수정하면 this.query 객체에서 yyyymm과 prodRangeCd를 한 번에 구조 분해하여 추출할 수 있다.

🐳 docker ps

※ ps : process status

# 현시점 실행중인 docker 컨테이너 조회
docker ps

# a옵션을 주면 종료된 컨테이너도 같이 조회
docker ps -a

🐳 docker stop / docker kill

※ stop : 진행중인 작업 끝낸 후 종료

※ kill : 강제 종료

# NAMES는 docker ps 조회하면 나옴
docker stop [NAMES]
docker kill [NAMES]

회사 내에서 새로 구축중인 패키지에서는 코어 단계 소스는 따로 개발하고

각 사이트마다 들어가는 커스텀 페이지를 붙여서 오픈하는 방식으로 진행하고 있다.

그래서 코어 단계 소스는 git submodule을 사용해서 작업중이다.

아래 내용은 해당 패키지를 사용하는 첫 프로젝트를 git clone 받은 후

submodule로 등록되어 있는 코어 소스를 pull 받는 방법이다.

먼저 메인 프로젝트를 clone 받은 후 !

# 서브모듈을 처음 가져오는 경우에만 실행
# 서브모듈 정보를 기반으로 로컬 환경설정 파일 준비
# .gitsubmodules 파일에 있는 정보를 .git/config에 등록
# git config -list -local로 등록 결과 확인 가능
git submodule init

# 서브모듈 최신화
git submodule update

# 처음 가져오는 경우 위 두가지를 한번에 실행할 수 있음
git submodule update --init

그 다음 아래는 서브모듈 최신화하는 방법 !

git submodule update --remote --merge

1. Vue란?

Vue는 Facebook의 React, Google의 Angular와 더불어

대표적인 Single Page Application(SPA) 프레임워크다.

다른 프레임워크나 라이브러리에 비해 학습 곡선이 낮아

누구나 쉽고 빠르게 배울 수 있는 프레임워크라고 하지만

뭐... 세상 만물이 그렇듯이 처음 접하면 누구나 어렵기마련 ㅎ

2. 버전

Vue는 Evan You라는 개발자에 의해 2014년 발표되었고, 발표된 이후로 현재까지 꾸준히 릴리즈 되고 있다.

Vue 2.0은 2016년에 Ghost in the Shell이라는 코드명으로, 2.6은 2019년에 Macross라는 코드명으로,

그리고 드디어 3.0은 2020년 9월 19일에 One Piece라는 코드명으로 공개되었다.

현 시점의 최신 버전은 3.2.37이다.

3. 기존 버전에서 달라진 점

Vue 3는 기존 버전보다 성능이 개선되었고 여러가지 기능이 업데이트 되었다.

많은 업데이트들 중에 가장 핵심적인 4가지만 정리했다 🎁

3.1. Compisition API 기본 지원

첫 번째는 Composition API를 기본적으로 지원한다는 점이다.

// Vue 2
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // login method
    }
  },
  computed: {
    lowerCaseUsername() {
      return this.username.toLowerCase()
    }
  }
}

Vue 2에서는 Component의 옵션을 Data, Methods, Computed, Watch로 구분했다.

각 특징에 따라 구분되어 있어 프로젝트 초반에는 더 직관적으로 쓸 수 있지만

프로젝트 크기가 커질수록, 코드량이 많아질수록 가독성이 떨어지는 단점이 있었다.

// Vue 3
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()),
    })
    const login = () => {
      // login method
    }
    return {
      login,
      state,
    }
  }
}

Composition API는 이러한 문제를 해결하기 위해 등장하였다.

Data, Methods, Computed 등이 각자 분산되어 담당했던 기능들을 Setup 메서드에 하나로 모으는 것이다.

많은 양의 코드들을 서로의 관련성 따라 개발자 스스로 배치하여, 코드를 더 이해하기 쉽게 하는 것이다.

Vue 2에서도 Composition 라이브러리를 적용해서 똑같은 기능을 할 수 있었지만

Vue 3에서는 Composition API가 기본으로 사용되는 점이 큰 차이점이다.

3.2. Lifecycle 변화

두 번째는 Lifecycle의 변화이다.

// Vue 2
export default {
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
}

Vue 2에서는 Created, Mounted, Updated 등의 메서드를 사용했다.

그런데 이 메서드들이 Composition API의 Setup 메서드 안으로 들어가면서 명칭 등이 바뀌었다.

// Vue 3
import { onMounted } from 'vue';
export default {
  setup() {
    // ..
    onMounted(() => {
      console.log('onMounted')
    })
    // ...
  }
}

Created는 Setup 메서드 안에서 실행하도록 바뀌었고,

Mounted는 onMounted로, Updated는 onUpdated라는 이름으로 바뀌었다.

위치와 이름이 조금 바뀌었을 뿐 기능은 큰 차이 없다고 보면 된다.

이 외에도 BeforeUnmount, Unmounted등의 내용이 바뀌었는데 자세한 내용은 검색!

3.3. 멀티 루트 엘리먼트

세 번째는 템플릿을 생성할 때 루트 엘리먼트를 여러개 가질 수 있다는 점이다.

Vue 2에서는 템플릿 안에 루트 엘리먼트를 하나만 가질 수 있었다.

하지만 Vue 3부터는 템플릿 안에 여러개의 루트 엘리먼트를 만들 수 있다.

<template>
  <h1>Title</h1> <!-- Vue 2에서는 h1과 div 두개 사용 불가능 -->
  <div>Content</div> <!-- Vue 3에서는 가능 -->
</template>

3.4. IE 지원 중단

마지막으로 더 이상 Internet Explorer(IE)를 지원하지 않는다는 점이다.

꼭 지원해야 하는 상황이라면 이전 버전을 사용해야 한다.

기존 JavaScript에서는 var를 이용하여 변수 선언을 했다.

그 후 ES6에서 let과 const가 추가되었고, 이 둘의 사용을 권장하고 있다.

그럼 왜 var를 두고 let과 const가 나왔고, 이 둘의 사용을 권장하는 것일까?

1. var의 단점

먼저 var 키워드는 크게 단점 세 가지가 있다.

1. 변수 중복 선언이 가능하기 때문에 의도치 않은 값 반환의 가능성이 있다.
2. 함수 레벨 스코프 때문에 함수 외부에서 선언된 변수는 전역 변수가 된다.
3. 변수 선언 이전에 변수를 참조하더라도 undefined가 반환된다.

ES6에서 나온 let, const 키워드는 위 세 가지 단점을 해결해준다.

2. 변수 선언 방식 차이

1. var (중복 선언 O)

var name = 'apple'
console.log(name) // apple

var name = 'orange'
console.log(name) // orange

중복 선언 가능

유닛테스트 단계에서는 각각 다르게 볼 수 있으니 편리하지만,

코드가 많아지면 어디에서 언제 어떻게 선언이 되었는지 파악하기 힘들고

의도하지 않은 값이 할당 될 가능성이 높다.

2. let (중복 선언 X, 재할당 O)

let name = 'apple'
console.log(name) // apple

let name = 'orange'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

중복 선언 불가능

let name = 'apple'
console.log(name) // apple

name = 'orange'
console.log(name) // orange

재할당 가능

3. const (선언과 초기화 동시 진행, 중복 선언 X, 원시값 재할당 X, 객체 재할당 O)

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'apple'

선언과 초기화 동시 진행

const name = 'apple'
console.log(name) // apple

const name = 'orange'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

중복 선언 불가능

const name = 'apple'
console.log(name) // apple

name = 'orange'
console.log(name) // Uncaught TypeError: Assignment to constant variable.

원시값 재할당 불가능

const name = { one: 'apple' }
name.one = 'orange'
console.log(name) // { one: 'orange' }

객체 재할당 가능

3. 블록 레벨 스코프 차이

1. var

var a = 1

if (true) {
  var a = 2
}

console.log(a) // 2

함수 외부에서 var 키워드를 사용해 a를 선언하면 이는 전역 변수가 된다.

if문 안에서 a가 중복 선언되고, 출력값은 2로 바뀌게 된다.

실무 프로젝트의 긴 코드들에서 이런 상황이 온다면, 의도치 않은 값이 출력되게 된다.

2. let, const

// const 키워드도 동일
let a = 1

if (true) {
  let a = 2
}

console.log(a) // 1

var 키워드로 선언했을 때, 출력값이 2였지만

let, const로 함수 안에 선언하게 되면 지역 스코프를 가진다.

그래서 전역에서 출력하면 전역에 있는 1이 출력된다.

4. 호이스팅 차이

1. var

console.log(name); // undefined
var name;

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행되어

name에 암묵적으로 undefined를 할당하여 초기화된다.

변수 선언이 런타임에 되는게 아니라, 그 이전 단계에서 먼저 진행되기 때문에

var 키워드에 값을 할당하지 않으면 언제나 undefined를 반환한다.

변수 생성 단계 : 선언 단계 > 초기화 단계 > 할당 단계

2. let

console.log(name); // Uncaught ReferenceError: name is not defined
let name;

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

런타임 이전에 선언 단계가 실행되지만 초기화 단계가 실행되기 전에 변수에 접근하면

아직 정의되지 않았다는 참조 오류 메세지가 뜬다.

그래서 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지

변수 참조가 불가능한 일시적 사각지대(Temporal Dead Zone; TDZ) 구간에 존재하게 된다.

3. const

console.log(constName) // Uncaught ReferenceError: Cannot access 'constName' before initialization
const constName = 'apple'

const 키워드로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행된다.

런타임 이전에는 실행이 불가능하기 때문에 초기화 되지 않은 상태라

접근 오류 메세지가 뜬다.

spring boot 프로젝트에서 application.properties가 안열릴때 해결하는 방법 기록.

1. 해결 방법 ①

window → New window

Eclipse 단순 버그일 경우 새 창으로 열면 해결됨 ^^;

2. 해결 방법 ②

Help → Install New Software... → Add...

Name : 아무거나 ㅎ (나는 properties editor라고 적음)

Location : https://download.springsource.com/release/TOOLS/update/e4.16/

적고 Add 해 준 후,

Extensions / Spring IDE → Spring IDE Boot Support ✅

설치해주고 다 되면 Restart Now OK

application.properties 우클릭 → Open With → Other... → Spring Properties Editor

잘 열린다 💨

회사에서 Git 쓰다가 커밋 다 꼬여서 나머지는 해결하고

엉망진창인 Branch 하나를 Git에서 삭제했는데

로컬 Branch에는 그대로 남아있는거 해결하는 기록 ✅

1. Local Branch 목록 확인

git branch

2. Remote Branch (원격) 목록 확인

git branch -r

위 두개를 조회했을때 목록이 다른 경우 동기화를 해줘야한다.

3. Branch 동기화

git fetch --all --prune
git remote prune origin

둘중에 하나 골라서 쓰면 동기화 완료 ✅

나같은 경우에는 Git 자체에서 Branch를 삭제해서 동기화 작업이 필요했지만,

코드로 Branch를 삭제 하는 방법은 밑에 😜

4. Local Branch 삭제

git branch -d <branchName>

5. Remote Branch 삭제

git push origin --delete <branchName>
git push origin : <branchName>

6. 참고

명령문 --dry-run

실제 실행이 아닌 결과값만 미리 볼 수 있다.