앨리스코딩 프로젝트 회고록 마지막

안녕하세요 앨리스 코딩 부트 캠프 현재 6주 차에 접어든 예비 주니어 개발자입니다.
2주라는 짧은 프로젝트였지만 굉장히 많은 일들이 있었고, 제가 겪었던 일들을 간략하게 소개해 드리려 합니다. 처음 프로젝트를 시작할 때 앨리스 측에서 제안한 요구 스택이 html, css, js였지만, 저는 리액트 개발자가 되고 싶기 때문에 리액트로 프로젝트를 만들어도 되는지 문의드렸고, 허락받아 리액트 프로젝트를 완성하게 되었습니다
사실상 전체 공지로 알려준 가이드는 리액트로 제작하는 저에게는 의미가 없었고, 배포 또한 혼자 개인적으로 배포하게 되었지만 많은것을 배우게된 이주였습니다. 정말 좋았던 점은 독학을 하던 저에게 멘토가 없었지만, 현업에 계시는 프런트엔드 개발자분이 코치님이 되어 리액트로 만든 저의 프로젝트를 피드백 받을 수 있다는 점이 너무나도 행복했습니다. ㅠㅠㅠ 물론!! 도움도 너무 많이주시고 정보도 너무 많이주셔서 너무나도 감사했습니다.

지금부터 제가 프로젝트를 만들면서 겪었던 어려운 점들과 해결법을 풀어서 말씀드리도록 하겠습니다.

프로젝트를 하면서 어려웠던점과 극복기

첫번째는 메인화면에 보이는 씨디 애니메이션이었습니다. 사실 gif에 보이는 cd는 회전만 하고 있었습니다. css 애니메이션은 동시에 두번적용이 불가하다는 이유 때문이었는데요. 따라서 코치님께 조언을 구했고, 흰트를 얻어 두개의 div를 만들었습니다. boolean값 하나를 줘서 초기값을 flase로 한다음 setimeout함수로 첫번째 이미지div의 애니메이션이 끝난후 boolean값을 true로 주도록 하여 애니메이션이 작동하게끔 하였습니다. 코치님이 매번 말씀하셨던 말씀이 있었는데 구현하기전에 생각정리후 하는게 좋다 했는데, 정말 너무나도 효과가 있었던것 같습니다.

예시코드)

  const [cdCheck, setCdCheck] = useState(false);
  
  useEffect(() => {
    setTimeout(() => {
      setCdCheck(true);
    }, 3000);
  }, []);
  
  return(
    <MainImgDiv>
          {cdCheck === false && window.innerWidth > 640 ? (
            <MainBeforeCdImg
              src="cd.png"
              alt="cd"
              width="430px"
              height="450px"
            />
          ) : cdCheck === true && window.innerWidth > 640 ? (
            <MainCdImg src="cd.png" alt="커버" width="430px" height="450px" />
          ) : cdCheck === false && window.innerWidth <= 640 ? (
            <MainBeforeCdImg
              src="cd.png"
              alt="cd"
              width="240px"
              height="240px"
            />
          ) : cdCheck === true && window.innerWidth <= 640 ? (
            <MainCdImg src="cd.png" alt="cd" width="240px" height="240px" />
          ) : null}
        </MainImgDiv>
  )

두번째로는 라이브러리를 사용함으로써 해당라이브러리의 공식문서를 이해하는것이 너무 어려웠습니다. 이전의 저는 라이브러리를 사용하면서 해당하는 라이브러리를 구글링하여 블로그들을 보면서 구현을 했었는데요..좀더 괜찮은 방법이 없을까 생각하여 코치님께 조언을 구했고, 모든 라이브러리에는 테스트코드가 깃헙에 있다는것을 알게 되었습니다. 그리고 깃헙의 issue에서 많은사람들의 질문들을 참고하면 문제 해결하는데 많은 도움이 된다 하셨습니다. 말씀하신 방법을 이용하였더니 예전보다 라이브러리를 분석하는데 시간이 덜들게 되었습니다.

세번째 문제점은 정말 괴로웠습니다.. 학원에서 학원깃랩에 프로젝트를 올려야 코치님의 피드백을 받을수 있는데, 동영상의 크기가 100mb가까이 되기 때문이었기 때문이었죠.. 학원에서 제한하는 깃랩용량은 5mb였고, 이를 해결하기위해 동영상크기를 줄여보았으나 5mb는 불가 하였습니다... 많은 시도를 하였고, 오피스 아워시간에 코치님께 조언을 구했었습니다. 코치님께서는 iframe으로 유튜브 동영상을 불러와서 하면 된다는 해답을 말씀해주셨고 적용해보니 바로 해결되었습니다. 코치님 너무 감사합니다. 💕

네번째로는 모바일버전에서 카카오톡 공유하기 기능이 적용이 안되는 문제점 이었습니다.
많은 구글링 끝에 모바일에는 안되는줄 알았으나, 근본적인 원인은 따로 있었습니다.
오피스 아워시간에 코치님께서 말씀하시길 예전에 카톡 공유하기 api를 이용한적이 있으셨고,
모바일환경에서 공유하기 기능이 되지않았던 경험이 동일하게 있으셨습니다.
모바일환경에서는 카톡 api를 불러오는게 제대로 되지 않기때문에 useEffect로 변화가 있을때마다 해당 함수를 호출해야되는것이었습니다. 코치님 조언을 듣고 바로 혼자 해봤는데 바로 해결이 되었습니다.
저도 많이 연습해서 코치님처럼 잘하는 사람이 되고 싶다는 생각을 많이 했습니다.

예시코드)

<최상위 컴포넌트>
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  <자식컴포넌트>
    useEffect(() => {
    getKaKaotalkInfo();
  }, []);

  const getKaKaotalkInfo = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;

      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
        kakao.init(REACT_APP_KAKAOTALK_KEY);
      }

      kakao.Link.createDefaultButton({
        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
        container: "#kakao-link-btn",
        objectType: "feed",
        content: {
          title: "suyoen playlist",
          description: "이수연의 포트폴리오입니다.",
          imageUrl: "카톡썸네일.png", // i.e. process.env.FETCH_URL + '/logo.png'
          link: {
            mobileWebUrl: "https://glittery-gumdrop-57389e.netlify.app",
            webUrl: "https://glittery-gumdrop-57389e.netlify.app",
          },
        },

        buttons: [
          {
            title: "웹으로 보기",
            link: {
              mobileWebUrl: "https://glittery-gumdrop-57389e.netlify.app",
              webUrl: "https://glittery-gumdrop-57389e.netlify.app",
            },
          },
          {
            title: "앱으로 보기",
            link: {
              mobileWebUrl: "https://glittery-gumdrop-57389e.netlify.app",
              webUrl: "https://glittery-gumdrop-57389e.netlify.app",
            },
          },
        ],
      });
    }
  };

마지막으로는 배포관련 문제였습니다. 앨리스측에서 올려준 깃랩 배포가이드를 보고 바로 배포를 진행하였으나 배포된 웹사이트는 하얀화면이었습니다..따라서 문의를 했으나 앨리스측에서는 직접 내코드를 본것이 아니고 실제로 만나서 배포하는것이 아니기때문에 상황이 악화되었었습니다. 배포로 인하여 시간지연이 될순없기때문에 직접 다른 사이트 (netlify)에서 배포한후 앨리스측에 문의를 했습니다. 결과는 해당 사이트로 사용해도 된다는 허락을 받아 다행이 문제는 해결되었습니다.

코치님께 얻은 리액트 개발자 준비 꿀팁들

첫째
미디어 쿼리 사용시 하나하나씩 적용을 다했었는데 이에대한 해법이 있었습니다.
use mediaquary 라는 커스텀 훅을 이용하면 좀더 빠르게 구현이 가능하다합니다!!
다음 토이프로젝트에는 꼭 사용해볼예정입니다.
둘째
나는 모바일버전 구현할때 이미지와 같은 태그는 window.innerwidth로 조건을 줘서 구현을 했는데
더정확한 방법이 있다고 하셨습니다. 바로 window.navigator.useragent 라는 윈도우 내장객체를 사용하면 현재 사용자가 사용하고 있는 디바이스 정보를 얻어 올수 있다고 합니다.
셋째
커스텀훅을 많이 사용하면 나중에 편하다고 하셨습니다.
https://usehooks-ts.com/react-hook/use-media-query
리팩토링하면서 꼭 써볼예정입니다.
넷째
신 문법은 이전의 문법의 단점을 보완하고 나온것이기 때문에 사용 해봐야 된다는것 이었습니다.
프로젝트를 하면서 데이터 페칭과제 가있었습니다. 이때 axios를 썼는데 then만 계속 사용한것을 보고 가독성이 떨어지기 때문에 asnyc await 문법을 쓰시라했습니다. 코드리뷰전에 꼭 리팩토링해서 리뷰 받을 예정입니다.
다섯째
취업준비는 미리미리하자!!!취업은 최대한 빨리하는것이 좋기때문에 이력서도 미리미리 써 놓으라 하셨습니다.

이상으로 짧은 프로젝트였지만 많은것을 배우는 기회가 되어 너무 좋았습니다. 정말 부트캠프 듣기 너무 잘한것같다 생각한 2주였습니다.