🌱프리온보딩 1st - 플레이키보드

🪴 프로젝트 설명

• 플레이키보드 웹 스토어 페이지를 통해 제품을 소개합니다.
• 서버 API를 활용하여 UI에 정보를 출력합니다.
• 동적 라우팅을 통해 페이지를 구성합니다.
• 웹에서 작동하는 키보드를 구현합니다.

🪴 언어

• JavaScript
• React.js

🪴 라이브러리

• styled-components
• styled-reset
• react-icons
• react-router-dom
• prettier
• axios
• hangul-js
• swiper

🪴 맡은 기능

• [메인페이지]
  API를 활용하여 데이터를 전달받아 화면에 보이도록 구현
  Figma의 시안을 보면서 화면과 동일하게 UI를 구현

🪴 주요기능 및 설명

✅ 카테고리별 키보드 테마 표시 구현

✅ 키보드 테마 클릭시 해당 키보드 상세페이지로 이동

✅ 반응형 메인페이지

🪴팀 프로젝트 후기

👀 기록하고 싶은 코드

    if (!end) {
      (async () => {
        setLoading(true);
        let url = '';
        if (type === 'NEW') {
          url = 'https://api.plkey.app/theme?category';
        } else {
          url = `https://api.plkey.app/theme?category=${type}`;
        }
        const {
          data: { data },
        } = await axios(url);
        const sliced = data.slice(page * 8, (page + 1) * 8);
        if (sliced.length < 8) setEnd(true);
        setDataList([...dataList, ...sliced]);
        setLoading(false);
      })();
    }
  }, [page]);

평소 쓰는 방식과 다른 axios 문을 async await 를 활용하여 작성하는 방법에 대해 알게 되었다. 식을 쓸때 한가지로만 써야한다는 고정관념을 버리고 다양한 방식이 있으면 이를 활용하는 방식을 배워서 자주 활용하도록 해야겠다

🙄 느낀점

어려웠던 점

• Api 명세
  API 명세서를 받아서 직접 구현해보는 경험을 해보았다.처음에는 명시된 url와 세부페이지이의 명세가 달라서 혼돈을 많이 되었다. 하지만 하나하나 url과 명세서를 확인하며 그뒤에 받을 정보를 직접 구분하며 작성해보면서 api의 어려움을 극복해나간것 같다

• Figma 프로그램
  figma라는 프로그램을 활용하여 표시된 디자인 시안과 동일하게 UI를 구현하는 것이 첫번째 과제 수행였다. 처음 사용해보는 프로그램이고 화면에 명시된 아이콘을 다운로드 받는 방법에 대해 알지 못하여 화면과 비슷한 그림을 다른 사이트에서 참고하여 아이콘을 다운로드 받아 구현을 하였다. 스탠딩 미팅에서 피드백을 통해 Figma의 아이콘을 다운로드 방법을 알게 되어 동일한 아이콘을 구현 할 수 있었다.

총평

• 이번 기업과제는 저번 팀프로젝트와 다르게 기간도 많이 축소된 3일정도의 기간이였고 더 작은 단위를 구현하는 과제였음에도 팀프로젝트에서 사용하지 못한 다양한 라이브러리의 사용과 기업에서 실질적으로 사용되는 것을 활용하여 ui를 구현하는 것이 새로웠다.
• 프로젝트를 하면서 매번 느끼지만 개발자는 끊임없이 자기 발전을 위해 노력을 해야 한다는 점을 느끼게 된다. 이번에 새롭게 배운 async와 await를 활용하여 axios를 활용하는 사례를 보면서 비동기처리방식에대해 알게 되었던 것 같다.