🤍 은지log 🤍

💡 혼자서 만들수 없다면 여러번 연습해보기 💡 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; `..

🎣 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 = ({ ..