본문 바로가기

분류 전체보기

 (105)
Study_240513 (JS 문법 복습 및 React 학습) 새로운 Promise를 생성 시 동기적 동작 / Promise 결과에 접근 시 비동기적으로 동작const fetchData = async () => {  let response = await (await fetch("")).json();};// Promise 객체 생성const promise = new Promise((resolve, reject) => {  if (true) {    resolve("성공데이터");  } else {    reject("실패데이터");  }});// Promise에 resolve데이터 접근promise.then((resolve) => {  console.log(resolve);});// Promise에 reject데이터 접근promise.catch((reject) => ..
Study_240512 (JS 문법 복습) Attribute 와 Property 차이점Attribute : HTML의 속성 , element에 id / class 와 같은 추가적인 정보 , 정적임Property : DOM의 속성 , 동적임둘이 연결은 되어있지만 Property값을 변경하면 DOM객체만 업데이트 되고 HTML은 업데이트 되지 않아Attribute 값은 그대로임 // Destructuring 구조분해할당// 배열은 위치(index) , 객체는 key가 중요함const person = {  name: "르탄이",  age: 25,  job: "개발자",};const { name, age } = person;console.log(`hi ${name}!, ${age}!!`);const movie = {  title: "inception",..
Study_2405010 (JS 문법 복습) 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..
Study_240509 캡처링 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 과정window -> document -> div(id) -> div(id) -> button(id) 여기서 button에서 이벤트가 발생하면 이 과정이 캡처링 단계 버블링 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 과정button(id) -> div(id) -> div(id) -> document -> window 여기서 button에서 이벤트가 발생하면 window객체까지 전파보통 이벤트 핸들러는 버블링 단계에서 실행 -> 상위 요소에서 하위요소를 한 번에 다룸addEventListener에다가 세번째 인자를 전달하지 않으면 보통 버블링으로 진행됨 ( capture:ture ) -> 캡처링 전환
React_240508 (State Lifting) 간단하게 버튼을 눌러 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";// 카운트 값..
TeamProject_240507 (git 명령어 및 팀플 기능 개선) 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 약자) "(메시지 내용)": 버전으로 추가 (버전을 남기는..
React_240506 (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 ..
React_240505 확장자명 생략 가능하게 해주는 부분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..

티스토리툴바