import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "pages/Home"; import Company from "pages/Company"; function App() { return ( ); } export default App; Throttling & Debouncing이란? 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법인 쓰로틀링과 디바운싱에 대해 학습해 봅시다. Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용하실 줄 알아야 합니다. Throttling 이란? 짧은 시간 간격으로 연..
useRef hook 소개 DOM 요소에 접근할 수 있도록 하는 React Hook 이에요. HTML과 javascript를 사용했을 때 우리는 특정 DOM을 선택하기 위해서 다음과 같이 했었죠. // (1) getElementById 이용 const divTag = document.getElementById('#myDiv'); // (2) querySelector 이용 const divTag2 = document.querySelector('#myDiv'); 리액트에서도 DOM을 선택해야 할 상황이 생기기 마련이에요. 예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등이요. 그럴 경우에 우리는 useRef hook을 사용합니다. 차근차근 알아보기로 해요! use..
useEffect는 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용합니다. 코드로 보는 useEffect 기초 브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링될 때 useEffect 안에 있는 console.log가 실행됩니다. 컴포넌트가 렌더링 될 때 실행된다. 이게 바로 useEffect 핵심 기능입니다. // src/App.js import React, { useEffect } from "react"; con..
axios interceptor는 이름에서 알 수 있듯, 다음 두 상황에서 흐름을 가로채서 여러분이 어떠한 코드 상의 관여를 할 수 있게 합니다. (1) 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전) (2) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전 HTML 삽입 미리보기할 수 없는 소스 출처 :https://javascript.plainenglish.io/how-to-implement-a-request-interceptor-like-axios-896a1431304a How to Implement a Request Interceptor Like Axios Intercept requests or responses before ..
jsconfig.json - 절대경로 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from 'App'; import GlobalStyle from 'GlobalStyle'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); fakeData.json [ { "createdAt": "2023-11-03T02:07:09.423Z", "nickname": "Dr. Clint Christi..
Prop Drilling이란 무엇일까? Prop drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어입니다. 이는 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미합니다. 중간 컴포넌트는 prop을 사용하지 않아도 자식컴포넌트에 내려줘야합니다. 무엇이 문제인가? 컴포넌트의 자식이 3~5개면 그나마 관리할 수 있지만, 100,200개 이상 넘어가면 그 컴포넌트에 prop를 다 관리하고 인지해야 한다. 단점 1. 유지보스가 어려움 2.컴포넌트 재새용 감소 3. 가독성 저하 4. 불필요한 렌더링 5. 추적 및 디버깅 필요