넥스트제이에스3 [Next.js] /public - 정적 파일 1. 정적파일 사용 - /public - '/public' 폴더를 사용하여 정적파일제공 - '/public' 폴더를 이용하면 브라우저에서 네트워크를 통해 정적파일(이미지, 폰트, manifest.json, robots.txt, favicon.ico)을 불러옴 / /public /public/cheese.jpg /pages /pages/index.jsx /pages/index.jsx const App = () => ( ); export default App; 2022. 4. 21. [Next.js] /pages - 라우팅 1. 라우팅 - 라우팅 설정 : /pages 폴더에 파일을 만들면 파일의 경로에 따라 경로가 설정됨. 1-1. 정적 페이지 라우팅 - 폴더에 파일을 만드는 것만으로 경로가 자동 설정됨. pages/index.jsx import Link from "next/link"; const App = () => { return( Link to 'sample' Page Move to '/sample' ); } export default App; /pages/sample.jsx import Link from "next/link"; const Sample = () => { return ( Link to 'main' Page Move to '/' ) } export default Sample; 1-2. Link 컴포넌트 -.. 2022. 4. 21. [Next.js] 넥스트 1. 넥스트 (Next.js) - 자바스크립트 생태계의 웹 프레임워크 3대장 : 리액트(React), 앵귤러(Angular), 뷰(Vue) 프레임워크 - 리액트 : 페이스북에서 개발한 오픈소스 라이브러리, 컴포넌트를 사용하여 UI를 효율적으로 만들기 위한 프레임워크 - 넥스트 : 리액트 기반의 프레임워크. 1-1. 리액트의 장점(SPA의 장점) - SPA : 단일 페이지 애플리케이션 - 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션. ( 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와줌) - 사이트에 접속할때 하나의 페이지를 불러오며, 필요한 모든 자바스크립트 파일을 한번에 불러옴. - 페이지 이동을 하게되면 받아온 파일.. 2022. 4. 21. 이전 1 다음