juni

let , const, var// let const는 블록단위 스코프let blockScopeVariable = "Available only in this block";if (true) {  let blockedScope = "Visible inside this block";  console.log(blockedScope);}// 아래 주석 코드는 스코프 오류로 실행X// console.log(blockedScope)console.log(blockScopeVariable);for (let i = 0; i 3; i++) {  console.log(i);}function testFunction() {  let test = "any words";  if (true) {    test = "changed va..

캡처링 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 과정window -> document -> div(id) -> div(id) -> button(id) 여기서 button에서 이벤트가 발생하면 이 과정이 캡처링 단계 버블링 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 과정button(id) -> div(id) -> div(id) -> document -> window 여기서 button에서 이벤트가 발생하면 window객체까지 전파보통 이벤트 핸들러는 버블링 단계에서 실행 -> 상위 요소에서 하위요소를 한 번에 다룸addEventListener에다가 세번째 인자를 전달하지 않으면 보통 버블링으로 진행됨 ( capture:ture ) -> 캡처링 전환

간단하게 버튼을 눌러 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 약자) "(메시지 내용)": 버전으로 추가 (버전을 남기는..

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

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/..