리액트 쿼리란? React Query는 리액트 앱에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업(fetching, caching, synchronizing, updating)을 도와주는 라이브러리다. function Coins() { const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.slice(0, 1..

1. Dynamic Routes NextJS는 폴더와 파일명을 이용해 라우팅을 할 수 있다. /movies/all이라는 URL을 만들고 싶다면 movies 폴더를 만들고 그 안에 all.js 파일을 생성하면 된다. 그냥 /movies라고만 하고 싶다면 movies 폴더 안에 index.js 파일을 만들어주면 된다. URL에 변수를 넣고 싶을 때는 대괄호 안에 사용하고자 하는 변수명을 적어서 Dynamic Route를 생성할 수 있다. 만일 page/movies/[id].js 파일을 생성했다면 /movies/1, /movies/abc 등과 같은 경로와 모두 일치한다. router를 콘솔에 찍어보면 query를 찾을 수 있다. query: {id: '1'} query에는 id가 있는데 이 id는 바로 URL..

1. Patterns Custom App Component를 사용할 때 layout 패턴을 사용할 수 있다. component 폴더 밑에 Layout.js 파일을 만든다. Layout 컴포넌트에는 여러 페이지에서 반복적으로 사용되는 컴포넌트들을 넣을 수 있고, 스타일도 줄 수 있다. children은 리액트가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 사용할 수 있다. import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } MyApp에서 fragment를 우리의 Layout component로 바꾼다. Layout에 어떤 것을 넣더라도, Layout..

1. CSS Modules 넥스트 어플리케이션에 CSS를 추가하는 방법 중 하나는 modules를 사용하는 것이다. NavBar.module.css .nav { text-decoration: none; } 이름은 상관 없고 중요한 건 .module.css이다. css를 작성하고 이 파일을 사용하고 싶은 곳에 자바스크립트 오브젝트로서 import를 시키면 된다. import styles from "./NavBar.module.css" 모듈이기 때문에 className="nav"가 아니라 className={styles.nav}처럼 작성해줘야 한다. 이게 작동하는 이유는 .module.css 패턴을 사용했기 때문이다. 이 패턴은 css 모듈이라고 불리는데 이건 개발자로 하여금 평범한 css를 사용할 수 있도..

1. Creating a Project NextJS 프로젝트 최신 버전으로 생성 → npx create-next-app@latest 타입스크립트 사용 → npx create-next-app@latest --typescript 실행 → npm run dev 2. Library vs Framework 라이브러리는 개발자가 사용하고 싶을 때 불러와서 원하는 대로 코드를 작성하는 것이 가능하다. 리액트는 개발자가 원할 때 부르고 원할 때 사용하는 라이브러리이다. 프레임워크에서는 특정한 규칙을 따라서 특정한 걸 해야한다. 규칙을 따랐을 때 모든 게 정상적으로 잘 동작하고 프레임워크도 개발자를 도울 수 있다. 개발자가 규칙을 따라서 코드를 적절한 위치에 잘 작성하면 프레임워크가 그 코드를 호출하여 모든 걸 동작시킨..