FrontEnd Develop 47

⏿ 실제 백엔드와 프론트엔드 통신 #5: Content-Type 다양화하기 (Using Axios Instance & Interceptor

프론트엔드와 백엔드의 통신에서 가장 중요한 부분 중 하나는 Content-Type입니다. 이 글에서는 **application/json**과 **multipart/form-data**의 차이, 실제 구현 방식, 그리고 프로젝트에서 Content-Type을 동적으로 처리하는 방법을 친절하게 설명합니다. 프론트엔드와 백엔드 통신에 처음 입문하신 분들도 이해할 수 있도록 쉽게 풀어보겠습니다.1. Content-Type이란?Content-Type은 서버와 클라이언트가 통신할 때 데이터의 형식을 정의하는 HTTP 헤더입니다. 이를 통해 서버는 클라이언트가 보내는 데이터가 어떤 형식인지 알고 올바르게 처리할 수 있습니다.Content-Type의 역할클라이언트에서 서버로 데이터 전송: 클라이언트는 서버에 데이터를 전..

FrontEnd Develop 2025.01.26

⏿ 실제 백엔드와 프론트엔드 통신 #4. Axios Instance에서 셋의 비동기적 공존

요청 인터셉터, 응답 인터셉터, 리프레쉬 토큰 함수는 axios Instance에서 비동기 함수로 선언되어있다. 요청 인터셉터와 응답 인터셉터의 역할 1. 요청 인터셉터: 서버와 통신 전 필요한 작업 -> 서버야 주세요! 하기전 작업입니다. 로컬스토리지부터 권한을 받아옵니다.  • 요청 인터셉터는 모든 API 요청 전에 호출됩니다.  • 주 역할: 1. 헤더 추가: • 요청마다 엑세스 토큰(또는 인증 정보)을 자동으로 헤더에 추가.  2. 요청 수정: • 예: URL을 동적으로 변경하거나, 특정 조건에 따라 요청을 수정.  3. 디버깅/로깅: • 요청이 서버에 도달하기 전에 요청 정보를 기록. 2. 응답 인터셉터: 서버 응답 후 필요한 작업 • 응답 인터셉터는 서버에서 응답을 받은 직후 호출됩니다.  •..

FrontEnd Develop 2025.01.24

⏿ 실제 백엔드와 프론트엔드 통신 #3. Axios Instance와 Refresh, Access 토큰 함수

인터셉터 설정의  포스팅의 다음 단계입니다.  리프레시 토큰을 사용해 새로운 엑세스 토큰을 발급받는 함수입니다. 요청과 응답 인터셉터에서 사용하는 핵심 로직 중 하나로, 엑세스 토큰이 만료된 경우를 처리하기 위해 만들어진 함수입니다. 이 함수는 토큰 기반 인증 시스템의 중요한 부분입니다. 아래에서 동작 원리와 역할을 설명하겠습니다. 1. 이 함수의 역할 1. 엑세스 토큰 갱신: • 엑세스 토큰이 만료되면, 기존 리프레시 토큰을 사용해 새로운 엑세스 토큰을 발급받습니다. • 새로 발급받은 엑세스 토큰은 이후의 요청에서 사용됩니다.  2. 리프레시 토큰도 갱신: • 리프레시 토큰 역시 일정 기간 후 만료될 수 있으므로, 서버에서 갱신된 리프레시 토큰이 함께 반환되면 이를 업데이트합니다.  3. 인증 상태 유..

FrontEnd Develop 2025.01.24

⏿ 실제 백엔드와 프론트엔드 통신 #2. Axios Instance와 요청, 응답 Intercepter

웹 애플리케이션을 개발하다 보면, 프론트엔드와 백엔드를 연동하는 과정은 필수적인 단계입니다. 이번 글에서는 실제 서버와 프론트엔드 코드를 연동하는 과정에 대해 자세히 알아보겠습니다. 이 과정은 초보 개발자나 처음 서버와 프론트를 연결하는 분들에게 유용할 것입니다. Axios는 HTTP 요청을 다루는 라이브러리로, RESTful API와 통신하는 프론트엔드 개발에 필수적인 도구입니다. 이 글에서는 Axios Instance를 활용해 API 통신을 효율적으로 설정하는 방법을 살펴보고, Interceptor를 통해 인증 토큰 처리까지 구현하는 과정을 알아보겠습니다.1. API Instance 생성하기 (Axios Instance)API 통신은 대부분 HTTP 클라이언트를 사용하여 이루어집니다. 저는 axios..

FrontEnd Develop 2025.01.24

⏿실제 백엔드와 프론트엔드 통신 #1. 인증과 권한부여 <토큰>

토큰은 클라이언트와 서버 사이에서 인증을 담당하는 열쇠와 같은 존재입니다. 이번 포스팅에서는 토큰이란 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지 알아보겠습니다.  # 토큰은 뭐고 왜 가져와야하는가?const accessToken = localStorage.getItem('token');const refreshToken = localStorage.getItem('refreshToken'); 먼저 토큰은 서버와 클라이언트(사용자) 간의 인증 및 권한 부여를 위해 사용되는 데이터 조각입니다.클라이언트가 서버에 접근할때, 클라이언트의 요청이 인증된 요청인지 아닌지 확인하는 디지털 증명서입니다. 일반적으로 두 종류의 토큰이 있습니다.• Access Token (엑세스 토큰): 주로 인증 및 권한 부여를 위..

FrontEnd Develop 2025.01.24

Data Fetching : User의 능동성 여부와 useEffect의 올바른 공존

서론 React 애플리케이션에서는 데이터를 서버에서 가져오는 작업(Fetching)이 필수적입니다. 하지만 데이터를 언제, 어떻게 가져올지는 사용자와 애플리케이션의 동작 방식에 따라 다릅니다. 이를 크게 두 가지로 나눌 수 있습니다: 1. 수동적 데이터 Fetching: 페이지가 로드되거나 특정 상태가 변경될 때, 애플리케이션이 자동으로 데이터를 서버에서 가져옵니다. 2. 능동적 데이터 Fetching: 사용자가 버튼 클릭이나 특정 액션을 통해 데이터를 요청합니다. 이 두 가지 경우는 각각의 특성과 요구사항이 다르기 때문에 React의 useEffect와 비동기 통신 함수의 역할이 달라집니다. 이번 포스팅에서는 상황에 맞는 useEffect와 비동기 함수의 활용법을 알아보고, 능동성과 수동성에 따라 us..

FrontEnd Develop 2025.01.22

🌐 Context로 상태와 함수를 글로벌하게 관리하며 성능 개선하기

서론 React 프로젝트에서 컴포넌트 간 상태를 공유하고 관리하는 일은 자주 발생합니다. 그러나 여러 컴포넌트가 공통된 상태를 사용해야 할 때, props drilling이라는 문제가 발생하곤 합니다. props drilling이란 상태나 함수를 필요한 컴포넌트로 전달하기 위해 여러 중간 컴포넌트를 거쳐야 하는 상황을 말합니다. 이는 코드의 복잡도를 증가시키고 유지보수성을 떨어뜨립니다. React의 Context API는 이러한 문제를 해결하고 성능까지 개선할 수 있는 강력한 도구입니다. 이번 포스팅에서는 props drilling이 있는 상황과 Context로 이를 해결하여 성능을 개선하는 방법을 살펴보겠습니다. 문제상황 1. Props Drilling의 문제  props drilling이 있는 상황을..

FrontEnd Develop 2025.01.21

🚀 프론트엔드 성능 개선 가이드 #1. React DevTools 컴포넌트 & 프로파일러 기능 활용

왜 이걸 써아함?저는 평소에 웹 개발(프론트 개발)을 할때면 에러가 발생하거나 콘솔에다가 찍어 디버깅을 해볼때 개발자 도구에 많이 들어갑니다.개발자 도구에서 여러 DOM 요소를 관찰해서 스타일링 할때 참고한다거나 등등 하는데 생각보다 그렇게 편리하게 모든 것이 다 보이진 않았습니다.  프론트엔드 개발 시 성능 이슈를 빠르게 찾아내는 것은 최적화를 위한 필수 단계입니다. Chrome React Developer Tools는 React 컴포넌트 트리와 렌더링 동작을 시각화해 성능 병목을 손쉽게 파악할 수 있는 강력한 도구입니다. 이번 포스팅에서는 React DevTools의 컴포넌트 및 프로파일러 기능을 활용해 성능 문제를 분석하고 최적화하는 방법을 다룹니다. 1. React Developer Tools 설..

FrontEnd Develop 2025.01.15

📚 React Query, 과연 써야 하는가? 그리고 구조분해할당 친절한 분석

🔍 서론React Query는 클라이언트 애플리케이션이 서버와 통신할 때 데이터 페칭, 캐싱, 동기화 및 상태 관리를 단순화하기 위해 개발된 라이브러리입니다.이번 포스팅에서는 **“왜 React Query를 사용하는가?”**라는 질문을 시작으로, 기존 방식과 React Query 방식의 코드를 비교하여 개선된 부분을 설명하겠습니다. 아래의 코드는, 패션 아카이브 프로젝트에서의 서버 통신시에 기존에는 React Query를 쓰지 않고 그냥 axios로 처리를 하는 법과, React Query를 써서 서버와의 통신을 할때의 차이점을 공부한 내용입니다. 모든 코드가 아닌 핵심 코드만 넣겠습니다 ( 보시는 분의 가독성을 위하여,,) 1️⃣ 기존 코드 리뷰 🔧 기존 코드 (Axios + useEffect 방식..

Local Storage 사용법과 이를 활용한 최상위 컴포넌트(App.jsx)에서의 책임 분리

서론 프론트엔드 프로젝트를 진행하다 보면 특정 이벤트(버튼 클릭, 항목 선택 등)에서 발생한 데이터를 로컬 스토리지에 저장해야 하는 경우가 종종 있습니다. 특히 React에서 이러한 작업을 할 때, 어떤 컴포넌트가 해당 작업을 수행할 책임을 가져야 하는지를 고민하게 됩니다. 이번 내용은 예전에 짰던 코드를 리팩토링하는 과정에서, 로컬스토리지의 책임을 최상위 컴포넌트가 다 지고 있는데 마음에 들지 않아서 분리를 시키려고 공부를 했던 내용입니다. 이번 글은 제가 진행하고 있는 패션 아카이브 프로젝트에서의 최상위 컴포넌트와 하위 컴포넌트 간의 책임 분리에 대해 알아보고, 예제 코드를 통해 올바른 방식으로 구현하는 방법을 설명하겠습니다.  상황React 프로젝트에서 신발 쇼핑몰을 구현하는 과정에서, 사용자가 신..