미니 프로젝트 반응형 웹 만들기

😒 처음해본 @media query

부트캠프 수료 후 뭘 해야할지 헤매다 연습겸 만들어본 반응형 웹..
반응형 웹으로 만들어본 기억도 없고 TS도 약해서 반응형과 TS 연습겸 도전해보았다.

1. PC Ver

2. Mobile Ver

GIF는 어디서 가져왔나요?

사실 여태 진행한 프로젝트는 BE와 팀을 짜서 같이 소통하며 진행했던지라 데이터에 대한
부담감은 없었는데 이제 BE없이 혼자하려니 무슨 데이터를 어디서 어떻게 가져와야할지
막막했다. 그래서 검색해본 결과 Open API라는게 있어서 처음으로 사용해보았다.
사용한 API는 Giphy Gif API로 Open API 중 나름 제일 괜찮아 보여서 선택하였다.

UI는 너무 간단한데 기존이랑 뭐가 다른지..?

기존에 API 데이터를 Get 하거나 Post 할땐 fetch()만 써봤는데 이번엔 처음으로 Axios를
써보았고 Loading spiner를 추가하여 Loading시 버벅이는 화면이 아닌 귀여운 고양이가 나오게
만들어 보았다. 또한 Grid를 사용하여 Web Ver일땐 3개씩 2줄로 나오는데 모바일은 1개씩 밑으로 나오게 구현하였다.

<-- Axios와 fetch 둘 다 써본 느낌으론 여러개를 동시에 가져올땐 Axios가 더 좋은거 같다.  -->
useEffect(() => {
    axios.get(API).then((res) => {
      setData(res.data.data.images.original.url);
    });
}, []);

Loading은 어떻게 구현하였나요 ?

1. 구글 검색 및 인강에서 본 내용

<-- JS -->
const [loading, setLoading] = useState<boolean>(false);

useEffect(() => {

	setLoading(true)
    
    axios.get(API).then((res) => {
      setData(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData2(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData3(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData4(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData5(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData6(res.data.data.images.original.url);
    });
    
	setLoading(false)
    
  }, []);
  <-- HTML -->
  {loading ? (
          <div className="LoadingWrap">
            <Loading />
          </div>
        ) : (
          <div className="gifWrap">
            <img className="gif" alt="gif" src={data} />
            <img className="gif" alt="gif" src={data2} />
            <img className="gif" alt="gif" src={data3} />
            <img className="gif" alt="gif" src={data4} />
            <img className="gif" alt="gif" src={data5} />
            <img className="gif" alt="gif" src={data6} />
          </div>
  )}

구글이랑 인강에서 본 내용으론 위와 같이 loading state에 초기값으로 false를 할당하고
data를 fetch할때 loading의 state를 true로 바꾸고 fetch가 끝났을때 false로 다시 state를
변경하여 HTML 부분에 삼항연산자를 이용하여 loading이 true일때 loadingSpiner가 보이고 false일때 기존 item이 보이는 방식으로 이해했는데 어째서인지 consoloe에 loading state를 찍어보면 fetch전에 true로 바뀌지 않고 false로만 고정되어서 긴 고민끝에 다른 방법으로 시도하였다.

2. 내가 시도한 내용

<-- JS -->
 const [loading, setLoading] = useState<boolean>(true);
 
 useEffect(() => {
    axios.get(API).then((res) => {
      setData(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData2(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData3(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData4(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData5(res.data.data.images.original.url);
    });
    axios.get(API).then((res) => {
      setData6(res.data.data.images.original.url);
    });
	<-- 데이터가 너무 작아 loading이 안보여서 setTimeout()를 사용하여 강제로 보이게 만들었다. -->
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, [refresh]);

  const NewBtn = () => {
    setLoading(true);
  };
  
  
  
  <-- HTML -->
  <-- New 버튼 -->
	<button onClick={NewBtn}>
	New!
	</button>
            
 

위 코드와는 다르게 처음부터 loading의 state 초기값을 true로 할당하였고
fetch 시작부분에 true로 바뀌는게 아닌 마지막에 false로 바뀌게 만들었고 대신
New! 버튼을 눌렀을때 다시 loading이 true로 바뀌게 만들어 New 버튼을 누를때마다
loadingSpiner가 나오게 만들었다.

마치며..

정말 간단한 미니 프로젝트였지만 이번에 목적이였던 Axios와 반응형 웹 제작 그리고 Loading 구현등 해보려고 했던건 전부 다 해본거 같아서 만족스럽다 하지만 TS 연습은 전혀 안된거 같아 아쉬운점이 많다. 사실 TS를 쓰다가도 막히는 부분이 생기면 열심히 검색해도 답을 찾기
어렵다는게.. 😭 포폴 준비도 해야하는데 막막하다..