자본주의를 살아가는 코린이

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..

이 내용은 아래 강의를 참조하여 만들었습니다. 이 강의에서 제공하는 github내용에 추가하여 만든 내용입니다. https://www.youtube.com/watch?v=KjY94sAKLlw import Head from 'next/head'; import Link from 'next/link'; import Image from 'next/image'; export default function TestList({posts}) { return ( {posts.map((ev) => ( {ev.title} {ev.url} ))} ); } export async function getServerSideProps() { const res = await fetch('https://jsonplaceholder.ty..

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/..