🤍 은지log 🤍

SPA ( Single Page Application ) 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 뜻한다. 🎣 기존 웹 페이지 에서는 사용자가 다른 페이지로 이동할 때 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스를 전달 받아서 해석한 뒤 화면에 보여줬다. 따라서 서버가 할 일이 많았기 때문에, 성능상의 문제가 발생할 수 있었다. 서버 트래픽이 많이 나올 수도 있고 많은 사용자가 몰리면 과부하가 걸려서 서버가 다운 되는 등의 문제가 발생 가능했다. 캐싱과 압축을 통해 어느 정도 보완할 수 있지만 요즘 처럼 사용자와의 인터랙션이 많은 페이지의 경우 이 방법 또한 힘들어진다. 또한 화면 전환이 필요할 때마다 새로운 HTML을 ..

useEffect(() => {},[]) useEffect 2번째 인자에 빈 배열을 넣어주게 되면 컴포넌트가 처음 렌더링 될때만 실행된다. 📌 useEffect 오류로 2번 실행 될때 📌 src/index.js에서 태그로 이 감싸져있으면 개발모드에서 두 번씩 렌더링된다. import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import reportWebVitals from './reportWebVitals' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ⬅ 지우기 , ..

💡 혼자서 만들수 없다면 여러번 연습해보기 💡 import { useState, useRef } from 'react' import styled, { css } from 'styled-components' const Todo = () => { const [text, setText] = useState('') const [todoList, setTodoList] = useState([]) const nextId = useRef(1) const handleChange = (e) => { setText(e.target.value) } const handleSubmit = (e) => { e.preventDefault() // form 안에 submit 역할을 하는 버튼을 눌렀어도 새로고침 되지 않게 하고싶을 ..

Next JS 설치 npm create-next-app . / npm create-next-app —typescript . ✏️ * name can no longer contain capital letters 라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것이므로 " 소문자 " 로 변경 Next.. eun-jii.tistory.com .module.css 파일 생성 CSS 를 적용할 파일과 같은 폴더에 파일명.module.css 파일 생성 ex) NavBar.js NavBar.module.css .active { color: tomato; } .link { text-decoration: none; } 코드를 css에 적고 import styles from "./NavBar.module.css";..

설치 npx create-next-app@latest . npx create-next-app@latest --ts . ✏️ * name can no longer contain capital letters 라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것이므로 " 소문자 " 로 변경 npm run dev 실행 NextJS 와 React react = library , CSR(client-side-rendering) Nextjs = framework , SSR(server-side-rendering) ✏️ CSR : 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식 SSR : 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페..

Naver 영화 검색 🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from './components/pages/Main' import Movie from './components/pages/Movie' import Book from './comp.. eun-jii.tistory.com Naver 책 검색 Naver 영화 검색 🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from './components/pages/Main' import Movie from './..

🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import { Login, Main, Signup } from './Components/Pages' const Router = () => { return ( . . ) } export default Router 🎣 2. index.js export { default as Login } from './Login' export { default as Main } from './Main' export { default as Signup } from './Signup' 🎣 2-1. App.js 에 Router ➡ import import Router from './..

Naver 영화 검색 🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from './components/pages/Main' import Movie from './components/pages/Movie' import Book from './comp.. eun-jii.tistory.com 🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from './components/pages/Main' import Movie from './components/pages/Movie'..

🎣 1. Router.js 생성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from './components/pages/Main' import Movie from './components/pages/Movie' import Book from './components/pages/Book' const Router = () => { return ( ) } export default Router 🎣 2. Main.jsx import { Link } from 'react-router-dom' import styled from 'styled-components' const Main = () => { return ( 영화 🎬..

🎣 1. Modal Background CSS (기본적인) import styled from 'styled-components' const Modal = () => { return ( Modal ) } const Backdrop = styled.div` width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); ` const Container = styled.div` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; min-width: 300px; border-radius: 4px; `..