val array = arrayOf(1, 2, 3)

for(i in array.indices) {
  println("${i} - ${array[i]}")
}

for((index, value) in array.withIndex()) {
  println("${index} - ${value}")
}

• 콜렉션 객체는 초기화할 때 타입을 명시해야 함

• 불변 콜렉션

  • List - listOf
  • Set - setOf
  • Map - mapOf

• 가변 콜렉션

  • MutableList - mutableListOf(ArrayList)
  • MutableSet - mutableSetOf(LinkedHashSet)
  • MutableMap - mutableMapOf()

val map = mutableMapOf<Int, String>()
map[1] = "a"
map[2] = "b"

mapOf(1 to "a", 2 to "b")

확장 함수

• 특정 클래스의 내장 함수인 것과 같은 동작을 하는 함수를 추가 정의
• 동일한 명칭으로 작성된 확장 함수를 호출할 경우 원본 클래스의 함수를 호출함

fun String.lastChar(): Char {
  return this.charAt(this.length() - 1)
}

fun Int.add(other: Int): Int {
  return this + other
}

infix fun Int.add2(other: Int): Int {
  return this + other
}

1.add(2)  //3
1.add2(2) //3
1 add2 2  //3

//컴파일 시 함수 내부의 코드가 호출된 지점에 그대로 복사됨
//함수 호출에 의한 오버헤드 저감 목적
inline fun Int.add3(other: Int): Int {
  return this + other
}

함수형 프로그래밍

• 함수 파라미터에 함수 타입을 정의 가능
• 함수 파라미터 마자믹에 함수가 있다면 함수 호출 시 코드 블럭으로 구현하여 호출 가능
• Java에서는 람다 밖의 final이 아닌 변수를 사용할 수 없으나 Kotlin은 사용 가능(Closure 기능)

val isApple: (Fruit) -> Boolean = { fruit: Fruit -> fruit.name == "사과" }

fun filterFruit(fruits: List<Fruit>, filter: (Fruit) -> Boolean): List<Fruit> {
  val results = mutableListOf<Fruit>()

  for(fruit in fruits) {
    if(filter.invoke(fruit)) {
      results.add(fruit)
    }
  }

  return results
}

filterFruits(fruits, isApple)
filterFruits(fruits) {
  //return을 명시하지 않아도 마지막 줄의 결과를 자동 반환
  //여러 줄을 입력할 때 중괄호 필수 아님
  it.name == 사과 //it 키워드로 입력된 람다 파라미터 자체를 지칭
}

Stream 함수

• filterIndexed - index와 value를 함께 제공
• mapIndexed - index와 entry를 함께 제공
• mapNotNull - null이 아닌 값만 반환
• sortedByDescending - 주어진 값에 대해 역순 정렬
• groupBy - 주어진 값과 일치하는 Map<any, List<any>>를 반환
  • 파라미터 여러 개를 사용해 key와 value에 해당하는 조건을 각각 작성 가능
• associateBy - 특정한 key를 이용한 Map<key, any>를 반환
  • 파라미터 여러 개를 사용해 key와 value에 해당하는 조건을 각각 작성 가능
• flatten - 중첩 콜렉션을 단일 콜렉션으로 단순 변환

타입 별칭

• typealias 키워드를 통해 별칭 지정 가능

typealias FruitFilter = (fruit) -> Boolean

fun fruitFilter(frutis: List<Fruit>, filter: FruitFilter): List<Fruit> {

}

• 같은 함수 및 변수를 import할 때는 as 키워드로 별칭을 지정해줘야 함

구조 분해

• 객체 선언과 변수 선언을 동시에 수행
• 변수 이름에 매칭해주는 것이 아닌 변수 순서에 따라 매핑되기 때문에 코드 작성에 유의
• componentN 키워드를 이름으로 하는 함수 재정의 가능

val person = Person()
val name = person.name
val age = person.age

val (name, age) = Person()
//val (age, name) = Person() //age 변수에 원본 클래스의 name 값이 할당 됨

Scope Function

• 특정 코드 블럭 내 변수를 키워드로 대체

• it - 생략 불가능, 별칭 지정 가능
• this - 생략 가능

fun print(person: Person?) {
  person?.let {
    println(it.name)
    println(it.age)
  }
}

person.let {
  it.age
}

person.run {
  this.age
}

person.also {
  it.age
}

person.apply {
  this.age
}

with(person) { //with(객체, 람다 함수)
  println(this.name)
  println(age)
}

• 클래스 생성자는 클래스 이름 옆에 위치
  • 주 생성자라고 명칭하며 추가 생성자 작성 가능
  • 일반적인 상황에서는 기본값 파라미터 사용을 권장
• 클래스 정의 시 프로퍼티 항목에 var/val 키워드를 사용하면 getter/setter 함수는 자동 생성
  • Java 클래스를 사용할 때도 동일하게 사용 가능
• 클래스 블록 내 init 키워드를 사용해 클래스 생성 시 로직 작성 가능
  • Java의 static {} 블록과 유사
• 함수를 클래스 프로퍼티와 같이 정의하여 사용 가능
• 필드 프로퍼티의 custom getter/setter를 사용할 때 field(backing field) 키워드를 사용하여 재정의 가능

class Person constructor(name: String, age: Int) {

  val name: String = name
  var age: Int = age
}

//간소화
class Person(val name: String, var age: Int)

val person = Person("abc", 10)
println(person.name) //getter 접근
person.age = 20      //setter 접근
println(person.age)

class Person(val name: String, var age: Int) {
  init {
    if (age <= 0) {
      ...
    }
  }

  constructor(name: String) : this(name, 1) {
    println("부 생성자")
  }

  fun isAdult(): Boolean {
    return this.age >= 20
  }

  //위 코드와 동일한 동작
  val isAdult: Boolean
    get() {
      return this.age >= 20
    }

  //프로퍼티 정의에서 var/val을 지우고 작성해야 함
  val uppercaseName: String = name
    get(): String = field.uppercase()

  var name = name
    set(newValue) {
      field = newValue.uppercase()
    }
}

상속 및 구현

• extends, implement 키워드 대신 클래스 정의 코드 뒤 : SuperClass(생성자)형식으로 입력함
  • : 입력 시 좌우칸에 띄어쓰기 입력 주의
• 함수 재정의 시 override 키워드 명시해야 함
• 하위 클래스에서 상위 클래스의 프로퍼티를 재정의하려면 상위 클래스에서 해당 프로퍼티를 open 키워드로 정의해야 함
  • 클래스 프로퍼티에는 기본적으로 final 키워드가 사용됨
• 인터페이스의 프로퍼리를 재정의할 때는 field 키워드 없이 재정의 가능
• 상위 클래스를 설계할 때 생성자 혹은 초기화 블록에 사용되는 프로퍼티에 open 설정을 하면 안 됨
  • 동작 순서 상 하위 클래스에서 정의되기 전에 호출하면 의도한 값이 설정되지 않을 수 있음

class Animal(
  protected val species: String,
  // protected val legCount: int
  protected open val legCount: int
) {
  abstract fun move()
}

interface Swimmable {
  val swimScore: Int

  fun act() {
    println("...")
  }
}

interface Flyable {
  fun act() {
    println("...")
  }
}

class Cat(species: String)
 : Animal(species, 4) {
  override fun move() {
    println("...")
  }
}

class Penguin(
  species: String
) : Animal(species, 2), Swimmable, Flyable {
  private val wingCount: Int = 2

  override fun move() {
    println("...")
  }

  override val legCount: Int
    get() = super.legCount + this.wingCount

  override fun act() {
    super<Swimmable>.act()
    super<Flyable>.act()
  }

  override val swimScore: Int
    get() = super.swimScore //field 키워드 사용없이 가능
}

접근 제어

기본 접근 제어자

• Java - default
• Kotlin - public

package

• Java - 같은 패키지 혹은 하위 클래스에서만 접근 가능
• Kotlin - 선언된 클래스 또는 하위 클래스에서만 접근 가능

default

• Java - 같은 패키지에서만 접근 가능
• Kotlin - internal로 명칭 변경, 같은 모듈에서만 접근 가능
  • 모듈 - 프로젝트 단위

class Car(
  internal val name: String,
  private var owner: String,
  _price: Int //Prefix로 _를 입력해서 private 표현
) {
  var price = _price
    private set
}

Static

• Kotlin에는 static 키워드가 없음
• companion object 키워드를 사용해 클래스 내부의 static과 같은 속성을 가진 객체 생성
• class 키워드 대신 object 키워드를 사용해 Singleton 객체 생성

class Person(
  val name: String,
  var age: Int
) {
  companion object Hospital {
    // val MIN_AGE = 0 //런타임 시 값 설정
    const val MIN_AGE = 0 //컴파일 시 값 설정, 기본 타입+String에만 사용 가능

    @JvmStatic
    fun newBaby(name: String): Person  {
      return Person(name, MIN_AGE)
    }
  }
}

//Java
public static void callKotlinStatic() {
  // Person.Companion.newBaby(""); //companion object의 기본 명칭
  Person.Hospital.newBaby("");
  Person.newBaby("");
}

익명 클래스

//Java
interface SomeInterface {
  void actionA();
  void actionB();
}

new SomeInterface() {
  @Override
  void actionA() {
    ...
  }

  @Override
  void actionB() {
    ...
  }
}

//Kotlin
(object : SomeInterface) {
  override fun actionA() {
    ...
  }

  override fun actionB() {
    ...
  }
}

클래스 중첩

• Java에서는 내부 클래스를 static으로 정의하는 것을 권장함
• Kotlin은 static 키워드를 사용할 수 없기 때문에 기본적으로 static 클래스와 같이 설정됨
• static이 아닌 내부 클래스를 정의하려면 inner 키워드로 정의

class House(
  var address: String
  var livingRoom: LivingRoom
) {
  inner class LivingRoom(
    area: Double
  ) {
    val address: String
      get() = this@House.address
  }
}

클래스 제어

• data class - equals, toString(), hashcode 함수를 자동으로 만들어주는 클래스 정의
• enum class에 대해 when 분기 처리를할 때 else를 작성하지 않아도 무관
• sealed class를 사용하여 상속/구현 가능한 클래스를 제한할 수 있음

if else

• if 제어문을 return 가능
  • Kotlin에서는 삼항 연산자를 사용하지 않음

val grade = if(score >= 50) "P" else "F"

//Java
if(score >= 0 && score <= 100) ...

//Kotlin
if(score in 0..100) ...

switch case

• when 키워드 사용
  • when 키워드의 조건문 자체를 블럭 내부에서 구현 가능
• 조건문에는 expression 종류 사용 가능
• 한 줄에 조건 여러 개 입력 가능

return when(score) {
  in 90..99 -> "A"
  ...
  8 -> "B" //조건문이 score / 10 인 것으로 고려
  else -> "D"
}

return when {
  number in 90..99 -> "P"
  else "F"
}

반복문

• 전체적으로 Java와 Kotlin의 문법은 유사함
  • while 사용법은 동일
• 변화값을 표현하는 특정 키워드 사용
  • 역순인 경우 2 downTo 0
  • 반복 단위를 설정(i+=2 등)은 step 2 로 표현

//for-each
//Java
List numList = List.of(1,2,3);

for(int num : numList) {
  ...
}

//Kotlin
val numList = listOf(1,2,3)
for(num in numList) {
  ...
}

//범위 지정 for
//Java
for(int i = 0; i < 3; i++) {
  ...
}

//Kotlin
for(i in 0..2) {
  ...
}

예외 처리

• try-catch-finally 동일하게 사용 가능
• if-else와 같이 try 구문을 return 가능
• Kotlin에서는 Checked/Unchecked Exception 구분없이 모두 Unchecked로 간주함
  • throws 혹은 try-catch 필수 아님

//Kotlin에서는 try-with-resource를 사용하지 않음
//Java
try(BufferedReader br = new BufferedReader(...)) {
  br.readLine();
}

//Kotlin
BufferedReader(???).use {
  reader -> reader.readLine()
}

함수 작성

• public 생략 가능
• fun이라는 키워드로 함수라고 명시
• return을 =로 생략 가능

fun max(a: Int, b: Int): int = if(a > b) a else b

• 함수 파라미터 기본값을 사용하여 Overloading 구현
• 클래스 인스턴스 생성 시 builder 패턴을 사용하지 않고 named argument로 구현 가능
  • 자바 코드를 참조할 때는 named argument 사용 불가

fun someFun(str: String, num: Int = 3, useNeWLine: Boolean = true) {
  ...
}

someFun("문자열")
someFun("문자열", 1)
someFun("문자열", 2, false)
someFun("문자열", useNewLine = false)
---
//가변 파라미터 사용
//Java
printAll(["1", "2", "3"])

public void printAll(String... params) {
  ...
}

//Kotlin
printAll(["1", "2", "3"])
val strList = arrayOf("1", "2", "3")
printAll(*strList)

fun printAll(vararg params: String) {
  ...
}

• Spring Boot 3.0.9
• Spring Security 6.0.5

패치 노트

https://github.com/spring-projects/spring-security/releases/tag/6.0.5

• 위 내용 중 첫 번째 내용인 Improve RequestMatcher Validation 참조

수정 방안

기존 코드

//권한 확인을 하지 않는 uri
private static final String[] PERMIT_ALL_PATTERNS = new String[] {
  "/v3/api-docs/**",
  "/configuration/**",
  "/swagger*/**",
  "/webjars/**",
  "/swagger-ui/**",
  "/docs",
  "/api/login",
};

@Bean
public SecurityFilterChain securityFilterChain(
  HttpSecurity httpSecurity,
  HandlerMappingIntrospector handlerMappingIntrospector
) throws Exception {
  return httpSecurity
    .authorizeHttpRequests(request ->
      request
        .requestMatchers(PathRequest.toH2Console())
        .permitAll()
        .requestMatchers(PERMIT_ALL_PATTERN)
        .permitAll()
        .requestMatchers(AntPathRequestMatcher.antMatcher("/api/**"))
        .authenticated()
    )
    ...
    build();
}

오류 로그

Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.security.web.SecurityFilterChain]: Factory method 'securityFilterChain' threw exception with message: 
This method cannot decide whether these patterns are Spring MVC patterns or not. If this endpoint is a Spring MVC endpoint, please use requestMatchers(MvcRequestMatcher); otherwise, please use requestMatchers(AntPathRequestMatcher).
        at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:171)
        at org.springframework.beans.factory.support.ConstructorResolver.instantiate(ConstructorResolver.java:655)
        ... 24 common frames omitte

수정 코드

//권한 확인을 하지 않는 uri
private static final String[] PERMIT_ALL_PATTERNS = new String[] {
  "/v3/api-docs/**",
  "/configuration/**",
  "/swagger*/**",
  "/webjars/**",
  "/swagger-ui/**",
  "/docs",
  "/api/login",
};

@Bean
public SecurityFilterChain securityFilterChain(
  HttpSecurity httpSecurity,
  HandlerMappingIntrospector handlerMappingIntrospector
) throws Exception {
  return httpSecurity
    .authorizeHttpRequests(request ->
      request
        .requestMatchers(PathRequest.toH2Console())
        .permitAll()
        .requestMatchers( // <== 여기
            Stream
              .of(PERMIT_ALL_PATTERNS)
              .map(AntPathRequestMatcher::antMatcher)
              .toArray(AntPathRequestMatcher[]::new)
          )
        .permitAll()
        .requestMatchers(AntPathRequestMatcher.antMatcher("/api/**"))
        .authenticated()
    )
    ...
    build();
}

기타 사항

• Spring Boot 3 버전 이상부터 WebSecurityCustomizer Bean은 사용하지 않음
• WebSecurityCustomizer로 구현된 ignore 처리는 위의 코드대로 permitAll로 대체해야 함
• 현재 어플리케이션에서 OncePerRequestFilter 등과 같은 필터를 구현해서 사용하고 있다면 해당 상속 클래스에 아래 메소드를 구현해 필터 제외 처리를 해야 함

  @Override
  protected boolean shouldNotFilter(HttpServletRequest request)
    throws ServletException {
    return Stream
      .of(SHOULD_NOT_FILTER_URI_LIST)
      .anyMatch(request.getRequestURI()::startsWith);
  }

해당 글은 Transformers 기반의 Tokenizer를 Vue CLI에서 구현하는 방법을 소개한다.

참조 사이트 HuggingFace Transformers(Python) @xenova/transformers(Javascript) NLP support with Huggingface tokenizers(Java) DJL NLP Utilities For Huggingface Tokenizers Maven

의존성 추가

// package.json의 dependencies에 다음 내용 추가
"@xenova/transformers": "^2.3.1",

Tokenizer 파일 추가

• @xenova/transformers 라이브러리의 tokenizer.json 탐색 순서는 다음과 같다.
  • location.host/models/인스턴스 생성 파라미터/tokenizer.json
  • location.host/models/인스턴스 생성 파라미터/tokenizer_config.json
  • https://huggingface.co/ 인스턴스 생성 파라미터/resolve/main/tokenizer.json
  • https://huggingface.co/ 인스턴스 생성 파라미터/resolve/main/tokenizer_config.json
• 따라서 Vue에서 정적 파일을 Context Root로 제공하는 public 폴더에 models 폴더 생성 후 tokenizer.json를 넣어둔다
  • 빌드 이후에도 자동으로 포함됨

Tokenizer 인스턴스 생성

// 상단에서 인스턴스 생성 파라미터가 탐색 경로가 된다
// public/models/ 이하에 위치한다면 빈 string을 입력
// public/models/tokenizer/ 이하에 위치한다면 'tokenizer'를 입력
const tokenizer = await AutoTokenizer.from_pretrained('')

Token 길이 계산

const tokens = await tokenizer('안녕하세요')

// tokens 구조
{
  attention_maks: {
    data: BigInt64Array,
    dim: number[],
    size: number,
    type: string
  },
  input_ids: {
    data: BigInt64Array,
    dim: number[],
    size: number,
    type: string
  }  
}

// 토큰 길이는 아래 방법 중 택 1
tokens.attention_mask.size
tokens.attention_mask.data.length
tokens.input_ids.size
tokens.input_ids.data.length

위 함수 이외에도 다양한 기능이 제공된다.

해당 글은 Transformers 기반의 Tokenizer를 Java에서 구현하는 방법을 소개한다.

참조 사이트 HuggingFace Transformers(Python) @xenova/transformers(Javascript) NLP support with Huggingface tokenizers(Java) DJL NLP Utilities For Huggingface Tokenizers Maven

• 해당 글에선 Gradle 환경 기준으로 진행함

의존성 추가

// build.gradle의 Dependencies에 추가
implementation "ai.djl.huggingface:tokenizers:0.23.0"

Tokenizer 파일 추가

• src/resouces/ 경로 이하에 사용하고자 하는 Transformer 기반 tokenizer.json을 넣어둔다

Tokenizer Spring Bean 등록

• @Configuration 클래스에 작성

@Bean
public HuggingFaceTokenizer huggingFaceTokenizer() throws IOException {
  ClassPathResource tokenizerResource = new ClassPathResource(
    "docs/tokenizer/tokenizer.json"
  );

  HuggingFaceTokenizer tokenizer = HuggingFaceTokenizer.newInstance(
    tokenizerResource.getInputStream(),
    Map.of("modelMaxLength", "2048")
  );

  return tokenizer;
}

Token 길이 계산

int tokenLength = tokenizer
        .encode("안녕하세요")
        .getTokens()
        .length;

위 메소드 이외에도 다양한 기능이 제공된다.

컨테이너 및 리눅스 환경 의존성

• DJL NLP Utilities For Huggingface Tokenizers 라이브러리는 libgcc1를 참조하므로 해당 라이브러리가 설치되어 있어야 한다.

# Ubuntu 기준
sudo apt install -y libgcc1

# Dockerfile
FROM ubuntu:20.04

RUN SILENT=1 apt update -qq && SILENT=1 apt install -qqy openjdk-17-jre-headless libgcc1

Spring Boot 3 주요 변경점

본 글의 주제에 맞는 부분만...

• Java 17 공식 지원
• javax 패키지 지원 종료 및 jakarta 패키지 지원 시작
• Gradle 7.5 이상 지원

예제 프로젝트 구성

• IDE - VSCode
• Java 17
• Spring Boot 3.0.6
  • Spring Web
  • DB 구성
    • Spring Data JPA
      • H2 Embedded
    • Spring Data MongoDB
      • MongoDB 5.0.16
• Gradle 7.6.1
• Spring OpenAPI WebMVC 2.1.0
• Querydsl 5.0.0
  • Spring Boot의 javax 패키지 지원 종료로 jakarta 패키지를 명시해야 함
  • Querydsl MongoDB의 경우 그대로 사용

Gradle 설정

JPA

• P6Spy의 경우 1.9.0 버전부터 Spring Boot 3 지원
  • 예제 프로잭트 내 P6SpyFormatConfig.java 설정으로 SQL 포맷팅

...
configurations {
  ...
  querydsl.extendsFrom compileClasspath
  ...
}
...
dependencies {
  ...
  implementation "com.querydsl:querydsl-jpa:5.0.0:jakarta"
  annotationProcessor "com.querydsl:querydsl-apt:5.0.0:jakarta"
  annotationProcessor "jakarta.annotation:jakarta.annotation-api"
  annotationProcessor "jakarta.persistence:jakarta.persistence-api"
  implementation "com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0"
  ...
}
...

MongoDB

• MongoDB 드라이버를 Spring과 Querydsl이 각각 가지고 있어 충돌을 방지하기 위해 한 쪽에서 제외해야 함
• 본 예제에서는 Querydsl에서 제외

...
configurations {
  ...
  querydsl.extendsFrom compileClasspath
  ...
}
...
dependencies {
  ...
  implementation("com.querydsl:querydsl-mongodb:5.0.0") {
    exclude group: "org.mongodb", module: "mongo-java-driver"
  }
  annotationProcessor "com.querydsl:querydsl-apt:5.0.0:jakarta"
  annotationProcessor "jakarta.annotation:jakarta.annotation-api"
  annotationProcessor "jakarta.persistence:jakarta.persistence-api"
  ...
}
...

본 예제 프로젝트에서는 Gradle Querydsl 플러그인인 id "com.ewerk.gradle.plugins.querydsl" version "1.0.10"를 사용하지 않는다.

Querydsl의 Qclass 빌드는 compileQuerydsl 태스크 대신 Gradle dependencies에 정의된 2 개의 annotationProcessor로 진행한다.

이 과정은 프로젝트 빌드(Gradle build 태스크 아님)가 진행될 때 같이 진행되며 Qclass는 /bin/generated-sources/annotations/{프로젝트 패키지}/{Entity 클래스 패키지} 위치에 생성된다.

만약 예전의 방식대로 Querydsl 플러그인을 사용하고자 하는 경우에는 아래 2 개의 패키지를 제거해야한다.

annotationProcessor "jakarta.annotation:jakarta.annotation-api"
annotationProcessor "jakarta.persistence:jakarta.persistence-api"

제거하지 않으면 Qclass 중복 생성 오류가 발생하여 빌드가 정상적으로 진행되지 않는다.

모든 소스 코드는 다음 링크에서 확인 가능하다.

JPA 예제 프로젝트

MongoDB 예제 프로젝트

• MongoDB 프로젝트에는 트랜잭션 처리를 위한 Config와 Docker Compose 파일 및 설정 가이드가 포함되어 있음
  • MongoDB 문서

• 2016년 출시
• 다른 프레임워크에 비해 적은 코드 작성 추구
  • 가독성 상승, 쉬운 리팩토링 같은 장점
• 가상 DOM을 사용하지 않음
  • 빠른 성능을 기대할 수 있음
  • 코드가 HTML과 유사함
• CDN 미제공
• IE 미지원

SvelteKit

• Svelte Framework
• ReactJs의 Next.js, Vue.js의 Nuxt.js와 같은 관계
• SvelteKit 1.0이 출시됨에 따라 Svelte 프로젝트 생성 시 자동으로 SvelteKit을 사용하도록 설정 됨
• 초기에 번들러로 Rollup이나 WebPack을 쓰는 대신 현재는 Vite가 기본 번들러로 사용됨
• 앱 구성을 위해 파일 명, 변수 명 등에 예약어가 있음(다른 프레임워크도 동일하잖아?)

설치 필요

• NodeJs(이왕이면 LTS 버전)

프로젝트 초기화

npm create svelte@latest '디렉토리 명'

• 프로젝트 초기 모습
• +page.svelte가 index.html 역할

변수 선언과 바인딩

<script lang="ts">
  let name = 'World'
</script>

<h1>Hello {name}!</h1>
<!-- 동적 바인딩을 하려면 bind: 사용 -->
<input type="text" bind:value={name} />
<button on:click={() => (name = 'World')}>초기화</button>

<style>
  h1 {
    color: cadetblue;
  }
</style>

조건문과 반복문

{#if 조건식 혹은 boolean}
코드
{:else if 조건식 혹은 boolean}
코드
{:else}
코드
{/if}

{#each 배열 as 배열 변수명}
코드
{/each}

컴포넌트

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import Movie from './movie.svelte'

  let name = 'World'
  let movieList = ['A', 'BB', 'CCC', 'DDDD']
</script>

<h1>Hello {name}!</h1>

<input type="text" bind:value={name} />
<button on:click={() => (name = 'World')}>초기화</button>

<Movie {movieList} />

<style>
  h1 {
    color: cadetblue;
  }
</style>

<!-- movie.svelte -->
<script lang="ts">
  export let movieList: string[] = []
</script>

<ul>
  {#each movieList as movie}
    <li>{movie}</li>
  {/each}
</ul>

라우팅

• routes(웹 루트 개념) 디렉토리에 +layout.svelte 파일 생성

• slot에 대상 페이지(컴포넌트)가 로드 됨

  <a href="/actor">영화 배우</a>
  
  <slot />

페이지 요청 스크립트

• 라우팅을 통해 특정 컴포넌트로 이동 시 실행되는 함수

  <!-- src/routes/actor/+page.svelte -->
  <script lang="ts">
    export let data: any
  </script>
  
  <ul>
    {#each data.actorList as actor}
      <li>{actor}</li>
    {/each}
  </ul>
  
  <a href="/">홈</a>
  
  <!-- src/routes/actor/+page.server.js -->
  <!-- .server를 추가하면 SSR로 동작함 -->
  export async function load() {
    console.log('asdf')
    return { actorList: ['톰 크루즈', '브래드 피드'] }
  }

• 

API

• 라우팅을 그대로 따라감
• GET, POST, PATCH, DELETE 등을 지원
• 
• 

변수 저장

• 앱 전체에서 공유하려면 src/routes 이하의 +layout.svelte에 할당하는 것이 적절

<script lang="ts">
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const user = writable<string>()
  $: user.set('USER NAME!')

  setContext('user', user)
</script>

<a href="/actor">영화 배우</a>

<slot />

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { getContext } from 'svelte'
  import Movie from './movie.svelte'

  const defaultUser = getContext('user')
  let userName = $defaultUser
  let movieList = ['몬티 파이튼의 성배', '아이언 맨', '올드보이']
</script>

<h1>Hello {userName}!</h1>

<input type="text" bind:value={userName} />
<button on:click={() => (userName = $defaultUser)}>초기화</button>

<Movie {movieList} />

<style>
  h1 {
    color: cadetblue;
  }
</style>

Kotlin

Kotlin은 JetBrain에서 개발한 JVM 100% 호환가능한 언어이다.

Kotlin은 간결하고 모던한 코드를 지향한다.

Kotlin은 2011년에 출시 됐으며 2017년부터 Android의 공식 언어로 채택됐다.

Kotlin은 JVM과 100% 호환되기 때문에 기존 Java 개발 환경에서 그대로 사용 가능하며 파일 확장자는 kt이다.

클래스 정의

• public class ~~와 같은 키워드 생략 가능
• fun main() 키워드로 클래스의 main 메소드 구현
• main() 메소드에 static 키워드 사용하지 않음
• 클래스를 명시적으로 정의하지 않아도 함수 및 필드 정의 가능

변수 정의

• 기본 스코프는 public
• var - variable / val - value
• 권장 사항은 val로 생성 후 필요 시 var로 변경
• 변수 타입은 컴파일러가 자동 추론
• 선언과 동시에 값 입력 시 타입은 생략해도 무관

var temp1 = 5L // == long temp1 = 5L;
val temp2 = 10L // == final long temp2 = 10L;

함수 정의

• fun 이름(파라미터 이름: 타입 = 기본값): 반환 타입 {} 형태로 정의

Primitive / Reference Type

//Java
long num1 = 5L;
final long num2 = 10L;

//Kotlin
//연산을 사용할 때는 Reference Type 사용 권장
var num1: Long = 5L
val num2: Long = 10L

println(num1 + num2)

Null 처리

//nullable 변수는 타입 뒤에 ?를 추가
var num1: Long? = 5L
var num2: Long = 10L

num1 = null
num2 = null //에러

fun someFunction(param: String?): String {
    //함수 매개변수에서 null 가능 여부 확인
    return param.toUpperCase() //에러
}

//null-safe 문법
var str:String? = null
println(str?.length) //null 출력
println(str?.length ?: 0) //0 출력
println(str!!.length) //컴파일러에게 null이 아니라고 명시
---
//Java
@Nullable
public String getName() {
    return name
}

//Kotlin
println(xxx.getName().length) //에러

객체 초기화

//객체 초기화 시 new 키워드 사용하지 않음
val person = Person("이름")

Type 관리

val num1 = 5   //int
val num2 = 10L //long

println(num1 + num2) //에러
println(num1.toLong() + num2)

val num3 = 3.0f //float
val num4 = 6.0  //double

println(num3 + num4) //에러
println(num3.toDouble() + num4)
---
//Java
void compare(Object obj) {
    if(obj instanceof Person) {
        Person person = (Person) obj;
    }
}

//Kotlin
fun compare(obj: any) {
    if(obj is Person) { //부정의 뜻은 !is
        val person = obj as Person //타입 캐스팅, nullable은 as?
    }
}

특이 타입

Any

• Java의 Object와 같은 타입
• null 값 할당하려면 any?와 같이 입력

Unit

• Java의 void와 같은 타입
• return 타입으로 작성하는 Java와 달리 타입 인자로도 사용 가능
• 함수형 프로그래밍에서는 단 하나의 인스턴스만 갖는 타입으로 표현

Nothing

• 코드가 정상적으로 끝나지 않는다는 표현
• 오류만을 반환하는 타입, 함수에 사용

String Interpoation/Indexing

//Java
System.out.println("%s - %s".formatted(param1, param2);

String name = "abcd";
System.out.println(name.charAt(1));

//Kotlin
println("${param1} - ${param2}") //중괄호 생략 가능

val name = "abcd"
println(name[1])

연산자

• 단항 연산자, 산술 연산자 동일
• 비교 연산자('<', '>', '<=', '>=')는 객체에 사용 시 내부적으로는 compareTo 함수를 사용함
• 인스턴스의 메모리 주소 비교 시 ===, 값 비교 시 == 사용
  • Java equals <=> == Kotlin
  • Java == <=> === Kotlin
  • Kotlin에서 == 사용 시 내부적으로는 equals 함수를 사용함

Kotlin 전용 연산자

• in / !in
  • 콜렉션에 포함/비포함 여부 확인
• a..b
  • a부터 b까지의 범위 객체를 생성
• a[i]
  • 콜렉션의 요소를 가져옮
• a[i] = b
  • 콜렉션의 요소를 수정함

연산자 오버로딩

• 클래스 내 특정한 키워드를 이용해 연산자를 오버로딩 가능

operator fun plus(...): Long {
    return ... + ...
}

#용도에 따라 '%'는 제외해도 무방
top -b -n1 | grep -Po '[0-9.]+ id' | awk '{printf "%.2f%\n", 100-$1}'
#출력 결과
0.60%

Memory

#용도에 따라 '%'는 제외해도 무방
#메모리 사용률
free | grep Mem | awk '{printf "%.2f%\n", $3/$2*100}'
#출력 결과
32.83%

#메모리 총 용량
free | grep Mem | awk '{printf "%.2fGB\n", $2/1024/1024}'
#출력 결과
23.53GB

#메모리 사용량
free | grep Mem | awk '{printf "%.2fGB\n", $3/1024/1024}'
#출력 결과
7.73GB

Disk

#용도에 따라 1024 나누기와 '%', 'GB'는 제외해도 무방
#Disk 사용률
df . | sed -n '1!p' | awk '{total += $2; used += $3;} END {printf "%.2f%\n", used/total*100}'
#출력 결과
76.33%

#Disk 총 용량
df . | sed -n '1!p' | awk '{sum += $2} END {printf "%.2fGB\n", sum/1024/1024}'
#출력 결과
97.38GB

#Disk 사용량
df . | sed -n '1!p' | awk '{sum += $3} END {printf "%.2fGB\n", sum/1024/1024}'
#출력 결과
74.33GB

위와 같이 여러 개의 파일을 열었지만 탭이 한 줄로 표기돼서 확인이 어려울 경우

설정에서 위 옵션을 활성화

혹은 setting.json에 다음 내용 입력

"workbench.editor.wrapTabs": true,

코드 분산 처리 및 번들링을 용이하게 구현하기 위한 문법이다.

프론트엔드를 개발할 때 라이브러리를 설치하게 되면 일반적으로 모든 화면에서 해당 라이브러리를 사용하진 않는다.

이 때 번들링를 진행하면서 필요하지 않은 라이브러리, 코드들은 가지치기를 하는데 영어로는 Tree-Shaking이라고 한다더라.

이 과정을 통해 코드 자체의 가독성도 확보할 수 있고 페이지 로드 속도 증대도 꾀할 수 있다.

//es5
module.exports = {
  //변수, 함수 등
}
const 변수명 = require('라이브러리');

//es6
//라이브러리 로딩
export default {변수, 함수 등}; //하나의 파일에서 한 번만 가능
import 변수명 from '라이브러리';

//변수, 함수 로딩
export {변수, 함수 등}; //export는 각각의 항목에 직접 선언 가능
import {변수명} from '파일 상대 경로';

Null-Check

Null은 개발일을 하다보면 생각보다 매우매우매우 자주 보게되는 단어다.

평소에도 코드를 작성할 때 Null 발생 확률을 줄이는 방향을 기조로 작성하고 있다.

자바스크립트에서도 마찬가지인데 ESLint라던지 타입스크립트가 많이 도와줘서 어느정도 Null을 배제한 코드를 작성하는 것이 가능해졌다.

기본적으로 처리하는 방법은 다음과 같다.

const div = document.querySelector('div');
>
if(div) {
  div.innerText = 'abc'
}

하지만 뭔가 Cool하지 않다. 모든 null-ish한 변수에 대해 저 작업을 해줘야할까?

다른 방법을 보자.

Type Assertion

Type Assertion은 타입 단언으로 번역할 수 있는데 이 속성은 어떤 변수가 null-ish한 값이 아니다(반드시 값이 있다)라고 선언하는 것이다.

이는 코드 작성 중에는 어느 정도 컴파일 오류를 줄여주거나 하는 효과는 있지만 런타임에서 발생하는 null 오류를 처리해주거나 하진 않는다.

따라서 Development 환경에서 사용하고 Production 환경까지는 유지하지 않는 것이 좋다.

const div = document.querySelector('div');

div!.innerText = 'abc' //div가 null 가능함, 타입 단언으로 오류 제거
//위 코드에서 발생하는 이유는 querySelector의 return type이 HtmlElement | null이기 때문
//or
const div = document.querySelector('div') as HtmlDivElement;

div.innerText = 'abc' //오류 발생하지 않음

class User {
  id: string = ''
  name!: string //기본값 선언 없어도 오류 발생하지 않음
  age: number //생성자에서 취급하지 않으면 오류 발생

  constructor() {
    this.age = 20
  }
}

Optional Chaining

Optional Chaining은 따로 한국어로 번역된 건 없는 것 같다. 선택적 체이닝 혹은 선택적 연결이라고 하면 되겠다.

해당 옵션은 어떤 변수가 null-ish하다면 이후 코드 실행 중지라는 처리를 해준다.

컴파일 오류도 없애주고 런타임 오류도 효과적으로 줄일 수 있는 방법이다.

const div = document.querySelector('div');

div?.innerText = 'abc' //div가 null 가능함, 선택적 체이닝으로 오류 제거
//null이라면 innerText 변경 작업 하지 않음

Generic Optional/Defaults

제네릭을 사용하면서 어떤 변수를 Optional 처리하거나 기본 값을 지정해줄 수도 있다.

이는 함수 혹은 클래스를 선언할 때 사용 가능하다.

//제네릭에 입력 값이 없다면 기본 제네릭 값 지정
function getHtmlElement<T extends HtmlElement = HtmlDivElement>(query: string = 'div') {
  return document.querySelect(query) as T
}

Nullish Coalescing

말 그대로 null-ish한 값의 기본 값을 지정해주는 문법이다.

//es6
const a = document.querySelecotor('div') ?? document.createElement('div')
//화면에 div 항목이 없다면 새로 만들어서 리턴

비슷한 문법으로 ||가 있는데 이 두 개의 차이점은 다음과 같다

?? -> null, undefined와 같은 null-ish한 값을 검사

|| -> 0, ''(빈 문자열), false와 같은 falsy한 값을 검사

console.log(null ?? 'asdf'); //asdf
console.log(null || 'asdf'); //asdf

console.log(false ?? 'asdf'); //false
console.log(false || 'asdf'); //asdf

console.log(0 ?? 'asdf'); //0
console.log(0 || 'asdf'); //asdf

console.log('' ?? 'asdf'); //''
console.log('' || 'asdf'); //asdf

객체 병합

여러 개의 객체를 하나의 객체로 병합하는 방법이다.

크게 2 가지 방법이 있다.

class A {
  id = 'a';
}
class B {
  name = 'name';
}

let a = new A();
let b = new B();

let c = Object.assign({}, a, b);
let d = {...a, ...b};

객체 구조화(Destructuring)

일반적으로 객체에서 값을 조회할 때 '객체 이름'.'속성 이름' 같은 방법을 사용하는데 객체 구조화를 사용하면 다음과 같이 객체의 값을 받아올 수 있다.

//단일 객체 구조화
class A {
  id: 'a';
}

let { id } = new A(); //new A().id와 같음
//class 말고 object에 대해서도 적용 가능

console.log(id);

//배열 구조화
let arr = [1, 10, 100, 1000];

let [ one, ten, hundred, thousand ] = arr; //배열은 [] 사용

//중첩 객체 구조화
const person = {
  name: 'Kim',
  address: {
    zipCode: '00000',
    city: 'Seoul'
  }
};

const { address: { city } } = person;

console.log(city); // 'Seoul'

• 화면에서 입력받은 String key 값과 첨부 파일을 원격지 서버에 업로드
• 첨부 파일의 크기는 약 2 GB 이상
• Content-Type은 다음과 같음
  • 화면 -> 백엔드 multipart/form-data
  • 백엔드 -> 원격지 서버 multipart/form-data
• JVM 메모리 옵션은 -Xmx6g로 설정되어 있음

사용 코드

MultiValueMap<String, Object> uploadParam = new LinkedMultiValueMap<>();
uploadParam.add("key", key);
uploadParam.add("file", file.getResource());

//헤더 설정
HttpHeaders uploadheaders = new HttpHeaders();
uploadheaders.setContentType(MediaType.MULTIPART_FORM_DATA);

HttpEntity<?> uploadEntity = new HttpEntity<>(uploadParam, uploadheaders);

RestTemplate restTemplate = new RestTemplate();

ResponseEntity<String> uploadResponseEntity = restTemplate.exchange(
  "http://%s:%d/data/upload".formatted(
      serverEntity.getServiceServerIp(),
      serverEntity.getServiceServerPort()
    ),
  HttpMethod.POST,
  uploadEntity,
  String.class
);

오류 로그

c.s.v.config.ExceptionAdviceConfig - Handler dispatch failed; nested exception is java.lang.OutOfMemoryError: Required array length 2147483639 + 386 is too large
org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is java.lang.OutOfMemoryError: Required array length 2147483639 + 386 is too large

원인 분석

• 현재 소스에서는 RestTemplate를 new RestTemplate(); 생성자를 이용하여 생성하여 사용 중 RestTemplate Javadoc
• RestTemplate의 기본 생성자는 ClientHttpRequestFactory의 기본값을 사용함 ClientHttpRequestFactory Javadoc

해결 방안

• ClientHttpRequestFactory의 메소드 중 setBufferRequestBody의 주석 내용

  Indicate whether this request factory should buffer the request body internally.

  Default is true. When sending large amounts of data via POST or PUT, it is recommended to change this property to false, so as not to run out of memory.

• 현재 발생하고 있는 오류인 OOM 오류와 연관되어 있는 것으로 판단하여 해당 값을 설정하여 RestTemplate 생성

수정 코드

SimpleClientHttpRequestFactory simpleClientHttpRequestFactory = new SimpleClientHttpRequestFactory();
simpleClientHttpRequestFactory.setBufferRequestBody(false);

RestTemplate restTemplate = new RestTemplate(simpleClientHttpRequestFactory);

기타 사항

• 기본 값이 무한대로 설정되어 있는 타임아웃 같은 파라미터도 ClientHttpRequestFactory의 구현체를 통해 설정 가능
• 자주 사용하게 된다면 Spring Bean으로 등록하여 @Autowired로 주입 가능

• 화면에서 전달 받은 압축파일을 해제
• 해제한 파일 중 하나를 다른 서버의 API로 전송
  • 상대 시스템은 Python 3.8, FastAPI로 구성됨
  • Parameter는 Binary 파일, String으로 구성
  • Content-Type은 multipart/form-data

테스트 코드

MultiValueMap<String, Object> params = new LinkedMultiValueMap<>();
params.add("파라미터1", new ByteArrayResource(파일 내용 byte[]));
params.add("파라미터2", "문자열 값");

HttpHeaders uploadheaders = new HttpHeaders();
uploadheaders.setContentType(MediaType.MULTIPART_FORM_DATA);

HttpEntity<?> uploadEntity = new HttpEntity<>(params, uploadheaders);

RestTemplate restTemplate = new RestTemplate();

ResponseEntity<SttCommonResultResponseDto> responseEntity = restTemplate.exchange(
  requestUrl,
  HttpMethod.POST,
  uploadEntity,
  SttCommonResultResponseDto.class
);

1차 실행 결과

• 디버그 로그(해당 코드에서는 파라미터2는 전송하지 않음, 비필수 값)

15:51:45.985 [main] DEBUG org.springframework.web.client.RestTemplate - Accept=[application/json, application/*+json]
15:51:45.998 [main] DEBUG org.springframework.web.client.RestTemplate - Writing [{파라미터1=[Byte array resource [resource loaded from byte array]]}] as "multipart/form-data"
15:52:50.949 [main] DEBUG org.springframework.web.client.RestTemplate - Response 422 UNPROCESSABLE_ENTITY

• 에러 로그

{
    "detail": [{
            "loc": ["body", "파라미터1"],
            "msg": "Expected UploadFile, received: [class 'str']",
            "type": "value_error"
        }
    ]
}

원인 분석(불확실함)

• multipart 업로드는 로컬 파일을 업로드 하는데 사용하는 방식
• new ByteArrayResource()를 RestTemplate의 파라미터로 설정 시 파일에 대한 정보가 없어 메모리 상의 데이터를 전송함
• 파일 메타데이터 없이 byte 배열만 전송하여 FastAPI에서 String으로 인식하게 되는 것이 원인인 것으로 판단됨

변경 코드

Path path = Paths.get("Uuid 임시 파일 위치");

MultiValueMap<String, Object> params = new LinkedMultiValueMap<>();
params.add("파라미터1", new PathResource(path));
params.add("파라미터2", "문자열 값");

HttpHeaders uploadheaders = new HttpHeaders();
uploadheaders.setContentType(MediaType.MULTIPART_FORM_DATA);

HttpEntity<?> uploadEntity = new HttpEntity<>(params, uploadheaders);

RestTemplate restTemplate = new RestTemplate();

ResponseEntity<SttCommonResultResponseDto> responseEntity = restTemplate.exchange(
  requestUrl,
  HttpMethod.POST,
  uploadEntity,
  SttCommonResultResponseDto.class
);

2차 실행 결과

• 디버그 로그(해당 코드에서는 파라미터2는 전송하지 않음, 비필수 값)

16:25:10.079 [main] DEBUG org.springframework.web.client.RestTemplate - Accept=[application/json, application/*+json]
16:25:10.087 [main] DEBUG org.springframework.web.client.RestTemplate - Writing [{파라미터1=[path [Uuid 임시 파일 위치]]}] as "multipart/form-data"
16:25:38.558 [main] DEBUG org.springframework.web.client.RestTemplate - Response 200 OK

정리

• Python FastAPI와 통신할 때 multipart/form-data 전송 시 byte 배열을 전송하면 타입 오류가 발생할 수 있음
• In-Memory 데이터로 전송하지 않고 임시 파일을 생성해 전송하는 방식을 사용하면 타입 오류를 방지할 수 있음
• 임시 파일 생성 방식을 사용할 때 Disk Full 이슈를 방지하기 위해 주기적 삭제 혹은 작업 완료 후 삭제 같은 정책이 있어야 함

자바스크립트에서는 없던 개념인데 자바 같은 컴파일 언어에서는 비교적 일반적인 문법이다.

제네릭은 데이터 타입을 일반화(generalize)한다 라고 보면 되는데 어떤 클래스, 파라미터, 리턴 타입에 대해 타입을 지정해주는 것이다.

제네릭을 사용하면 어떤 데이터 타입이 오가는지 보다 명확히 할 수 있어 코딩 중 발생하는 문제를 줄일 수 있고 다양한 데이터 타입에 대해 대응할 수 있어서 코드 양을 줄일 수 있는 효과도 있다.

문법

function logAndReturn<T>(param: T): T {
  console.log(param);
  return param;
}

const str = logAndReturn('10'); //str의 데이터 타입은 string
const num = logAndReturn(10); //num의 데이터 타입은 number

Union Type과 비교

메소드 파라미터를 Union Type으로 설정하면 제네릭과 마찬가지로 여러가지 데이터 타입에 대해 대응할 수 있지만 return 결과도 Union Type으로 설정되기 때문에 이후 사용하기에 불편한 상황이 발생한다.

function logAndReturn(param: string | number) {
  console.log(param);
  return param;
}

const str = logAndReturn('10'); //str의 데이터 타입은 string | number
str.split(' '); //split은 string 타입에만 사용할 수 있으므로 error 발생

제네릭 타입 제한

function logAndReturn<T>(param: T[]): T {
  console.log(param.length);
  param.forEach((child) => {
    console.log(child);
  }
  return param;
}

const str = logandReturn('abc'); //배열 타입이 아니므로 error 발생
const arr = logAndReturn(['abc', 'def']);

//인터페이스 상속으로 타입 제한
interface LengthType {
  length: number;
}

function logAndReturn<T extends LengthType>(param: T): T {
  console.log(param);
  return param;
}

const num = logAndReturn(10); //number 항목에는 length 값이 없으므로 error 발생
const str = logAndReturn('10');
const arr = logAndReturn(['abc', 123]);
const obj = logAndReturn({leng: 10}); //object 항목에 length 값이 없으므로 error 발생

//인터페이스의 키에 대한 상속으로 타입 제한
interface Product {
  name: string;
  price: number;
  stock: number;
}

function getItemInfo<T extends keyof Product>(param: T): T {
  console.log(param);
  return param;
}

const name = getItemInfo('name');
const amount = getItemInfo('amount'); //Product 항목에 amount 속성이 없으므로 error 발생

유틸리티 타입

타입스크립트 작성 중 정의되어 있는 타입, 인터페이스에 대해 유동적으로 타입을 정의할 수 있는 방법이다.

다양한 타입이 정의돼있으며 공식 문서를 확인하자.

링크 - 타입스크립트 유틸리티 타입

interface Parent {
  name: string;
  age: number;
  address: string;
}

//Pick은 타입에서 정의된 특정 항목을 가져오는데 쓰인다.
type child1 = Pick<Parent, 'name'|'age'>;

//Omit은 Pick과 반대로 동작한다.
type child2 = Omit<Parent, 'address'>;

//Partial은 내부 항목을 Optional 값으로 정의할 수 있다.
type child3 = Partial<Parent>;
===
interface child3 {
  name?: string;
  age?: number;
  address?: string;
}

//mappedType은 기존 타입에서 정의된 항목의 속성을 재정의한다.
type Names = 'kim' | 'lee' | 'park';
type Ages = { [K in Names]: number}; //string 타입을 number 타입으로 변환

const ages: Ages = {
  kim: '20', //number 타입이 아니므로 error 발생
  lee: 30,
  park: 40
}

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

변수 문법

//자바스크립트
var str = 'hello';

//타입스크립트
var str: string = 'hello';

//배열 선언
var numbers: number[] = [1, 2, 3];

//제네릭 사용
var arr: Array<string> = ['hello', 'world'];

//타입스크립트 튜플
//각 인덱스 별 타입을 지정한 배열
var address: [string, number] = ['seoul', 10];

//타입스크립트 객체
var obj: object = {
  //값 유형 제한 없음
};
var person: {name: string, age: number} = {
  name: 'kim',
  age: 10
}

함수 문법

//파라미터와 리턴 타입 정의
function sum1(a: number, b: number): number {
  return a + b;
}

//옵셔널 파라미터와 기본 값
function sum2(a: number, b?: number = 0): number {
  return a + b;
}

인터페이스 문법

//기본 문법
interface User {
  name: string;
  age: number;
}

var kim: User = {
  //age를 정의하지 않아 오류 발생
  //옵셔널 설정을 하면 오류 발생하지 않음
  name: 'kim',
}

//함수 인터페이스 정의
interface SumFunc {
  (a: number, b: number): number;
}

var sum1: SumFunc = function (a: number, b: number): number {
  return a + b;
};

var sum2: SumFunc = (a: number, b: number): number => {
  return a + b;
};

//인터페이스 인덱싱
interface StringArray {
  [index: number]: string;
}

var stringArr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; //타입 오류 발생

interface RegExpArray {
  [key: string]: RegExp;
}

var regExpArr: RegExpArray = {
  cssFile: '*.css', //정규식이 아니므로 오류 발생
  jsFile: /\.js$/,
};
regExpArr['javaFile'] = /\.java$/

//인터페이스 상속
interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  language: string;
}

var kim: Developer = { //Person에서 정의된 name, age 항목에 대해서도 정의 필요
  language: 'Typescript',
};

파라미터 문법

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

//Union Type
function someFunction1(worker: Developer | Person) {
  //함수 호출 시 전달한 변수에 대해서만 접근 가능
  worker.name; //공통 요소는 자유 접근 가능
  worker.age; //특정 인터페이스(타입)에만 정의된 속성은 타입 체크 후 접근 가능
}

//Intersection Type
function someFunction2(worker: Developer & Person) {
  //함수에 선언된 파라미터 종류의 모든 변수에 접근 가능
  //별도의 인터페이스(타입)를 정의하는 방식
  worker.name;
  worker.age;
  worker.skill;
}

클래스 문법

//ES5
function Person(name, age) {
  this.name = name;
  this.age = age;
}
const kim = new Person('kim', 10);

//ES6 + Typescript
class Person {
  name: string;
  age: number;

  constructor() {
    this.name = ''
    this.age = 0
  }

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const kim = new Person('kim', 10);

//클래스 변수 상속
var user = {name: 'kim', age: 10};
var admin = {};
admin.__proto__ = user; //user에 설정된 변수와 값을 그대로 상속 받음

현재 상황

IDE(VSCode)에서는 단위 테스트가 정상적으로 된다.

하지만 Gradle Job을 통한 단위 테스트는 실패한다.

테스트 결과가 실패인 게 아니라 테스트 Job 자체의 실패가 발생한다.

프로젝트 주요 스택

OpenJDK 17 Spring Boot 2.6.6 Junit 5 Gradle 7.4.1

IDE 내 단위 테스트 결과

모두 테스트가 정상 통과된다.

사내 프로젝트다 보니 전체 패키지명은 못 보여드림

오류 로그

***ApplicationTests > testMessage() FAILED
    java.lang.IllegalStateException at DefaultCacheAwareContextLoaderDelegate.java:132
        Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException at ConstructorResolver.java:800
            Caused by: org.springframework.beans.factory.BeanCreationException at ConstructorResolver.java:658
                Caused by: org.springframework.beans.BeanInstantiationException at SimpleInstantiationStrategy.java:185
                    Caused by: java.lang.IllegalStateException at Assert.java:97

해당 오류 메시지를 가지고 여기저기 찾아봐도 나의 문제와 동일한 현상은 없었다.

그중에는 다음과 같은 해결책을 제시했다.

1. JUnit @Test 어노테이션의 패키지 변경
2. 1. import org.junit.jupiter.api.Test;를 import org.junit.Test;로 변경
3. 2. 현재 Gradle 구성 상 저런 패키지를 가져올 수 없었다.
4. test 프로필에 사용하는 H2 DB가 연결 가능한지 확인해라
5. 1. test 프로필에 연결돼있는 H2 DB는 Memory DB이다.
6. 2. Embedded DB이기 때문에 연결 가능한지 확인해볼 필요가 없다.

그렇다면 어디가 문제인가?

하루동안 고민해봤는데 두 번째 해결책을 다시 보게 됐다.

핵심은 테스트할 때 H2 DB에 연결할 수 있는가?이다.

test 프로필에는 별도로 datasource 항목을 정의해뒀기 때문에 다른 DB에 연결될 일도 없었다.

spring:
  config:
    activate:
      on-profile:
        - test
  datasource:
    url: jdbc:h2:mem:testdb
    username: sa
    password:
    driver-class-name: org.h2.Driver
  jpa:
    hibernate:
      ddl-auto: create

logging:
  level:
    root: info # 테스트 속도 향상을 위해 info로 설정

그렇다면 H2 DB에 연결할 때 필요한 재료(JDBC 드라이버 같은)들은 잘 있을까?

Gradle의 Dependency 설정을 보자

dependencies {
  ...
  developmentOnly "com.h2database:h2" //로컬 환경 및 테스트할 때만 사용
  compileOnly "org.mariadb.jdbc:mariadb-java-client" //빌드 이후에 사용
  ...
}

마지막으로 Gradle의 test 태스크는 빌드 및 패키징이 완료된 후 실행한다.

어?

그렇다면 저 developmentOnly를 implementation으로 바꿔서 다시 Gradle test를 해보자.

아주 가볍게 성공.

그렇다. 나름대로 패키지 구성을 멋지게 한다고 Gradle의 Dependency Scope를 이리저리 구성해놓은게 독이 됐다.

Gradle의 LifeCycle을 생각하지도 않고 단위 테스트에 필요한 Dependency를 개발 환경에만 적용되게 해놓은 것이 원인이었다.

H2 DB에 대한 패키지 외에 Dependency Scope가 다르게 설정돼있는 패키지도 몇몇개 있는데 이걸 다 implementation로 바꿔야할까 싶기도 하다.

그렇게되면 Dependency Scope는 별 의미 없는 것일까....?

문법이 비교적 자유로운 자바스크립트의 고질적인 문제는 결과를 예측하기 어렵다는 것이다.

type-check를 엄격하게 하지 않기 때문에 일반적으로 IDE에서 지원되는 compile 시점 혹은 여러 가지 프로그래밍 언어의 runtime 시점에서 발생하는 오류를 미리 알기 어렵다.

그리고 자바스크립트의 '웬만해선 작동해드림' 특성 때문에 오류가 발생했는지 알기 어렵기도 하다.

10 + '20' = '1020'
('b' + 'a' + + 'b' + 'a').toLowerCase() = 'banana' //🍌?

위와 같은 동작 하면 안 되는 코드가 잘 작동하기도 하고...

이런 이유로 Microsoft가 우리에게 타입스크립트를 하사하시었다.

타입스크립트로 프로젝트를 구성하면 위와 같은 사용법은 컴파일 단계에서 오류가 발생해서 사고를 방지할 수 있다

프로젝트 규모가 커질수록 어디서 오류가 발생할지 알기 어렵기 때문에 더욱 타입스크립트가 필요해지는 것 같다.

그런데 최근엔 타입스크립트가 너무 피곤하다고 자바스크립트로 먼저 구현하고 나서 타입스크립트로 리팩토링하기도 한다고 한다. 두 번 일하기?

기본 문법 비교

자바스크립트

/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a, b) {
  return a + b;
}

sum(10, '20'); //returns '1020'

타입스크립트

/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a: number, b: number) {
  return a + b;
}

sum(10, '20'); //error

자바스크립트에서 타입스크립트와 유사하게

// @ts-check 
// 파일 상단에 위 decorator 추가
// 자바스크립트에서 타입스크립트와 유사하게 구현 가능
/**
 * @param {number} a
 * @param {number} b
 * @returns a + b
 */
function sum(a, b) {
  return a + b;
}

sum(10, '20'); //error

타입스크립트 구성

npm i typescript (-g)

설치할 때 -g 옵션 생략 시 typescript 빌드는 npx tsc *.ts로 실행

//tsconfig.json
{
  "compilerOptions": {
    "allowJs": true, //js 파일 사용
    "checkJs": true, //js 파일 검사
    "noImplicitAny": true //any 타입 금지
    ...
  }
}

기타 옵션에 대해서는 타입스크립트 공식 문서 참조

velog는 링크에 {: target="_blank"} 속성이 안 되는구나

귀찮다

class MainClass {

    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}