버전 비교

두 버전을 비교하는 코드를 작성했다. 예를 들어 시스템에서 요구하는 최소 버전이 있는데, 사용자의 버전이 시스템의 최소 요구 버전을 만족하는지 확인하는 함수

• 최초작성

  function checkValidVersion(systemVersion, userVersion) {
  let sepSystemVersion = systemVersion.split('.');
  let sepUserVersion = systemVersion.split('.');
  
  if(sepSystemVersion[0] < sepUserVersion[0]){
    return true
  }else if(sepSystemVersion[0] === sepUserVersion[0]) {
    if(sepSystemVersion[1] < sepUserVersion[1]) {
      return true
    }else if(sepSystemVersion[1] === sepUserVersion[1]) {
      if(sepSystemVersion[2] <= sepUserVersion[2]) {
        return true
      }
    }
  }
  return false
  }

• 중복코드 제거

  function checkValidVersion(systemVersion, userVersion) {
  let sepSystemVersion = systemVersion.split('.');
  let sepUserVersion = systemVersion.split('.');
  
  if(sepSystemVersion[0] < sepUserVersion[0]) return true
  if((sepSystemVersion[0] === sepUserVersion[0]) && (sepSystemVersion[1] < sepUserVersion[1])) {
    return true
  }else if((sepSystemVersion[1] === sepUserVersion[1]) && (sepSystemVersion[2] <= sepUserVersion[2])) {
    return true
  }
  return false
  }

• 추후 유지보수를 위한 모듈화

  function checkValidVersion(systemVersion, userVersion) {
  let sepSystemVersion = systemVersion.split('.');
  let sepUserVersion = systemVersion.split('.');
  
  if(compareVersion(sepSystemVersion[0], sepUserVersion[0], "<")) return true
  if(compareVersion(sepSystemVersion[0], sepUserVersion[0], "===") && compareVersion(sepSystemVersion[1], sepUserVersion[1], "<")) {
    return true;
  }else if(compareVersion(sepSystemVersion[1], sepUserVersion[1], "===") && compareVersion(sepSystemVersion[2], sepUserVersion[2], "<=")) {
    return true;
  }
  return false;
  }
  

function compareVersion(systemVersion, userVersion, compareOperator) { switch (compareOperator) { case "===": return systemVersion === userVersion; case "<=: return systemVersion <=userVersion; case "<": return systemVersion < userVersion; default: new Error("유효하지 않은 연산자 입니다."); } }

```

위 코드보다 조금 더 효율적이고 유지보수에 용이한 코드를 생각해 보자!

느낀점

중복 코드 줄이는 것까지야 생각할 수 있었지만, 추후의 유지보수를 위해 공통 코드를 모듈화 하는 것은 회사 선배분의 조언이 없었다면 생각조차 할 수 없었다. switch문을 사용하는 방식 말고 eval() 이라는 자바스크립트 메서드를 통해서 더 간결하게 줄였었는데, 보안문제와 효율성 문제로 인해서 다시 switch문으로 변경하였다. 취업 준비를 하면서 포트폴리오랑 자소서에 유지보수가 가능한 코드를 작성하는 개발자가 되겠다고 적었었는데, 그때 그 마음을 잊은것은 아닌지 다시한번 돌아보는 계기가 되었다.

아직 멀었다...

그렇다... 난 나와의 약속을 지키지 못했다. 이번주 복싱🥊 안가는 날 JWT랑 SpringSecurity 정리 하겠다. 새해 첫 약속 🤙

OJT 프로젝트에 JWT·SpringSecurity 적용

이건 마무리가 되었고, 이제 기존에 있던 게시판 기능에 회원 테이블을 추가해서 게시판과 회원의 연관관계를 설정해주는 일이 남아 있다.

• 오늘의 삽질 현재 IntelliJ를 2020.1.1 버전을 쓰고 있는데, 이게 JVM 1.4.20까지만 지원을 해서(OJT는 JVM 1.6.21) 다운그레이드를 했다. 사실 컴파일하고 빌드하는 것은 아무 문제 없었지만 빨간줄이 계속 떠서 거슬려서 다운그레이들 실행했다. 그런데... 잘되던 기능이 갑자기 안되는것...

  알고 보니 1.6.21에서는 List 타입을 JSON으로 전송하지만, 1.4.20에서는 그러지 못한것.. 해결방법은 jackson 의존성 추가

  // https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
  implementation("com.fasterxml.jackson.core:jackson-databind:2.0.1")

> 
> Java Object를 JSON으로 변환하거나 JSON을 Java Object로 변환하는데 사용할 수 있는 Java 라이브러리
> 
> 

# 열심히 살아보자 1년!

어제에 이어서 OJT프로젝트에 Spring Security와 JWT를 적용하고 있는 중 토큰만 생성하면 끝일 줄 알았는데, AccessToken, RefreshToken을 적용하려니까 조금 어려움이 있다.

크게 4단계로 구분 하였음

1. AccessToken과 RefreshToken 모두 만료되었을 때 => 재로그인
2. AccessToken만 만료 => RefreshToken 유효성 검사후, AccessToken 재발급

+) RereshToken 만료일 근접하면 RefreshToken 재발급 3. RefreshToken만 만료 => RefreshToken 재발급 4. 두 토큰 모두 유효할 때 => 요청 정상 처리

이렇게 진행하려고 한다!

그래서 토큰은 어디에 저장할 건데?

토큰 저장 위치는 Cookie, LocalStorage, SessionStorage 이정도?

참고1 참고2

뭐 이렇다고하는데, 사실 더 잘 정리한 곳이 있긴했는데, 못찾겠다 나중에 찾으면 추가해놔야지..

포트폴리오용 프로젝트를 진행할 때 Cookie에 값을 저장했었는데, 확실히 서버에서도 접근이 가능해서 편하게 사용했던 것 같다. 이번에는 LocalStorage에 토큰 값을 저장해서 사용하려고 한다.

너무 아무생각없이 코드만 짠것 같다. SpringSecurity의 UserDetails, UserDetailsService 등 기본 개념들도 주말에 잘 정리해놔야겠다!

올해 마무리 잘하자!

마무리

오랜만에 다시적는 TIL, 연말이라 약속도 많고....는 핑계고 그냥 귀찮았다.

이제 다시 퇴근 후 공부도 시작!

여태까지 OJT에서 구현했던 코드에 간단한 테스트 코드를 적용해보았다. 그리고 이어서 Spring Security와 JWT를 적용하고 있는 중이다.

이번주 정리 예정

• Spring Security

• JWT
• Authentication / Authorization

flex box 개구리 ㅋ

기존 코드

<div v-if="item.count > 0">
  <div class="red">
    <p> {{ count }} </p>
  </div>
</div>
<div v-if="item.count < 0">
  <div class="blue">
    <p> {{ count }} </p>
  </div>
</div>

위와 같이 두 <div>가 동일한 내용을 포함하고 있지만, class 만 상황에 따라 다르게 적용되어야할 때 class binding을 사용할 수 있다.

변경

<div :class="{'red': item.count > 0, 'blue' : item.coun < 0}">
  <p> {{ count }} </p>
</div>

이렇게 class binding을 적용한다면 변경전 코드보다 훨씬 간소화할 수 있다.

부모 컴포넌트

<template>
  <ChildComponent 
        @up="increase"
  />
</template>
<script>
import ChildComponent from '@/ChildComponent.vue';

export default {
    setup() {
      const increase = (count) = > {
        count += 1;
      };

      return {
        increase,
      }
    },
      components: {
      ChildComponent,
    }
}
</script>

자식 컴포넌트에 up이라는 이름으로 increase 메서드 전달

자식 컴포넌트

<template>
  <p> {{ count }} </p>
  <button @click="clickToIncrease(count)">CLICK</button>
</template>
<script>
export default {
    emits: ['up',],

    setup(context){
      const count = ref(0);

      const clickToIncrease = (count) => {
        context.emit('up', count);
      };

      return {
        count,
      }
    }
}
</script>

emits로 부모 컴포넌트에서 전달 받고 clickToIncrease 메서드를 통해 부모 컴포넌트의 메서드를 동작시키고 값을 반환해서 출력한다.

<template>
  <h3>잔액 = {{ money }} </h3>
  <input v-model="money">
  <button @click="reset"> RESET </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const money = ref("");

       const reset = () => {
      money.value = 10000;
    }

    return {
      money,
    }
  }
}

원시 타입을 반응형으로 사용할 때 사용한다. script안에서 해당 값에 접근할 때는 .value를 통해서 접근해야 접근이 가능하다. 만약 그냥 접근하게 된다면 해당 값은 undifined로 반환되어 원하는 결과를 얻을 수 없다.

reactive

<template>
  <h3>잔액 = {{ money }} </h3>
  <input v-model="money">
  <button @click="reset"> RESET </button>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      money : '',
    });

       const reset = () => {
      state.money = 10000;
    }

    return {
      ...toRefs(state),
    }
  }
}

원시타입으로 적용이 안되고 Object,array,Map,Set 등의 타입에서만 사용할 수 있다. ref와는 다르게 .value로 접근할 필요가 없다.

toRef

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  setup() {
  const words = reactive({a:"a",b:"b"});
  const msg = words.a;
  },

  return {
    msg,
  }
}
</script>

위와 같이 작성 했을 때, 자바스크립트는 word.a의 value값만 복사하기 때문에 Proxy의 반응성을 유지하지 못한다. words의 a가 string이기 때문에 복사를 하면 value값만 복사해 반응성을 잃어버려서 반영되지 않는 모습입니다.

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    const words = reactive({a:"a",b:"b"})
    const msg = toRef(words, 'a')
    },
  return {
      msg,
  }
}
</script>

toRef는 하나의 property에 대해 부모 object와의 연결성을 유지한채로 reactive를 반환하고 이 변화는 부모에게도 반영이 되어 추적이 된다.

toRefs

<template>
  <h1>msg = {{ a }}</h1>
  <input v-model="a">
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    const words = reactive({a:"a",b:"b"})
    },
  return {
      ...toRefs(words),
  }
}
</script>

toRefs는 reactive의 모든 프로퍼티에 대해 toRef를 적용해 반환한다.

정하기 나름이지만 보통 ref선언해줘야 할 것이 4개가 넘어가는 경우 reactive 사용함

자바 스크립트의 비동기 처리에 사용되는 객체

Promise의 상태

• Pending(대기) : 비동기 처리 로직이 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 promise가 결과 값을 반환한 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

function getData() {
  return new Promise(function(resolve, reject) {    // promise 객체를 생성 (pending 상태)
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);    // response가 있다면 reslove (fulfilled 상태)
      }
      reject(new Error("Request is failed"));    // response가 없으면 reject (rejected 상태)
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

Reference

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

vite.config.js

  server: {
    port: 9000
    proxy: {
      '/board/v1': 'http://192.168.0.47:8080',
    }
  }

• port : 프론트 서버를 9000번 포트로 실행
• proxy : 9000번 포트로 들어온 /board/v1 으로 들어온 요청을 http://192.168.0.47:8080 여기로 넘겨줌

요청 자체는 http://localhost:9000/board/v1으로 보여지게 되지만 vite.config.js의 서버 proxy 설정으로 인해서 해당 요청은 http://192.168.0.47:8080여기로 넘어가게 된다.

이렇게 된다면, 프론트와 백엔드 서버는 서로 동일한 출처의 리소스로 인식을 해서 CORS 문제가 해결되게 된다. 하지만, 해당 설정은 local에서 실행할 때만 적용이되고 배포시에는 서버에서 Access-Control-Allow-Origin을 설정하거나, nginx에서 proxy설정을 해주어야 한다.

async function f() {
  return 1;
}

async함수는 항상 Promise를 반환한다. Promise가 아닌 값도 Promise로 값을 감싸 반환한다.

await

await는 async함수 안에서만 동작하며, Promise가 처리 될 때까지 기다립니다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림

  alert(result); // "완료!"
}

f();

다음 코드에서, await를 만나 Promise처리가 될 때 까지 기다렸다가 다음 동작을 진행하게 된다. 따라서 위의 함수를 실행하면 1초뒤에 완료!가 출력되게 된다.

Reference

https://ko.javascript.info/async-await

let user = {};
alert(user.address.street);    // TypeError: Cannot read property 'street' of undefined

값이 정의되어 있지않은 값을 참조 할 때 TypeError가 발생하게 되는데, 이럴 경우 옵셔널체이닝 ?.을 통해서 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

let user = {};

alert(user?.address?.street); // undefined

> 
```js
let user = null;
>
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

이렇게 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.

하지만,

>
alert( user?.address ); // ReferenceError: user is not defined

이렇게 user가 정의되어 있지 않을 때는 에러가 발생한다.

Reference

https://ko.javascript.info/optional-chaining

JavsScript에는 '없음'을 undifined와 null 두가지로 나타낼 수 있다.

undefined

let foo;
foo        // undefined

const obj = {};
obj.prop;    // undefined

값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다.

null

let foo = null;
foo     // null

const obj = {prop: null};
obj.prop     // null

null은 객체가 없음을 나타낸다.

typeof 연산

typeof null     // 'object'
typeof undefined     //    'undefined'

Null Check

== 연산자는 비교하는 두 타입을 일치시킨 후 값만 비교하고, === 연산자는 비교하는 두 타입과 값을 모두 비교한다.

null === undefined; // false
null == undefined;  // true

null == 1       // false
null == 'hello' // false
null == false   // false

undefined == 1       // false
undefined == 'hello' // false
undefined == false   // false

위의 코드를 보면, ==를 사용해서 undefined와 null에 대해서 Null Check를 할 수 있는 것을 알 수 있다.

추가로 . . !

let a = null;
let b;
let c = '123;

if(a){
  // 실행 안됨
}

if(b) {
  // 실행 안됨
}

if(c) {
  // 실행 됨
}

if에서 조건으로 작용할 때, 값이 null과 undefined라면 false로 작동한다.

data 바인딩할 때, v-bind와 v-model을 사용할 수 있다. 두가지의 차이점은

v-bind

• 템플릿을 통해 변수를 변경시킬 수 없음

v-model

• 템플릿을 통해 변수를 변경시킬 수 있음

example

<template>
    <p>줄임말과 원래말을 입력하세요.</p>
    <!-- v-bind는 템플릿을 통해 변수를 변경시킬 수 없음 (abbr값은 변경 안됨 - 일방작용)-->
    <input type="text" v-bind:value="abbr" />
    <!-- v-model은 템플릿을 통해 변수를 변경시킬 수 있음 (normal값은 변경 됨 - 양방향 작용)-->
    <input type="text" v-model="normal" />
    <hr />
    <abbr v-bind:title="normal">{{ abbr }}</abbr>
</template>

<script>
    import { ref } from 'vue'

    export default {
        setup() {
            const abbr = ref('CJ')
            const normal = ref('CheolJin')
            return {
                abbr,
                normal,
            }
        },
    }
</script>

• 초기 값
• 변경

v-bind로 바인딩한 값(normal)은 CJ로 고정되어 변경이 되지 않는다.

• data를 불러오는 것만 가능 (일방 작용)

v-model로 바인딩한 값(abbr)은 입력하는 값에 따라서 변경된다.

• data를 불러오고 입력해서 변경도 가능 (양방향 작용)

원하는 채널에 Webhook app 추가

1. 해당 채널 통합에서 앱추가 클릭
2. Webhook 검색 및 설치
3. 원하는 채널 선택 후 앱 추가
4. Webhook URL 기억하기

2. Kotlin 코드 작성

SlackWebhookService.kt

@Service
class SlackWebhookService(private val restTemplate: RestTemplate) {

    fun sendContent(content: String) {
        val jsonObj = JSONObject(
                """
                    {"attachments": [
                        { 
                            "pretext" : "attachments 제목입니다!",
                            "color" : "#2eb886",
                            "text" : ${content}
                        }
                      ]
                    }
                """.trimIndent()
        )

        val header = HttpHeaders()
        header.contentType = MediaType.APPLICATION_JSON
        val httpEntity = HttpEntity(jsonObj.toString(), header)

        var webhookUrl = "Webhook url을 입력하세요!"

        restTemplate.exchange(webhookUrl, HttpMethod.POST, httpEntity, String::class.java)

    }
}

SlackWebhookController.kt

@RestController
class SlackWebhookController(private val webhookCallService: SlackWebhookService) {
    @PostMapping("/msg")
    fun messageSendToSlack(@RequestParam(required = true) text: String): ResponseEntity<String>{
        webhookCallService.sendContent("${text}")
        return ResponseEntity("success", HttpStatus.OK)
    }
}

추가로 RestTemplate를 빈으로 주입 시켜야하는데, 그것은 다시 정리해서 따로 올리도록 하겠다!

자세한 내용은 github 참고

3. 테스트

1) Post man으로 전송

2) Slack에서 전송 확인

메시지 전송 형식(attachments)은 https://roseline.oopy.io/4d14964c-53fc-4b65-9e53-026fc52cb9cb 이곳을 참고

import java.util.Date

fun main() {
    val name = readLine()
    println("Hello, $name! \n Today is ${Date()}")
}

• ${}의 중괄호 사이에 문자열을 넣어서 사용할 수 있다.
• $name과 같이 식이 간단한 변수 참조인 경우 중괄호 생략 가능

로우 문자열

import java.util.Date

fun main() {
    val name = readLine()
    val message = """
        Hello, $name!
        Today is ${Date()}
    """.trimIndent()

    println(message)
}

기본 문자열 연산

문자 인덱스

"Hello!".length       // 6
"Hello!".lastIndex    // 5

val s = "Hello!"
println(s[0])        // H
println(s[5])        // !
println(s[10])        // 잘못된 인덱스

문자열 연결

val s1 = "Hello!"
val s3 = "Hel" + "lo!"
println(s1 == s2) // true  <java : s1.equals(s2)>

Tip) 자바의 ==와 != 연산자는 참조 동등성을 비교하기 때문에 실제 문자열 내용을 비교하려면 equals() 메서드를 사용해야 한다. 코틀린에서는 ==가 기본적으로 equals()를 가리키는 편의 문법이기 때문에 ==를 사용하면, 직접 equal()를 호출하므로, 따로 equals()를 호출할 필요가 없다.     코틀린에서 참조 동등성을 쓰려면?

===와 !== 연산자를 사용하면 된다.

문자열이 제공하는 함수

• isEmpty(), isNotEmpty() : 문자열이 비어있는지 검사

  "Hello".isEmpty()          // false
  "Hello".isNotEmpty()       // true

• substring() : 부분 문자열 추출

  "Hello".substring(2)       // "llo"
  "Hello".substring(1, 3)    // "el"

• endsWith(), startsWith() : 접두사나 접미사인지 검사

  "Hello".startsWith("Hel")  // true
  "Hello".endsWith("lo")     // true

• indexOf() : 인자로 받은 문자나 문자열이 나타나는 첫번째 인덱스를 반환

  //맨 앞부터 찾기
  "abcabc".indexOf('b')      // 1
  
  //주어진 인덱스부터 찾기
  "abcabc".indexOf('b', 2)   // 4

fun main() {
    val a = readline()!!.toInt()
    val b = readline()!!.toInt()

    println(a + b)
}

• readline() : 한 줄을 읽어 문자열로 반환
• !! : 널인 경우 예외를 발생
• toInt() :호출된 문자열을 정숫값으로 변환
  • 코틀린 String 클래스가 제공하는 메서드

가변변수

var sum = 1
sum = sum + 2
sum = sum + 3

• val : 불변(immutable) 변수
• var : 가변(mutable) 변수

  불변 변수를 사용하면 함수가 부수 효과를 일으키지 못하고, 함수형 스타일 코드를 장려할 수 있음

• 코드에 대한 추론이 쉬워지기 때문에 가능하면 불변 변수를 사용해야한다.

문자 타입 Char

• \t : 탭
• \b : 백스페이스
• \n : 새줄
• \r : 캐리지 리턴
• \', \" : 작은따옴표, 큰따옴표
• \\ : 역슬래시
• \$ : 달러 표시

수 변환

val n = 100 // Int
val l: Long = n // Error : cant' assign Int to Long

더 큰 범위의 타입으로 변환 하는 경우 다른 박싱한 타입의 깂을 만들어낼 수 있는 가능성이 생기고, 이로 인해 동등성 요구조건을 만족시키지 못하게 되어 오류를 발생

println(l == n)

위 코드를 올바른 코드로 인정하면 다음 연산 결과 false를 출력

val n = 100 // Int
val l: Long = n.toLong()

불 타입과 논리 연산

• ! : not
• or, and, xor
• ||, && : 지연 계산

코틀린에서는 and와 or가 &와 |를 대신한다.

or, and, xor 는 ||, && 보다 우선해 계산된다.

예를 들어,

a || b and c or d && e

은

a || (((b and c ) or d) && e)

이다.

Reference

알렉세이 세두노프, ⌜코틀린 완벽 가이드⌟, 길벗

마무리

오늘 OJT 끝! 코드 작성하고 하는 것 보다 서버 환경설정하고 프로젝트 빌드하고, 도커이미지 빌드하고 했던게 훨씬 오래 걸렸던 것 같다.

코틀린 완벽 가이드 책 구매 완료 코틀린으로 프로젝트를 한다고 생각하니 막막하고 걱정도 많이 되지만, 천천히 해보자 어차피 자바도 처음이었고 C/C++도 처음이었을 때가 있었으니까~

• 도커관련해서 학습한것은 주말에 정리해서 올려야겠다.
• 회사 적응하고 하느라 TIL도 안쓰고, 학습한 내용 정리도 못하고 일주일이 슥슥 지나간것 같은데, 다시 꾸준히 쓰는 습관을 만들자!
• 일주일간의 길고 긴 삽질의 끝 -> 앞으로 또 얼마나 많은 삽질을 하게 될까....?

router/index.js

const routes = [
    {
        path: '/',
        name: 'PageHome',
        component: PageHome
    },
    {
        path: '/board',
        name: 'BoardList',
        component: BoardList
    },
    {
        path: '/detail',
        name: 'BoardDetail',
        component: BoardDetail
    },
    {
        path: '/write',
        name: 'BoardWrite',
        component: BoardWrite
    },
]

• BoardList, BoardDetail, BoardWrite는 모두 게시판에 관한 기능이므로 공통 url을 /board로 묶어야겠다고 생각했다.

삽질1

router/index.js

const routes = [
    {
        path: '/',
        name: 'PageHome',
        component: PageHome,
    },
    {
        path: '/board',
        name: 'board',
        component: BoardList,
        children: [
            {
                path: "write",
                component: BoardWrite,
                name: 'BoardWrite',
            },
            {
                path: "detail",
                component: BoardDetail,
                name: 'BoardDetail',
            }
        ]
    },
]

• 이렇게 구성을 했더니, /board에서 /detail, /write 페이지로 넘어가지 않고, 페이지가 멈춰있는 문제가 발생했다.

해결

children을 사용하는 경우는 크게 2가지가 있다.

1. 공통 컨포넌트가 존재하는 경우에 공통 컨포넌트에서 <router-view></router-view> 태그를 사용해서 API 요청을 통해 태그에 해당하는 영역을 바꿀 때
   2. 별개의 컨포넌트들을 공통 url을 사용하여 가지 뻗어나갈 때 (v - 원했던 방식)

router/index.js

import { RouterView } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'PageHome',
        component: PageHome,
    },
    {
        path: '/board',
        name: 'board',
        component: RouterView,
        children: [
            {
                path: "write",
                component: BoardWrite,
                name: 'BoardWrite',
            },
            {
                path: "detail",
                component: BoardDetail,
                name: 'BoardDetail',
            },
            {
                path: "list",
                component: BoardList,
                name: 'BoardList',
            }
        ]
    },
]

• 2번 방식으로 진행하기 위해서는 위 처럼 vue-router에서 import한 RouterView를 컨포넌트로 설정하고 List, Detail, Write를 모두 /board에서부터 뻗어져 나오게 하면 된다!
  • http://xxxxxx/board/write -> BoardWrite
  • http://xxxxxx/board/detail -> BoardDetail
  • http://xxxxxx/board/list -> Boardlist

Jetbrains에서 개발한 언어 자바 플랫폼에서 돌아가는 새로운 프로그래밍 언어로, 자바 라이브러리나 프레임워크와 함께 잘 작동하며, 성능도 자바와 같은 수준이다.

코틀린의 특징

코틀린의 주목적

• 현재 자바가 사용되고 있는 모든 용도에 적합하면서도 더 간결하고 생산적이며 안전한 대체 언어 제공

정적 타입 지정 언어

• 모든 프로그램 구성 요소의 타입을 컴파일 시점에 알 수 있음
  • 컴파일러가 타입을 검증해줌
  • 자바와 달리 코틀린에서는 컴파일러가 문맥으로부터 변수 타입을 자동으로 유추 (타입 추론 지원)

    var x = 1 // x를 정수(Int) 값으로 타입 추론

    Null 안정성

• Null이 될 수 있는 타입도 지원
  • null pointer exception으로 부터 자유로움

합수 타입 지원

• 함수형 프로그래밍을 지원
  • 함수를 작성해서 변수에 저장할 수도 있고, 다른 함수에 전달, 반환이 가능

왜 코틀린을 사용하는가?

자바와 상호운용서을 갖춘 간결하며 안전한 언어이기 때문에

실용성

• 다른 프로그래밍 언어가 채택한 이미 성공적으로 검증된 해법과 기능에 의존

간결성

• getter, setter, 생성자 파라미터를 필드에 대입하기 위한 로직 등 자바에 존재하는 여러 가지 번거로운 준비 코드를 묵시적으로 제공
• 람다를 지원하기 때문에 작은 코드 블록을 라이브러리 함수에 쉽게 전달

안전성

• JVM에서 실행한다는 사실은이미 상당한 안전성을 보장할 수 있다는 뜻
  • JVM을 사용하면 메모리 안전성을 보장하고, 버퍼 오버플로우를 방지하며, 동적으로 할당한 메모리를 잘못 사용함으로 인해 발생할 수 있는 다양한 문제를 예방

상호운용성

• 기존 자바 라이브러리를 가능하면 최대한 활용함

Reference

https://incheol-jung.gitbook.io/docs/study/kotlin-in-action/1

어제 오늘 푹~ 놀았다! 오랜만에 술도 먹고! 이제 마음 가라앉히고 준비해보자! 룰루