Next.js 3

next.js 13으로 chat GPT API 사용

chat GPT API는 python, node 등에서 사용할 수 있지만 저는 python 대신 node를 사용하였습니다. 그 이유는 node가 python 보다 웹에서 최적화 되어있기 때문입니다. 기본적으로 openai에서 제공하는 예시 코드를 약간 수정하는 방향으로 진행하였습니다. 제가 짠 코드의 문제는 api의 응답속도가 매우 느리다는 점, css, jsx가 안 맞다는 점입니다. 아래 github내용을 참조하세요. .env 파일도 생성해 주시고 아래 내용에 api key를 넣어주세요 OPENAI_API_KEY=[openai key] https://github.com/whiteout367/AIGuide GitHub - whiteout367/AIGuide Contribute to whiteout367/..

BACK END/chatGPT 2023.05.26

next.js에 bootstrap 설치

chatGPT api를 활용한 간단한 next.js 앱을 만들려고 하는데 백엔드는 했지만 프론트 엔드의 디자인에서 문제를 만났습니다. 이를 해결하기 위해 bootstrap을 사용할 것입니다. 공식문서에 설치법이 나와있습니다. https://react-bootstrap.github.io/getting-started/introduction/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io npm install react-bootstrap bootstrap app.js에 import해줍니다.(저는 index.js 에 했습니다.) import 'bootstrap/dist/css/boo..

BACK END/next.js 2023.05.25

1. next.js 란 무엇인가?(SSR/SSG)

next.js 는 react.js의 프레임워크 입니다. 따라서 react.js를 아셔야 합니다. 2023.04.18 - [FRONT END/react] - 1. react.js 란 무엇인가? 1. react.js 란 무엇인가? react가 무엇인가를 알아 보기위한 가장 좋은 방법은 공식홈페이지 입니다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces jacorinne.tistory.com react의 CSR 보완점을 SSR로 보완하여 더 좋은 사용자 경험을 선사합니다.(검색엔진 최적화, 초기 로딩속도 단축 등) https://nextjs.org/..

BACK END/next.js 2023.04.25