Ollama 설치

# Ollama docker 이미지 설치
docker pull ollama/ollama

# 컨테이너 생성( ADM 용 + window여서 privalege 옵션추가)
docker run -d --device /dev/kfd --device /dev/dri -v ollama:/root/.ollama -p 11434:11434 --name ollama --privileged ollama/ollama:rocm

한국어 base모델 설치

https://huggingface.co/heegyu/EEVE-Korean-Instruct-10.8B-v1.0-GGUF/tree/main

ggml-model-Q4_K_M.gguf 다운로드

# Ollama 내부 접속
docker exec -it ollama bash

# 사용할 디렉토리 생성 
mkdir ~/evee


# 컨테이너 밖에서 작업
# 호스트의 모델을 ollama 컨테이너로 이동
docker cp ./ggml-model-Q4_K_M.gguf ollama:/root/evee


# 컨테이너 내부 접속후
#파일 확인 
/root/evee

Custom Model 생성

생성을 위한 모델 설정 파일 생성

Modelfile

FROM ggml-model-Q5_K_M.gguf

TEMPLATE """{{- if .System }}
<s>{{ .System }}</s>
{{- end }}
<s>Human:
{{ .Prompt }}</s>
<s>Assistant:
"""

SYSTEM """A chat between a curious user and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the user's questions."""

PARAMETER stop <s>
PARAMETER stop </s>

모델 생성

# 커스텀 모델 생성
ollama create EEVE-Korean-10.8B -f ./Modelfile

# 모델 확인 
ollama list

모델 실행 

컨테이너 내부에서 사용 

# 컨테이너 내부에서 모델 실행
ollama run EEVE-Korean-10.8B:latest

컨테이너 외부에서 사용

# 컨테이너 외부에서 모델 실행
docker exec -it ollama ollama run EEVE-Korean-10.8B:latest

크롬 확장 프로그램을 활용한 UI

https://chromewebstore.google.com/detail/ollama-ui/cmgdpmlhgjhoadnonobjeekmfcehffco?hl=ko

WSL 세팅

WSL은 window에서 리눅스를 사용할 수 있도록 해준다.

리눅스 기반에서 docker를 설치할 예정

https://velog.io/@darktrace1/%EC%9C%88%EB%8F%84%EC%9A%B011%EC%97%90-UbuntuWSL2-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

Docker를 사용한 Mysql 세팅

#의존성 패키지 설치
sudo apt install -y apt-transport-https ca-certificates curl software-properties-common

#Docker 공식 GPG 키 추가 
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

#docker Rpository 추가 
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

#Docker 설치
sudo apt update
sudo apt install docker-ce

# 설치 확인
sudo docker --version

#docker 시작 
sudo service docker start

docker ps 

Docker hub에서 mariaDB 검색

#도커 이미지 다운로드
docker pull mariadb

# 도커 이미지 확인
docker images

#이미지를 사용하어 컨테이너 생성
docker run --detach --name mariadb --env MARIADB_ROOT_PASSWORD=123 -p 3306:3306 mariadb:latest

#docker container 상태 확인
docker ps

# 컨테이너에 접속
docker exec -it some-mariadb bash 

#컨테이너에서 mariadb DBMS 접근(위 설정에서 비밀번호는 123)
mariadb -u root -p

# 데이터 베이스 조회
show databases;

# 데이터베이스 생성
create database portfolio;

# 데이터베이스 접속
use portfolio;

# 쿼리 실행 확인
select now()

# timezone 세팅
SET global TIME_ZONE='+09:00';
SET session TIME_ZONE='+09:00';

# 확인 
select now();

# 계정생성
CREATE USER 'adm'@'%' IDENTIFIED BY '123';

# 권한부여
GRANT ALL PRIVILEGES ON portfolio.* TO 'adm'@'%';

# 권한 부여 반영
FLUSH PRIVILEGES;

Docker volume 

Volume을 설정하지 않는다면 도커의 컨테이너를 삭제 시 mariaDB의 데이터 또한 모두 삭제 된다.

Volume을 사용하여 컨테이너 내부와 host의 디렉토리를 공유 하는것으로 container가 삭제 되더라도 volume을 사용한다면 신규 컨테이너에서 host의 파일을 읽기 때문에 데이터의 손실이 없다.

Ex 

docker-compose

services:
  mariadb:
    container_name: mariadb
    image: mariadb:(버전 기재)
    restart: always
    # 환경에 따라 변경
    expose:
      - "3306"
    volumes:
      # DB 데이터 저장 디렉터리
      - ./data:/var/lib/mysql
      # 설정 파일 저장될 위치
      - ./config:/etc/mysql/conf.d
    environment:
      # 정의하지 않으면 실행 시, 에러가 발생합니다.
      - "MYSQL_ROOT_PASSWORD=(root 계정의 PASSWORD 정의)"
      # 컨테이너 내의 시스템 타임존을 우리나라에 맞게 설정합니다.
      - "TZ=Asia/Seoul"
    command:
      # 위 명령어를 사용하지 않으면, 일부 설정이 latin으로 설정됩니다.
      - --character-set-server=utf8mb4
      - --collation-server=utf8mb4_unicode_ci

https://github.com/Kmmanki/portfolio_was

멀티모듈이란?

하나의 프로젝트를 여러개의 독립적인 모듈로 분리하여 구성하는 방식으로 여러 모듈간 의존성 관리를 할 수 있다.

Ex)

login 모듈(로그인 관련 api)은 auth와 common 모듈을 포함한다. 

board 모듈(게시판 관련 api)은 auth와 common 모듈을 포함한다.

auth 모듈(authentication 관련 설정) Oautn, jwt 관련 라이브러리를 포함한다.

위와같이 모듈을 분리함으로써 auth가 필요 없는 모듈은 auth를 가져가지 않고 추후 다수의 개발자가 개발 시 보다 용이한 버전관리를 할 수 있다.

프로젝트 우클릭 -> New -> Module

module-common, module-normal-board, modue-main 추가

기존의 src 제거

ps . 모듈 이름 오타남.

  modue-noraml-board -> module-normal-baord

settings.gradle(intelij에서 자동으로 작성해줌)

rootProject.name = 'portfolio_was'
include 'module-common'
include 'modue-normal-board'
include 'module-main'

build.gradle(프로젝트 최상위)

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.2.5'
	id 'io.spring.dependency-management' version '1.1.4'
}



java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}


// 모든 모듈에 적용되는 사항
subprojects {
	apply plugin: "org.springframework.boot"
	apply plugin: "io.spring.dependency-management"
	apply plugin: "java"

	group = 'com.portfolio'
	version = '0.0.1-SNAPSHOT'
    
    // 라이브러리 및 프레임워크 저장소
	repositories {
		mavenCentral()
	}

	configurations {
		compileOnly {
        	// 롬복 관련 설정
			extendsFrom annotationProcessor
		}
	}

	dependencies {
		implementation 'org.springframework.boot:spring-boot-starter-web'
		compileOnly 'org.projectlombok:lombok'
		developmentOnly 'org.springframework.boot:spring-boot-devtools'
		annotationProcessor 'org.projectlombok:lombok'
		testImplementation 'org.springframework.boot:spring-boot-starter-test'
		
        // OpenAPI의 swager 기능 사용하기 위해
		implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.5.0'
	}

	tasks.named('test') {
		useJUnitPlatform()
	}


}

module-normal-board의 build.gradle

// 빌드 시 bootJar로 생성하지않음
bootJar { enabled = false }
// 다른 모듈의 라이브러리 형태가 될 것이기 때문에 jar 형태로 진행
jar { enabled = true }

dependencies {
	// common 모듈에 의존
    implementation project(":module-common")
}

module-common의 build.gradle

bootJar { enabled = false }
jar { enabled = true }

dependencies {

}

module-main의 build.gradle

dependencies {
    // 이미 board에 포함된 의존성임으로 추가하지 않음
//    implementation project(":module-common")
    implementation project(":module-normal-board")
}

module-main 의 main 함수 추가

PortfolioWasApplication.java

package com.portfoio;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication(scanBasePackages = "com.portfoio")
public class PortfolioWasApplication {
    public static void main(String[] args) {

        SpringApplication.run(PortfolioWasApplication.class, args);
    }
}

구동 확인

모듈 의존성 적용 확인

module-common에 TestController.java 추가

OpenAPI 접속

• http://localhost:8080/swagger-ui/index.html

main 모듈에 없는 Controller 적용 확인

https://github.com/Kmmanki/portfolio_was

2부 React 아키택쳐

리액트 교과서 Chapter12(Webpack)

Webpack의 역할

자바스크립트를 작성을 하다보면 많은 js 파일을 생성하게 된다.
이러한 js 파일들을 적은 수의 js로 합쳐주며 이를 통해 js 요청의 횟수를 줄여준다.

또한 A.jsx와 B.jsx가 모두 Multiutil이라는 유틸리티 모듈을 사용 할 경우 중복하여 요청을 할 수 있다. 이러한 상황에서 Webpack의 도움을 받을 수 있다.

Webpack은 의존성을 분석하여 다음과 같은 작업을 진행한다.

• 모든 의존 모듈을 올바른 순서로 불러오도록 한다.
• 모든 의존 모듈을 한 번ㅆ기만 불러오도록 한다.
• 자바스크립트 파일이 가능한 적은 파일로 묶여지도록 한다.(이를 정적자원이라고 부른다.)

그 외에도

• JS, Jade, CoffeScript 파일을 js파일로 변환한다.
• ES6 미지원 브라우저를 대응하기 위해 ES6+ 코드를 ES5 코드로 변환한다.
• 스프라이트 이미지를 하나의 PNG 파일이나 JPG 파일 또는 인라인 데이터 URI 이미지로 최적화 한다.
• npm 의존 모듈을 관리하고 번들링하여 일일이 인터넷에서 내려받거나 HTML의 script 태그를 추가하지 않아도 사용할 수 있도록 한다.
• 핫 모듈 대체를 적용한다(?)
• 개발용 웹 서버를 실행한다.

Webpack의 적용

• Webpack: 번들로 도구
• 로더: 스타일, CSS, 핫 모듈 대체, Babel, JSX 전처리기(style-loader, css-loader, react-hot-loader, babel-loader, babel-core, babel-preset-react)
• Webpack 개발 서버: Express 기반의 서버로 HMR 기능을 사용할 수 있다.

$ npm init -y
$ npm i -D babel-loader css-loader react-hot-loader webpack webpack-dev-server html-webpack-plugin react-dom react babel/preset-react @babel/plugin-syntax-jsx babel/syntax-dynamic-import --force
$ npm install -D @webpack-cli/generators
$ npx webpack init --force

barbelrc

{
  "plugins": [],
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

js의 로드는 dom 이후에

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="./main.js" crossorigin></script>
</html>

$ npm run serve

https://github.com/Kmmanki/react_note/tree/master/chapter12