162일차(2) - 개인 프로젝트

개인프로젝트

금일 진행 내역

• 헤더와 풋터 완성
• 반응형 설정
• 현재시간 화면에 출력하기
• react-router-dom을 이용해서 페이지 분할

헤더와 풋터를 지금까지 계획한 범위 내에서 완성시켰다.
풋터에 Email은 내 Gmail로 메일이 보내지게 만들었고, 깃허브와 벨로그 링크를 달았다.

GIF

현재 시간 출력

현재 시간을 출력하는 코드는 아래와 같이 짰다.

  const [ current, setCurrent ] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const currentTime = () => {
      setCurrent(new Date().toLocaleTimeString());
    }
    setInterval(currentTime, 1000)
    return () => clearInterval(currentTime)
  });

new Date().toLocaleTimeString()을 사용하면 오전 오후를 나타내는 AM or PM이 가장 뒤에 나와서 시간을 보기 불편했다.
그래서 current.slice(-2)를 사용해서 오전인지 오후인지 따로 보여주고, current.slice(0, -3)을 사용해서 시간만 짤라냈다.