스파르타코딩클럽 내일배움캠프 72일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 디자이너님과 전체 회의
3. 날씨 위젯 만들기
4. 로그인/회원가입 기능 구현

 

 

 

 

 

 

 

오전 스크럼 + 회의

어제 했던 것처럼 오전에 스크럼 진행하고 11시에는 디자이너님과 함께 전체 회의를 했다.

아무래도 기획 초반이라 그런지 디자이너님과 회의를 매일 해야 할듯 싶다. 당분간은...?

어제 기획했던 거라도 오늘 바로 바뀔수도 있기 때문에....ㅋㅋㅋ 그리고 실제로 그러고 있는 중이다.

 

오늘 회의를 통해 또다시 바뀐 기획이다.

헤더

PC

• 배경 색상 고정
• 드롭다운 버튼 제거 후 아래와 같이 변경
  • 마이페이지 버튼
  • 글쓰기 버튼
  • (닉네임) 님, 오늘은 어디로 떠나볼까요?
  • 검색 아이콘 추가 : 검색 페이지로 이동

반응형

• 드롭다운 → 사이드바 형식으로 변경

메인페이지

✅ 메인페이지/검색페이지 분리

메인페이지

• 상단 이미지
  • height 감소
  • 검색페이지 이동 버튼 추가
• 기존의 검색 기능을 검색페이지로 분기
• 섹션1 : 서울, 부산, 제주도의 최다 좋아요 게시글
• 섹션2: 해시태그별 최신글
• 섹션3: 랜덤 게시글
• 게시글 mouseover로 맵핑 반환

검색페이지

• 상단 이미지 변경
• 기존의 검색 기능 유지
• 검색 결과 4X4 배열
• 무한스크롤 or 페이지네이션 or 더보기 버튼

추가기능

메인, 검색페이지 상단 이미지 캐로셀 고려

 

 

이런 변경사항이 오늘 안에 나왔다면...믿어질까...? ㅋㅋㅋㅋㅋㅋㅋㅋ

어제 우리 조원들끼리 회의를 하고 또 나온 결과를 선형님이 정리해서 디자이너님께 전달해드리고, 두분이서 소통한 결과를 다시 우리에게 알려주고, 다시 전체 회의를 하고...의 반복이었다.

 

아무리 생각해도 오전은 그냥 회의로 시작해서 회의로 끝난다고 생각하면 될것 같다.

매일매일 기획할 때마다 세세한 것들이 생각나고 또 그걸 다같이 결정해야 하고, 디자인이 바뀔수도 있고 등등...

오늘만 해도 저렇게 많이 바뀌었으니까.

확실히 기획이 개발보다 더 어렵다. 하나부터 열까지 고려할 사항들이 너무 많아서 오히려 기획자가 더 대단해보인다...

 

 

 

 

 

날씨 api 받아오기

오늘 오전에 바뀐 사항으로 header에 날씨 위젯이 추가되었다.

헤더가 조금 비어보인다는 디자이너님의 의견에 따라 날씨 api를 받아와서 헤더에 추가하기로.

그래서 header, footer 구현 다하고 PR까지 날렸는데 다시 브랜치를 새로 파서 날씨 위젯을 구현했다.

 

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

이 사이트에서 회원가입하면 바로 api key를 발급받을 수 있다.

발급받은 후에 받아올 api를 찾아서 그 api url를 통해 필요한 정보들을 받아오면 된다.

 

처음에는 날씨 api 자체가 뭔지 잘 몰라서 구글링하고 정보를 받아오는데 시간이 꽤나 걸렸다.

어떤 api를 사용해야 하는지, 홈페이지 내부에 문서들이 많아서 구글링해서 다른 사람들의 코드도 살펴보았다.

그래도 엄청 많은 시간을 들이지 않고 받아와서 header에 추가했다.

 

import React, { useState, useEffect } from "react";

const Weather = () => {
  const API_KEY = "";
  const [weather, setWeather] = useState<any>(null);

  const getCurrentLocation = () => {
    // 현재 위치 가져오기
    navigator.geolocation.getCurrentPosition((position) => {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;

      getWeather(lat, lon);
    });
  };

  const getWeather = async (lat: number, lon: number) => {
    let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;

    let response = await fetch(url);
    let data = await response.json();
    setWeather(data);
  };

  useEffect(() => {
    getCurrentLocation();
  }, []);

  return (
    <div className="flex items-center justfiy-between">
      {/* <div>{weather?.name}</div> */}
      <div className="mr-1">{(weather?.main.temp - 273.15).toFixed(1)}°</div>
      <div className="m-1">{weather?.weather[0].main}</div>
      <div>
        <img
          src={`http://openweathermap.org/img/wn/${weather?.weather[0].icon}.png`}
          alt=""
          className="w-7"
        />
      </div>
    </div>
  );
};

export default Weather;

 

이게 weather api 받아오는 전체 코드인데, fetch를 이용해서 손쉽게 받아올 수 있었다.

그리고 저 아이콘은 사이트에서 제공해주는 아이콘인데 있는 줄 몰랐다가 나중에 알아서 아이콘도 추가해줬다.

현재 위치의 날씨를 받아오는 거라서 현재 위치까지 보여지게 할까 하다가 그러면 너무 예쁘지 않아서(?) 뺐다.

 

 

실제 헤더에서 보면 이런 식으로 보인다. (5.9도는 내가 있는 지역의 날씨이다)

내일 날씨가 달라지면 아이콘도 달라질텐데 내일 되서 제대로 아이콘이 바뀌는지 봐야겠다.

 

 

 

 

 

 

로그인/회원가입 구현 (이메일, 비밀번호로 로그인만)

어제 나는 UI 구현을 다 해서 PR까지 날려서 merge까지 끝냈다.

중간에 날씨를 하느라 다시 브랜치를 새로 파서 날씨 부분만 하고 그 이후부터는 계속 로그인/회원가입만 했다.

 

어제 UI만 구현할 때는 회원가입 버튼을 누르면 회원가입 토글로 넘어가는 걸로 구현했었는데,

기능을 넣으려고 생각하니까 로그인/회원가입 파일이 따로 있고 모달 창 전체 파일이 있어야 할 것 같았다.

그래서 모달 컴포넌트를 새로 만들고, 로그인-회원가입 파일도 수정한 부분이 많았다.

 

로그인/회원가입 버튼을 누르면 바로 로그인 모달로 넘어가고, 아래 회원가입 버튼을 누르면 회원가입 모달로 넘어가게 구현했다. 그러다 보니 거의 어제 만들었던 코드를 다 뜯어고치는 불상사가...ㅋㅋㅋ

공통된 부분을 남기려고 했는데 아래에 소셜 로그인 버튼도 있어서 전체 틀을 제외하고는 다 따로 구현했어야 했다.

 

그리고 modal.tsx에서 로그인, 회원가입 파일에 props를 넘겨줘야하고, 또 그 props들의 타입을 지정해줘야 했다.

 

interface LoginProps {
  email: string;
  setEmail: React.Dispatch<React.SetStateAction<string>>;
  pw: string;
  setPW: React.Dispatch<React.SetStateAction<string>>;
  error: string;
  loginBtn: any;
  closeModal: any;
}

이런 식으로 타입 지정한 후에 Login.tsx 파일에서 적용해야 했다.

저기서 loginBtn과 closeModal은 타입이 뭔지 고민해야 할 것 같아서 우선은 any로 지정하고 구현했다.

 

그리고 유효성 검사도 다른 방식으로 추가해주었다. 원래는 alert 창이 뜨도록 만들었었는데, 이번에는 아예

전체를 다 적지 않으면, 그리고 양식에 맞게 작성하지 않으면 버튼이 비활성 된다.

 

컴포넌트 리팩토링 하느라 시간이 오래 걸렸지만 다 하고 난뒤에 보니까 정상적으로 회원가입도 되고, 로그인도 된다.

되는지 안되는지 보게 하려고 콘솔로그도 찍고 alert 창도 뜨게 했는데 나중에 전부 다 구현하고 나면 지워야겠다.

 

 

 

 

그리고 로그아웃 까지 구현 완료했다.

내일 소셜로그인과, 로그인했을 때 달라지는 header 부분을 만들어야겠다.

 

 

 

 

 

 

트러블 슈팅

오늘은 로그인 기능을 구현하면서 전혀 몰랐던 내용을 알게 되었다.

아마 예전에 vanila js로 로그인 기능 구현했을 때도 동일한 문제가 있었을 것 같은데, 이제라도 알게되서 다행이라고 해야 하나..?ㅋㅋㅋㅋ

그리고 navigate() 관련도 새롭게 알게 되었다. 확실히 오류를 만나고 나면 공부를 더 많이 하게 되는 듯 하다.

 

아래는 오늘 내가 작성한 오류와 해결방법이다.

https://daydream-sy.tistory.com/185

[Error] useNavigate() may be used only in the context of a <router> component.

https://daydream-sy.tistory.com/186

[Error] 새로고침 이후 로그인/로그아웃 토글이 되지 않을 때

 

사실 블로그에 가장 나중에 작성한 것이고, 오류가 생기고 바로 마이크 켜서 팀원들에게 공유했다.

첫번째 오류는 나혼자 구글링해서 알게 된 것이고 두번째 오류는 팀원 분이 힌트를 주셔서 그걸 보면서 이해했다.

역시 집단 지성 최고....해결한 뒤에는 팀 노션의 트러블 슈팅 부분에도 기록해두었다.

 

 

 

 

 

 

 

 

 

 

 

짧은 일기

아직 시작한지 4일밖에 지나지 않았고 기획이 완전히 된 게 아니라서 그런지 오전 시간은 아예 회의하는 시간이 되어버렸다. 지금 생각해보니 그럼 그동안에 진행했던 프로젝트들은 기획을 제대로 한게 맞나 싶다.

이렇게 하나하나 신경써야 할 부분들도 많고, 디자인도 합의해야 할 게 많은데 이제서야 진짜 프로젝트를 하는 기분이다.

 

그래도 오후에는 기능을 구현할 시간이 주어졌다. 그럼에도 중간중간 마이크 키고 다른 분들의 질문도 듣고, 내가 질문을 하기도 하면서 지내고 있다. 이번에 최종 프로젝트 같이 하는 분들은 내 질문을 잘 받아줘서(?) 너무 감사하다.

궁금하면 바로 마이크 키고 물어보는데....ㅋㅋㅋ 집단 지성 진짜 너무 최고다....

그리고 그 외에도 기획 회의할 때 의견도 많이 나오고 여러 가지 아이디어가 많이 나와서 오히려 좋다.

적극적인게 더 좋지 않은가...?ㅋㅋㅋㅋ 아무튼 최종 프로젝트라서 약간 겁먹고 시작했는데 즐겁게 하는 중이다.