[23년 8월] 2주차 회고

2023.08.13

[2차팀과 팀장]

2개월 동안 함께한 1차 팀과 끝나고 새롭게 2차 팀을 배정받았다.
2차팀부터 제대로 된 팀프로젝트가 진행된다. 따라서 팀장이 꼭 필요하다! 지원자가 없는 관계로.. 새로 만난 팀원들과 함께 친해질 겸 아이스브레이킹으로 끄투리오 게임을 진행해서 꼴찌가 팀장 하는 거로 정했다.
유독 미니게임에 약해서 시작부터 걱정이 됐는데.. 역시는 역시였다..ㅋㅋ
내가 팀장을 맡게 된다니.. 걱정반 설렘 반이었다.
그래도 책임감을 느끼고, 최선을 다해서 팀을 이끌어야겠다는 생각이 들었다. 팀장의 역할에 대해 고민해보고 정보들도 찾아봐야겠다.
팀원들과 함께 각자의 역할도 나누고, 팀 규칙도 정했다.
2개월 후에는 우리 팀원들 모두 함께 성장해 있기를! 열심히 하자!

[꼬부기 스터디]

주말에 여행 일정이 잡혀있어서 Vue과제를 평일에 다 끝내려다 보니 이펙티브 타입스크립트 꼬부기 스터디 준비를 많이 못 했었다. 저번 주에 2장 전반부 발표에 뽑혀서 이번 주에는 안 걸릴 거라는 안일한 생각을 했었다ㅠ
3장 발표를 맡게 되었다 ㅎㅎ.. 발표를 마치긴 했지만, 스스로 좀 자책했다.
4장 스터디 발표는 열심히 준비하자..!

[Vue 과제]

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

이번 과제를 하면서 새롭게 알게 된 내용, 겪은 오류, 고민한 점을 정리하자.

[과제 흐름]

추후 추가

[새롭게 알게 된 내용]

1. 코드블럭이 어디서 출력되는지 알자

   브라우저 or 노드

2. 빈 내용 커밋

   git commit --allow-empty -m "커밋 메시지"

3. 서버리스(Serverless)

   관리할 서버(인프라, 백엔드의 특정 기능)가 없다.
   과제에서는 api키를 숨기기 위해 사용

4. 상태관리자, pinia

   Vue.js용 스토어 라이브러리 및 상태 관리 프레임워크
   로 프런트 엔드 웹 애플리케이션 구축을 위해 설계되었으며 선언적 구문을 사용하고 자체 상태 관리 API를 제공

5. v-model.trim 하면 입력 시에 공백을 제거해 준다.

<input
  v-model.trim="mainMovie.title"
  class="w-2/5 px-5 py-3 ..."
  placeholder="영화 제목을 입력해주세요"
  @keydown.enter="searchMovies" />

6. axios.get('/api/movies',{}): /의 유무

   1. 절대 경로
      axios.get('/api/movies',{}):
      이 경우 경로의 시작에 슬래시(/)가 포함.
      요청이 도메인 루트(예: http://example.com)를 기준으로 절대적인 경로로 처리.
      따라서 실제 요청은 http://example.com/api/movies로 전송.
      
      
   2. 상대 경로
      axios.get('api/movies',{}):
      이 경우 슬래시(/)가 없이 시작되는 경로.
      요청이 현재 페이지의 경로를 기준으로 상대적인 경로로 처리
      예를 들어, 현재 페이지 URL이 http://example.com/somepage이면,
      실제 요청은 http://example.com/somepage/api/movies로 전송.

[겪은 오류]

1. Delete cr

[원인]
endOfLine: lf 는 mac이나 linux에서 적용되고, windows에서는 적용이 안된다.

[해결]
windows 사용자는 endOfLine: 'auto' 사용

2. TypeScript 버전 문제

error TS5070: Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.
tsconfig.json:10:25 - error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.
tsconfig.json:11:5 - error TS5023: Unknown compiler option 'allowImportingTsExtensions'

[시도해본 것]

1. 의존성 재설치

2. package.json 내용 추가

"overrides": {
    "@vercel/node": {
      "ts-node": "10.9.1",
      "typescript": "5.1.6"
    }
  }

3. node, npm 버전 확인
   node -v npm -v

4. window reload

[해결]

위 4가지 다 시도해도 해결이 안 돼서, 강사님께 DM을 드렸더니, 원격으로 해결해 주셨다..!

node_modules, package-lock.json, .vercel 폴더에 캐싱된 내용이 포함될 수 있기 때문에, 전부 제거하고 다시 설치를 해서 해결했다.

3. 'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

[해결]
npm i concurrently express --save

4. Cannot find module './App.vue' or its corresponding type declarations

[해결]
TypeScript Vue Plugin (Volar) extensions 설치

5. googlefont에서 가져온 아이콘 크기 변경

[해결]
font-size로 조절

[고민한 점]

1. 상세 페이지에서 뒤로가기 하거나 home을 누르면 페이지 이동 버튼이 사라짐

[기존]

const movePageBtn = ref(false);
async function searchMovies() {
  const { title, year, page } = mainMovie;
  await moviesStore.fetchMovies({
    title,
    year,
    page,
  });
  movePageBtn.value = true;
}
<TheIcon
  v-if="movePageBtn"
  @click="movePrevPag">
  arrow_back_ios
</TheIcon>

[변경]

// moviesStore.movies 배열의 길이가 0이상이면 페이지 이동 버튼 출력
 <TheIcon
   v-if="moviesStore.movies.length"
   @click="movePrevPage">
   arrow_back_ios
</TheIcon>

2. 검색된 결과가 없을 때 처리

const validMoviesInfo = ref(true);

async function searchMovies() {
  const { title, year, page } = mainMovie;
  // 잘못된 검색 결과 후, 올바른 검색 시에
  // Loading... 이 출력 안되는 현상 해결
  validMoviesInfo.value = true;
  await moviesStore.fetchMovies({
    title,
    year,
    page,
  });
  if (!moviesStore.movies) {
    alert('검색된 영화가 없습니다!');
    validMoviesInfo.value = false;
    mainMovie.title = '';
  }
}

<div
  v-if="validMoviesInfo"
  class="flex items-center justify-center w-full py-10 my-5">
  <span
    v-if="moviesStore.isLoading"
    class="mt-4 ml-20 text-3xl font-bold">
    Loading ...
  </span>
...
</div>

[여행]

주말 동안 목포로 여행을 다녀왔다.
워낙 밖에 잘 안 돌아다니고 여행도 잘 안 다니는 성격인데,
다녀오니까 나름대로 힐링도 되고 좋았다.
여행 내내, Vue과제랑 회고 쓸 생각에 좀 푹 못쉰것같은데..
자꾸 신경 쓰여서 가만히 있을 수가 없었다. (지금도 회고쓰는 중..)
다음에 여행 갈 때는 노트북을 진짜 놓고 가야지.
날씨 좋을 때, 가까운 곳으로 여행 또 가고 싶다.

[3주차 계획]

3주 차에 Vue과제 코드 리뷰 받고, 피드백을 바탕으로 과제 리팩토링할 예정이다.
Vue가 끝나고, 3주 차부터는 React를 배우게 된다.
React를 많이 안 써봐서 프로젝트 전까지 강의 열심히 들으면서 직접 많이 사용해 봐야 할 것 같다.
또, 2주 차에는 코딩스터디를 일주일 동안 쉬었는데, 3주 차부터 다시 시작한다.
다시 하루에 한 문제씩 꾸준히 풀어야지.
꼬부기 스터디 준비도 열심히 하자~

지옥같은 2주차 끝!