코딩연습장

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: black; color: white; font-size: 18px;}a { color: inherit; text-decoration: none;}a:hover { text-decoration: underline;}전역적으로 설정되길 원하는 css파일을 생성하고, 작성한다.그리고 해당 css파일을 전역 layout파일에 import하면 모든 페이지에서..

import { useEffect, useState } from "react";export const metadata = { title: "Home",};export default function App() { const [movies, setMovies] = useState(); const getMovies = async () => { const response = await fetch(process.env.MOVIE_GET_URL); const json = await response.json(); setMovies(json); }; useEffect(() => { getMovies(); }, []); return ..

SSR : Server Side RenderingCSR : Client Side Rendering말 그대로 SSR은 서버측에서 렌더링을 하는 것이고, CSR은 클라이언트(사용자)측에서 렌더링을 하는 것이다.  CSR : Client Side RenderingSSR : Server Side Rendering1사용자가 웹 사이트를 요청함유저가 웹 사이트를 요청함2CDN이 HTML파일과 JS접근링크를 보내줌서버가 렌더가 준비된 HTML파일을 생성함3브라우저가 HTML을 다운로드하고, JS를 다운로드함단, 이때 사용자는 사이트를 볼 수 없음(빈 화면)브라우저가 HTML을 빠르게 렌더링하지만사이트는 아직 상호작용이 불가함4브라우저가 JS를 다운로드함브라우저가 JS를 다운로드함5JS가 실행되고 data를 위한 ap..

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..