🌈[프로그래머스] 프론트엔드 데브코스 회고 (3)

🍀과제1. 영화 검색 사이트

⭐ 과제 내용

• 검색어를 입력해 영화를 검색할 수 있어야 한다.

const handleSearch = () => {
  localStorage.setItem("keyword", keyword.value);
    let str = keyword.value.toLowerCase();
  str = str.trim();
  if (keyword.value) store.getAllMovies(str);
};

• 검색된 결과를 통해 영화의 상세 정보를 볼 수 있어야 한다.

<template>
  <main>
    <IsLoading v-if="moviesStore.isLoading" />
    <article class="lg:flex lg:gap-5 lg:justify-between lg:items-center">
      <div
        class="w-full h-64 rounded-md overflow-hidden md:h-80 lg:w-6/12 lg:h-96"
      >
        <img
          :src="moviesStore.movie.Poster"
          class="w-full h-full object-cover"
          :alt="moviesStore.movie.Title"
        />
      </div>
      <div class="my-5 lg:w-5/12 lg:mt-0">
        <p
          class="
            text-gray-400
            font-light
            text-xs
            mt-2
            tracking-wider
            md:text-sm
          "
        >
          {{ moviesStore.movie.Genre }}
        </p>

        <h3
          class="
            my-8
            font-medium
            text-lg text-gray-200
            tracking-wider
            md:text-2xl
          "
        >
          {{ moviesStore.movie.Title }}
        </h3>
        <div
          class="
            flex
            justify-between
            items-center
            flex-wrap
            gap-2
            md:justify-start md:gap-14
          "
        >
          <div class="flex items-center text-gray-400 font-light text-sm">
            <CalendarIcon />

            {{ moviesStore.movie.Released }}
          </div>

          <div class="flex items-center text-gray-400 font-light text-sm">
            <TimeIcon />

            {{ moviesStore.movie.Runtime }}
          </div>

          <div class="flex items-center text-gray-400 font-light text-sm">
            <LocationIcon />

            {{ moviesStore.movie.Country }}
          </div>
        </div>
        <div class="flex items-center text-gray-400 font-light text-sm my-8">
          <StarIcon />

          {{ moviesStore.movie.imdbRating }} -
          {{ moviesStore.movie.imdbVotes }} Votes
        </div>

        <p
          class="
            text-gray-300 text-justify
            tracking-wider
            text-sm
            font-light
            md:tracking-widest
          "
        >
          {{ moviesStore.movie.Plot }}
        </p>
      </div>
    </article>
  </main>
</template>

• api 키를 숨겨야 한다. (실패)

//const API_END_POINT = process.env.VUE_APP_API_END_POINT;
//const API_KEY = process.env.VUE_APP_API_KEY;

⭐ 과제 후기

vue는 처음 접해보는 거라서 많이 낯설었는데 그렇다보니 vue를 제대로 다루지 못한 채 과제를 진행하기에 많이 급급했던 것 같다. 그렇다보니 vue와 친해지기 위한 시간이 더 필요할 것 같다. 이번에는 영화 api를 가지고 제작을 해봤는데 재미있는 api가 많다는 것을 알게 되면서 결과물을 만드는 데에 재미있었다. 이번 기회에 tailwind도 처음 사용해봤는데 class name에 style을 줄 수 있다는 점이 신기했던 것 같다.
한 가지 아쉬웠던 점은 api 키를 숨기는 데 실패한 것인데 이 부분은 좀 더 공부를 해봐야겠다 ㅠㅠ

🍀과제2. 네비게이션 구현

배포링크

⭐ 과제 내용

• url이 바뀌면 안된다.

return (
    <div className='pageContainer'>
      <Header />
      <Image src={src} alt={name} />
      <Text {...CommandText} />
      <Text {...NameText} />
      <Text {...PrizeText} />
      <Button onClick={() => deleteValue()}>
        <Text {...BackButton} />
      </Button>
  	</div>
);
...생략

<div className="appContainer">
  {typeof currentPageId === 'number' && <Page {...historyValue}></Page>}
</div>
...생략  

⭐ 과제 후기

평소 페이지 이동하면 url이 바뀌는 것이라 생각했다. 그에 url이 항상 바뀌어야 한다는 편견이 있었던 것 같다. 하지만 url이 바뀌지 않은 채로도 페이지 이동이 가능했고, 이번에는 그것에 초점을 맞춰 구현했다. 처음 페이지 이동만 보여주는 것은 재미가 없을 것 같아 고민하던 중 원피스 포스터가 생각났고, 재미있을 것 같아 페이지 템플릿을 원피스 포스터로 만들었다. 팀원들의 사진과 현상금, 이름 등을 데이터로 정리한 뒤, 페이지 컴포넌트를 만들어 데이터 값만 바뀌도록 설정했으며, 만약 페이지 구성이 다 달랐다면 컴포넌트 자체를 바뀌도록 설정하면 될 것 같았다. 이 과제 역시 아쉬운 점이 있다면 트랜지션을 구현하지 못했다는 점이다. 좀 더 애니메이션 효과를 넣어 진짜 포스터가 넘어가는 것처럼 했다면 더 좋았을 것 같다란 아쉬움이 있다.

🍀반성 & 목표

⭐ 반성

7월 회고 때 세웠던 목표는 다음과 같았다.

• 과제 등을 수행할 때 바로 코드를 짜지 말고, 먼저 우선순위와 구현순서 및 기능의 목록을 작성해야 겠다.
• 누구든지 코드를 봤을 때 의문점보다는 이해할 수 있도록 쉽게 짜야겠다.
• javascript 확실하게 잡고 가야겠다.

이 리스트에서 달성한 것은 1가지 반 정도 인 것 같다. 먼저 코드를 쉽게 짜는 것인데, 이 부분은 많이 개선되었음을 느꼈다. 코드 리뷰하기 전에 최대한 리팩토링을 하면서 깔끔하게 정리하고자 노력했으며, 변수명이나 파일명 등 네이밍에 신경을 많이 쓰고자 했다. 코드리뷰를 하면서 많이 개선됨을 느꼈고, 우선순위와 구현순서를 먼저 생각한 뒤 코드를 짜는 습관으로 이어지게 되었다. 아직 많이 부족하지만, 점점 먼저 계획을 수립하고 코드를 짜는데 익숙해지고자 노력하는 중이다. 마지막으로 js를 확실하게 잡고 가기로 했는데 이는 지켜지지 못해 많은 아쉬움을 느꼈다. vue와 react에만 집중했던 것 같아 순수 js도 공부하는데 시간을 투자해야 함을 느끼며 반성한다.

⭐ 목표

• Next.js 공부하기
• 프로젝트하면서 리팩토링 많이 하기
• 깃허브와 친해지기(깃허브 이슈 관리 및 프로젝트 관리, merge conflict 등)