개인히스토리저장소

작성일자 : 2020.09.07

환경 : Vue 2, vue-router 3.4.3

1. vue-rotuer 설치

2. vue-router 설정

main.js

App.vue

3. 확인

/foo 직접 접근 시 

/bar 직접 접근 시

foo 링크 클릭 시

bar 링크 클릭 시

전체 로그 :

  [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

조치 :

  프로젝트 바로 아래(package.json 위치)에 vue.config.js 생성 후 아래 옵션 추가

module.exports = {
    runtimeCompiler: true
}

작성일자 : 2020.09.06

환경 : Vue 2

1. Component 생성

NewComponent.vue

<template>
    New Component    
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

2. Component 등록

사용할 위치에 신규 Component 선언 

App.vue

<template>
    ...
</template>

<script>
// import 및 등록
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

import 할 때 컴포넌트 명칭은 꼭 파일명과 같지 않아도 된다.

3. Component 사용

<template>
  <div id="app">
  ...
    <!-- 컴포넌트 사용 -->
    <NewComponent/>
  
  ...
  </div>
</template>

<script>
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

컴포넌트를 사용할 때는 케밥 표기법으로도 사용이 가능하며, 공식 가이드에선 케밥 표기법을 권장한다.

import newComponent     ->      <new-component>

작성일자 : 2020.09.03

환경 : vue cli 4.5.4, npm 6.12.0

0. npm, vue cli 설치

npm 버전 확인 : npm --version

vue cli 설치 : npm i -g @vue/cli

vue cli 버전 확인 : vue cli --version

1.  Vue CLI 에서 아래 명령어 입력

현재 vue cli 4.5.4 에서는 vue 2 버전과 vue 3 버전을 선택하여 생성할 수 있다

vue 2 버전의 'vue2' 프로젝트 생성 완료

2. 확인

프로젝트 위치에서 yarn serve 입력 후, localhost:8080로 접근 시 index 페이지 확인 가능

프로젝트 위치에서 아래 명령어 입력 시 vue 버전 확인 가능

작성일자 : 2020.08.22

개발자 관리 도구 내 Console 에서 아래 코드 입력

client=new XMLHttpRequest();
client.open('POST', "POST_METHOD_URL", true);
client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");



// 파라미터가 없을 경우
client.send();		

// 파라미터가 있을 경우
// var param = 'id=1'  
// client.send(param);	

작성일자 : 2020.07.23

환경 : SpringBoot 2.1.6

목표 : H2 를 이용하여 Database 설치 없이, In Memory DB 를 사용하도록 설정 

H2란?

자바 기반의 오픈소스 관계형 데이터 베이스 관리 시스템 (RDBMS)

H2DB는 서버(Server) 모드와 임베디드(Embedded) 모드의 인메모리 DB 기능 지원

1. 의존성 추가

In build.gradle

dependencies {
..
   implementation 'com.h2database:h2'
   implementation 'org.springframework.boot:spring-boot-starter-jdbc'
..
}

* 'spring-boot-starter-jdbc' or 'spring-boot-starter-data-jpa' 의존성을 추가하면 DataSource 구현체로 tomcat-jdbc을 제공
* H2 의존성을 추가하고 난 후, 설정 파일에 아무 설정이 되어 있지 않으면 스프링 부트는 자동적으로 H2 데이터베이스를 기본 데이터베이스로 사용

* spring-boot-starter-jdbc 의존성을 추가하면 DataSource, JdbcTemplate을 별다른 설정없이 주입하여 사용 가능(@Autowired 등)

2. Connection 확인

@Autowired
DataSource datasource

...

  Connection connection = dataSource.getConnection()
  System.out.println(connection.getMetaData().getURL());
  System.out.println(connection.getMetaData().getUserName());

* H2 DB는 기본으로 testdb DB 명과, SA 유저를 사용 (Password는 없음)

3. 기본 DB 데이터 추가 

@Autowired
DataSource dataSource;
...

  Connection connection = dataSource.getConnection();
  Statement statement = connection.createStatement();
  String sql1 = "CREATE TABLE TESTTABLE(ID INTEGER NOT NULL, VALUE VARCHAR(255), PRIMARY KEY (ID) )";
  statement.executeUpdate(sql1);

  String sql2 = "INSERT INTO TESTTABLE VALUES(1, 'value')";
  statement.execute(sql2);
   

4. H2-Console 확인

-  Console 설정 추가

In Application.properties

spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

- 설정 Path 로 접근 ( 위 설정에선 /h2-console )

Connection 에서 확인한 URL, Name 입력 (기본값은 jdbc:h2:mem:testdb , SA )

- 데이터 확인 (1, 'value')

DB 설정 코드

DatabaseConfig.java

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;

@Component
public class DatabaseConfig implements ApplicationRunner {

    @Autowired
    DataSource dataSource;

    @Override
    public void run(ApplicationArguments args) throws SQLException {
        try(Connection connection = dataSource.getConnection()){
            System.out.println(connection.getMetaData().getURL());
            System.out.println(connection.getMetaData().getUserName());

            Statement statement = connection.createStatement();
            String sql = "CREATE TABLE TESTTABLE(ID INTEGER NOT NULL, VALUE VARCHAR(255), PRIMARY KEY (ID) )";
            statement.executeUpdate(sql);

            String sql2 = "INSERT INTO TESTTABLE VALUES(1, 'value')";
            statement.execute(sql2);
        } catch (Exception e){
            System.out.println(e);
        }
    }
}

* 주의

2020.07.23 기준으로 Spring Boot 프로젝트 생성 시 2.3.1 버전이 생성되는데, 이 버전에서는 H2 연동 시 기본 URL 값으로 testdb 가 아니라 Random 으로 생성됀다. ( 해당 글은 2.1.6 버전이 기준 )

이를 testdb 로 고정하기 위해서는 아래 config 추가

reference

https://engkimbs.tistory.com/782

작성일자 : 2020.06.16

IntelliJ 에서 Git 관련 작업이 무한 홀딩되는 상황 발생

상세 내용 : 

1. IntelliJ 에서 git repository 연결 Test 시 무한 홀딩

2. IntelliJ 에서 git 을 사용하여 소스 Clone 시 무한 홀딩

3. Spring 기반 자바 프로젝트를 IntelliJ 로 Open 시 무한 홀딩 (Vue 프로젝트는 열렸었음)

4. IntelliJ 설정에서 git 연결 확인 시 무한 홀딩 ( Versiont Control > Git > Test )

조치 내용 : 

IntelliJ 설정 ( File > Setting OR Ctrl+Alt+S ) > Version Control > Git > Path to Git excutable 수정

기존 - C:\Program Files\Git\git-cmd.exe 

수정 - C:\Program Files\Git\cmd\git.exe

Git 경로를 수정해준 뒤 Test 를 누르니, 정상적으로 버전 창 팝업 확인

reference :

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360001211119-IntelliJ-hangs-on-Git-Identifying-Git-Version-

작성일자 : 2020.06.13

Stream 을 활용하여 List to Map 변환하는 과정에서 발생할 수 있는 키 중복 예외

예외 발생 예시

List<Integer> list = new ArrayList<Integer>(){{add(0);add(1);add(1);add(2);}};
// { 0, 1, 1, 2 }
        
        
Map<Integer, Integer> map = list.stream()
       .collect(Collectors.toMap(vo->vo, vo->vo));
// { {0,0}, {1,1}, {1,1}, {2,2} } 형태로 반환 -> key 1 중복 !!

수정

List<Integer> list = new ArrayList<Integer>(){{add(0);add(1);add(1);add(2);}};
// { 0, 1, 1, 2 }
        
        
Map<Integer, Integer> map = list.stream()
       .collect(Collectors.toMap(vo->vo, vo->vo, (oldValue, newValue) -> oldValue));
// { {0,0}, {1,1}, {2,2} } 형태로 반환 

// 기존 값을 유지할 경우
// .collect(Collectors.toMap(vo->vo, vo->vo, (oldValue, newValue) -> oldValue));
// 새로운 값을 유지할 경우
// .collect(Collectors.toMap(vo->vo, vo->vo, (oldValue, newValue) -> newValue));

[vue] 빌드 결과물 경로 설정

작성일자 : 2020.06.05

환경 : vue cli 3

- Vue 프로젝트는 빌드 시 Default 로 ROOT\dist 아래에 결과물 생성

- vue cli 3 이상 버전에서는 project 생성 시 webpack 설정 파일이 내부로 감춰져 있다.

@vue\cli-service\webpack.config.js

1. 설정을 위한 파일 추가

ROOT\vue.config.js

2. 확인

위와 같이 설정 후 빌드 명령어 실행 시 아래와 같이 결과물 생성

: npm run build

환경 : centOS 7, docker 1.13.1 

docker 설치

버전 확인

docker 실행

docker hub 에서 특정 이미지 검색

  ex) tomcat 관련 이미지 검색 시 

docker hub 에서 특정 이미지 다운로드 ( 위 이미지 에서의 NAME 을 인자로 입력, 'docker.io' 생략 가능 )

현 시스템에 설치된 docker 이미지 검색

컨테이너 실행

컨테이너 종료 하며 나가기

컨테이너 종료 없이 나가기

컨테이너 현황 확인

컨테이너 접속 ( 위 이미지 에서의 NAMES or CONTAINER ID 를 인자로 입력 )

컨테이너 중단 ( 위 이미지 에서의 NAMES or CONTAINER ID 를 인자로 입력 )

컨테이너 재시작  ( 위 이미지 에서의 NAMES or CONTAINER ID 를 인자로 입력 )

 컨테이너 삭제 ( 위 이미지 에서의 NAMES or CONTAINER ID 를 인자로 입력 )