[weather-NextJS] 개발기 #4

8.9 (수)

가족 호캉스를 갔다 오느라, 업데이트가 느렸다.

수행한 것

• 각국의 위도 경도 json 파일을 토대로, 나라 검색 기능 추가
• resizable-layout 적용
• 브라우저 너비에 따른 모달의 렌더링 위치 수정

시도했으나 해결하지 못한 것

• 나라를 검색한 뒤, 해당 나라를 선택했을 때 localstorage에 저장하기

고민한 것

• 선택한 나라를 localstorage에 저장하려고 했다. 첫 번째 시도에서는 저장이 잘 됐지만, 새로고침 시 빈 배열이 localstorage에 저장이 됐다. 그래서 이를 해결하려고 코드를 수정했는데, 이번에는 새로고침 시 localstorage에 들어있던 값들이 초기화가 됐다.

  • 관련 코드

   const [searchTerm, setSearchTerm] = useState<string>('');
    const [searchResults, setSearchResults] = useState<any[]>([]);
    const [selectedCity, setSelectedCity] = useState<any>([]);
    const [storage, setStorage] = useState<any>([JSON.parse(localStorage.getItem('selectedCity')!)]);
    // 도시 검색 기능
    const handleSearch = (e: any) => {
      const input = e.target.value.toLowerCase();
      const filteredCountries: any[] = countriesData.countries.filter((country) =>
        country.country.toLowerCase().startsWith(input)
      );
      setSearchTerm(input);
      if (input === '') setSearchResults([]);
      else setSearchResults(filteredCountries);
    };
  
    // 도시 누를 시 기능
    const handleClick = (city: any[]) => {
      setSelectedCity((prev) => {
        const updated = [...prev, city];
        const prevCity = JSON.parse(localStorage.getItem('selectedCity')!);
        if (prevCity !== null && prevCity !== undefined) prevCity.push();
        localStorage.setItem('selectedCity', JSON.stringify(prevCity));
        return updated;
      });
      setSearchTerm('');
  
      // addLocalStorage(city);
    };
  
    // 저장된 도시 목록 불러오기
    useEffect(() => {
      const prevCities: string | null = localStorage.getItem('selectedCity'); // 값이 있는지 확인
      if (prevCities) {
        setStorage(JSON.parse(prevCities));
      }
    }, []);

• 나라 검색을 API를 사용하려고 했었다. 현재 사용하고 있는 Tomorrow.io에서 List Locations API를 제공중인데, 업데이트가 3년전이었다. 그래서 오류가 있는지 Response를 받아도 길이가 0인 배열만 받았다.. 그래서, 나라의 이름과 위도, 경도 정보를 가지고 있는 JSON 파일을 찾아서 이를 활용하기로 했다.

  • 추가로, 한글 검색을 지원하기 위해서 한글로 만들어져있는 JSON 파일이 없나 찾아봤는데, 따로 없었다.

• resizable-layout을 만들기 위해서 라이브러리를 사용했는데, 라이브러리를 이렇게 가져다 써도 되나? 싶었다.

  • 직접 구현할 생각은 안하고 너무 가져다만 쓰는지.. 아니면 이전에 라이브러리를 가져다가 잘 쓰는 것도 하나의 능력이라고 했는데.. 정답은 없는걸까? 어떤 태도를 취해야 할지 잘 모르겠다.

배운 것

• localstorage에는 string 타입만 저장할 수 있다. 실제로 다른 타입을 저장하고 싶을 때는 JSON.stringify() 메서드를 사용해야 한다. 반대로, 가져올 때는 JSON.parse()를 사용한다.
  • JSON.stringify(넣고싶은 자료): JavaScript 값이나 객체를 JSON 문자열로 변환한다.
  • JSON.parse(): JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다.
• '~' 형식의 인수는 'SetStateAction<never[]>' 형식의 매개 변수에 할당될 수 없습니다. in TypeScript
  • 발생 원인: useState을 선언할 때 타입을 지정하지 않았기 때문이다.
    const [searchResults, setSearchResults] = useState<any[]>([]) 와 같이 <>안에 타입을 지정해야 한다.
• TypeScript를 사용할 때는, 언어 이름 그대로 Type 선언이 중요하다.

결과물

• Resizable한 모달(width: 1024px 이상일 때) & 나라 검색 기능