🤍 은지log 🤍

우리가 마우스로 어떠한 태그(div, ul, li, a 등)를 클릭했을 경우 많은 분들이 해당 태그만 클릭이 되었다고 생각하는 경우가 많다. 하지만 해당 태그만이 클릭 이벤트를 감지하는 것이 아니라 태그를 감싸고 있는 부모 태그들도 클릭 이벤트를 인식하고 반응하게 된다. 이것을 버블업(Bubble Up) 또는 버블링(Bubbling)이라고 한다. 이러한 버블링 또는 버블업을 막는 것이 stopPropagation이라고 보면 된다. 상위요소로 해당 이벤트를 전달하지 않고 자신만 이벤트를 감지하도록 사용하는 것이 stopPropagation 이다. ( Result 클릭 ✅) 이 코드를 보면 단지 .last-el 만 클릭했을 뿐인데 부모 엘리먼트에게도 이벤트가 전파 됨을 알 수 있다. 이때 사용하는 것이 e...

beforeunload 이벤트는 사용자가 일반적으로 페이지를 닫거나 새로고침할 때, 브라우저를 닫을 때, 주소 표시줄에 다른 URL을 입력하거나 링크를 클릭할 때 발생하며, 페이지를 닫기 전에 어떠한 조치를 취할 수 있게 제공합니다. 주로 사용자에게 변경사항을 저장할 것인지 여부를 확인하거나, 애플리케이션에서 사용 중인 리소스를 정리하는 등의 작업을 수행할때 활용됩니다. 🔆 React 에서 사용하기 useEffect(() => { const handleBeforeUnload = (event) => { event.preventDefault(); event.returnValue = ''; // 더이상 지원되지 않는 속성 이라고 한다. 작성하지 않아도 무방 }; window.addEventListener('b..

🔆 React : 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기위해 사용하는 웹 프레임 워크 이다. 🖇️ React의 원리, 특징, 장단점 : 리액트는 데이터의 흐름이 한방향으로만 흐르는 단방향 데이터 흐름을 가지고있다. UI를 여러 컴포넌트로 쪼개서 만든다. 전체 코드를 파악하기 쉬우며 유지보수 및 관리가 용이하고, 재사용성이 높다. 리액트를 이용하면 동적인 UI를 쉽게 만들수 있다. 🖇️ Javascript + XML 자바스크립트에 HTML 태그를 끼얹은 문법 HTML 태그 안에선 중괄호 {}를 사용해서 JS를 쓸 수 있다. const apple = "사과" const title = {apple} 드실분? 🖇️ Component 화면을 이루는 '요소'로 여러 곳에서 재사용 가능..

카카오에서 제공하는 우편번호 서비스 를 리액트환경에서 조금 더 간편하게 이용할수 있는 라이브러리가 있어서 사용해봤다 ㅎ! npm i react-daum-postcode 임베드 해서 사용하는 방법 과 팝업 방식으로 사용하는 방법이 있고, 나는 팝업 방식으로 구현해보았다. ✅ 전체 코드 import React, { useState } from "react"; import styled from "styled-components"; import { useDaumPostcodePopup } from "react-daum-postcode"; import { postcodeScriptUrl } from "react-daum-postcode/lib/loadPostcode"; const PostCode = () => {..

import { useCallback, useRef, useState } from "react"; import Webcam from "react-webcam"; import styled from "styled-components"; const CustomWebcam = () => { const webcamRef = useRef(null); const [imgSrc, setImgSrc] = useState(null); const [mirrored, setMirrored] = useState(true); const capture = useCallback(() => { if (webcamRef.current) { const imageSrc = webcamRef.current.getScreenshot(); se..

기존에 NodeJS로 만들어둔 서버에서 데이터를 get 해와서 프론트에서 라이브러리를 사용하지 않고 직접 무한스크롤을 구현해보았다. 예전에 해봤던건데 다시 하려니 헷갈리기 시작 ...😵‍💫 ; 그래도 어찌어찌 구현은 해보았다 .. 스크롤이 움직이면 데이터를 계속 해서 불러온다. ( + 스크롤이 바닥에 닿으면 데이터를 불러오는 코드도 구현예정) // useGetFruits.ts import axios from "axios"; import { useInfiniteQuery } from "react-query"; const fetchFruits = async () => { const { data } = await axios.get(`http://localhost:8080/fruits`); return data..

🎣 QueryClient react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; ... const queryClient = new QueryClient(); // 새로운 QueryClient인스턴스를 생성 function Root() { return ( ); // QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능 } 우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생..

React로 만든 프론트에서, axios를 통해 nodeJS로 만든 api를 요청하여 crud 를 구현해보려고 한다. openAPI를 통해 연습해보려고 했는데 이것저것 다해보기에는 한계가 있어서 ,, api를 만들어보기로 하였고 TDD 강의를 들으며 nodeJS로 구현해보았다 !_! reactQuery 연습하려고 만들기 시작한거였고, 해보면서도 느낀거지만 계속해서 사용해보고 계속 공부해야겠다고 느낀부분이 많았다. 해봤던것들도 사용안하다보니 잊어버리고 실수하는 부분이 많았당 🫠 그래도 하고나니 뿌-듯 '-'b 🖤🤍 아무도 안궁금해하겠지만 남겨보는 코드❤️ : 더보기 https://github.com/Amy-Eunji/nodejs https://github.com/Amy-Eunji/react-crud

React-Query란? 👉🏻 React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React-Query의 장점 ✔️ React 어플리케이션 내에서 데이터 패칭, 캐싱, 동기적, 그리고 서버의 상태의 업데이트를 좀 더 용이하기 위해 만들어준다. ✔️ 기존에는 직접 만들어서 사용했던 기능들을 별도의 옵션으로 지원하여 복잡하고 이해할 수 없는 수많은 코드를 대신 React-Query 로직을 통해 짧은 코드로 대체할 수 있게 되었다. ✔️ 프로젝트 구조가 기존보다 단순해져 애플리케이션을 유지 보수하기 쉽고, 새로운 기능을 쉽게 구축할 수 있다. 그 외에도 많은 장점이 있다. → useQuery, useM..

// Main.tsx import { useEffect, useState } from "react"; import styled from "styled-components"; import { useQuery } from "react-query"; import Pagination from "../templates/Pagination"; const Main = () => { // const [post, setPost] = useState([]); const [totalPosts, setTotalPosts] = useState(10); // 페이지 당 게시물 수 const [page, setPage] = useState(1); // 현재 페이지 번호 const offset = (page - 1) * totalP..