sunriseData 코드

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

[개발] 일출, 일몰 시간 표시

작성

2분 22초에서

return 문 앞에

  const sunriseData = weatherData ? new Date(weatherData.sys.sunrise);

이렇게 코드를 적었는데 이후의 코드에서는 갑자기 보이지 않아 이 코드는 어디가고

이후의 return 앞에는 이 코드가 오게 되었는지 궁금합니다.

const formatTime = timestamp => {
    const date = new Date((timestamp - 9 * 3600) * 1000); // UTC timestamp에 9시간 추가
    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 로컬 시간으로 포맷
  };

제가 이해할 때는 sunriseData가 wetherData의 unixtime을 현재 우리가 보는 시간으로 바꾸어 저장하는 것인데...
아래의 formatTime은 sunriseData를 대체한 코드인가요?(시차도 적용한?)

javascript react node.js react-native typescript

답변 2

정현우

지식공유자

확인했습니다. 제가 해당 영상을 편집 마치고 나서 검토했을때는 분명 이상이 없었지만, 내보내기 전후에 문제가 생긴것으로 추정됩니다. 영상에 편집 오류로 인해 불편 드려서 죄송스럽고, 질문 자체에 대해 설명드리자면 소연님께서 생각하신 대로 아래쪽 코드가 위쪽 코드를 대체하는 것이 맞습니다. 하지만 이는 자바스크립트 자체의 심화 과정에 해당되는 코드라고 생각해서 영상에서도 말씀드렸듯이 깊게 이해하실 필요는 없다고 생각해 주시면 감사드리겠습니다. 편집 프로그램에서 대체 어디가 문제였는지 지금 바로 확인하고 영상 수정하도록 하겠습니다. 죄송하고 감사합니다!

이소연

질문자

아닙니다! 친절한 답변 감사합니다!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이소연님.

sunriseData와 관련된 코드를 보면서 시간 데이터 포맷팅에 대해 이해하고 계시는 것 같습니다. sunriseData는 weatherData의 sys.sunrise로부터 시간 정보를 가져와 Date 객체로 변환한 것이며, 이는 일반적으로 시간 데이터를 다룰 때 사용합니다.

formatTime 함수

formatTime 함수는 Unix 타임스탬프를 로컬 시간으로 변환하여 우리가 이해하기 쉽게 만듭니다. timestamp 매개변수로 전달된 시간을 사용하여 Date 객체를 생성하고, toLocaleTimeString 메소드를 통해 보기 좋은 형식으로 반환합니다. 특히, UTC 기준 시간에서 9시간을 빼줌으로써 시차를 조정하고 있습니다.

코드 이해

sunriseData 사용: sunriseData는 날씨 API로부터 받아온 데이터를 그대로 Date 객체로 변환한 것입니다.
formatTime 함수 이용: formatTime 함수는 시간을 잘 포맷팅하여 출력하기 위한 유틸리티입니다. 정확한 시간을 표현하기 위해 시차를 조정했습니다.

따라서 formatTime은 sunriseData를 대체했다기보다는, sunriseData를 더욱 보기 쉽게 포맷하는 역할을 합니다. 이전 코드에서 sunriseData를 단순히 Date 객체로 생성하였다면, 이제 formatTime 함수를 통해 출력 시에 시각적으로 더 명확한 형식으로 보여주려는 것입니다.

인프런 커뮤니티 질문&답변