IT & Mobile

팀뷰어로 원격 pc를 제어하려면
host PC에 teamViewer host를 설치해야한다. (라이선스 있다고 눌러야 뜨네요)

참고링크: https://m.blog.naver.com/terry_daddy/223284278249

file2를 file1Copied에 붙여서 2개파일을 합치는 명령어.
brew install coreutils를 한후,

$gdd if=file2.bin of=file1Copied.bin bs=1M oflag=append conv=notrunc

[array]

리턴하는 함수들: split,map, join(문자열 리턴)

• .some(v => v==7)   : true/false 리턴
• .find(v => v > 7)   :첫번째 만족하는 값 반환.   없으면 undefined 반환
• .findIndex(... ) :  첫번째로 만족하는 index반환.  없으면 -1 반환

예제:

const toCamelCase = (templCode) => {
    return templCode
        .toLowerCase() // 전체를 소문자로 변환
        .split('_') // "_" 기준으로 분할
        .map((word, index) =>
            index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1) // 첫 단어는 소문자 유지, 이후 단어는 첫 글자만 대문자
        )
        .join(''); // 배열을 문자열로 합침
}

특이함수: slice - 문자열/array 모두 동작.

const str = "JavaScript";

console.log(str.slice(5)); // "cript" (start만 입력하면 끝까지)
console.log(str.slice(0, 4)); // "Java"
console.log(str.slice(-6, -3)); // "Scr" (음수 인덱스 사용 가능)

- slice와 splice 차이점

            ( 원본 배열 변경 여부,  반환값,     주요 용도 로 비교)

[splice 사용예제] 
const index = users.findIndex(user => user.id === 2);
if (index !== -1) {
    users.splice(index, 1); // 삭제
}

[Object]:json

let obj = {a:1, b:2, c:3};

• Object.keys(obj) => array리턴
• Object.values(obj) => array리턴
• let newObj = Object.assign(obj);   //딥 카피.  자식이 array/obj일 경우는 잘안될 수도 있으므로,
  - let newObj = JSON.parse(JSON.stringify(obj));

[Set]

let mySet = new Set([1,2]);

let newSet = mySet.add(5); //[1,2,5]; 리턴하는 함수, mySet자체도 바꿈.

mySet.delete(2); //[1,5];           //리턴없는 함수

• array의 각종 좋은 함수들을 사용하기 위해 Set->array로 변환필요한 경우 많음

const mySet = new Set([1, 2, 3, 4, 5]);
const arr = Array.from(mySet);
console.log(arr); // [1, 2, 3, 4, 5]

[String] javascript도 java처럼 immutable이라서,

• .replace( , ) : 원본은 변경하지 않음

customGPT모델은 openAPI로 호출이 안되는 현상이 있네요.

그래서 자체훈련을 시키려면 fine-tuning모델이 맞고,
아래와 같이 생성하면 됩니다.

(json형식 예제)
{"messages": [
    {"role": "system", "content": "너는 친절한 금융 상담사야."},
    {"role": "user", "content": "대출 금리가 어떻게 되나요?"},
    {"role": "assistant", "content": "현재 대출 금리는 연 3.5%입니다."}
]}


jsonl형식.필요

{"messages": [{"role": "system", "content": "너는 친절한 채권 전문가야."}, {"role": "user", "content": "채권 회수 절차가 어떻게 되나요?"}, {"role": "assistant", "content": "채권 회수 절차는 1) 채무자 연락 2) 독촉장 발송 3) 법적 조치 순으로 진행됩니다."}]}
{"messages": [{"role": "system", "content": "너는 친절한 채권 전문가야."}, {"role": "user", "content": "부실채권을 매각할 수 있나요?"}, {"role": "assistant", "content": "네, 부실채권은 채권 매입 기관을 통해 매각할 수 있습니다."}]}

curl -X POST "https://api.openai.com/v1/files" \
  -H "Authorization: Bearer YOUR_OPENAI_API_KEY" \
  -H "Content-Type: multipart/form-data" \
  -F "file=@training_data.jsonl" \
  -F "purpose=fine-tune"



응답예시:
{
  "id": "file-abc123",
  "object": "file",
  "bytes": 12345,
  "created_at": 1700000000,
  "filename": "training_data.jsonl",
  "purpose": "fine-tune"
}

curl -X POST "https://api.openai.com/v1/fine_tuning/jobs" \
  -H "Authorization: Bearer YOUR_OPENAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gpt-3.5-turbo",
    "training_file": "file-abc123",
    "hyperparameters": {
      "n_epochs": 3
    }
  }'


응답 예시:

{
  "id": "ftjob-xyz789",
  "object": "fine_tuning.job",
  "model": "gpt-3.5-turbo",
  "training_file": "file-abc123",
  "status": "running",
  "created_at": 1700000000
}

curl -X GET "https://api.openai.com/v1/fine_tuning/jobs/ftjob-xyz789" \
  -H "Authorization: Bearer YOUR_OPENAI_API_KEY"

응답 예시: 
{
  "id": "ftjob-xyz789",
  "status": "succeeded",
  "fine_tuned_model": "ft:gpt-3.5-turbo:your-org:custom-model"
}

curl https://api.openai.com/v1/chat/completions \
  -H "Authorization: Bearer YOUR_OPENAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "ft:gpt-3.5-turbo:your-org:custom-model",
    "messages": [{"role": "user", "content": "채권 회수 절차가 어떻게 되나요?"}],
    "temperature": 0.7
  }'​

(참고: open API를 이용한 custom GPT는 불가능함, 내부 api로 외부데이터 연동은 가능)

1. OpenAI 플랫폼에서 Custom GPT 생성하기

Custom GPT를 설정하려면 OpenAI 플랫폼에서 새로운 Custom GPT를 생성해야 합니다.

1.1. OpenAI 플랫폼 접속

1. OpenAI Custom GPT 페이지로 이동
2. 로그인 후 상단의 My GPTs 메뉴 클릭
3. "Create a GPT" 버튼을 클릭하여 새로운 Custom GPT 생성 시작

2. Custom GPT 설정 과정

Custom GPT는 OpenAI의 Guided Setup을 통해 설정할 수 있습니다.
이 과정에서는 GPT의 성격, 역할, 학습 데이터, API 기능 설정을 조정할 수 있습니다.

2.1. 기본 정보 입력

• GPT의 이름 설정 → (예: "채권 전문가 GPT")
• 설명 입력 → (예: "이 GPT는 채권 회수 및 법률 상담을 위한 맞춤형 AI입니다.")

2.2. 역할 및 동작 방식 정의 (Instructions)

Custom GPT의 동작 방식을 정의하는 가장 중요한 과정입니다.

✅ "Instructions" 탭에서 설정할 내용

1. Assistant Instructions
   → GPT가 어떻게 행동해야 하는지 설명
2. text
   복사편집
   당신은 금융 및 법률 전문가로서 채권 회수와 관련된 법률 상담을 제공합니다. 사용자의 질문에 대해 구체적인 법률 조항을 참조하며, 금융 기관의 실무적인 조언을 제공합니다.
3. User Instructions
   → 사용자가 Custom GPT를 어떻게 사용할지 안내
4. text
   복사편집
   질문을 작성할 때, 관련된 법률 조항이나 금융 용어를 포함해 주세요. 예시: "대여금 반환 청구 소송을 진행하려면 어떤 절차를 따라야 하나요?"

2.3. 추가적인 데이터 업로드 (Knowledge)

✅ 사용자가 Custom GPT에 대한 추가 정보를 제공할 수도 있습니다.

• FAQ 데이터 업로드 (CSV, JSON 형식)
• PDF, 텍스트 문서 업로드 (예: 회사 내부 지침, 법률 문서 등)

예시:

• 금융 기관의 채권 회수 정책을 포함한 PDF 파일 업로드
• 법률 상담 시 자주 묻는 질문(FAQ) 데이터 업로드

2.4. API 호출 및 도구 사용 설정 (Actions)

Custom GPT는 API 호출 및 외부 도구(Functions)와 연동할 수도 있습니다.

• 예를 들어, Spring Boot API, Google 검색, 데이터베이스 API 등을 호출 가능

예제:

{
  "name": "채권 회수 API",
  "description": "고객의 채권 정보를 조회하고 법률 절차를 안내합니다.",
  "parameters": {
    "채권자명": {
      "type": "string",
      "description": "채권자의 이름"
    },
    "채무자명": {
      "type": "string",
      "description": "채무자의 이름"
    }
  }
}

이 기능을 활용하면 API를 직접 호출하여 최신 정보를 제공하는 Custom GPT를 만들 수 있습니다.

3. Custom GPT를 API에서 호출하는 방법

Custom GPT를 OpenAI API에서 사용하려면, API에서 model 값을 Custom GPT ID로 변경하면 됩니다.

✅ Custom GPT API 호출 예제 (Java)

import okhttp3.*;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.io.IOException;

@Service
public class OpenAICustomService {
    private static final String API_URL = "https://api.openai.com/v1/chat/completions";
    private final OkHttpClient client = new OkHttpClient();

    @Value("${openai.api.key}")
    private String apiKey;

    @Value("${openai.custom.gpt.id}") // Custom GPT ID (예: gpt-4-custom-XXXXX)
    private String customGptId;

    public String getCustomGptResponse(String userInput) throws IOException {
        String json = "{"
                + "\"model\":\"" + customGptId + "\","
                + "\"messages\":[{\"role\":\"user\",\"content\":\"" + userInput + "\"}],"
                + "\"temperature\":0.7"
                + "}";

        RequestBody body = RequestBody.create(json, MediaType.get("application/json"));

        Request request = new Request.Builder()
                .url(API_URL)
                .header("Authorization", "Bearer " + apiKey)
                .header("Content-Type", "application/json")
                .post(body)
                .build();

        try (Response response = client.newCall(request).execute()) {
            if (!response.isSuccessful()) {
                throw new IOException("Unexpected code " + response);
            }

            ObjectMapper mapper = new ObjectMapper();
            JsonNode rootNode = mapper.readTree(response.body().string());
            return rootNode.get("choices").get(0).get("message").get("content").asText();
        }
    }
}

✅ 설정 완료 후 API에서 Custom GPT를 호출하면, 사전에 설정한 역할, 동작 방식, 지식 등을 반영한 응답을 반환합니다.

4. 결론

✅ OpenAI API에서 Custom GPT를 사용하려면 먼저 OpenAI 플랫폼에서 설정이 필요합니다.
✅ 사전 설정을 통해 특정한 업무(법률, 금융, IT 등)에 최적화된 GPT를 만들 수 있습니다.
✅ API에서 model 값을 Custom GPT ID로 변경하면 사전 설정이 반영된 맞춤형 응답을 받을 수 있습니다.

5. customGptId 조회 방식

curl https://api.openai.com/v1/models \
  -H "Authorization: Bearer YOUR_OPENAI_API_KEY"

6. custom GPT 구성(Config)

- 우측 큰화면의 상단에 GPT제목을 누르고, 편집을 누른 후, "구성"탭에서 설정.

인증형식은 API key로 하고, https://platform.openai.com/ 에서 카드설정+발급받은 키를 이용하게 되며,
인증방식은 기본이 아닌->  "Bearer" 로 설정하는게 편함.

심플 get용 스키마:

{
  "openapi": "3.1.0",
  "info": {
    "title": "간단한 GET API",
    "description": "GET 요청을 받아 텍스트를 반환하는 API",
    "version": "v1.0.0"
  },
  "servers": [
    {
      "url": "https://api.example.com"
    }
  ],
  "paths": {
    "/hello": {
      "get": {
        "summary": "텍스트 반환",
        "operationId": "getHello",
        "responses": {
          "200": {
            "description": "성공적인 응답",
            "content": {
              "text/plain": {
                "schema": {
                  "type": "string",
                  "example": "Hello, GPT!"
                }
              }
            }
          }
        }
      }
    }
  }
}

post용 스키마:

{
  "openapi": "3.1.0",
  "info": {
    "title": "채권 조회 API",
    "description": "채권자 및 채무자 정보를 입력하면 채권 상태를 반환합니다.",
    "version": "v1.0.0"
  },
  "servers": [
    {
      "url": "https://api.example.com"
    }
  ],
  "paths": {
    "/getDebtStatus": {
      "post": {
        "summary": "채권 상태 조회",
        "operationId": "getDebtStatus",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/DebtRequest"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "채권 상태 응답",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/DebtResponse"
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "DebtRequest": {
        "type": "object",
        "properties": {
          "채권자명": {
            "type": "string",
            "description": "채권자의 이름"
          },
          "채무자명": {
            "type": "string",
            "description": "채무자의 이름"
          }
        },
        "required": ["채권자명", "채무자명"]
      },
      "DebtResponse": {
        "type": "object",
        "properties": {
          "결과": {
            "type": "string",
            "description": "응답 상태 (성공 또는 실패)"
          },
          "채권 상태": {
            "type": "string",
            "description": "채권의 현재 상태 (예: 연체, 회수 완료 등)"
          },
          "회수 가능 금액": {
            "type": "number",
            "description": "현재 회수 가능한 금액 (원화 기준)"
          }
        }
      }
    }
  }
}

javascript 혹은 react상에서 간단한 템플릿 랭기지인 mustache 를 살펴보면 다음과 같다.

설치: npm install mustache

예제코드.

import React from "react";
import Mustache from "mustache";

const TemplateRenderer = () => {
  const template = "Hello, {{name}}! Welcome to {{platform}}.";
  const data = {
    name: "John",
    platform: "React Mustache",
  };

  const renderedText = Mustache.render(template, data);

  return <div>{renderedText}</div>;
};

export default TemplateRenderer;

포인터가 존재: c언어와 유사
패키지명/가비지 컬렉션존재: java와 유사 

- 함수의 지연된 실행 허용

- 동시 프로그래밍을 지원하여 여러 프로세스를 동시에 실행할 수 있음

이는 채널, 고루틴 등을 사용하여 달성됩니다.

코드 에디터 (아래에 실행영역)이 있는 것 처럼 아래 위 두개의 영역이 있고,
중간을 마우스로 드래그하면서  둘 사이의 비율을 조절하고 싶을때
다음과 같은 방식으로 가능하다. 

동작 원리

1. 상단 div의 높이 조절:
   • onMouseDown: 마우스 조절 시작을 감지.
   • onMouseMove: 마우스의 Y축 좌표(e.clientY)를 기준으로 height 상태를 업데이트.
   • onMouseUp: 조절 종료.
2. 하단 div의 크기 계산:
   • 상단 div의 높이를 기준으로 나머지 공간을 자동으로 차지하도록 flex 사용.
3. 유저 경험:
   • resizer 영역에서 마우스 커서가 변경(row-resize).
   • 조절 중 user-select: none을 사용해 텍스트 선택을 방지.

react 코드:

import React, { useState } from "react";
import "./ResizableDiv.css"; // 스타일 관리

const ResizableDiv = () => {
  const [height, setHeight] = useState(300); // 상단 div 초기 높이
  const [isResizing, setIsResizing] = useState(false); // 조절 상태 관리

  const handleMouseDown = () => {
    setIsResizing(true); // 마우스 드래그 시작
  };

  const handleMouseMove = (e) => {
    if (!isResizing) return;
    const newHeight = e.clientY; // 마우스 위치를 기준으로 높이 계산
    setHeight(newHeight);
  };

  const handleMouseUp = () => {
    setIsResizing(false); // 마우스 드래그 종료
  };

  return (
    <div
      className="container"
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      <div className="top-div" style={{ height: `${height}px` }}>
        상단 Div
      </div>
      <div className="resizer" onMouseDown={handleMouseDown}></div>
      <div className="bottom-div">하단 Div</div>
    </div>
  );
};

export default ResizableDiv;

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  user-select: none; /* 텍스트 선택 방지 */
}

.top-div {
  background-color: #f0f0f0;
  border-bottom: 2px solid #ccc;
  overflow: auto;
}

.resizer {
  height: 10px;
  background-color: #888;
  cursor: row-resize;
}

.bottom-div {
  background-color: #e0e0e0;
  flex: 1;
  overflow: auto;
}

Slack API 키를 발급받기 위해서는 Slack 앱 생성과정을 거쳐야 합니다. Slack 앱을 생성한 후, API 키(토큰)를 발급받아 다양한 Slack API 호출에 사용할 수 있습니다. 아래는 단계별 방법입니다.

1. Slack 앱 생성하기

1. Slack API 페이지 방문:
   • Slack API 페이지에 접속합니다.
2. 앱 생성 시작:
   • 상단의 "Create an App" 버튼을 클릭합니다.
3. 앱 생성 방법 선택:
   • **"From scratch"**를 선택하여 새 앱을 생성합니다.
4. 앱 이름 및 워크스페이스 선택:
   • 앱 이름을 입력하고, 앱을 설치할 워크스페이스를 선택합니다.
   • "Create App" 버튼을 클릭하여 앱 생성을 완료합니다.

2. OAuth & Permissions 설정

1. OAuth & Permissions 메뉴로 이동:
   • 생성된 앱의 관리 페이지에서 "OAuth & Permissions" 탭으로 이동합니다.
2. OAuth 범위(Scope) 설정:
   • "Scopes" 섹션에서 앱이 필요로 하는 권한을 설정합니다.
   • 예를 들어:
     • chat:write: 메시지 전송 권한.
     • channels:read: 채널 정보 읽기 권한.
     • users:read: 사용자 정보 읽기 권한.
   • 필요한 범위를 선택하고 추가합니다.
3. 앱 설치:
   • "Install App to Workspace" 버튼을 클릭하여 앱을 워크스페이스에 설치합니다.
   • 설치를 완료하면 **OAuth 토큰(Access Token)**이 생성됩니다.

3. API 키(Access Token) 확인

1. OAuth 토큰 복사:
   • 설치 완료 후 표시되는 "Bot User OAuth Token" 또는 **"User OAuth Token"**을 복사합니다.
   • 이 토큰이 Slack API 호출 시 사용하는 API 키입니다.
2. 보안 저장:
   • 토큰은 민감한 정보이므로 안전한 곳에 저장합니다.
   • 코드에 직접 포함시키기보다는 환경변수로 관리하는 것이 권장됩니다.

4. 토큰 사용 예제

복사한 API 키를 사용하여 Slack API를 호출할 수 있습니다. 예를 들어, 메시지 전송 API를 호출하려면 다음과 같이 작성합니다:

original_window = self.driver.current_window_handle
self.driver.switch_to.window(original_window)  # 메인 창으로 이동

# 새로운 창에서 실행
## child window
for window_handle in self.driver.window_handles:
    print(window_handle, original_window, window_handle != original_window)
    if window_handle != original_window:
        print("자식 창 변경")
        self.driver.switch_to.window(window_handle)
        print("current handle 2:: ", self.driver.current_window_handle)

self.driver.implicitly_wait(5)

self.driver.switch_to.window(original_window)  # 메인 창으로 이동