🤍 은지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 역할을 하는 버튼을 눌렀어도 새로고침 되지 않게 하고싶을 ..

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

🎣 1. Bootstrap.jsx 컴포넌트 생성 import Dropdown from './Dropdown' const Bootstrap = () => { return ( ) } export default Bootstrap 🎣 2. Dropdown.jsx 컴포넌트 생성 import { useEffect, useState, useRef } from 'react' import styled from 'styled-components' const Dropdown = () => { const [showList, setShowList] = useState(false) const btnEl = useRef(null) useEffect(() => { const onClick = (e) => { if (btnEl.cur..

🎣 1. Bootstrap.jsx 컴포넌트 생성 import Accordion from './Accordion' import { accordionData } from '../../datas/bootstrap' const Bootstrap = () => { return ( ) } // 아코디언컴포넌트를 데이터만 갈아끼우면 안에 내용을 교체하면서 재활용가능 export default Bootstrap 🎣 2. Accordion.jsx 컴포넌트 생성 import { useState } from 'react' import styled from 'styled-components' import { ReactComponent as Arrow } from './arrow.svg' const Accordion = ({ ..