Ella 프론트엔드일지

0. 호출 스케줄링 - 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것 호출 스케줄링을 구현하는 방법은 1. setTimeout 과 2. setInterval 이 있다. 1) setTimeout - setTimeout 함수로 생성한 타이머는 한 번 동작함 🔸setTimeout 예제코드 function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); - 위 코드를 실행하면 1초 후에 sayHi()가 호출된다. function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요. - ..

0. 이벤트 - 이벤트는 어떤 사건을 의미함 - 즉, 사용자가 '클릭' 했을 때, '스크롤'을 내렸을 때, 무언가 '입력' 했을 때 등으로 상호작용으로 인해 일어나는 사건을 의미한다. - DOM 요소와 관련이 있다. 1. 이벤트 종류 - 이벤트 종류는 아래 블로그를 참고하자 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%F0%9F%92%AF-%EC%B4%9D-%EC%A0%95%EB%A6%AC 🌐 브라우저 이벤트 종류 & 사용법 총정리 브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM ..

0. React-Query 🔸정의 및 특징 - 기존의 client state 를 다루는 라이브러리는 Redux,MobX,Zustand 가 있다. 이러한 라이브러리는 클라이언트 애플리케이션의 상태를 중앙 집중화하고 전역으로 관리한다. 대부분 이런 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아주고 있는 경우가 대부분이다. - 반면, Tanstack Query 는 서버 상태와의 상호작용을 중심으로 하는 상태관리 라이브러리이다. (서버 데이터 상태관리) - react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해진다. - Caching 지원 - 동일한 데이터에 대한 중복 요청을 제거하고 한 번만 요청하도록..

0. setState 함수 - useState 에서 setState 함수는 상태값을 변경하여 컴포넌트를 리렌더링 하도록 요청하는 함수이다. - 이 함수는 새로운 상태값이나 이전 상태값을 받는다. - setState를 호출하면 React는 상태 값을 업데이트하고 관련된 컴포넌트를 다시 렌더링한다. 1. 새로운 상태값 VS 이전 상태값 받기 - setState 함수를 쓸 때 아래와 같은 코드를 많이 봤을 것이다. 무슨 차이가 있을까? const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.ta..

✅한 줄 요약 : useEffect 는 React 컴포넌트 렌더링이 완료된 직후에 비동기로 호출된다. 0. 버그 현황 - 로그아웃 버튼을 누르면 / 페이지로 리다이렉트 기능을 만들려고 했다. - 로그아웃 버튼을 누르면 토큰 값이 없어져서 / 페이지로 이동해야하는데 Notfound 페이지로 뜸 - 아래 코드를 보면 중간에 useEffect 로 token 값이 없으면 / 페이지로 이동하게 해놨다. function Todo() { const [showInp, setShowInp] = useState(false); const [todoList, setTodoList] = useState([]); const userContext = useContext(UserContext); const navigate = use..

0. 커스텀 훅 - React 에서 기능을 재사용하기 위한 좋은 방법이다. - 커스텀 훅을 만들면 여러 컴포넌트에서 동일한 로직을 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있다. - 커스텀 훅은 'use' 라는 접두사로 시작한다. 🔸Counter 예제 코드 import React, { useState } from 'react'; // 커스텀 훅 const useCounter = (initialCount) => { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ..