TIL) 스파르타 개발일지 22-12-09

Today's Todolist coding, 그리고 마무리 하지 못했던 가위바위보 승자가리는 부분(5, 6번)을 진행하려한다.

1. 내가 선택할 수 있는 가위, 바위, 보 btn 세개

2.선택한 btn을 보여줄 수 있는 박스 두 개(내가 선택한 것, 컴퓨터)

3. 내가 선택한 btn에 알맞는 화면출력.

4. btn click시 컴퓨터는 랜덤한 값을 화면에 출력.

5. (3), (4)의 결과를 가지고 승자를 따짐.

6. 승패의 결과에 따라 출력되는 박스의 테두리의 색이 변경 (이기면 : 초록, 지면 : 빨강, 비기면 : 노랑)

---

먼저 todolist를 진행하며, 기억나는 부분과 깨닮은 부분을 조금 적어보려고 한다.

  const deleteTodo = () => {
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

삭제하려는 해당 todo를 제외한 todos 배열을 업데이트 하는 코드.

 

 

export default function TodoList({ name, todos, setTodos }) {
  const isActiveList = name === 'active' ? true : false;

위는 todolist에 작성된 코드의 일부이다.

내가 알기론 export를 분명 코드 맨 아래 명시하여, 해당 jsx를 내보내 주는 걸로 알았는데,

import 아래에 명시해줘도 된다는걸 처음알았다...

 

 

가위바위보 로직을 토대로 삼항연산자를 사용하여, 코드를 짠다면

// user == computer tie
    // user == rock, computer == "scissors" user 이긴거지
    // user == "rock" computer == paper   user 진거지
    // user == scissors computer paper    user 이긴거지
    // user == scissors computer rock     user 진거지
    // user == paper computer rock   user 이긴거지
    // user paper computer scissors user 진거지

 if (user.name === computer.name) {
      return "tie";
    } else if (user.name === "Rock")
      return computer.name === "Scissors" ? "win" : "lose";
    else if (user.name === "Scissors")
      return computer.name === "Paper" ? "win" : "lose";
    else if (user.name === "Paper")
      return computer.name === "Rock" ? "win" : "lose";
  };

이렇게 된다. 여기까지는 했으나, 컴퓨터의 값이 유저랑 똑같이 나오는 바람에 문제가 생겼다...