3주차 과제3️⃣

Requirement

• React로 배경이미지 랜덤 변경
• React로 인사 만들기
• React로 시계 만들기

개념정리

jsconfig.json 파일을 사용하는 이유?

프로젝트 디렉터리 루트에 jsconfig.json을 생성함으로써 해당 프로젝트가 js 관련 프로젝트라는 것을 알려줄 수 있다.

• compilerOptions 옵션 : 여러 가지 컴파일 옵션을 설정할 수 있는 옵션
  • module | module system을 명시
    선택 옵션: "amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd"
  • target | 사용할 javascript 문법 버전을 선택
    선택 옵션: "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"
  • baseURL | 프로젝트의 베이스 경로를 지정
    경로가 복잡한 경우, 특정 경로를 지정하여 편리하게 상대경로를 지정할 수 있음
  • paths | baseURL을 기준으로, 파일을 불러올 때 기준점을 설정할 수 있는 옵션

  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl":".",
    "paths":{
    "@app/*": ["app/*"]
    }

• include옵션 : 포함할 파일들을 명시
  default값 모든 파일을 포함하도록 설정되어 있음
  "include": ["src"] 이와 같이 명시해준다면 프로젝트에 해당 파일만 포함하도록 설정 됌

Coding

• 배경이미지 랜덤 변경 - 새로고침 시 이미지가 변환되게 구현 함

import React from "react";
import image01 from "images/Midnight in Paris-1.png";
import image02 from "images/Midnight in Paris-2.png";
import image03 from "images/Midnight in Paris-3.jpeg";
import image04 from "images/Midnight in Paris-4.jpeg";
import image05 from "images/Midnight in Paris-5.png";

function Background() {
  const images = [image01, image02, image03, image04, image05];
  //새로고침 시 이미지 자동 변환
  const randomImage = () => {
    const randomIndex = Math.floor(Math.random() * images.length);
    return images[randomIndex];
  };

  return (
    <>
      <img src={randomImage()} alt="Random Image" />
    </>
  );
}

export default Background;

• 인사 만들기
  localStorage를 사용해서 사용자 이름 저장
  localStorage에 사용자 이름 가지고 있으면 사용자의 이름을 보여주고 저장된 이름이 없다면 input를 통해 사용자 이름을 받아옴

import React, { useState } from "react";
function Greetings() {
  const [greetings, setGreetings] = useState("");
  const [paintGreetings, setPaintGreetings] = useState(false);

  const USERNAME_KEY = "username";

  const handleGreetingsChange = (event) => {
    setGreetings(event.target.value);
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    localStorage.setItem(USERNAME_KEY, greetings);
    setPaintGreetings(true);
  };

  const savedUsername = localStorage.getItem(USERNAME_KEY);

  //중첩 if문 사용
  //localStorage에 저장된 값을 없거나 input으로부터 받은 정보가 없을 때
  if (savedUsername === null) {
    if (paintGreetings === false) {
      return (
        <>
          <form id="login-form" onSubmit={handleFormSubmit}>
            <input
              id="loginInput"
              type="text"
              required
              maxLength={15}
              placeholder="What is your name?"
              onChange={handleGreetingsChange}
            />
          </form>
        </>
      );
    }
  } else {
    return <h2 id="greeting">Hello {savedUsername}!</h2>;
  }
}

export default Greetings;

• 시계 만들기
  toLocaleTimeString()메서드는 날짜의 시간 부분을 언어별로 표현한 문자열을 반환

import React, { useState, useEffect } from "react";
function Clock() {
  const [currentTiem, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const time = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => {
      clearInterval(time);
    };
  }, []);

  return <h1 id="clock">{currentTiem.toLocaleTimeString()}</h1>;
}

export default Clock;

Result

GitHub

9회차 - React 과제

🫠 느낀점

수업을 들으면서 useState메서드 실습도 진행했었지만, 개념이 완전히 잡히지 않아 유튜브와 공식 문서를 찾아보면서 메서드에 대해 다시 학습했다.
로컬스토리지에 정보를 가지고 있으면 새로고침을 하여도 정보를 불러와 화면에 띄우고 싶었다. 정보를 저장하는 것까지는 성공했으나 화면에 이름을 입력하고 정보를 보내면 처음엔 정보를 불러와 화면에 띄우지만, 새로고침을 하면 다시 input 창이 나왔다. 이를 해결하기 위해 중첩 if 문을 사용하였다. 원하는 대로 구현이 되니까 기분이 너~무나 좋았다😛
이전 과제에서 JS로 Momentum 클론 코딩을 하여 수월하게 과제를 진행할 수 있었다.

참고문서
jsconfig.json, https://velog.io/@kcj_dev96/jsconfig.json

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.