첫 협업프로젝트 : 모두의 영화 트러블 슈팅

내 첫 리액트 프로젝트 묵혀두고 묵혀두다 쉰내가 날지경이어서 이제그만 꺼내주려고 한다.

1. 심리테스트 : 테스트 질문을 어떻게 보여줄 것인가?
   test페이지의 이슈는 문제를 출력하고, 결과를 도출하는 방식
   나의 생각 : 문제의 경우 map을 통해 돌리기
   결과의 경우 1점씩 점수를 부여하기 또는 if문
   결론 : 위에 나온 방식모두를 사용하지 않고, 자동화에 성공
   state를 사용하여 톱니바퀴처럼 착착착 돌아가게 만들었다.

   <p className="content--question__box">{que[num].q}</p>

질문코드는 단 한줄로 끝이났다.
질문은 컴포넌트를 만들어 array안에 집어넣었다.
map도 필요없었다. 인덱스에 state를 만들어 클릭시마다 배열의 인덱스를 변경시켜줬다.

어떻게 필터링 할것인가!
가장 고민했던 부분이었는데, 같은 프론트엔드이자 팀장님께서 아이디어를 주셨다. 버튼에 value값을 주고, 질문코드처럼 똑같이 자동화할수 있는 방법이 있지 않을까.....
아하...버튼에도 value를 줄수 있다니... 이래서 js를 잘해야 리액트도 잘한다는 말이 있는거 같다...아니 이건 너무 기본적인건가..

그래서 이렇게 버튼에 값을 부여해주고,

value={filter[num].b1}

우리의 데이터는 array를 사용했으니 필터함수를 사용해서 거를수가 있었다. 버튼value에 맞는 키워드를 걸러주었다.

const onClick = (event) => {
let keyword = event.target.value;
let result = movies.filter((d) => {
return d.genre !== keyword;
});

결과론적으로는 필터함수를 사용하였지만 필터를 하고난 뒤에 state변경이 되지 않아 애를 먹었다.
나는 애꿎은 필터함수만 계속 고쳐댔다. 하지만 되돌아보니 문제의 원인을 찾지않은것이 잘못됐던거 같다.
다른 api를 이용했을때는 잘됐었는데 우리api를 이용하니 에러가 났다. 그러니 문제는 필터함수의 문제이기보다는 api를 불러오거나 다른쪽에서 문제가난것이었다.
결국 데이터를 받아오는 fetch쪽 코드를 수정하니 해결이 되었다.

결과페이지의 이슈는 어떻게 테스트페이지에서 나온 결과를 보내줄 것인가..!
props전송문법이 있지만 이는 부->모 컴포넌트에서만 가능하고, 친구사이, 모->부 패륜사이도 안된다..ㅠㅠㅠ
그래서 찾아본 결과
router를 활용하면 가능하다는걸 알게되었다.

navigate("/Result", {
     state: {
       testResult,
     },
   });

state안에 원하는 정보를 함께 전송해줄수 있다.
이 방법을 알아내기 까지 4시간은 걸린거 같다...

그리고 db받아올때 시간이 오래걸리는 걸 감안하여 loading페이지와 useffect를 적극적으로 사용할것!!

2. [object Object]

   let 테스트 = movies.movies.filter((영화) => {
   return 영화.genre == "다큐멘터리";
   });
   setMovies(테스트)

console.log(Object.keys(필터[번호])[0]);

1. return useeffect

https://generatedata.com/

var people = [
{ "name": "bob", "dinner": "pizza" },
{ "name": "john", "dinner": "sushi" },
{ "name": "larry", "dinner": "hummus" }
];
출처: https://hohoya33.tistory.com/126 [개발 메모장:티스토리]

var men = people.filter(function (person) { return person.dinner == "sushi" });
console.log(men[0].name);
출처: https://hohoya33.tistory.com/126 [개발 메모장:티스토리]

2) filter()을 활용한 삭제 예시 ⬇️

const deleteNote = (id) => {
const newNotes = notes.filter((note) => note.id !== id);
setNotes(newNotes);
}
notes배열에서 note.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
=note.id 가 id 인 것을 제거
https://v5.reactrouter.com/web/api/Link/to-object
use params pros전달
https://wodyios.tistory.com/6
https://velog.io/@y_jem/react-Link-tag-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%EC%8B%9C-props-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0
성공~!!!!!

3. 이미지 겹치기
   바닥을 absolute
   위에를 relative로 하고
   위에를 조정 !