#TIL(Today I Learned)_23.10.27

# 오늘 한 일

1) 팀과제 진행하기_상세페이지 css  △
=> 작업 진행 중_리뷰 페이지 우측에서 밑으로 내리고 정보 페이지 수정 예정 
2) 과제 진행시 발생한 이슈 공유하고 해결해보기  O
=> API토큰 및 깃 허브 자료 충돌 문제 발생 
3) 기초 강의 듣기  △
=> 제어문 진행 중...
3) 어제 풀었던 알고리즘 다시 풀어보고 내용 정리하기  O
=> Programmers_정렬_K번째 수 AIL작성 및 복습
+++
4) 오전에 팀원분께 git 강의 및 프로젝트 전반적인 흐름 설명해주기  O
=> 늦게 합류하신 팀원을 위해! 
5) 오후 javascript 보충반 강의 수강하기  O

<아직 작업중이 영화 상세페이지>

---

# 오늘의 느낀 점

// 안될 거라 생각했는데 막상 해보니까 된다???

팀 과제를 진행하면서 구현이 안 될 것만 같았던 것들이 퍼즐 맞춰지듯이 구현되는 것을 보면 매우 신기하다. 아직 구현의 퀄리티는 초보티가 팍팍 많이 나지만 생각한 느낌을 낼 수 있다는 것이 너무 새롭고 구현해보고 싶은 게 점점 많아진다. 팀 과제 진행 초반까지만 하더라도 완전 노 베이스 팀이라서 걱정이 많았지만 모두가 으쌰으샤 다 같이 힘내줘서 조금씩 구현해 낼 수 있었던 것 같다. 부족한 팀장이지만 잘 맞춰서 도와주는 팀원들에게 감사할 따름이다. 다음 주 팀 과제 제출 전까지 부지런히 힘내서 완성해 봐야겠다.

// 코드 리뷰를 통해 배우는 것이 많았다.

과제 도중 다른 팀들은 어떻게 진행하는지 궁금해서 게더타운에서 여기저기 영탐을 하다가 전 able 팀장님을 만났고, 장난스럽게 웃으면서 던졌던 코드 리뷰 부탁했는데 흔쾌히 들어주셨다. 15/시에 전 팀장님이 직접 오셔서 코드 리뷰를 시작했는데 정말 배울 수 있었던 것이 많았다. 코드 리뷰도 처음이지만 내가 가져온 코드에 대한 이해가 잘 정리되었지 않았기 때문에 많이 버벅 거렸지만 몰랐던 것을 많이 알게 된 중요한 시간이었던 것 같다. 예를 들면 API KEY를 URL 쪽이 아닌 따로 분류해서 안전하게 코드를 짜야 하는지? 혹은 기존 변수를 사용하는 코드에서 문자열 표시+대신 템플릿 `${}`을 사용하는 이유는 무엇인지? 등등 재밌는 시간이었다. 기회가 된다면 팀원들과 자율적으로 자기가 짠 코드를 하루를 마무리하면서 같이 정리해 보는 시간을 가져봐야겠다.  

// 아직 배울 것이 많지만 조금씩 코드가 보이기 시작했다.

2주 전만 하더라도 이해가 안 가면 안 가는 대로 설명을 듣고 혼자 찾아보다가 포기하고 좌절했지만 지금은 모르는 게 있으면 주변에 잘하는 사람을 찾아가서 열심히 괴롭힌다. 어느 한 튜터님한테는 깃의 늪에 빠져서 같은 문제로 4번은 찾아간 것 같다. 확실히 혼자 해결하려고 머리를 쥐어짜는 것보다 혼자서 방법을 찾아보고 안되면 안되는 대로 받아들이고 조언을 구하는 방법이 가장 효율적이고 정신건강에 이로운 것 같다. 이렇게 조언을 받거나 해결한 문제는 잘 기록했다가 다시 복습해서 내 걸로 잘 만들어야겠다. 

 

##오늘의 꿀팁

1) Params 함수를 사용하면 API를 가져올 수 있다.

// 예시
// URL에서 movieId 가져오기
const urlParams = new URLSearchParams(window.location.search);
const movieId = urlParams.get('id');
console.log(movieId);
// API에서 영화 데이터 가져오기
const options = {
  method: 'GET',
  headers: {
    Authorization:
      'Bearer ~~~~~~',
  },
};
fetch(`https://api.themoviedb.org/3/movie/${movieId}?language=ko-KR`, options)
  .then((response) => {
    return response.json();
  })
  .then((movie) => {~~~~~~
  }

 

2) 미디어 쿼리를 사용하면 반응형 창크기 조절에 맞춰 동적인 웹페이지를 구현 할 수 있다. 

// 예시 
/* 미디어 쿼리를 사용하여 초기 창 크기에 대한 스타일 조정 */
@media screen and (max-width: 768px) {
  .movieCard {
    max-width: 90%;
  }

  .movieCard img {
    max-width: 30%;
  }

  .movieInfo {
    text-align: center;
    font-size: 1.5rem;
  }
}

위에는 예시이기 때문에 키워드를 직접 검색해서 찾아보는 것을 추천한다. 

---

# 내일 할 일

1) 내일까지 팀과제 최대한 마무리 지어보기

2) 각자 작업한 코드 영역 리뷰해보기 

3) 부족한 부분 메꾸기 

4) 기초 강의 듣기 

5) 만약 과제도 완성했고 시간적 여유가 있다면 팀과제 코드 하나하나 뜯어보고 곱씹기