The HamSter Developer

'싱글 사인-온' 방식의 대표 OAuth토큰 기반 인증을 사용하며, 클라이언트가 리소스 서버에 접근할 수 있도록 권한을 부여하는 방식이다. OAuth의 핵심은 인증과 인가의 분리다.인증은 사용자가 하지만 그 권한은 서버가 가져간다. 서버에서는 이를 컨트롤하여 사용자에게 자기 서버의 권한을 부여하는 것이며, 이 인증 절차를 간단하게 요약하자면사용자가 공식적인 Naver 로그인 환경으로 로그인Naver 서버에서 로그인 성공 시 일회용 권한(authorization) 코드 제공, 이후 개발자가 설정한 callback URL + query에 권한 데이터를 담아 사용자의 웹페이지 주소를 리다이렉트리다이렉트 페이지에서 개발자는 자신의 백엔드 서버로 해당 데이터 및 콜백 URL 기본 주소를 전달백엔드 서버에서 요청받..

async function main() { const completion = await openai.chat.completions.create({ messages: [{ role: "system", content: "당신은 면접관 역할을 맡고 있으며, 지원자에게 질문하고 그 답변을 평가합니다." }], model: "미세조정 완료 후 나온 아웃풋 모델", }); console.log(completion.choices[0]);}main();role여기서 system으로 넘겨준 미세조정에서 사용한 content는 내가 미세조정 완료한 대화 방식을 지키게 만드는 일종의 키워드로 변하게 된다.즉 해당 코드에서 { role: "system", content: "당신은 면접관 역할을 맡고 있으며, ..

0. 미세 조정이란?해당 모델이 응답할 방식이나 대화의 형식을 미리 학습시켜, AI와의 대답과 응답을 유도하기 위함이다.최대한 여러가지 messages를 학습시키는 것이 좋으며 많은 데이터를 학습시킬수록, 개발자가 유도한 답변을 할 확률이 올라간다.이를 통해 원하는 회사나 게임에 관련해 자동으로 QnA를 해주는 봇 모델 또한 만들 수 있다.만약 홈페이지를 만든다면 홈페이지를 자동으로 소개해주는 AI나 자신만의 AI를 만들어 재밌게 놀 수도 있다.우선 그러기 위해서는 .jsonl 을 작성해야 하는데 몇가지 주의사항이 있다.jsonl이란?json이 여러개인 파일을 말한다..작성시 주의!메세지를 담은 오브젝트는 띄어쓰기도 있으면 안되고 나눠서도 안된다... 무조건 한줄에 전부 넣어야한다.물론 오브젝트 끼리는 ..

일반적으로 assistant 메시지와 user 메시지가 번갈아가며 대화 형태가 구성된다.기본적인 예제 파일을 보면 알 수 있는데[ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": "Who won the world series in 2020?"}, {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."}, {"role": "user", "content": "Where was it played?"}],1. role?AI가 인식하는 상태를 정해주며 3가지가 있다.우선 sys..

OpenAI로 간단한 AI 서비스를 작성해 볼 예정이다.일단 주인장이 당장에 돈이 없는 관계로 AI 모델 중 가장 싼 Chat 모델, GPT-4o mini를 사용했다.모델들도 굉장히 많고 요금이 궁금하다면 아래에 들어가 확인할 수 있다.요금 확인우선 OpenAI API의 기본 페이지는 여기다.기본 페이지들어가보면 API에 대한 설명이 자세하다 못해 너무 자세해서 양이 방대한 정도로 많은데, 그 덕분에 주인장은 3일 동안 해당 페이지만 읽고 있었다.이미 미리 읽어서 정리해놓은 사람이 있으니 이 글을 보는 사람은 그렇지 않아도 된다.1. AI API는 프론트에서는 실행되지 않는다.프론트는 어떻게든 모든 소스코드를 확인할 수 있기 때문에, AI 키가 유출되기 때문이다.AI 키가 유출된다면..? 내가 결제한 금..

네이버 맵에도 당연히 이벤트가 설정 가능하다.아래는 네이버 맵에 커스텀 메뉴바를 만드는 간단한 예제 코드의 해석이다.//아래 코드에서 화면에 표시할 HTML을 생성한다.const myMenu = document.createElement('div');myMenu.style.backgroundColor = "red";myMenu.style.width = "100px";myMenu.style.height = "100px";myMenu.style.position = "absolute";myMenu.style.zIndex = "10000";//map에 추가map.getPanes().overlayLayer.appendChild(myMenu);//이벤트 펑션 추가naver.maps.Event.addListener(m..

기본적으로 마커를 생성하는 명령어는 다음과 같다. //마커를 생성하는 클래스 ({옵션들,좌표를 찍을 맵}) new naver.maps.Marker({ position: new naver.maps.LatLng(37, 128), map, //지도 생성에서 사용했던 map 이다. });아래는 마커에 넣을 수 있는 옵션들로(전부 넣으면 당연히 오류가난다.)읽어보고 필요한 것들만 추가하여 사용하자const markerOptions = { position: location, map: map, icon: { url: "./imgs/HamsterRider.png", //마커의 이미지를 설정하는데, HTML 태그로서 넣고 싶으면 아래처럼 대체가능하다...

React에서 기본으로 맵을 띄우기import React, { useRef, useEffect } from "react";const NMap = (): JSX.Element => { const mapRef: React.MutableRefObject = useRef(null); const lat: number = 37; const lng: number = 127; useEffect(() => { //npm으로 타입/네이버맵을 깔면 필요없다. // const { naver } = window; if (mapRef.current && naver) { //맵에 사용할 위치를 설정해주는 코드 const locatio..

네이버 맵 공식 Docs1.회원가입네이버 클라우드 페이지2.어플리케이션 등록클라우드 플렛폼어플리케이션 등록 (웹에서 naverMap과 위치 API (Geocoding)을 사용할 예정이니 2개를 체크)3. 설치파일 (front)npm i -D @types/navermapsnpm i dotenv4.HTML Head에 script 추가public/index.html언어 변경스크립트 로드 시 language 설정을 통해 언어를 설정할 수 있습니다. 지원하는 언어는 ko(한글), en(영어), zh(중국어), ja(일어) 를 지원맨 마지막으로 language=수정으로 화면에 표시될 언어를 바꿀 수 있다.

Naver OAuth 등록 화면은 처음 해보는 사람도 쉽게 할 수 있을 정도로 직관적이지만 Google OAuth는 OAuth만 있는게 아니라 여러 API도 있으니 사진을 추가하여 설명하겠다.구글 클라우드로 이동프로젝트 만들기 클릭왼쪽 상단 API 및 서비스 -> OAuth 동의화면진행 후 왼쪽메뉴에서 사용자 인증 정보 -> 사용자 인증 정보 만들기 클릭애플리케이션 유형 -> 웹 에플리케이션 -> 자바스크립트 링크에는 페이지 root 주소(단순 React면 로컬3000포트), 리다이렉션은 콜백 주소로 작성하여 클라이언트 등록이후 다시 사용자 인증 정보를 누르면 자신이 등록한 클라이언트를 확인할 수 있다.여기서 우리가 필요한건 클라이언트 아이디, 시크릿 아이디 두개다.클라이언트 소스 (React)impor..