[23년 8월] 회고

JIY00N·2023년 9월 9일

8월 국비지원교육 프로그래머스 프론트엔드 데브코스 회고

회고

목록 보기

4/9

8월 회고

데브코스를 시작한 지 벌써 3개월이 되었으며,

새로운 2차 팀원들과 함께 보낸 지 1개월이 지났다.

이 기간에 나는 얼마나 성장했을까?

2차팀 결성

1차 팀과 끝나고, 새롭게 2차 팀에 배정되었다.

팀장이 필요한데 지원자가 없어서 끄투리오 게임을 통해 꼴찌가 팀장을 맡기로 했다.

미니게임에 약한 내가 팀장을 맡게 되었다!

처음에는 걱정과 설렘이 있었지만, 이왕 팀장을 맡은 거 부족하지만, 책임감을 느끼고 열심히 해야겠다고 생각했다.

팀원들과 팀 내 역할과 규칙을 정했고, 지금 진행하고 있는 팀 프로젝트도 잘 마무리하고 싶다!

강의

8월 초에는 Vue 를 배웠다. 처음 접해본 만큼 되게 재밌었다.

다만, 처음 배운 만큼 복습할 기간과 실습해 볼 시간이 부족했던 것 같아서 아쉬웠다.

8월 중순부터는 React를 배웠다.

자주 사용되는 컴포넌트와 훅을 배웠다. 강의는 React + JS + Storybook을 사용했다.

TS를 배웠는데, JS로 공부하긴 아쉽다는 생각이 들었다.

곧 진행할 프로젝트도 TS를 사용하므로 TS 실력도 기를 겸 JS를 TS로 적용하면서 했다.

스토리북 말로만 들어봤지, 실제 사용한 경험은 처음이었다.

컴포넌트 단위로 보면서 상세 설정이 가능한 것이 상당히 실용적이고 편리했다.

이후에도 Redux, Next.js, GraphQL, strapi등 많은 내용을 배웠다.

8월에는 input이 상당히 많아서 좀 힘들었고, 복습할 시간도 없었던 것 같다..ㅠ

온전히 내 것으로 만드는 것에 시간을 좀 더 투자했어야 하는 아쉬움이 남았다.

과제

2차 팀부터는 같은 팀원분들 내의 코드 리뷰는 물론이고 다른 팀과 매칭해서 코드 리뷰를 받는 시스템으로 바뀌었다. 다른 팀과 교류도 할 수 있고, 코드를 더 다양하게 볼 수 있어서 좋은 것 같다.

1. Vue 과제

Vue.js와 영화 검색 API를 활용해 프로젝트를 만드세요

영화 검색 사이트

TS + Vue + Tailwindcss를 이욯해서 영화 검색 사이트를 만들었다.

고민한 점

상세 페이지에서 뒤로가기 하거나 home을 누르면 페이지 이동 버튼이 사라짐
검색된 결과가 없을 때 처리

고쳐할 점

영화 검색 후 상세 페이지 영화를 누르고, Home으로 돌아가거나 뒤로가기를 눌렀을 때, 다음 페이지 버튼을 눌렀을 때, 영화 리스트 정보가 출력되지 않는 현상

리팩토링을 아직 하지 못 했다 ㅠ 언제하지..?

2. React 과제

View 네비게이션 시스템 구현 or 옛 한글 입력기

나는 View 네비게이션 시스템 구현 을 선택해서 구현했다.

React, TypeScript를 이용한 View 네비게이션 컴포넌트를 구현합니다.

자세한 요구사항은 생략..

처음 과제를 구현했을 때는 data를 받는 객체를 만들어서 map을 돌면서 그리는 형식으로 구현했는데, 이렇게 되면 예를 들어, 홈페이지에서 다른 컴포넌트를 그리려면 해당 객체를 사용할 수가 없었다. + prop drilling도 심했었다.

const MainContent = ({ pages, currentPageIndex, goToNextPage }: Props) => {
  return (
    <div>
      {pages.map(
        (page, index) =>
          currentPageIndex === index && (
            <MainContentButton
              key={index}
              goToNextPage={goToNextPage}
              content={page.content}
            />
          )
      )}
    </div>
  );
};