juni

import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";import Detail from "./pages/Detail";import GlobalStyle from "./components/GlobalStyle.jsx";function App() {  return (    BrowserRouter>      GlobalStyle />      Routes>        Route path="/" element={Home />} />        Route path="/detail/:id" element={Detail />} />      Routes>    BrowserRouter>  );}..

계산기import { useState } from "react";export default function App() {  const [cr, setCr] = useState(0);  const [newNumber, setNewNumber] = useState("");  const addNumber = () => {    if (newNumber === "") {      setNewNumber("");      alert("값을 입력하세요.");      return;    }    setCr(cr + parseInt(newNumber));    setNewNumber("");  };  const subNumber = () => {    if (newNumber === "") {      setNewN..

// 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> UI구축을 훨씬 쉽게 만들어줌// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미// triggering -> rendering -> commit 순으로 진행// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름import Layout from "./components/Layout";import TodoContainer from "./components/todo/TodoContainer";const App = ..

// 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> UI구축을 훨씬 쉽게 만들어줌// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미// triggering -> rendering -> commit 순으로 진행// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름   import { useState } from "react";import "./App.css";import TodoList from "./components/TodoList.jsx";import To..

간단하게 버튼을 눌러 count값을 조정하는 프로그램 작성body {  padding: 20px;}.App {  margin: 0 auto;  width: 400px;}.App > section {  background-color: rgb(245, 245, 245);  border: 1px solid rgb(240, 240, 240);  border-radius: 5px;  padding: 20px;  margin-bottom: 10px;}import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";// 카운트 값..

git : 형상(버전) 관리 시스템 이라 요약 가능하다git bash : 파워쉘(터미널)의 일종이다. ( 맥은 oh my zsh 다운 추천 )git 과 github의 차이 : 버전 관리 소프트웨어(git) / 버전 관리 시 원격 저장소를 이용하는데 그 중 하나의 서비스 ( github )touch (파일명) : 파일 생성  git add (파일명).(확장자명) : staging area 에 등록 ( git add . 을 입력시 . 은 현재 디렉토리를 의미하여 전체 등록됨 )그리고  .. 은 현재의 상위 디렉토리를 의미git status : git add 전 파일 상태 확인 시 사용 -> git add .-> git commit -m(message 약자) "(메시지 내용)": 버전으로 추가 (버전을 남기는..

movies.forEach((movie) => {    const posterImg = movie.poster_path;    const title = movie.title;    const overView = movie.overview;    const average = movie.vote_average.toFixed(1);    const id = movie.id;    const releaseDate = movie.release_date;    const director = movie.credits.crew.find(      (director) => director.job === "Director"    ).name;    const actor = movie.credits.cast      .sl..

모달 세로 -> 가로 모양으로 변경  document.addEventListener("click", (event) => {    const viewModal = event.target.closest(".card");    if (viewModal) {      const modalId = viewModal.id;      const movieData = movies.find((movie) => movie.id === parseInt(modalId));      if (movieData) {        openModal(`                                    class="movieImg"              src="https://image.tmdb.org/t/p/w500/..