2023 05 15

2023-05-15¶

Slick DB 연결¶

프로젝트 디펜던시에 슬릭 라이브러리 추가
- libraryDependencies += "com.typesafe.slick" %% "slick" % "3.3.3"

DB Config 파일 추가

import slick.jdbc.JdbcProfile

case class DatabaseConfig(driver: JdbcProfile, url: String, user: String, password: String)

Slick Driver 인스턴스 생성

val config = DatabaseConfig(Driver, "jdbc:mysql://localhost/mydatabase", "user", "password")
val db = config.driver.api.Database.forURL(config.url, config.user, config.password)

테이블 스키마 작성

import slick.jdbc.MySQLProfile.api._

case class User(id: Int, name: String, email: String)

class Users(tag: Tag) extends Table[User](tag, "users") {
  def id = column[Int]("id", O.PrimaryKey, O.AutoInc)
  def name = column[String]("name")
  def email = column[String]("email")

  def * = (id, name, email) <> (User.tupled, User.unapply)
}

val users = TableQuery[Users]

슬릭 쿼리 날리기

val allUsersQuery = users.result
val allUsers = db.run(allUsersQuery)

Webpack¶

참고: https://tecoble.techcourse.co.kr/post/2021-06-30-webpack-intro/ 참고: https://tecoble.techcourse.co.kr/post/2021-07-10-webpack-exercise/ 참고: https://velog.io/@dbsbest10/Webpack-%EA%B3%BC-Babel%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

개요
- 모듈 기능, 파일 분할 기능, jsx 변환 작업, css loader 기능을 지원함
- 번들러 만들어줘 여러개 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄여 더 빠른 서비스 제공

CRA
- create react app
- 기초 환경을 통틀어 설정하는 boiler plate

웹팩
- JavaScript 어플리케이션을 위한 [모듈 번들러] => 모듈을 병합하는 도구!
- 모듈이란?
  - 각각의 js 파일을 지칭함
  - 웹팩에서는 HTML, CSS, JS, Images, Font 등 프론트 구성 파일 전부를 모듈로 간주
- 번들러
  - 모든 모듈을 병합하고, 압축해서 만들어진 하나 이상의 파일

웹팩의 필요성
1. 모듈화의 필요성
  - 커져버린 코드를 하나의 파일로 관리하면 빡세니까
  - 코드를 나누어 관리하는 모듈에 대한 필요성 생김
  - CommonJS, AMD, UMD 같은 외부 모듈 시스템들이 태초에 있었고
  - ES2015 부터는 JS에서도 모듈 지원 (import, export)
2. 빠른 로딩 속도와 높은 성능
  - 웹팩을 통해 파일들(모듈)을 병합하고 압축해서 하나의 결과물(번들)로 만들면, 파일의 수/크기 줄어든다
  - Code Splitting 기법을 통해 필요할 때만 불러올 수 있도록 번들을 분할하여 개선하는 방식도 있음

웹팩 구성요소
- webpack && webpack-cli 설치
- root 폴더에 webpack.config.js를 만들자
```
module.exports = () => {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        rules: [ /*...*/ ]
    }
    plugins: {
        // ...
    }
}
```
- [Entry]
  - 어플리케이션에 필요한 모듈 찾기
  - 번들링 시작하기 위한 "최초 진입점"
    - 여기서 부터 Dependency Graph 그려서 뚝딱 찾아내세요~
- [Output]
  - 모듈을 하나로 묶어 하나의 결과물로!
  - 결과물이 위치하는 경로!
  - path: 번들링된 파일 저장할 경로
  - filename: 번들링된 파일의 이름
  - __dirname: 노드에서 제공하는 현재 디렉토리 경로에 대한 변수
- [Loader]
  - HTML, CSS, Images, 폰트 등을 웹팩이 읽을 수 있게 변환
  - css-loader, style-loader
- [Plugins]
  - 로더가 못하는 일 뚝딱

정리
1. 먼저 엔트리로 부터 의존성있는 모듈 찾음
2. 로더를 통해 각 모듈을 읽을 수 있게 해석
3. 모듈 병합/압축하여 아웃풋에 번들된 결과물을 생성
4. 생성된 결과물에 추가적인 작업 필요하면 플러그인 통해 처리

Babel¶

트랜스파일러!
- ES6 기능을 제공하지 않기 때문에 ES5 코드로 변환시키는 과정을 누군간 해줘야함
트랜스파일링?
- 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환