차근차근 배움터

노트북을 포맷해서 깨끗해졌다 덕분에 다시 새로 필요한 파일들을 (귀찮지만) 설치하는 중이다. 1. Visual Studio (IDE) 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. N..

JS말고 React에서 간단하게 구현 가능하다 ChatGPT한테 물어보니까 간단하게 구현 완료 import React from 'react'; function CopyTextComponent() { const handleCopyClick = (textToCopy) => { navigator.clipboard.writeText(textToCopy) .then(() => { alert('텍스트가 복사되었습니다.'); }) .catch((error) => { console.error('복사 실패:', error); }); }; return ( handleCopyClick('복사할 텍스트')}> 클릭하여 텍스트 복사 ); } export default CopyTextComponent;

저장용 /* PC (Resolution 1024px)*/ @media all and (min-width:1024px) {} /* Tablets Horizontal Tablets Vertical (Resolution 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) {} /* Mobile horizontal, mobile vertical (Resolution 480px ~ 767px)*/ @media all and (max-width:767px) {}

리액트는 상태나 props, 컨텍스트 변경시에만 함수를 재실행하고 재평가한다고 했죠? 먼저, 항상 말하듯 상태 변경이나 props 변경, 또는 컨텍스트 변경은 컴포넌트 함수를 다시 실행시킨다고 했다 간단하게 버튼을 만들어서 클릭하면 태그 내용이 출력되고 다시 클릭하면 사라지는 토글 버튼을 만들었다 그 과정에서 전체 DOM이 재실행되는 것이 아닌 업데이트가 일어난 부분만 실행된 것을 확인할 수 있다. 즉 실제 DOM을 통한 업데이트는 가상 스냅샷 간의 차이점만 반영되었다

먼저 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다 리액트의 핵심은 "컴포넌트"이다 리액트는 웹을 모른다. 브라우저와는 전혀 관계가 없고 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만, 이러한 컴포넌트에 HTML 요소들이 포함되어 있는지 아니면 아예 허구적인 요소들이 있는지에 대해서는 상관할 것이 아니다 이는 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 것들이다 리액트는 컴포넌트를 관리하고 상태 객체를 관리하고 또한 다른 객체의 상태와 컴포넌트가 바뀌어야 하는지를 확인하고 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리일 뿐이다 그리고, 리액트는 변경된 내용과 어떤 화면이든간에 화면에 표시되어야 할 정보 모두를 현재 사용중인 인터페이스에 전달한다. 예를 들어 ..

섹션 12: 리액트와 최적화 테크닉 살펴보기(A Look Behind The Scenes Of React & Optimization Techniques)

로컬 저장소에 접근과 같은 기능이 없었기 때문에 여태까지 useEffect를 사용하지 않았는데 버튼을 클릭할 때마다 bump 애니메이션 효과를 주도록 하는 것에 useEffect 훅을 사용할 것이다 버튼을 클릭하면 bump class가 추가되도록 하고 또 타이머를 설정해 그 class가 사라지도록 할 것이다 이제 클린업 함수도 추가하고 싶은데요 타이머를 지우도록요 해당 컴포넌트를 삭제해야 하는 경우에요 하지만 그건 이 애플리케이션에서는 일어날 수 없는 일입니다 버튼은 항상 있어야 하니까요 하지만 그렇더라도 타이머 또는 실행 중일 수도 있는 기타 사이드이펙트는, 정리하는 것이 좋은 습관입니다 왜냐하면 useEffect에서 시작했으니까요 따라서 여기서 클린업 함수를 반환하겠습니다 useEffect에서 함수를..

약간 코드 따라치기를 하게 된 것 같기는 한데 .. 중간 중간 생긴 에러들 잘 수정했다 action id 대신 item을 비교해야 하는 경우들이 꽤 있었다. Cart.js import React, { useContext } from 'react'; import styles from './Cart.module.css'; import Modal from '../UI/Modal'; import CartContext from '../../store/cart-context'; import CartItem from './CartItem'; const Cart = props => { const cartCtx = useContext(CartContext); const totalAmount = `$${cartCtx.to..

장바구니에서 같은 항목들을 하나로 합치고 수량을 올리는 과정을 작성함 findIndex() 메서드 사용 CartProvider.js import CartContext from './cart-context'; import { useReducer } from 'react'; const defaultCartState = { items: [], totalAmount: 0 } const cartReducer = (state, action) => { if (action.type === 'ADD') { const exisitingCartItemIndex = state.items.findIndex(item => item.id === action.item.id); const exisitingCartItem = state..

bind 함수를 기억하는 가? => 놉 한 번도 안 배운 것 같은데 설명했다고 하시네 ㅋㅋ (기억력이...) Cart.js import React, { useContext } from 'react'; import styles from './Cart.module.css'; import Modal from '../UI/Modal'; import CartContext from '../../store/cart-context'; import CartItem from './CartItem'; const Cart = props => { const cartCtx = useContext(CartContext); const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`; con..