next.js
1.렌더링(SSR, SSG, CSR), Next.js 렌더링, 특징
정적 페이지 생성 방식으로 90년대 많이 사용하던 방식으로 현재는 변경되지 않는 웹 페이지의 최적화에 쓰임1) 개발자가 HTML, CSS 파일 묶음을 생성(정적파일)해서 웹서버를 생성하여 거기에 묶음(정적파일)을 업로드함. 클라우드에 올려둠2) 클라이언트에서 HTTP
2.[next.js 13] styled-components, 폰트 설정하기
next.js 13버전이 나왔다.12버전을 체험했기에 13버전을 체험해보기로 해서 프로젝트를 설치하고 next+typescript를 설치하였다.그런데 styled-components로 css작업을 하고 npm run dev해서 확인하고 새로고침하면 css가 다 날라가는
3.[next.js] 이미지 업로드 & 미리보기
가. 이미지 파일을 올려서 프로필 사진을 변경할 것이다.나. 이미지 용량이 매우 크기 때문에 압축을 해야 할 것이다.다. 이미지가 업로드 되면 미리보기가 나와야 한다.이미지 용량을 줄이기 위해서 라이브러리를 설치해야 한다.browser-image-compression설
4.[next.js] open ai Api를 이용해 chatBot 만들기
구현하고자 하는 기능 opean ai의 api를 이용해서 chatBot 형식의 기능 구현 open ai api key 발급하기 open ai에 로그인 해서 좌상단 프로필 클릭하고 view api key를 입력해서 api키를 발급한다. 이때 발급한 키는 다시 확인
5.[next.js] 외부 이미지 불러오는 방법
위의 방식으로 사용하면 이미지가 불러와진다.하지만 외부 이미지라면??기본적으로 리액트에서 썼던 방식으로 작성을 하면이렇게 작성을 하면 Invalid src prop (http://localhost:5000/uploads/images/6c3c94e3-cab9-4
6.[Next.js] Next.js에서 svg 이용하기 feat styled-component를 이용한 반응형
svg란 W3C가 개발한 개방형 표준으로 2차원 벡터 그래픽을 표현을 위한 XML 마크업 언어이다.확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며 용량이 PNG, GIF 등 보다 작다는게 특징이다.SVG 파일 형식의 가장 큰 특징이라 하면 벡터화된 그래픽 이미지