TIL 2022.04.25

어제 하던 거 처음부터 다시 만들었는데 2번째 시도도 또 망함

 

create-react-app과 npm 문제를 모르겠다

유튜브에 리액트로 이상형월드컵 만들기 영상과 유데미 진유림 님 리액트 강의 두 개 보면서 만들었다

유튜브 강의대로 create-react-app을 코드 짜기 전에 넣으면 나는 안 깔리고 에러가 난다

그래서 코드 치고 난 뒤에 create-react-app을 유림님 강의처럼 넣으면 깔리기는 한다

그런데 index.html 에서 cra로 옮긴 (고양이가라사대)거랑 다르게

이번 거(중년배우월드컵)는 game.js / style.js 파일에서 cra로 옮겨야 한다

어디서부터 어떻게 옮겨야 되는지 모르겠다 경로도 바꿔야 되는 것 같은데

npm 이랑 git에 대해서 더 알아야겠다

구경이 게임(JS 드림코딩 참고) 리팩토링하다 망친 것도 복구하고

좋아하는 걸 만들어서 만드는 순간은 정말 재미있다

그런데 후반부에 git에 올리는 거나 리팩토링, 배포하는 게 어렵다

끊어서 알기 쉽게 나누어서 커밋해야 하는데 하다 보면 어디서 멈춰야 될지 모르겠다

그러다가 보면 내가 또 이상하게 경로 바꿔놓고 코드도 바꿨는데 그 전으로 돌아갈 수가 없다

물에 솜사탕 씻은 너구리가 되는 것이다

 

누구한테 물어보고 싶은데 이걸 어떻게 물어봐야 할지 감이 안 온다 모르는 것을 모르다니

일단 유튜브 강의에서 이해 못 한 코드를 보면서 왜 그렇게 되는지 봐야겠다

useEffect,useState

const Game = () => {

const [actresses, setActresses] = useState([]);

const [displays, setDisplays] = useState([]);

const [winners, setWinners] = useState([]);

useEffect(() => {

items.sort(() => Math.random() - 0.5);

setActresses(items);

setDisplays([items[0], items[1]]);

}, []);

const clickHandler = (actress) => () => {

if (actresses.length <= 2) {

if (winners.length === 0) {

setDisplays([actress]);

} else {

let updatedActress = [...winners, actress];

setActresses(updatedActress);

setDisplays([updatedActress[0], updatedActress[1]]);

setWinners([]);

}

} else if (actresses.length > 2) {

setWinners([...winners, actress]);

setDisplays([actresses[2], actresses[3]]);

setActresses(actresses.slice(2));

}

};

return (

<FlexBox>

<h1 className="title">Favorite Worldcup</h1>

{displays.map((d) => {

return (

<div className="flex-1" key={d.name} onClick={clickHandler(d)}>

<img className="actress-img" src={d.src} />

<div className="name">{d.name}</div>

</div>

);

})}

</FlexBox>

);

};

인프런 워니님 세미나 보고 다른 사람들 깃허브 볼 기회가 있었다

<~~:한글로 어떤 내용인지 설명>

이렇게 적어 두어서 나중에 수정하거나 할 때 좋아 보였다

지금까지 commit / 강의 n~n강 / images / JS:~ 이런 식으로 만 했었는데 따라 해 봐야겠다

 

개발이 점점 재미있어지고 있다

배경음악이랑 몇 강인지 준결승 결승 표시도 해주고 최종 승자도 정하고

코멘트 남기는 창도 만들고 싶다

그러려면 백엔드를 만들어야 하겠지?

좋아하는 배우 많아서 32강으로 하고 싶은데 이미지 파일 찾는 게 너무나도 노가다라

16강으로 만족

 

 

#100daysofcode day20