Algorithm Cinema

왜 이걸 써아함?저는 평소에 웹 개발(프론트 개발)을 할때면 에러가 발생하거나 콘솔에다가 찍어 디버깅을 해볼때 개발자 도구에 많이 들어갑니다.개발자 도구에서 여러 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를 사용하여 로그인 요청을 처리합니다. • 에러 메시지..

1. 서론 이번 글에서는 React 회원가입 모달 컴포넌트를 구성하는 방법을 다룹니다. 사용자로부터 입력을 받고, 이를 더미 서버(JSON Server)와 통신하여 회원 정보를 등록하는 과정을 단계별로 설명합니다. 또한, try-catch-finally를 활용한 예외 처리와 상태 초기화 방법도 포함했습니다.  2. 주요 기능 • 입력 필드 관리: useState로 입력값 상태를 관리하여 폼 제출 시 데이터를 전송합니다. • 비동기 서버 통신: axios를 사용하여 회원가입 요청을 처리합니다. • 모달 닫기 기능: 부모 컴포넌트에서 전달받은 함수로 모달 창을 닫습니다. • 유효성 검사: 입력 필드 검증과 에러 메시지를 출력합니다. • 예외 처리: try-catch-finally 구문을 활용해 성공 및 실패..

1. 서론 프론트엔드 개발을 할 때, 종종 API 서버가 준비되지 않았거나, 빠른 기능 개발과 테스트를 위해 간단한 더미 서버가 필요할 때가 있습니다. 이를 위해 JSON Server는 가장 손쉽게 사용할 수 있는 도구입니다. 이 글에서는 npx를 통해 JSON Server를 실행하는 방법부터 실제 API와의 차이점, 장단점까지 알아보겠습니다. 참고로 아래의 예시는 제가 하고있는 프로젝트 의 로그인 로직과 회원가입 UI/UX를 설계 및 개발 한 후, 백엔드의 API (server)가 나오기 전 프론트 자체에서 서버동작을 예비로 구현하며 공부했던 내용입니다. 2. JSON Server란? JSON Server는 JSON 파일을 기반으로 RESTful API를 빠르게 구축할 수 있게 해주는 도구입니다.백엔드..

React 프로젝트에서 글로벌 스타일링을 적용하면서 **라우팅(Routing)**을 사용하는 방법은 매우 중요합니다. 이 두 가지를 효과적으로 결합하면 프로젝트의 유지보수성과 일관성을 높일 수 있습니다. 이번 글에서는 Emotion의 글로벌 스타일링과 React Router를 조합하는 방법을 다루어 보겠습니다. 이 방식은 실제로 제가 저희 개발 팀 NOVA에서 진행하고 있는 프로젝트 :  명지대학교 검색 커뮤니티 (MJS)의 프론트엔드 개발자를 맡게되며, 짜고 있는 코드의 폴더 구조와 방식입니다. 많은 스타일링 방식을 써보았지만 리액트의 라우팅 구조를 활용하고 있다면 스타일 또한 라우팅을 활용하면 어떨까 ? 하는 궁금증에 공부했던 내용입니다.  1. 글로벌 스타일링 적용 시 기본 구조 전역 스타일링은 앱..

웹 개발(프론트엔트 개발)을 할 때 스타일링 방식은 프로젝트와 팀의 스타일에 따라 다릅니다. CSS-in-JS, CSS-in-CSS, 그리고 Utility-First인 Tailwind CSS는 각기 다른 철학과 장점을 가집니다. 오늘은 대표적인 Emotion (CSS-in-JS)과 CSS-in-CSS, 그리고 Tailwind CSS를 비교하며, 언제 어떤 방식을 선택해야 할지 설명해 보겠습니다.  1. CSS-in-JS (Emotion) 개요 CSS-in-JS는 자바스크립트 파일 안에 CSS 스타일을 작성할 수 있게 해 주는 방식입니다.그 중 제가 선호하는 방식인 Emotion은 styled 컴포넌트나 css 함수를 통해 컴포넌트 기반의 스타일링을 제공합니다./** @jsxImportSource @emo..