Algorithm Cinema

서론 프론트엔드 프로젝트를 진행하다 보면 특정 이벤트(버튼 클릭, 항목 선택 등)에서 발생한 데이터를 로컬 스토리지에 저장해야 하는 경우가 종종 있습니다. 특히 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..

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

Frank Ocean하면 다들 떠올리는 전설적인 앨범 Blonde. 말고,,블론드를 내기 전 그가 만들었던 Channel Orange 앨범의 수록곡중 내가 제일 좋아하는 노래에 대한 주관적 해석을 적고자한다.아래의 링크에서 라이브를 볼 수 있다. (최고임 거의) https://www.youtube.com/watch?v=H0c0yo7NXq4  먼저 노래 제목 Super Rich Kids은 왜 이렇게 지었을까? 그는 단순히 미국의 부유층 청소년들의 부러운 삶을 동경하는 노래가 아닌, 그들이 직면한 삶의 공허함과 자본주의의 허무함을 풍자적으로 나타낸다. Frank Ocean의 대표작인 Channel Orange 앨범 수록곡 Super Rich Kids는 단순히 부유층 청소년들의 삶을 동경하는 것이 아니라, 그..

8분 남짓한 단편영화였고 skt에서 도파민 중독에 경각심을 알리는 목적으로 만든 단편영화. 기획은 AI (인공지능)에게 맡겼다 단편영화임을 감안하고 몇가지 리뷰를 남겨보겠다 #1. 분위기딱 처음 보자마자 느낀건 스릴러의 느낌이 강했고 서스펜스가 상당하다. 영화의 분위기 자체가 어두웠고 , 배경도 어두웠으며, 음악적인 부분 또한 긴장감을 조성하는 최적의 연출이었던것 같다.카메라 구도 또한 뭐 적당했다고 생각한다. #2. 카메라 구도개인적으로는 카메라 구도가 참 좋았다고 본다. 스릴러를 다룰때 너무 정적이거나 너무 동적인 즉 극단적인 무빙 혹은 무빙이 전혀없는 느낌이 아니어서 긴장감의 분위기를 쭉 이어나갔던 것 같다. #3. 도파민 중독이 부분은 좀 의아하다. 영화를 처음 보셨다면 이것이 왜 도파민 중독의 ..