Algorithm Cinema

토큰은 클라이언트와 서버 사이에서 인증을 담당하는 열쇠와 같은 존재입니다. 이번 포스팅에서는 토큰이란 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지 알아보겠습니다.  # 토큰은 뭐고 왜 가져와야하는가?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 쇼에서 해고된 엘리자베스는 절망 속에서 병원에 입원하게 되고, ‘서브스턴스’라는 약물을 통해 젊고 매력적인 “수”(마가렛 퀄리)로 변신하는 기회를 얻게 됩니다...

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

🎬 작품 개요 • 감독: 쥐스틴 트리에 • 장르: 드라마 / 법정 스릴러 • 출연: 산드라 휠러, 사무엘 테이스, 밀로 마차도 그라너 • 수상: 제76회 칸 영화제 황금종려상 수상 칸 영화제의 황금종려상을 수상했다는 소식을 듣고 개봉 당시 거의 바로 봤던 영화입니다.영화를 보고 좋았던 기억이 흐릿해질 듯 하여, 기록을 남기고 싶어 남깁니다. 📖 줄거리 소개 프랑스 알프스에 있는 외딴 산장, 작가 산드라와 남편 사무엘은 평화로운 듯하지만 미묘한 긴장이 감도는 부부였습니다. 그러나 어느 날, 남편 사무엘이 산장 2층 창문 아래로 추락해 숨지는 사건이 발생합니다.사고일까, 아니면 살해일까? 경찰은 사건 당시 현장에 있던 산드라를 용의자로 지목합니다. 유명 작가이자 독립적인 여성인 산드라는 법정에서 자신을 ..

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

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

서론최근 프로젝트에서 외부 데이터를 활용해 동적인 사용자 경험을 제공하는 경우가 많아지고 있습니다. 특히, 날씨 API와 같은 Open API를 적용하면 실시간으로 유용한 정보를 제공할 수 있어 사용자 만족도를 높일 수 있습니다. 이번 포스팅에서는 React 프로젝트에 OpenWeather API를 적용하여 실시간 날씨 정보를 가져오는 컴포넌트를 구현하는 과정을 상세히 설명합니다. 서버와의 통신은 axios를 통해서 합니다. fetch보다 편리하며, 라이브러리 설치가 간편하여 axios를 활용합니다.대략적인 준비과정입니다.1. 프로젝트 준비프로젝트 환경 설정은 아래와 같습니다.#1. React 프로젝트 생성 #2. 필요 패키지 설치 #3. 프로젝트 폴더 구조npx create-react-app my-ap..

1. 서론 이번 글에서는 React 로그인 기능을 구현하는 방법을 다룹니다. 사용자로부터 이메일과 비밀번호를 입력받아 서버와 통신하여 로그인 요청을 처리하고, 응답을 받아 인증 상태를 관리하는 과정을 단계별로 설명합니다. 이 가이드에서는 비밀번호 유효성 검사, 로딩 상태 관리, 예외 처리 등을 포함하여 완성된 로그인 페이지를 만들어 보겠습니다. 중요한 점은 이 글은 실제 API가 아닌, Dummy API로 Test 용 서버를 가지고 로그인 및 회원가입의 정상적인 흐름을 확인하는 것 뿐이라는 것을 분명히 명시합니다. 2. 주요 기능 • 입력 필드 관리: useState로 입력값 상태를 관리하여 폼 제출 시 데이터를 전송합니다. • 서버 통신: axios를 사용하여 로그인 요청을 처리합니다. • 에러 메시지..