개인프로젝트 - 날씨 앱 만들기 part1. (기획, 설계, 고민하기)

혼자서 하는 첫 프로젝트니까

 

부캠에서 제시해준 구현 단계 없이 시작 하려고 하니..

 

시작 하기 앞서, 어떤 방식으로 해야할까 고민이 되었다.

 

우선 1. 어떤 기능들이 있으면 좋을지 생각해본다. 2. 그에 맞는 구현 단계를 구상해본다. 3. 코드로 작성해본다.

챗 지피티의 조언 ↓

 실제 프로젝트를 더 수월하게 진행하고, 나중에 수정할 때 덜 힘들게 하려면 약간 더 구체화해두는 게 좋아.

일반적인 프론트엔드 프로젝트 진행 단계

1. 요구사항 정의 (무엇을 만들 것인가)

• 어떤 기능이 필요한가?
• 누가 사용할 것인가? (사용자 페르소나 간단히라도 생각해보기)
• 플랫폼은? (웹, 모바일 등)

예시:

• 사용자 위치 기반 현재 날씨 보여주기
• 도시 검색해서 날씨 확인 가능하게 하기
• 섭씨/화씨 전환 버튼
• 3일 또는 5일 예보 보여주기
• 날씨에 맞는 이모지나 배경 이미지 표시

---

2. 기능 명세 및 화면 설계 (어떻게 보이고 동작해야 하는가)

• 간단한 UI 와이어프레임 그리기 (Figma, Excalidraw, 종이도 OK)
• 컴포넌트 구조 정의
• 페이지 흐름 또는 상태 흐름도 정리 (예: 로딩 → 데이터 불러오기 → 화면 렌더)

---

3. 기술 스택 정의

• React
• 상태 관리 도구 (예: useState, Context API, Zustand 등)
• 날씨 API (예: OpenWeatherMap)
• 스타일링 (CSS, Tailwind, styled-components 등)

---

4. 폴더 구조 및 초기 세팅

• CRA(Create React App), Vite 등으로 프로젝트 생성
• 폴더 구조 미리 설계 (components, pages, hooks, services 등)

---

5. 기능 단위로 개발

• "도시 검색 기능" → 완료
• "날씨 API 호출 기능" → 완료
• "날씨 카드 UI" → 완료
  … 이런 식으로 쪼개서 commit 관리

---

6. 테스트 및 개선

• 예외 처리 (예: 잘못된 도시 입력, API 오류)
• 모바일 대응 여부 체크
• UX 개선 포인트 정리

---

7. 배포

• GitHub Pages, Vercel, Netlify 등에 배포

---

💡결론적으로, 네 계획에 이 2가지만 추가해보면 더 좋아!

1. 요구사항 명세 & 기능 우선순위 정리
2. UI 및 컴포넌트 구조 설계

 

우와.. 날씨 앱 만드는 것도 이렇게 해야할까?

(날씨 앱 무시하지 마...... )

 

 

---

1. 요구사항 정의 (무엇을 만들 것인가) 및 기능 명세

1-1. 어떤 기능이 들어가면 좋을까?

 

- 메인페이지에는 현재 위치와 날씨를 받아온다

- 지역별로(3~4개) 날씨를 알려준다.

- 해당 지역을 클릭하면 자세한 날씨를 알려준다.

- 도시 검색해서 날씨 확인 가능하게 하기

- 날씨에 맞는 배경을 보여주기

- 날씨에 맞는 옷차림이나 노래 추천?

 

원하는 기능들은 다음과 같았고,

우선 사용하고자 하는 api에서 어떤 걸 무료로 받아올 수 있는지 먼저 확인 했다.

연습이니까, 우선 무료 데이터 위주로!

---

1-2 무료로 받아올 수 있는 데이터

무료 사용 가능한 데이터 종류 / 현재 날씨에 속해 있는 정보들

 

 

현재날씨 API! 위치별로 볼 수 있을 것 같았다.

그리고 그 이외에 추가 몇가지 받아올 수 있는 데이터가 더 있다.

---

 

1-3 이 데이터로 내가 원하는 기능을 만들 수 있을지 체크해봤다.

 

- 메인페이지에는 현재 위치와 날씨를 받아온다 ✓

- 지역별로(3~4개) 날씨를 알려준다. ✓

- 해당 지역을 클릭하면 자세한 날씨를 알려준다. ✓

- 도시 검색해서 날씨 확인 가능하게 하기 ✓

- 날씨에 맞는 배경을 보여주기 ✓

- 날씨에 맞는 옷차림이나 노래 추천? ✓ (추후에 노래를 띄워주는 것도 연동하면 좋을 것 같다.)

 

---

1-4 불가능할 것 같은 기능을 제외하고 구현해보고자 하는 내용은 아래와 최종 같다.

 

1. 메인페이지에서 현재 날씨 띄우기

2. 메인페이지 밑에 3~4개 다른 도시의 정보 날씨도 간략히 알려준다.

3. 해당 지역을 클릭하면 날씨나, 자세한 정보를 알려준다. (습도나, 풍속 같은 디테일 외에도 추천 옷, 노래 컴포넌트를 만들어서, 넣어줘도 좋을 것 같다.)

4. 검색 창에서, 나라를 검색한 뒤 검색 버튼을 누르면 검색된 나라를 보여준다 (3번과 동일한 UI)

5. 기본 메인페이지에는 현재 위치의 날씨와 관련된 배경을 보여준다.

---

2.화면 설계 (어떻게 보이고 동작해야 하는가)

• 간단한 UI 와이어프레임 그리기 (Figma, Excalidraw, 종이도 OK)

간단하지만 어렵겠지 ..?

• 페이지 흐름 또는 상태 흐름도 정리 (예: 로딩 → 데이터 불러오기 → 화면 렌더)

1. 메인페이지 :  로고(기본) → 로딩 스피너 또는 스켈레톤 → 데이터 받아오기 → 화면 렌더

2. 메인페이지에 여러 나라에 라우터로 링크를 달아줘서, 클릭하면 넘어갈 수 있게.

    특정 나라 클릭 → 로딩 스피너 또는 스켈레톤 → 데이터 받아오기 → 화면 렌더

3. 검색 창에서, 타이핑 후 버튼 누르면 → 2번과 동일한 UI의 디테일 페이지

    타이핑 후 버튼 클릭 → 로딩 스피너 또는 스켈레톤 → 데이터 받아오기 → 화면렌더

 

 

• 컴포넌트 구조 정의

1.  공통 컴포넌트인 옷, 노래추천 컴포넌트를 각각 만들어서 조건부 렌더링으로 온도가 몇도 이상일 땐 이런 옷, 온도가 몇 도 일땐, 이런 노래 추천해준다.

2. 디테일 페이지에는 온도, 습도, 옷

 

아직 구체적으로 배운게 없어, 내가 한번 끄적끄적 생각해봤다..

나중에 보면 귀엽겠지 ... ㅎㅎ

---

3. 기술 스택 

• React
• 상태 관리 도구 (useState, Context API)
• 날씨 API (OpenWeatherMap)
• 위치 API (HTML Geolocation API)
• 스타일링 (CSS, Tailwind, styled-components)

---

4. 폴더 구조 및 초기 세팅

• CRA(Create React App), Vite 등으로 프로젝트 생성
• 폴더 구조 미리 설계 (components, pages, hooks, services 등)

폴더 구조. 내가 원하는 걸 지피티한테 전달했더니, 이런식으로 짜면 좋다고 알려줬다.

weather-app/
├── public/
│   └── assets/              # 로고, 아이콘, 이미지 등 정적 파일
│       ├── images/
│       └── icons/
├── src/
│   ├── api/                 # API 호출 관련 파일
│   │   ├── weatherApi.js
│   │   └── locationApi.js
│
│   ├── components/          # 재사용 가능한 컴포넌트
│   │   ├── Header/
│   │   │   └── Header.jsx   # 로고 + 검색창 등
│   │   ├── WeatherCard/
│   │   │   └── WeatherCard.jsx  # 날씨 정보 보여주는 박스
│   │   ├── OutfitRecommendation/
│   │   │   └── OutfitRecommendation.jsx
│   │   ├── MusicRecommendation/
│   │   │   └── MusicRecommendation.jsx
│   │   └── SearchBar/
│   │       └── SearchBar.jsx
│
│   ├── pages/               # 라우팅되는 페이지들
│   │   ├── Home.jsx         # 메인 페이지
│   │   ├── Detail.jsx       # 디테일 날씨 페이지
│   │   └── SearchResult.jsx # 검색 결과 보여주는 페이지
│
│   ├── hooks/               # 커스텀 훅
│   │   ├── useWeather.js
│   │   └── useLocation.js
│
│   ├── utils/               # 유틸 함수 (ex. 날짜 포맷, 아이콘 매핑)
│   │   ├── formatDate.js
│   │   └── mapWeatherToIcon.js
│
│   ├── styles/              # 전역 스타일 또는 모듈 스타일
│   │   └── global.css
│
│   ├── App.jsx              # 앱 루트 컴포넌트
│   ├── index.js             # React DOM 진입점
│   └── routes.jsx           # 라우팅 정의
└── package.json

 

폴더 설명

**커스텀 훅(Custom Hook)**은 쉽게 말하면 **React의 useState, useEffect 같은 훅을 이용해서 만든 '나만의 함수'**야.

주로 로직을 재사용하거나 컴포넌트를 깔끔하게 분리할 때 사용해.

 예를 들어볼게:

1. 커스텀 훅 없이 쓸 때 (그냥 컴포넌트에서 직접 API 요청)

import { useEffect, useState } from 'react';
import axios from 'axios';

function Home() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    axios.get('https://api.weatherapi.com/...').then((res) => {
      setWeather(res.data);
    });
  }, []);

  return

{weather ? weather.temp : "Loading..."}

;
}

이렇게 쓰면 다른 페이지에서도 날씨 가져오고 싶을 때 매번 똑같은 코드를 복붙해야 해 😥

---

 2. 커스텀 훅으로 바꾸면 이렇게 돼:

// src/hooks/useWeather.js
import { useEffect, useState } from 'react';
import axios from 'axios';

function useWeather(city) {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    if (!city) return;
    axios.get(`https://api.weatherapi.com/...&q=${city}`).then((res) => {
      setWeather(res.data);
    });
  }, [city]);

  return weather;
}

export default useWeather;

그 다음엔 컴포넌트에서 이렇게 간단히 사용해:

import useWeather from '../hooks/useWeather';

function Home() {
  const weather = useWeather("Toronto");

  return <div>{weather ? weather.temp : "Loading..."}</div>;
}

---

요약

useWeather()	날씨 데이터를 불러오는 로직을 한 곳에 모아서 재사용 가능하게 함
useLocation()	사용자의 현재 위치 정보를 가져오는 로직을 따로 분리

 

hooks/ vs utils/ 차이

	hooks	utils
역할	React에서 상태나 생명주기(lifecycle) 등을 다루는 로직 재사용 함수	일반적인 순수 함수(Pure Function) 모음
형태	보통 use로 시작하는 함수 (useWeather, useLocation 등)	formatDate, getIconName, convertTemp 같은 함수
React 관련 여부	✅ React 내부 기능 (useState, useEffect) 사용	❌ React 몰라도 쓸 수 있는 일반 함수
예시	- useWeather()- useLocation()- useDebounce()	- formatDate()- mapWeatherToIcon()- kelvinToCelsius()
어디에 쓰임?	컴포넌트에서 직접 상태 관리, API 호출 등	데이터 가공/포맷팅/변환 등에 사용

 

routes.jsx (라우팅 정의)란?

React 앱에서 페이지 이동을 담당하는 설정 파일이야.
보통 react-router-dom을 사용해서 아래처럼 정의해:

// src/routes.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Detail from './pages/Detail';
import SearchResult from './pages/SearchResult';

function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail/:city" element={<Detail />} />
        <Route path="/search" element={<SearchResult />} />
      </Routes>
    </BrowserRouter>
  );
}

export default AppRoutes;

그리고 App.jsx에서 이걸 불러서 쓰면 돼:

// src/App.jsx
import AppRoutes from './routes';

function App() {
  return <AppRoutes />;
}

 

---

5. 기능 단위로 개발

• "도시 검색 기능" → 완료
• "날씨 API 호출 기능" → 완료
• "날씨 카드 UI" → 완료
  … 이런 식으로 쪼개서 commit 관리

이런식으로, 하나씩 스타투 !