블록체인 TIL-4Week-26Day(휴강일)

디오·2023년 4월 7일
0

개인공부

목록 보기
4/28

오늘은 오전 6시에 일어나서 바로 수영을 갔다. 어제 이것저것 공부하느라 2시가 넘어서 잠에 들었는데 6시에 일어나서 수영을 가려니 몸이 너무 무거웠다. 그래도 나와 한 약속을 지키기 위해서 그리고 꾸준히 체력관리를 해야 블체스를 잘 마무리할 수 있을거라는 생각에 무거운 몸을 이끌고 다녀왔다. 그래도 운동을 하니 몸이 개운해지고 기분도 좋아지는 느낌이 들었다. 오늘은 오랜만에 환경을 바꿔보기 위해서 아침부터 노트북을 들고 카페로 향했다. 카페에 앉아서 오늘 해야할 일을 정리하고 어제 하지 못했던 수업 코드리뷰 정리와 오후에는 개인공부와 열정새끼호랑이팀이랑 스터디를 하려고 한다. 일단 어제 수업에서 진행했던 WorldCup 코드리뷰를 해보겠다.



✅ WorldCup 코드리뷰 정리.

<App.jsx>

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./pages/main";
import Worldcup from "./pages/worldcup";

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/worldcup" element={<Worldcup />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

  • 페이지를 넘길 수 있도록 import에 "react-router-dom"을 불러와 BrowserRouter와 Routes로 감싸주고, Route를 사용하여 Main과 Worldcup페이지를 연결해주었다.

  • 정보를 넘겨받을 수 있도록 Main과 Worldcup을 import로 연결해주었다.

<animalData.json>

[
  "골든리트리버",
  "라가머핀",
  "말티즈",
  "먼치킨",
  "백호",
  "스코티쉬폴드",
  "시고르자브종",
  "시바",
  "시츄",
  "아메리칸숏헤어",
  "진돗개",
  "집토끼",
  "터키쉬앙고라",
  "페르시안",
  "포메라니안",
  "푸들"
]
  • json 파일에는 배열 안에 16마리의 동물을 넣어 Data를 불러올 수 있도록 만들어 주었다.
<Main.jsx>

import React from "react";
import { Link } from "react-router-dom";


export default function Main() {
  return (
    <div className="bg-pink-300 min-h-screen flex flex-col justify-center items-center">
      <div className="text-6xl font-bold">이상형 월드컵</div>
      <Link to="/worldcup">
      
        <button className=" bg-pink-400 text-white px-4 py-2 rounded-lg mt-8">
          시작
        </button>
      </Link>
    </div>
  );
}
  • 버튼을 눌렀을때 Worldcup페이지로 이동할 수 있도록 버튼을 만들어 css작업을 해주고 위에 Link to를 사용하여 버튼을 누르면 페이지로 넘어갈 수 있도록 링크작업을 해준다. 이때 페이지로 넘어가는 작업에 문제가 생기지 않도록 상단에 import { Link } from "react-router-dom";을 꼭 작성하여야 한다.
<Worldcup.jsx>

import { useEffect } from "react";
import animalData from "../animalData.json";
import { useState } from "react";
import AnimalCard from "../components/AnimalCard";
import WinAnimalCard from "../components/WinAnimalCard";

const Worldcup = () => {
  const [shuffleAnimal, setShuffleAnimal] = useState();
  const [choice, setChoice] = useState(0);
  const [nextRound, setNextRound] = useState([]);
  const [end, setEnd] = useState(16);

  const onClickChoice = (v) => () => {
    setChoice(choice + 2); 

    setNextRound([...nextRound, v]);
  };

  useEffect(() => {
    let shuffleAnimalData = animalData.sort(() => {
      return Math.random() - 0.5;
    });

    setShuffleAnimal(shuffleAnimalData);
  }, []); 
  useEffect(() => console.log(nextRound), [nextRound]);
  useEffect(() => {
    if (choice === end) {
      setShuffleAnimal(nextRound); 
      setNextRound([]); 
      setEnd(end / 2); 
      setChoice(0);
    }
  }, [choice]);

  return (
    <div className="bg-pink-200 min-h-screen flex justify-center items-center">
      {shuffleAnimal &&
        (end === 1 ? (
          <WinAnimalCard animal={shuffleAnimal[choice]} />
        ) : (
        
          <>
            <AnimalCard
              animal={shuffleAnimal[choice]}
              choice={choice} 
              onClickChoice={onClickChoice}
            />
            <div className="text-2xl mx-8 font-bold">
              <div>{`${end === 2 ? "결승" : end + "강"}`}</div>
              <div>VS</div>
            </div>

            <AnimalCard
              animal={shuffleAnimal[choice + 1]}
              choice={choice + 1}
              onClickChoice={onClickChoice}
            />
          </>
        ))}
    </div>
  );
};

export default Worldcup;

  • 먼저 가장 상단 코드를 보면 각각의 필요한 파일을 연결 또는 사용하기 위해 import를 사용했다.

  • useState를 사용해 필요한 부분들을 만들어 주었다.

    • 먼저 동물 이미지가 랜덤으로 추출될 수 있도록 하기 위해 shuffleAnimal을 만들어 냈다.

    • 각각 기본값을 적용시키고 변형시킬 수 있도록 choice를 만들어 기본값이 적용되는 위치에 넣어주었다.

    • 16강이 끝나면 다음 8강으로 넘어가게 만들어야 하는데 16강에서 8강으로 올라가기 위해 선택된 동물들을 한곳에 정리하기 위해 useState에 []라는 공간을 만들고 정리해준다. 정리한 동물들은 nextRound에 포함되어 다음라운드로 넘어가게 구동되는 각각의 코드들에 쓰인다.

    • end, setEnd로 useState를 만들고 (16)을 넣어 16강부터 시작할 수 있도록 조건을 만든다.

  • onClickChoice을 변수로 만들어 화살표 함수를 이용해 setChoice(choice + 2); 와 setNextRound([...nextRound, v]); 라는 조건을 넣는다.

    • setChoice(choice + 2); 는 처음 이미지가 0,1이고 그 다음 이미지가 2,3이 나와야 하기 때문에 choice + 2를 만들어준것이다. 예를들어 choice가 기본값인 0이기때문에 0,1이 나오고 나서 +2가 되면 0+2,1+2가 나오기 때문에 2,3이 나오게 되는것이다.

    • setNextRound([...nextRound, v]); 는 react에서의 push 기능과 같은 기능을 한다고 한다. "...문법"은 우리가 선택한 녀석을 다음 라운드에 넣겠다 라는 개념이라고 생각하면 된다고 한다. 해서 우리가 선택한 동물을 다음 라운드로 넘어갈 수 있도록 해주는 코드라고 생각하면 된다.

  • useEffect가 사용되었는데 코드를 보았을때 animalData에 있는 동물들의 배열 요소를 무작위로 섞도록 코드가 작성된 것을 확인할 수 있다. 코드의 뒷부분에 작성되어있는 return Math.random() - 0.5;는 배열 요소를 무작위로 섞이도록 해주는 코드의 공식같은 개념이라고 생각할 수 있는데 여기서 뒤에 적힌 -0.5가 양수일 경우 정상적인 순서로 배열이 출력되고 음수일 경우 순서가 거꾸로 바뀌게 된다. 그리고 새로운 배열을 setShuffleAnimal 함수를 사용하여 shuffleAnimal 상태에 저장힌다. 그리고 이를 통해 컴포넌트가 다시 렌더링되게 된다. 결과적으로 이 코드는 animalData 배열의 요소를 무작위로 섞어서, shuffleAnimal 상태에 저장하도록 한다.

    • useEffect는 첫 번째 매개변수로 전달된 함수를 컴포넌트가 렌더링될 때마다 실행한다. 두 번째 매개변수는 의존성 배열이며, 해당 배열 내의 값이 변경될 때마다 useEffect를 다시 실행하게 된다.

    • 이 코드에서는 의존성 배열이 빈 배열로 설정했기 때문에 useEffect는 컴포넌트가 처음에만 동물들이 경쟁하는 부분이 보여지도록 설정했다.

  • 그 다음 useEffect 부분은 if문을 사용하였는데 만약 choice가 end와 조건이 같을때를 기준으로 코드가 만들어져있다. 이 코드는 게임에서 각 라운드가 끝날 때마다 다음 라운드로 이동하기 위해 shuffleAnimal, nextRound, end, choice 상태값을 변경되게 하기 위해 만들어졌다.

    • setShuffleAnimal(nextRound); 의 경우, nextRound에 담긴 동물들을 shuffleAnimal로 옮기도록 되어있다. 이를 통해 다음 라운드에서 사용할 동물 데이터를 무작위로 섞은 상태로 초기화한다.

    • setNextRound([]); 는 다음라운드로 넘어가면 배열안에 있던 동물들을 초기화해주고 다시 다음라운드의 동물들로 저장해야 하기 때문에 새로운 []를 넣어 공간을 다시 확보해줬다.

    • setEnd(end / 2); 는 choice === end 가 같으면 end를 2로 나누라는 의미로 end 값을 2로 나누어 새로운 라운드에서 사용할 동물 쌍의 개수를 결정하도록 하였다.

    • setChoice(0); 는 choice 값을 0으로 초기화해준다. 이를 통해 새로운 라운드에서 선택을 다시 시작할 수 있도록 조건을 만든다.

    • 마지막으로 이 코드는 의존성 배열로 []에 choice만 설정되어 있으므로, choice값이 변경될 때마다 useEffect가 실행되도록 설정하였다.

  • 다음 return안에 있는 코드는 삼항연산자를 사용하여 조건문을 만들었다.

    • shuffleAnimal 상태값이 존재하고 end 값이 1일 맞다면 WinAnimalCard 컴포넌트를 보여주고, 다르다면 두 개의 AnimalCard 컴포넌트와 함께 현재 라운드와 선택한 동물에 대한 정보를 보여주어 라운드를 진행할 수 있도록 만들었다. end 값이 1이라는것은 마지막 최종 선택된 동물이 생기면 WinAnimalCard를 보여주게 되는 구조다.

    • 각각의 AnimalCard 컴포넌트는 animal, choice, onClickChoice props를 받는다. animal은 동물 데이터 객체, choice는 현재 선택된 동물의 인덱스 값을 저장하고 onClickChoice는 사용자가 동물 카드를 클릭했을 때 실행되는 함수를 전달하도록 한다.

    • 아래 div태그에는 end === 2일때 "결승"이라는 문자열이 출력되도록 하고 아닐경우 "강"이라는 문자열이 출력되도록 하였다.

    • 마찬가지고 하단에 AnimalCard 컴포넌트는 상단의 코드와 비슷한 코드를 가지고있지만 한가지 다른것은 다른 동물의 정보를 가져옴으로서 대결할 수 있는 구도를 만들어야 하기 때문에 choice에 + 1을 추가하여 다른 동물의 정보를 가져오도록 설정하였다.

<WinAnimalCard.jsx>

const WinAnimalCard = ({ animal }) => {
  return (
    <div className="flex flex-col justify-normal items-center">
      <div className="text-2xl mb-4 font-bold">
        🎉🎉🎉 Conglaturations 🎉🎉🎉
      </div>
      <img
        className="border-8 border-white shadow-lg shadow-white w-96"
        src={`${process.env.PUBLIC_URL}/images/${animal}.jpeg`}
      />
      <div className="text-2xl mt-4 font-bold">
        💕💕💕 Winner is {animal} 💕💕💕
      </div>
    </div>
  );
};
export default WinAnimalCard;
  • WinAnimalCard.jsx는 animal 조건분해로 가져왔고, 최종결승에서 우승했을때 출력될 css적인 부분이 코드로 구성되어있다. 
<AnimalCard.jsx>

const AnimalCard = ({ animal, choice, onClickChoice }) => {
 
  return (
    <div className="flex flex-col justify-normal items-center">
      <img
        className="border-8 border-white shadow-lg shadow-white w-96"
        src={`${process.env.PUBLIC_URL}/images/${animal}.jpeg`}
      />
      <div className="text-2xl mt-4 font-bold">{animal} 💕💕💕</div>
      <button
        className={`text-2xl mt-4 px-4 py-2 rounded-md ${
          choice % 2 === 0 ? "bg-pink-400" : "bg-violet-400"
        }`}
        onClick={onClickChoice(animal)}

        선택
      </button>
    </div>
  );
};
export default AnimalCard;

  • AnimalCard.jsx는 animal, choice, onClickChoice를 각각 조건분해로 가져왔고, AnimalCard에 대한 css적 요소들이 작성되어 있다.

    • 버튼을 만들어 css적인 부분을 추가하고 삼항연산자를 사용하여 색상이 결정되도록 설정하였다. choice % 2 === 0 라는 조건이 성립하면 핑크색이 결정되도록 하고 조건이 성립하지 않으면 바이올렛 색상이 결정되도록 설정하였다.

    • 그리고 사용자가 선택 버튼을 클릭하면 onClickChoice 함수가 실행되도록 하였다. 이때, 클릭 이벤트와 함께 animal 값을 인자로 전달한다.

이렇게 어제 은찬매니저님이 알려주신 부분과 내가 다시 코드를 리뷰해보며 확인한 부분을 추가하여 정리를 해보았다. 확실히 여러번 보고 적용해보니 수업때는 이해하지 못했거나 보지 못했던 부분에 대해서 이해할 수 있는 시간이여서 너무 좋았다.



🤓개인공부

오후에는 유튜브 강의를 보면서 부족한 기초지식을 쌓기위해 공부를 하였다. 사실 어제 저녁에 공부하다 늦게자고 새벽에 일어나서 4시간밖에 못자 너무 졸렸다. 저녁에 열정아기사자가 있기 때문에 컨디션조절을 위해서 낮잠을 좀 자줬다.
그래도 아~주 간단하게 알게된 부분에 대해서 간략하게 정리만 해놓도록 하겠다.

  • 함수 : 함수란 , 긴 JS 코드를 한 단어로 묶어주는 고마운 문법.
  • () => {} : function과 같은 기능을 하는 함수 만드는 문법.
  • State변경함수 특징 : 변경함수()의 ()안에 내가 집어넣은 내용으로 바꿔준다. 그런데 기존함수 예를들면 a와 변경함수 setA 가 있는데 a == setA 인 경우, 조건이 같으면 변경되지 않음.
  • "...문법" : 괄호 벗겨주세요 라는 문법. ???



🦁열정아기사자 스터디

오늘은 저녁 8시에 우리 열정아기사자팀과 스터디를 가졌다.
코드리뷰도 해보고 궁금한 부분이 있으면 서로 설명하면서 좋은 시간을 가졌다고 생각하지만 근본적인 문제가 해결되지 않는 느낌때문인지 다들 많이 어려워하고 복잡한 마음이 나에게도 느껴졌다.
나도 당연히 그 기분을 이해하기에 뭔가 도움을 주고 싶지만
내 부족한 실력때문에 팀원들을 도와주지 못하는게 많이 아쉬움이 남았다. 그래서인지 더 실력을 키워야겠다는 생각을 하게 되었고, 팀원들에게 보탬이 될 수 있는 사람이 된다면 나에게도 큰 성장이 있을거라고 생각하게 됐다. 어떤 일이든 내가 현재 하고있는 일이기에 긍정적으로 생각하고 계속 부딪혀야한다고 생각하려고 한다.
부딪치면서 일어나야 차츰 부딪히지 않는법도 배우고 그렇게 성장해 나갈테니까..
계속 이렇게 나 자신에게 긍정적인 생각을 주입하면서 잘 이겨냈으면 하는 바램이다.

profile
디오
개발자가 되어가는 개린이"
이전 포스트

블록체인 TIL-3Week-21Day주말(일요일)

다음 포스트

블록체인 TIL-4Week-27Day(토요일)

0개의 댓글