Algorithm Cinema

기본 이해부터  : 비동기 함수 (async/await)를 왜 사용해야 할까? API 요청을 할 때, 서버에서 응답을 받기까지 시간이 걸리기 때문! 이렇게 말하면 뭐라는지 모를게 뻔하니,API 호출은 뭡니까 -> 네트워크를 통해 외부 데이터를 가져오는 것이 떄 네트워크 요청은 응답이 오기까지 시간이 얼마나 걸릴지 예측이 불가능합니다. 근데 이때 우리가 쓰는 자바스크립트는 동기적으로 작동하는데,네트워크가 느려서 응답을 기다리는 동안 동기적 작동하는 자바스크립트가 딱 막혀버리면전체가 막혀버리겠습니다. (blocking) 이라 하죵흔히 쓰는 크롬 브라우저의 버튼 클릭이랑 화면 조작이 먹통이되는 겁니다.결론적으로 이를 방지하기 위해서 작업이 완료될때까지 기다리지 않고, 다른 작업을 할 수 있도록 하는 것이 목적..

이 글은 또 왜 쓰게 되었는가명지대학교 검색 커뮤니티의 명대신문에서 데이터(신문 데이터)를 Fetching하는 로직을 짜다가 나온 문제이다. API 데이터를 관리할 때, 여러 개의 카테고리 데이터 (Request Paramter로) 를 어떻게 관리할 것인가? 하는 문제를 마주하게 됐다.  이때 각각의 상태를 따로 관리하는 방식과 동적 키를 활용하는 방식을 학습했는데 헷갈릴만한 소지가 있다고 판단하여 글을 남긴다. API 명세서 구조  (Request Param으로 카테고리 별 뉴스 기사 조회)### **📌`GET /api/v1/news?category={}`**- **Description:** RequestParam을 이용하여 특정 카테고리의 기사를 DB에서 가져옵니다.- **HTTP Method:**..

웹 애플리케이션에서 로그인 상태를 유지하는 것은 중요한 UX 요소 중 하나라고 생각합니다. 특히 새로고침 시에도 로그인 상태를 유지하려면 LocalStorage와 SessionStorage를 적절히 활용해야 합니다. 또한, 사용자 경험을 개선하기 위해 로딩 컴포넌트를 활용하는 것도 효과적입니다.  이번 포스트에서는 제가 프로젝트를 진행하며 로그인 상태를 저장하고, 새로고침 시에도 유지되도록 설정하는 방법과 로딩 컴포넌트를 추가하여 UI를 더욱 부드럽게 효율적으로 만드는 방식을 포스팅하겠습니다.로그인 상태를 저장하는 방법React에서 로그인 상태를 유지하기 위해 LocalStorage와 SessionStorage를 조합하여 사용할 수 있습니다.LocalStorage: UUID(사용자 식별자)와 같은 장기 ..

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

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

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