날씨 애플리케이션을 React.js로 마이그레이션

시작하기 전에

1주 반 동안 Github를 돌아다니며 흥미로운 이슈를 찾았습니다. 도움을 받기 위해 기여를 찾는 사람이 많거나 버그가 있는 문제를 해결하기 위해 많은 회사가 있습니다. 그것들은 모두 괜찮지만 이번에는 그들 중 어느 것도 실제로 나에게 매력적이지 않습니다.

그래서 이번에는 애플리케이션을 배포한 이후로 항상 하고 싶었던 프로젝트 중 하나인 Weather App을 개선하기로 결정했습니다.

날씨가 어때?

구글 서비스 덕분에 일기예보 없이도, 실제로 밖에 나가지 않아도 날씨를 알 수 있습니다.

하지만 당신이 있는 곳이 아닌 특정 도시의 현재 날씨가 궁금하고 그것을 알고 싶다면 구글은 좋은 선택이 아니다. 예상보다 빠르지 않고 너무 무거운 웹 서비스일 수 있습니다.



Weather Application은 도시 이름으로 날씨를 검색할 수 있도록 도와주는 작은 크기의 웹 애플리케이션입니다.

Darksky API 및 Mapbox API를 사용하여 실시간 날씨 정보를 얻습니다.

이슈가 뭐야?

issue은 프로그램을 react.js와 통합합니다. 즉, 앱은 현재 Node.js로만 작성됩니다. 서버 측 프로그램만 있고 .html 페이지를 렌더링하기 위해 handlebars 에 의존합니다.

완벽하게 작동하지만 문제는 반응형 UI를 지원하지 않는다는 것입니다. 모바일 플랫폼에서 이것을 볼 때 좋지 않습니다. 또한 handlebar개의 파일이 많고 이를 렌더링하기 때문에 페이지를 로드하는 데 시간이 좀 걸렸습니다.

이 문제는 프로그램을 node.js로 서버 측과 react.js로 프론트 엔드로 분리하면 해결될 것입니다.

React.js 설치

시작하려면 먼저 React.js를 설치해야 합니다.npx create-react-app [app-name]은 디렉터리에 React 앱을 생성합니다. 컴퓨터에 react를 설치하지 않으면 먼저 설치를 요청합니다.

그런 다음 샘플 react.js 프로젝트를 얻게 됩니다.

컴포넌트 구조 만들기

응용 프로그램은 주로 6 부분으로 구성됩니다. --- 머리글, 탐색 모음, 정보, 검색, 결과, 바닥글 ---. 따라서 이와 같은 구성 요소 트리를 만듭니다.

기본/
|---헤더/Navbar/
|---헤더/NavBand/
|---헤더/NavLink/
|--- 바닥글/
|--- 검색/

그리고 각 폴더에는 [component_name].jsx 파일이 있습니다.

핸들바에서 .jsx로 프로그램 마이그레이션하기

기본 폴더는 모든 구성 요소를 포함하는 루트 컨테이너입니다. 이것은 Switch 및 React.lazy 로드 및 react-router-dom 을 사용합니다.

import React from "react";
import { Route, Switch } from "react-router-dom";
import "./App.css";
...
const App = () => {
...
  return (
         <div className="App">
          ....
         </div> 
   );
};

검색 구성요소:

const Search = (props) => {
  ...
  return (
    <div className={styles.main-content}>
      <p>Use this site to get your weather!</p>

      <form >
        <input className={styles.input} placeholder="Location..." />
        <button className={styles.button}>Search</button>
      </form>
    ...
    </div>
  );
};

헤더 구성 요소

const Header = (props) => {
 ...
  return (
    <div className={styles.header}>
        ...
    </div>
  );
}

위의 두 가지 구성 요소와 마찬가지로 다른 구성 요소도 유사하게 구현됩니다.

다음은 무엇입니까?

제한된 시간과 이를 위해 할 일이 너무 많기 때문입니다. 문제를 3개로 더 분리합니다.

We need to make a REST API server ----> 클라이언트 axios은 거기에서 요청을 받을 수 있습니다.

Make a different CSS style -----> 지금까지 프로그램은 현재 동일한 CSS 스타일을 사용하고 있습니다. 부트스트랩과 .module.css이 사용됩니다.

Make a redux or hook to handle state and communicate with REST API. -----> 이렇게 하면 앱이 완전히 구현됩니다.

위의 사항이 모두 해결되면 문제가 계속됩니다. 세 가지 문제가 모두 완료되면 점진적으로 업데이트하겠습니다.