vite 및 react를 사용하여 날씨 앱을 빌드해 봅시다 - 1부

프로젝트 설정

우리는 vite , react 을 사용할 것이고 모든 것이 TypeScript가 될 것입니다.

이 자습서 그룹의 계획은 vite 사용 방법을 배우고, React 및 Bootstrap을 사용하여 UI를 신속하게 구축한 다음 그 위에 더 많은 기능을 추가하는 것입니다.

비테이

이 첫 번째 부분에서는 프로젝트를 만드는 것부터 시작하겠습니다.



대부분의 상용구는 불필요하므로 css 파일을 제거하고 대신 styled-components 을 사용하겠습니다.

폴더 구조는 다음과 같습니다.

추가 라이브러리

필요한 것을 설치합시다.

npm run install styled-components --save
npm run install @types/styled-components --save-dev

그 동안 react-bootstrap을 설치해 보겠습니다.

npm install react-bootstrap bootstrap --save
npm install react-bootstrap-icons --save

이제 모든 것이 준비되었으므로 검색 표시줄과 구성 요소(도시) 목록이 포함된 기본 페이지를 만들 수 있습니다.
각 도시를 클릭할 수 있습니다.

메인 페이지를 구축하자

검색 창과 도시 목록만 있으면 됩니다. CityList 구성 요소는 명확성을 위해 분리되며 검색 결과를 포함하는 cities 속성을 갖습니다.

지금은 다음과 같이 하드코딩합니다.

const cities = [
  { name: 'London', lat: '51.507351', lng: '-0.127758' },
  { name: 'New York', lat: '40.730610', lng: '-73.935242' },
  { name: 'Tokyo', lat: '35.689487', lng: '139.691706' },
  { name: 'Paris', lat: '48.856614', lng: '2.352222' },
];

따라서 기본 페이지는 다음과 같습니다.

// src/pages/MainPage.tsx
const MainPage = () => {
  return (
    <ViewContainer>
      <InputGroup className='mb-3'>
        <Form.Control
          placeholder='Search city'
          aria-label='Search city'
          aria-describedby='city'
        />
        <Button variant='outline-primary' id='city'>
          Search
        </Button>
      </InputGroup>
      <CityList cities={cities} />
    </ViewContainer>
  );
};

export default MainPage;

CityList 구성 요소의 경우 cities 속성만 반복하고 ListGroup 구성 요소에 각 도시의 이름을 표시합니다.

// src/components/CityList.tsx
const CityList = (props: CityListProps) => {
  const onCityClick = (city: City) => {
    console.log(city);
  };

  return (
    <ListGroup>
      {props.cities.map((city) => (
        <ListGroup.Item
          key={city.name}
          action
          onClick={() => onCityClick(city)}
        >
          <h4>{city.name}</h4>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

export default CityList;

typescript를 사용하므로 변수를 올바르게 입력해야 하므로 이 구성 요소에서 사용되는 유형은 다음과 같습니다.

type City = { name: string; lat: string; lng: string };
type CityListProps = { cities: Array<City>; };

이제 첫 번째 부분이 완료되었으며 하드코딩된 데이터로 프로젝트가 준비되었습니다.

두 번째 부분에서는 MapBox를 사용하여 도시를 검색하는 방법을 살펴보겠습니다.