프레임워크160 [Vue] 초기 세팅 및 익스텐션 설정 1️⃣ 초기 세팅 Node.js 최신 버전 설치 Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8JavaScript engine. nodejs.org VSCode 에디터 설치 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 - Li.. 2024. 4. 23. [React] useMemo 🔗 출처 🖥️ useMemo의 기능 ⚠️ useMemo는 결과값을 기억해두는 React Hook이기 때문에 빈번하게 사용할 경우 성능에 안좋은 영향을 줄 수 있습니다. 1️⃣ 복잡한 계산을 저장해 놓는 용도 아래 코드를 예시로 들자면 🙅♂️ 렌더링 될 때마다 expensiveCalculate 함수가 재실행되기 때문에 복잡한 작업을 수행해야 하는 경우 불필요한 함수가 매번 재실행되는 것이기 때문에 성능 저하 문제를 초래할 수 있습니다. 즉, 복잡한 작업을 할수록 비싼 값을 내야 한다. import React, { useState } from "react"; const expensiveCalculate = (numbers) => { console.log("calculate sum...."); return .. 2024. 3. 29. [React] useRef 🔗 출처 : 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 useRef에 대해서 어렵게 느껴진다면 시청해 보기 아주 좋을 것 같습니다! 🙅♂️ React에서 변수를 사용하지 못하는 이유 값의 변화를 UI에 실시간으로 보여줄 수 없다. 화면이 렌더링 되면 변수의 값이 초기화된다. 🥸 특징 : useState의 장점 + 변수의 장점을 합친 React Hook이다 👉 useState의 특징 렌더링 되도 값이 유지된다. 변화를 실시간으로 화면에 보여줘야 하기 때문에 매번 렌더링이 일어난다. (렌더링이 많아지면 성능에 안 좋음) 👉 변수의 특징 렌더링 되면 값이 사라진다. 변화를 실시간으로 화면에 보여주지 않아도 되기 때문에 성능에 좋다. 👉 useRef의 특징 useState와 변수의 장.. 2024. 3. 28. [React] useLayoutEffect 🔗 출처 useLayoutEffect – React The library for web and native user interfaces react-ko.dev 🤓 정의 useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다. useEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 비동기적으로 동작하기 때문에 다른 작업에 의해 blocking 하지 않고 필요한 시기에 실행됩니다. 🆚 화면이 업데이트된 후 effect가 실행됩니다. useLayoutEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 동기적으로 동작하기 때문에 해당.. 2024. 3. 25. [React] useId 🔗 출처 useId – React The library for web and native user interfaces react.dev 🤓 정의 useId()는 React 18 버전에 출시된 훅으로 접근성 속성에 전달될 수 있는 고유 Id를 생성하기 위한 React Hook입니다. 🥸 문법과 특징 const id = useId() 매개변수를 사용하지 않습니다. 라벨과 관련된 Id 생성 : label 요소와 그와 연결된 입력 요소(input, select, textarea)에 대한 id와 htmlFor 속성을 사용할 때 사용합니다. 여러 관련 요소에 대한 Id 생성 : 여러 관련 요소에 Id를 제공해야 하는 경우 호출하여 공유 접두사를 생성할 수 있습니다. import { useId } from "reac.. 2024. 3. 24. [React] 제어 컴포넌트 vs 비제어 컴포넌트 react-hook-form 라이브러리에 대한 강의를 듣다가 비제어 컴포넌트(uncontrolled component)에 대해서 알게 되었고, 그렇다면 제어 컴포넌트와 비제어 컴포넌트의 각각의 특징과 차이점은 뭘까?라는 궁금증으로 생각이 가지를 뻗어가면서 읽어본 블로그인데, 공식문서를 우선적으로 읽어본 후에 이해가 안가는 부분이 있을 경우 아래 블로그를 참고하면 제어 컴포넌트와 비제어 컴포넌트에 대한 이해도가 높아질 것이라고 생각된다. 기존에 사용하고 있던 방식이 제어 컴포넌트였다는 것도 다시 한번 알게 되었고, 그렇다면 비제어 컴포넌트는 어떤 상황에서 사용할 수 있을까?를 생각해봤을 때 단순한 로그인 기능 (조건부 버튼 비활성화 기능 없는 거)이나 검색 기능(실시간 조회 X), 유효성 검사가 들어가지 .. 2023. 8. 14. [React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 넘어가지 않은 듯한 상황이 벌어졌다. 첫 번째 시도 에서는 "QueryClient 설정 중에 keepPreviousData가 true여서 화면이 전환되는 느낌이 안 드는 걸까?"라는 생각으로 false로 바꿨다가 페이지를 바꿀 때마다 loading이 생겨서 바로 true로 바꿔버렸다. keepPreviousData는 fetch된 데이터를 받아오기 전에 loading 대신 이전 데이터를 유지해 주는 소중한 속성이다. // 주로 공통적으로 사용할 옵션을 입력해둘 수 있다. const client = new QueryClie.. 2023. 6. 27. [CSS] transform: translte(x, y) + transition을 사용한 우측 고정 미니 배너 구현하기 앞서 테스트 구현한 다락에서 추가로 구현해보고 싶은 UI가 있어서 window.outerHeight / window.innerHeight / window.scrollY를 활용하여 구현하였다. 예제 사이트 화면 아래 화면에서 우측에 있는 "신규 지점 오픈특가 알림" 팝업창이 스크롤을 내려도 스무스하게 이동하면서 고정되는 UI가 마음에 들어서 구현해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 코드 및 실행 화면 스크롤 내렸을 때 화면 우측에 팝업창을 고정하려면 transfor.. 2023. 6. 8. [CSS] animation : running로 컨텐츠 반복 애니메이션 구현하기 현생에 치여 살다가 흥미로운 css 개념을 알게 되어서 기능 테스트 해보고 복습할 겸 블로그를 작성해 본다. 예제를 찾다가 다락 공홈 하단에 다락 이용 후기가 생각하던 기능이어서 바로 구현해 보았는 데 animation / animation-play-state / @keyframe을 다뤄볼 수 있어서 좋았다. 예제 사이트 화면 서두에서도 언급했듯이 다락 메인 화면에 다락 이용 후기 UI 코드를 참고하여 애니메이션 기능을 테스트해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 .. 2023. 6. 8. 이전 1 2 3 4 5 ··· 18 다음 728x90
