유니의 개발일지

이번 섹션 목표 - 민감한 비밀 정보를 관리하는 env 환경 변수 설정하는 방법과 GPT API 키를 발급하는 방법 학습 프로젝트에서 환경 변수가 필요한 이유 - 프로젝트에서 민감한 정보들을 관리해야 할 경우, 민감한 정보들을 env 파일에서 따로 관리를 진행해야 함 - 환경 변수 설정은 Vite에서 확인 가능 - 환경 변수 설정 시, VITE_ 라는 접두사를 붙여야 함 1) .env 라는 파일을 생성 VITE_SOME_KEY = 123 2) .gitignore 안에 .env라고 작성 - 이 env 파일은 깃허브에 env란 파일을 올리지 않도록 무시를 하는 설정임 3) Google에 gpt api 검색하여 GPT OPEN API KEY 값을 받음 - env 파일에 코드 작성 VITE_GPT_API_KEY..

1. 리액트 개발환경 설정 - vs code 다운로드 - node.js 다운로드 이미 다운로드 완료!! 2. 리액트 설치하기 vite 설치 완! / styled-components antd @ant-design/icons 설치 리액트 프로젝트 구조 vite.config.js -> server 관련 변동 https://vitejs.dev/config/ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) import { defineConfig } from 'vite' impor..

더보기 Prompt란? - 사용자가 GPT와 상호작용 할 때 입력하는 텍스트 GPT Prompt 사용법 1. 역할 설정을 전제로 잘 깔아주는 것 - 전제를 깔아주는 것 = 시스템 설정 2. 해야할 일 순서를 정해주기 - "순서대로"의 의미가 불분명!! 3. 출력 형식을 명시해주는 것 - 웹 연동을 위해 GPT의 출력을 json형식으로 명시해주기! - json : java script object notation의 줄임말 4. 변수 지정하기 - 7가지의 명령지시 사항에 대괄호를 이용해서 출력물에 대한 별칭를 지정 - key 값은 임의로 지정, value 값은 chapt gpt가 변수를 잘 이용할 수 잇도록 []을 활용해서 명시 GPT AI 회고록 서비스 기획 1. 기획 문제 : SNS / 블로그에 회고록을..

인프런 강좌 "처음 만난 리액트(react)" 강의 수강을 마치고.. "React + GPT API로 AI회고록 서비스 개발" 강의를 수강!! ChatGPT prompt 웹개발(기초) React (Vite, Styled-component, Antd) GPT API 연동 를 배울 수 있다고 한다..! 만들 웹 애플리케이션