Algorithm Cinema

🚀 React에서 useEffect를 활용한 그래프 애니메이션 적용법 https://www.loom.com/share/c80fd4298f6d420e9d182623ded33997?sid=56b1c360-1dd4-427a-8208-ac537fe408a0 recharts를 활용하여 막대 그래프(BarChart)가 부드럽게 위에서 아래로 솟아오르는 효과를 구현합니다.👉 핵심 포인트는 초기 데이터(0 값)를 useState로 설정하고, useEffect를 사용하여 값을 점진적으로 증가시키는 것입니다. 📌 메커니즘와 아이디어 그리고 상황저는 프론트 개발을 하면서 백엔드 개발자 분들의 서버 배포 전에는 늘 더미데이터를 써서 서버 api가 없을때 제가 구현한 동작을 테스트하고는 했습니다. 보여지는 시각적 그래프가..

서론프론트엔드 개발에서 CSS-in-JS 라이브러리는 점점 더 널리 사용되고 있습니다. 그중 Emotion은 유연성과 강력한 기능 덕분에 많은 개발자가 선호하는 도구입니다. 특히 Emotion에서 제공하는 템플릿 문자열과 스타일 재활용 기능은 유지보수를 용이하게 하고 생산성을 높이는 데 중요한 역할을 합니다. 하지만 스타일 컴포넌트를 사용할 때 발생할 수 있는 단점도 고려해야 합니다. 이번 포스팅에서는 Emotion을 활용한 스타일 재활용 방법을 일반적인 방식과 비교하며 템플릿 문자열 활용의 장점과 한계를 알아보겠습니다. 템플릿 문자열 활용Emotion은 스타일을 정의할 때 JavaScript 템플릿 리터럴을 사용합니다. 이 템플릿 리터럴의 특징을 활용해 스타일 재활용을 간단하고 직관적으로 구현할 수 있..

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

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

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

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

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

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

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

들어가며코랄리 파르자의 서브스턴스는 바디 호러와 블랙 코미디를 결합해 외모 지상주의, 젊음에 대한 집착, 그리고 인간의 자아 정체성 문제를 탐구합니다. 영화는 겉으로는 환상적인 서사를 기반으로 하고 있지만, 그 안에 깊은 사회적 비판과 철학적 질문을 담고 있다고 생각합니다. 익숙한 라면에 캡사이신을 떄려넣은 영화를 소개합니다. 기본 줄거리 내용은 간단합니다. 세 줄 요약이 가능할정도로 익숙한 라면같이 영화의 흐름은 매우 쉽습니다. 주인공 엘리자베스 스파클(데미 무어)은 한때 명성을 누렸던 스타였지만 나이가 들면서 업계에서 점차 소외당합니다. TV 쇼에서 해고된 엘리자베스는 절망 속에서 병원에 입원하게 되고, ‘서브스턴스’라는 약물을 통해 젊고 매력적인 “수”(마가렛 퀄리)로 변신하는 기회를 얻게 됩니다...