코딩연습장

import { addEvent } from "./addEvent.js";import { isSearchedData } from "./isSearched.js";export function searchMovie() { const searchButton = document.querySelector(".searchButton"); const searchInput = document.querySelector(".searchInput"); const searchFunc = async function () { isSearchedData.isSearched = true; let movieArr = []; const options = { met..

기존에 리액트에서는 리액트 라우터를 사용하여 페이지이동을 구현했었다.router.js에서 각 페이지 컴포넌트들을 불러들이고}>이런 식으로 엔드포인트와 어떤 컴포넌트를 사용할지 정해주었던 것 같다. 하지만 NextJs에서는 폴더와 파일하나를 생성하면 자동으로 라우팅을 해준다.app폴더에 about-us라는 폴더를 만들어주고, page.tsx파일을 만들어준다.임시 리턴데이터를 넣어주고 저장하면 자동으로 연결이 된다.엔드포인트를 폴더명으로하고, 안에 UI로 작동할 page.tsx를 만들면 자동으로 연결이 되는 것이다.  about-us/company/sales/page.tsx를 생성했을때는/about-us/company/sales의 엔드포인트를 갖는 페이지가 생성되는 것이다.이때 company에는 page.t..

1. 프로젝트를 진행할 폴더를 생성한다.2. 해당 폴더를 vscode로 연다. 3. 아래 코드를 터미널에 입력하여 package.json파일을 생성한다.npm init -y 4. react, next, react-dom 설치npm install react@latest next@latest react-dom@latest 5. pakage.json 수정{ "name": "nextprac", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT", "description": "", "d..