본문 바로가기

분류 전체보기

 (200)
한 번 설정해두면 개발이 편해지는,,, Axios Interceptor 안녕하세요 웹 YB 김다현입니다.4주차 과제를 하면서 axios를 다루게 됐는데 이때 header로 토큰을 받아오는 코드가 중복되더라구요.중복 코드를 어떻게 해결할지에 대해 찾다가 axios의 interceptor 기능을 알게 되어 이번 아티클에서 다뤄보려고 합니다! (물론 저도 아직 코드에 적용은 안 했지만 사용해서 리팩토링 해보려고 합니다 ㅎㅎ,,,) Interceptor가 뭐지?Interceptor는 Axios의 기능 중 하나인데요. Interceptor라는 단어가 생소하게 느껴질 수 있는데 간단히 말하면 중간에 끼어들어서 원하는 작업을 해주는 도우미 라고 생각하면 돼요! 비유를 해보자면,,, 친구가 나한테 전화를 걸었다고 가정했을 때 보통은 곧바로 받겠지만 가끔은 전화를 받기 전 잠깐 무언가를 하..
🏄‍♀️ 리심스 3주차 - 리액트 렌더링 최적화 리액트는 성능 최적화를 위한 다양한 기능과 도구를 제공한다. 성능 최적화는 곧 불필요한 렌더링을 최소화하는 것으로, 이번 아티클에서는 렌더링 횟수를 줄이고 불필요한 메모리 사용을 줄이는 것에 초점을 맞추어 어떻게 애플리케이션의 성능을 높일 수 있는지 알아볼 것이다.  시작 전에, 먼저 리액트에서 리렌더링이 일어나는 조건은 아래와 같다.해당 컴포넌트의 state가 변경될 때해당 컴포넌트가 받는 props의 값이 변경되었을 때해당 컴포넌트의 부모 컴포넌트가 리렌더링되었을 때 1. Automatic batching (setState의 비동기 동작)💡 batching이란?React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것React 개발자는 성능 최..
[React] 타입 단언은 대체 안녕하세요 YB 이진혁입니다!이번에는 TS를 공부하면서 마주하게 된 타입 단언을 왜 쓰지 말라고 하는지, 그 개념과 이유를 예시와 함께 더 알아보고자 합니다.  물론 절대 사용하면 안된다는 아니지만 TS를 조금 더 효율적으로 활용하기 위해서 어떤 방법이 있을지 살펴보면 더 좋을 것 같습니다!  🌊 타입 단언(Type Assertion)이란?타입 단언은 개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식이다. 다른 언어에서는 타입 캐스팅과 비슷한 개념이며 TS를 컴파일 할 때 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다. 위에 적어둔 정의를 보면 알 수 있지만 이름 그대로 단언. 이 타입이 확실하다고 TS에게 알려주는 것이다. 어떻게 보면 TS에게 타입을 알려주는 것이니..
[Week 3] Automatic batching, windowing, useMemo, useCallback 1. Automatic batchingBatching (일괄 처리)리액트는 동일한 이벤트 핸들러 내에서 발생하는 state 업데이트를 묶어 한 번의 리렌더링만 발생시킨다.이러한 방식으로 불필요한 렌더링을 줄이는 것을 Batching(일괄 처리)이라고 한다. React 17에서의 BatchingReact 18 이전까지, 리액트는 이벤트 핸들러 내부에서 발생하는 업데이트에만 배칭을 적용했다.따라서, Promise나 setTimeout 같은 비동기 작업 내부에서 발생하는 업데이트는 배칭되지 않아,setState 함수가 호출될 때마다 각각 리렌더링이 발생했다. function handleClick() { fetchSomething().then(() => { setCount((c) => c + 1); ..
Error Boundary로 에러 핸들링하기 안녕하세요 ? YB 김가현입니다4주차 공유과제로는 Error Boundary로 에러 핸들링하기에 대해 알아보려고 합니다 !그간 에러 처리에 대해 깊게 고민해본 경험이 없었는데요,try-catch로 API 통신 에러 잡아내기react-query onError보통 이 두가지 방법 중 하나를 사용했던 것 같습니다.4주차 과제를 하면서 try-catch 블록을 사용해 catch에서 발생한 에러를 단순히 throw 하여 해당 함수를 가져다 쓰는 컴포넌트(혹은 페이지) 에서 각 케이스를 처리하는 방식으로 구현하였는데요 ..이게 맞는 방식인지 궁금증이 생겨 검색해보며 프론트엔드에서 에러 핸들링 하는 법을 다룬 다양한 아티클을 읽어보았는데, Error Boundary 라는 것이 있더라고요 !어떤 녀석인지 한 번 알아보..
개발 어떤 방식으로 하세요? _ CDD : 컴포넌트 주도개발 안녕하세요 YB 김고은입니다. 오늘은 CDD에 대해서 글 작성해보겠습니다!  컴포넌트 주도 개발(CDD) 이란? CDD (Component Driven Development) 는 컴포넌트를 중심으로 UI 를 만들어가는 개발 방법론기본적인 컴포넌트 단위를 기반으로, 사용자 View 를 구성하기 위해 점진적으로 컴포넌트를 결합해 가는 상향적(bottom-up) 접근이다.  컴포넌트를 모듈 단위로 개발하자는 방법론으로 재사용성과 유지보수성을 강화하는데에 초점을 둔 방식이다. 이때 컴포넌트란, 상호 교환이 가능하고 표준화된 UI 구성요소로 User Inferace의 조각인 동시에, 기능을 캡슐화하고 있다. 각 컴포넌트는 상호 독립적이다. 마치 레고 벽돌과 같이 컴포넌트들을 합쳐, 레고 성을 만들어가는 과정과 유..
React Router에서 Outlet과 Layout을 활용하는 방법 안녕하세요! 웹 OB 김채현입니다.이번에는 React Router에서 Outlet과 Layout을 활용하는 방법에 대해 아티클을 작성해보려고 합니다. 웹 페이지리를 구성할 때, 계속 공통적으로 적용되는 레이아웃이 있다면 이를 효율적으로 관리하는 것이 중요합니다.이때 Outlet과 Layout을 활용하면 다중 레이아웃을 깔끔하게 구현할 수 있어, 페이지를 더 구조적으로 설계할 수 있습니다. 이번 아티클에서는 Outlet과 Layout이 무엇인지, 어떻게 사용하면 좋은지에 대해 함께 살펴보겠습니다. Outlet이란?Outlet은 부모 Route에서 하위 Route를 렌더링할 위치를 지정해주는 역할을 합니다.React Router에서 특정 경로에 여러 중첩된 하위 경로가 있을 때, 부모 컴포넌트 안에 Outl..
Protected Route로 라우트 보호하기 안녕하세요 웹파트YB 강민하 입니다 ! 😄Protected Route로 인증이 필요한 페이지를 보호하는 방법에 대해서 알아봅시다.정답은 없는거고, 이런 방법도 있구나~ 정도로 보고가셔요1. Protected Route란? ... 한 번 만들어보기로그인/회원가입 기능이 있다면, 인증되지 않은 사용자로부터 보호해야 하는 페이지가 생기기 마련이다.예를들면 게시물 작성 페이지, 마이페이지, 등등...해당 페이지로 접근하고자하면 로그인이 되어있는지(토큰이 있는지) 확인해 보호하는게 필수다. React Router를 활용해 Protected Route 컴포넌트를 만들고, 이를 통해 인증이 필요한 페이지를 보호하면 사용자 인증 상태에 따라 접근을 제어할 수 있다 !// ProtectedRoute.tsximport ..

티스토리툴바