[24.07.25] 개인프로젝트 구현 시작

원래는 지급된 강의를 다 수강하고 프로젝트를 시작하려했는데.. 예상치못하게 5주차 강의로 넘어가기 전에 제출해야하는 숙제용 api가 서비스 종료되어 강제로 강의수강이 멈췄다 ㅋㅋㅋㅋ 사실 강의가 뒷부분으로 갈수록 내용이 생소해서 이러다가 프로젝트 시간이 너무 부족할수도 있겠다 싶었는데 이렇게 된김에 프로젝트를 우선 시작하고 과제가 다시 가능해지면 강의와 프로젝트를 병행하기로 했다. 시간관리 최대한 효율적으로 해보자고 지난번에 생각했으니까! 역시 의식의 저편으로 날려버리기전에 어딘가에 적어두고 선언해두는게 좋은 것 같다..

 

prettier 설정

이번엔 혼자하는 프로젝트지만 저번 팀프로젝트에서 모두가 설정 방법을 헤매고 결국 적용하지 않은채로 진행을해서.. 다음 팀프로젝트 들어가기 전까지 깃으로 prettier 설정하는 법을 익혀두고싶었다. 하지만 또 prettierrc에 설정한 것과 다른 결과가 나와.. 한참을 헤매다 기본 포맷터가 각 언어의 기본 포맷터로 지정되어있다는 걸 알게돼서 기본 포맷터 설정을 변경해줬다. 

 

api 정보 불러오기

어제 밤에 정리해본대로 html 구조를 대강 잡아본 뒤 api 정보가 잘 받아와지는지 확인하기위해 다른 변수에 저장하고 그 변수를 출력해보았다. 하지만 콘솔에는 쓸쓸한 undefined만이 남아있었다.. 분명 fetch 내부에서 출력했을 땐 잘 됐고 자료구조가 다른 것도 아닌데 왜 출력이 안되는걸까? 두 지점에서 출력할 때의 차이점을 고민해보았고, 출력이 됐을 때는 fetch().then()내부, 즉 앞에서 선행되어야 할 동작들이 진행되는 것이 보장된 후였고 내가 출력하려 한 곳은 그것이 보장되지 않는/fetch와 병렬적으로 진행되고 있는 곳이었기에 아직 자료를 담고자한 변수가 초기화되지 않은 것이었다. 실제로 setTimeout을 이용해 1초 후에 출력해보니 생각한대로 데이터가 잘 받아와졌다. 어제 실수했으면서 나는 또.. 비동기적 동작에서 동기적 흐름을 기대한 것이다 ㅋㅋㅋㅋ 비동기 -> 동기적 흐름을 원하는 경우 promise, generator, async/await 잘 활용하기! 잊지말자

 

경로 오류

Failed to load resource: the server responded with a status of 404

위와 같은 오류가 떴다 구글링해보니 js 파일 경로를 이동하고 코드상에서 수정해주지 않았을 때 발생한다고하는데.. 문제가 없어서 다시 한번 지웠다가 써보니 제대로 문제가 사라졌다 뭐지..?!

 

 

function setMovieInfo() {
  // Top10 영화 카드 추가
  const movies = document.getElementsByClassName('movies');
  let testCard = document.createElement('div');
  testCard.className = 'movieCard';
  movies.appendChild(testCard);
}

getElementsByClassName의 경우 여러개의 요소를 받아올 수 있으므로 HTMLCollection을 반환한다. 따라서 위처럼 사용하는 것이 아니라 인덱스를 붙여줘야 하는 것!

 

function setMovieInfo() {
  // Top10 영화 카드 추가
  const movies = document.getElementsByClassName('movies')[0];
  let testCard = document.createElement('div');
  testCard.className = 'movieCard';
  movies.appendChild(testCard);
}

이렇게 하면 된다..

 

DOM 참조 오류 (null)

사실 저 돔 요소를 가져오는 걸 자주 사용할 것 같아 상단에서 한번만 수행하고싶었는데 계속 document가 존재하지 않는다는 오류가 떴다 찾아보니 페이지가 준비되기 전에 스크립트에서 먼저 dom에 접근하려하는 경우일 수 있다고하여 body 태그의 가장 아래쪽에 스크립트를 연동해주었다.

-> 근데 그냥 이렇게 해줘도 되나??

-> [24.07.26] type="module" 로 연결하는 경우 html 문서를 모두 그려준 후 실행하므로 이것때문은 아닐 것 같음 (이 때 다른 스크립트들 없이 했던거라 module이 아니었을수도..??? 다음부터는 조금 더 구체적인 상황을 기록해둬야겠다)

 

API 키 숨기기

지난 파이어베이스를 활용한 실습에서 인증키를 그대로 배포했었다 ㅋㅋㅋ ㅠㅠ 나중에보니 온갖 이상한 이메일들이 잔뜩 등록돼있었는데 나중에 리액트 과정에 들어가면 배우게될거라 하셨지만 조금 찝찝하긴해서 라이브러리를 사용하지 않고 숨길 방법을 찾아보았다 나중에 배포과정에서 한번 더 처리할 것이 있는 것 같지만.. 그건 그 때 직접 해보는게 좋을 것 같고 우선은 깃허브에 public으로 올라가는 것을 방지하기 위해 .gitignore에 포함시켜 깃으로 관리하지 않을 파일을 생성 -> 키를 그 파일에 저장 -> 키를 사용해야하는 곳에서 임포트 해서 사용한다!

 

 

JS 동적으로 background-image 추가하기

tmpCard.style.backgroundImage = `url(${posterImage})`;

DOM요소의 style에 접근해 지정해준다!

 

 

많은 일이 있었다...🥹 하지만 남은 건 별로 없는 기분.. 그래도 이렇게 쭉 기록해놓지도 않았다면 더 허무했을 것 같다.. 역시 직접 해보는게 제일 모르는 부분 채우기 좋은 방법같다. 그 과정이라고 생각하고.. 화이팅하자!