목록전체 글 (140)
juni
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 약자) "(메시지 내용)": 버전으로 추가 (버전을 남기는..
State , Props , useRef , Hooks
State와Props 활용import "./App.css";import { useState } from "react";import Bulb from "./components/Bulb";import Counter from "./components/Counter";//함수 컴포넌트 리랜더링 -> App함수 재호출하고 바뀐 값을 재랜더링//자신이 관리하는 state 값 변경시 , 자신이 제공 받는 props값이 변경시//부모 component 리랜더링시 자신도 리랜더링 -> 위 3가지 경우 리랜더링// 컴포넌트를 나누어 불필요한 리랜더링 방지function App() { return ( Bulb /> Counter /> );}export default App; import ..
확장자명 생략 가능하게 해주는 부분import { defineConfig } from "vite";import react from "@vitejs/plugin-react";// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], rsolve: { extensions: [".js", "jsx"], },}); import "./App.css";//Vite환경에서 구현한 React는 확장자명을 생략해도 됨 이라는데...//처음엔 기재해야지 나오고 이후엔 생략해도 나온다..?import Header from "./components/Header";import Main from "./components/Main";imp..
TeamProject_영화 검색 사이트
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/..
모달 구현 const movieSection = document.getElementById("movieSection"); movieSection.innerHTML = ""; movieSection.innerHTML = movieInfo; function openModal(text) { const modal = document.getElementById("modal"); const modalText = document.getElementById("modalText"); modalText.innerHTML = text; modal.style.display = "block"; } function closeModal() { const modal = document.getEl..
//콜백 함수 -> 다른 코드의 인자로 넘겨주는 함수// setTimeout(function () {// console.log("hi")// },1000)const numbers = [1, 2, 3, 4, 5];numbers.forEach(function (number) { console.log(number);});//제어권 / 호출 시점에대한 제어권을 갖는다.//setInterval() : 반복해서 매개변수로 받은 콜백함수의 로직을 수행let conut = 0;let cbFunc = function () { console.log(conut); if (++conut > 4) clearInterval(timer);};//setInterval의 반복을 멈추기위한 timer 선언let timer ..
