Algorithm Cinema

서론최근 프로젝트에서 외부 데이터를 활용해 동적인 사용자 경험을 제공하는 경우가 많아지고 있습니다. 특히, 날씨 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..

내가 개인적으로 혼자 하고 있는 자기의 신발 컬렉션들을 전시 및 판매하는 패션 아카이브 프로젝트 코드를 짜면서 공부한 내용이다.  https://github.com/ChoiTheCreator/TheFashionArchive #리액트 코드를 짜다가 무한루프에 빠질수가 있을까?물론 알고리즘 공부하면서 코드 잘못짜서 while문에 늪에 빠진적은 있었을것이다. 그러나 내 개인프젝에서 렌더링이 아예 안되는 이런 경험은 처음이었다.   먼저 화면들을 보자면 아래와같다.  #메인화면여기서 장바구니 (Carts)를 클릭하면,  장바구니 페이지로 넘어가는데, 여기서 무한루프가 발생해서 크롬 브라우저가 먹통이 되는 것이다.  #장바구니 페이지  #무엇이 문제였을까?  1. Redux 상태 관리 특성: Redux는 상태(s..