지미뉴트론 개발일기

자바스크립트에서 GPT 등의 openai 모델에 대한 API를 호출하는 방법을 간략한 코드 예제로 쉽게 정리해보도록 하겠습니다. 1. 프롬프트 준비 우선, 프롬프트 목록에 대한 리스트를 아래와 같은 양식으로 준비해 줍시다. const messages = [ { role: 'system', content: "답변은 항상 한국어로 해주세요."} { role: 'user', content: "Who is the first president of USA?"} ] 2. GPT 호출 파라미터 준비 이후, openai api 호출을 위한 json input 양식을 준비해줍시다. 예시는 다음과 같습니다.(위에서 정의한 messages 변수를 사용합니다.) const gptInput = { model: 'gpt-3.5-..

리액트에서 페이지 이동을 구현하는 과정에서 useNavigate는 매우 유용하게 사용됩니다. 상세한 이해를 위하여 해당 훅의 사용 방법에 대하여 간략하게 요약해보도록 하겠습니다. 1. 설치 및 임포트 방법 useNavigate는 react-router-dom 라이브러리에 포함된 훅으로, 해당 라이브러리가 설치되지 않은 경우, 먼저 설치를 진행해주셔야 합니다. // npm을 사용하는 경우 npm install react-router-dom // yarn을 사용하는 경우 yarn add react-router-dom 임포트 및 훅 사용을 위하여 객체를 선언하는 코드 예시는 다음과 같습니다. import { useNavigate } from 'react-router-dom'; const navigate = u..

javascript에서 비동기 처리를 하는 과정에서 필수적인 개념인 Promise 객체, async 및 await의 개념들을 간단한 예시를 통하여 이해를 해보는 시간을 가져보도록 하겠습니다. Promise 객체 Promise는 자바스크립트에서 비동기 작업을 표현하는 객체입니다. 비동기 작업이 완료된 후에 요청이 성공하면 결과값을 반환해주고, 실패한 경우에는 이유를 처리할 수 있는 방법을 제공하는 원리입니다. 해당 객체는 세 가지 상태를 가질 수 있는데요. 아직 요청을 처리하고 있는 중이라면 pending, 요청의 결과값을 성공적으로 받았다면 fulfilled, 요청이 실패하였다면 rejected의 상태를 가지게 됩니다. Promise 객체의 선언 방식은 다음과 같이 정리할 수 있습니다. const pro..

리액트의 대표 필수 개념이지만 혼동되기 쉬운 props와 state의 차이를 간단한 예제를 기준으로 이해해보도록 하겠습니다. Props props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며, 읽기 전용으로 자식 컴포넌트에서는 수정이 불가능합니다. 코드에서 사용되는 방식의 예시 코드 스니펫은 다음과 같습니다. function Welcome(props) { return Hello, {props.name}; } function App() { return ; } App 컴포넌트는 Welcome 컴포넌트에 name이라는 prop을 전달할 것입니다. Welcome 컴포넌트는 이 prop을 사용하여 동적으로 데이터를 렌더링하게 됩니다. 최종 출력 결과는 Hello, Jimmy 텍스트가 h1 태..

JavaScript에서 자주 사용되는 기능 중 하나인 Method Chaining에 대하여 간략하게 설명을 해본 뒤, 예제를 통하여 쉽게 이해를 해볼 수 있도록 정리해 보겠습니다. 메서드 체이닝(Method Chaining)이란? JavaScript의 method chaining(메서드 체이닝)은 객체 지향 프로그래밍 스타일 중 하나로, 객체의 메서드를 연속적으로 호출할 수 있게 해주는 기능입니다. 이를 통해 코드의 가독성을 향상시키고, 더욱 간결한 코드를 작성할 수 있지만, 한 번에 너무 많은 체이닝을 사용하면 혼란을 가중시킬 수 있으므로, 유의할 필요가 있습니다. 메서드 체이닝은 object.method1().method2().method3()와 같은 식으로 연속된 메서드 적용을 의미하는데, 아래의 ..

오류 개요 리액트 앱 생성 과정에서 다음과 같은 오류가 발생하였습니다. 시도했던 명령어 npx create-react-app my-app 에러 로그 메시지 npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\user\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent 오류 해결법 확인 결과 no suc..

브라우저에 설정된 언어로 웹페이지의 초기 언어를 지정할 수 있다면 유저 입장에서는 매우 편리할 것입니다. 이번 글에서는 간단한 예제를 바탕으로 초기 언어를 유연하게 설정하는 내용을 정리해보도록 하겠습니다. 지난 포스팅에서 다루었던 간단한 웹페이지를 예시로 들어보겠습니다. 웹사이트 언어 설정 메뉴 만들기 방법(다국어 사이트 생성 예제) 웹사이트에서 다국어를 지원하고 싶은 경우가 많은데요. 언어 설정 메뉴를 만들고 언어가 자동으로 변경되는 과정을 간단한 예제를 통하여 알아보도록 하겠습니다. 이번에 다뤄볼 웹 페이지의 jimmy-ai.tistory.com 브라우저 언어 감지 방법 익스플로러, 크롬, 파이어폭스 등에서 브라우저마다 설정된 언어를 가져오는 방법은 조금씩 다를 수 있는데요. 아래의 코드로 가져오면 ..

웹사이트에서 다국어를 지원하고 싶은 경우가 많은데요. 언어 설정 메뉴를 만들고 언어가 자동으로 변경되는 과정을 간단한 예제를 통하여 알아보도록 하겠습니다. 이번에 다뤄볼 웹 페이지의 HTML은 다음과 같이 정의해 보겠습니다. 제목 파이썬 자바스크립트 위의 HTML로 웹 페이지를 띄우면 다음과 같이 내용이 등장합니다. 언어 설정 메뉴 만들기 이제 위의 HTML 내에 언어 설정 코드를 만드는 방법을 간단히 살펴볼 것 인데요. HTML 파일 내에 아래의 내용처럼 추가해보고 결과를 확인해 보겠습니다. 여기서 기본 언어는 한국어로 설정되도록 하였습니다. 제목 파이썬 자바스크립트 Language: English 한국어 브라우저 설정에 따라 위치는 다르게 나타날 수 있는데, 픽셀 값을 조정하여 원하는 위치로 이동시켜..