[어? 이게 되네?? 팀] 일일회고

이슈

1. 데이터 (Detailpage)

1) 추천 데이터 백에서 주는 방식

가장 좋은 방법은 백에서 api를 주는 것! 만약에 그게 불가능해서 요청을 여러번 해야하는 상태라면 연달아(순차적)으로 요청을 보내는 방식이 무리가 덜 가는 방법임. 또는 백엔드 쪽에서 node <=> DB와 티키타카를 하는 것이 훨씬 효율적이다.

2) description 번역

번역은 테마와 description 모두 마친 상태

3) 워드클라우드 경로

워드클라우드 이미지를 깃헙에 저장하고 경로를 끌고오는 방식은 현업에서도 잘 쓰는 꼼수다!

2. 렌더링

• 데이터를 불러와서 이를 State로 할당해주었을 때, console을 찍어보면 초기값(={})이 찍히는 현상 발생

  일단 초기값은 빈배열 {} 보다는 undefined를 주는 것이 좋다! 그리고 async같은 함수와 useState의 set함수도 데이터가 바뀌어 있을 거라는 착각을 할 수 있으나 비동기 함수이기 때문에 아니다! 그렇다면 어떻게 해야할까?
  
  👉 콘솔을 찍고 싶다면? : 아래쪽에 useEffect 를 넣어서 콘솔을 넣어주고 dependency에 데이터를(ex. gameData) 넣어줘야 한다.
  👉 데이터를 조건에 걸리게 하고 싶다면? : 자식 컴포넌트를 그리고 props 넘겨줄 때 { gameData && <gameData /> } 이런 식으로 논리연산자를 사용해준다! 그러면 값이 들어있을 경우에만 렌더링이 일어날 것이다.

3. 리팩토링

1) props 넘겨줄 때

 <TagBtn
	minPlayer={gameData.min_player}
	maxPlayer={gameData.max_player}
	complexity={gameData.complexity_average}
	minAge={gameData.min_age}
	domains={gameData.domains}
	minPlayingTime={gameData.min_playing_time}
	maxPlayingTime={gameData.max_playing_time}
 />

이렇게 무식하게 넘겨주지 말고.. 🔽

function TagBtn({gameData}) {
	const { name, … , maxPlayingTime } = gameData
}

이렇게 해주자...


2) 컴포넌트 재사용. 그런데? 좀 더 간결하게 써보자!

import Button from "@mui/material/Button";

function TagBtn({
  minPlayer,
  maxPlayer,
  complexity,
  minAge,
  domains,
  minPlayingTime,
  maxPlayingTime,
}) {
  return (
    <>
      <Button
        variant="outlined"
        disabled
        sx={{ fontSize: "0.5rem", borderRadius: "100px", m: "2px" }}
      >
        {minPlayer === maxPlayer ? (
          <span>{maxPlayer}인용</span>
        ) : (
          <span>
            {minPlayer}~{maxPlayer}인용
          </span>
        )}
     
      <Button
        variant="outlined"
        disabled
        sx={{ fontSize: "0.5rem", borderRadius: "100px", m: "2px" }}
      >
        난이도 {complexity}
      </Button>

      <Button
        variant="outlined"
        disabled
        sx={{ fontSize: "0.5rem", borderRadius: "100px", m: "2px" }}
      >
        {minAge}세 이상
      </Button>

      <Button
        variant="outlined"
        disabled
        sx={{ fontSize: "0.5rem", borderRadius: "100px", m: "2px" }}
      >
        {minPlayingTime === maxPlayingTime ? (
          <span>{maxPlayingTime}분</span>
        ) : (
          <span>
            {minPlayingTime}~{maxPlayingTime}분
          </span>
        )}
      </Button>
    </>
  );
}

export default TagBtn;

굉장히 버튼을 남발하는 코드들..

다음과 같이 리스트를 만들어 maping 해주자! (우리 코치님 정말 치밀하시다^^ 복붙 못하게 친히 이렇게 이미지를...😇 스릉합니다 코치님)

4. url

• url로 다 뚫림!
  사실.. 우리 웹의 치명적인 약점이.. 로그인을 안해도 url로 접근이 가능하다는 점이었다..ㅠ 사실 로그인 상태를 가지고 home에서 부터 검증이 들어가는데, 문제는 home을 거치지 않고 url로 다이렉트로 들어간다면 접근이 가능하다는 점이었다! 정말 기본적인 로직이라 질문하는데 조금 창피했다^^ 이 문제는 논리연산자로 간단하게 해결 가능하다.

  app.js 에서 전역 상태인 userState를 불러와서 로그인 시 보여줄 페이지를 { userState && <컴포넌트 /> } 같은 방식으로 해준다! 와 간단하다 간단해!

내일 할 일

• 디테일 페이지 데이터 모두 연결하기
• 게시판 페이지!