성2

JavaScript에 XML을 추가한 확장 문법 📌 XML ( eXtensible Markup Language) 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어 JavaScript 내부에 마크업 코드를 작성할 수 있다 const element = Hello, world! 공식적인 JavaScript 문법이 아니기 때문에, Babel을 사용하여 JavaScript 형태의 코드로 변환하는 과정이 필요하다 const element = React.createElement( 'h1', 👈 //tag null, 👈 //className이나 id, attribute 등 'Hello, world!' 👈 //element ) React에서 JSX 사용은 필수가 아니지만, 가독성과 익숙함, 높은 활용(재..

next에서는 404 페이지를 기본적으로 제공해준다 자주 사용되는 404 페이지를 요청마다 렌더링한다면 비용 증가, 느린 경험 등의 이유가 있기 때문이다 Pages에 404.js를 생성 : 404 에러가 발생했을 때 자동으로 404.js를 불러온다 : 정적 생성 //공식문서 예제 export default function Custom404() { return 404 - Page Not Found } 500 에러를 처리할 때도 동일하게 Pages에 500.js를 생성할 수 있다 : 정적 생성되지만, 정적으로 최적화 되지는 않는다 404.js, 500.js를 사용한다면 간단하게 작업을 마칠 수 있는 장점이 있지만, 스타일적인 한계가 존재한다 이러한 경우 Pages에 _error.js를 생성한다 //공식문서 ..

next에서 /movies/all, /movies 등의 url을 만들고 싶을때는, - pages에 movies 폴더를 생성한 후, 그 안에 all.js 파일을 만든다 - movies 폴더 안에 index.js 파일을 생성한다 (pages에 movies를 만들어도 되지만, /movies/all을 포함할 수 없다) next는 폴더 경로를 통해 페이지를 처리한다는 것을 알 수 있다. 동적 라우팅 기능을 사용한다면 동적인 경로 또한 처리할 수 있다 Dynamic Routes react에서는 path 속성에 /movies/:id 라는 값을 넣어주면 자동으로 동적 라우팅이 설정된다 next에서는 pages에서 /movies/[id], 대괄호로 감싸주는 것으로 동적 라우팅을 할 수 있다 ✅ 변수를 포함하는 Dynam..

Next.js는 pre-rendering을 제공한다 = HTML 페이지를 미리 렌더링해서 브라우저로 보내준다. 여기서 데이터도 함께 패칭할 수 있는데, getStaticProps, getStaticPaths, getServerSideProps를 사용하면 된다 * 9.3 버전 이후 getInitialProps가 getStaticProps, getStaticPaths, getServerSideProps으로 세분화 getServerSideProps는 요청할때마다 html이 생성되기 때문에, 데이터가 계속 바뀌어야 하는 페이지의 경우 사용한다 getServerSideProps 예시 : props로 전달하여 렌더링 할 수 있다 export default function Home({results}) { 👈 2️⃣ ..

Redirects : 요청 경로를 다른 경로로 리디렉션할 수 있다 ex. /old 👉 /new 리디렉션은 next.confing.js에서 사용할 수 있다 next는 웹팩을 기본 번들러로 사용하기 때문에, webpack.config.js 대신 next.config.js 파일을 사용해 커스터마이징 할 수 있다 //Next.config.js 기본형 module.exports = { reactStrictMode: true, } redirects 예시 module.exports = { reactStrictMode: true, async redirects() { return [ { source: '/old', 👈 destination: '/new', 👈 permanent: true, 👈 }, ] }, } - sou..

_app.js : 가장 먼저 호출되며, 글로벌한 작업들(공통 스타일이나 컴포넌트 등)을 수행하기에 좋다 = create-react-app의 App.js 기능 - 페이지들이 변할때 레이아웃 유지 - 페이지 탐색 시 상태 유지 - 사용자 정의 오류 관리 - 페이지 추가 데이터 사용 - 글로벌 css 추가 app.js 기본 function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 보통 _app.js는 길게 뽑지(?) 않기 때문에, layout component를 만들어 사용해준다 //layout 컴포넌트 import NavBar from "./NavBar"; export default function Layout({children..

1. 직접적으로 스타일 추가(인라인) : 좋은 방법이 아니다! Home About 2. CSS Modules :css 모듈을 사용하려면 .modules.css 파일을 생성해야 한다 NavBar.module.css 👇 .nav { display: flex; justify-content: space-between; background-color: blanchedalmond; } css를 사용할 페이지, 컴포넌트에 import 해주기 👇 className="nav"가 아닌 className={styles.nav} 를 사용해야 한다(모듈이기 때문에) 👈 Home About ✅ css 모듈 접근 방식의 장점은 무작위로 클래스 이름을 생성하는 데에 있다. 즉, 클래스 충돌에 대한 걱정을 덜어준다 *2개 이상의 클래..

1. LINK 웹사이트에서 페이지를 연결하고 이동할 때는 태그를 사용한다. 하지만 Next.js에서는 Link컴포넌트가 태그를 래핑하여 사용한다 import Link from "next/link"; 👈 export default function NavBar() { return ( 👈 Home About ) } Q. a태그 써도 되던데? : 페이지가 계속 새로고침된다. Link는 새로고침 안되니까 그냥 Link써라..! Q. Link 컴포넌트 안에 a태그가 없어도 잘 동작하던데, 그렇다면 a태그가 없어도 되는거 아닌가? : Link는 여러 props를 허용(href는 필수)하는데, 이동에 관한 props만 있다(?). 이러한 이유로 스타일·클래스 등을 주기 위해서는, a태그가 필요하다. Home 👈 Q. ..

pages 폴더에 있는 파일명에 따라 라우트가 결정된다 - index.js는 시작 페이지를 뜻한다 👉 http://localhost:3000/ (http://localhost:3000/index와는 전혀 다름) - about.js 생성 👉 http://localhost:3000/about 파일명에 따라 라우트가 결정되기 때문에, 컴포넌트 명은 무엇이든 가능하다 중요한 점은 export default가 되어야 한다는 점이다 Ref. https://nomadcoders.co/

Node.js 설치되어 있는지 확인(버전 10.13 이상) : https://nodejs.org/en/ Next.js 프로젝트 초기화 (자동 설정) npx create-next-app@latest + typescript를 사용하고 싶다면? npx create-next-app@latest --typescript (수동 설정) : 수동 설정을 하게 되면 package.json과 module을 따로 설치해줘야 하기 때문에 그냥 자동 설정으로 하자^!^ npm install next react react-dom 또는 yarn add next react react-dom 설치가 완료되면 해당 폴더 안으로 들어가 npm run dev 또는 yarn dev 로 실행시켜주자 👇 cmd(ctrl) + url 또는 크롬 ..