모듈화를 하던 내 모습
없앤다고 버그가 생기겠어
생기더라
-박감자-

개인프로젝트

개인 프로젝트는 어제 완성했지만 깃허브에 올리지는 않아서 급히 올렸더니만 역시나...

작동이 안되는 기능들이 보였다. VSCode로 돌릴때랑 브라우저로 돌릴때랑 조금 다를 수 있다는 건 알고는 있었지만... 예... 뭐... 그렇다고 미리 올리지는 않았습니다. 놀랍게도 이 작자는 J형이다 (P로 바뀐적도 없다)

다시 고친 문제들

처음에만 동작하지 않는 북마크

북마크 보는 기능이 어째서인지 처음에 작동을 하지 않았는데, 알고보니 맨 처음에 페이지를 로드 했을때는 빈 북마크도 지정해주지 않아서 "북마크 보기"를 눌러도 아무 동작을 하지 않았다.

대신 아무 영화나 북마크를 지정했다가 취소하면 버튼이 동작했다. 이는 아마 아무거나 하나 지정한 순간부터 북마크가 생겼다가 빈 북마크로 바뀌었기 때문에 이런 버그가 생긴것 같다.

즉, 처음 내 영화 페이지를 연 사람은 북마크 기능을 처음에 바로 사용할 수 없는 것! (조건이 까다라운 버그라 한참 후에 알았다)

그래서 원래 북마크 보기 기능을 눌렀을때 한 번도 북마크가 지정이 된 적 없던 페이지라면 빈 배열 값을 갖도록 설정하였다.

|| []를 뒤에 붙여주면 앞의 값이 null일 때 다른 참값인 빈 배열을 지정한다. 이 방식은 영화 설명이 제공 되어있지 않을때도 사용하였다.

자료가 제공되지 않는 케이스 처리

설명이 없는 것은 안내 문구로 처리 했지만 영화 포스터는 그럴 수가 없었다. 그래서 생각해 낸 것이 '이미지 없음' 이미지로 대체 하는 것. 구글링해서 찾은 이미지 하나를 /image라는 파일에 저장해주고 API로 불러도 이미지가 없는 경울 대체하였다.

포스터가 없는 영화를 검색해서 보면 아래와 같이 보인다.

영화 설명 혹은 포스터 없을시 처리 완

북마크 기능 모듈화

정리하다 보니 북마크 기능을 따로 모으는 것이 좋을 것 같다는 생각으로 bookmark.js로 변수/함수를 옮기기로 결정.

함수 혹은 변수는 그냥 export 붙여서 옮기고 import 붙여서 불러오면 되는데, 변경이 필요한 변수가 바뀌지 않는 것을 발견했다.

다른 파일에서 let으로 지정한 변수가 있어도 export해서 다른 파일에 부르게되면 constant로 취급된다고 한다.

// bookmark.js
export let bookmarkShown = false;

// ui.js
import { bookmarkShown } from "./bookmark.js"

function loadPage() {
  bookmarkShown = false;	// 여기서 constant cannot be assigned 에러가 뜸
  // 나머지 코드
  // ...
}

구글링 해본 결과 다른 파일의 변수를 클라스의 변수처럼 취급해서 gettter & setter를 만들면 변경과 불러오는게 문제가 없음을 발견해서 아래와 같이 코드를 바꿨다.

// bookmark.js
let bookmarkShown = false;

export function getBookmarkShown() {
  return bookmarkShown;
}

export function setBookmarkShown(value) {
  bookmarkShown = value;
}

// ui.js
function loadPage() {
  setBookmarkShown(false);	// 에러 해결
  // 나머지 코드
  // ...
}

북마크 기능 모듈화 완

추가 info) API 키 보관 방법

이번 과제에는 적용하지 않았지만 원래는 API Key 혹은 다른 중요 정보는 GitHub에 직접 올리는 것이 아닌 로컬에서는 .env 파일에서 관리 업로드 시에는 GitAction 혹은 AWS를 통해 불러오는 것이 일반적이라고 한다

달리기반 실습

• 함수는 전역객체를 this로
• 객체 내부에서 선언된 this는 그 객체가 된다
  • 객체 내부의 함수를 객체 밖에서 참조시 this는 객체가 아니게 됨
  • 브라우저 전역에 this.name이 존재는 한다 undefined가 아닌 ""으로 존재
• call, apply, bind를 사용하여 this를 지정해줄 수 있다
• 생성자를 통해 this를 지정하는 것도 가능
• 콜백 함수의 this.... ㅠㅠㅠㅠ (머리가 아팠다ㅠㅠ)
  
  설명은 못해서 적어놓은 노트로 대체
• var는 블록 스코프를 무시하지 함수 스코프는 무시하지 않는다
  
• 변수(참조)를 찾을 때는 항상 안의 스코프에서부터 상위 스코프로
  
• 같은 이름의 변수도 마찬가지로 안에서부터 상위 스코프 순으로 찾는다
  
• Closure : JS 강의에서 배운 여전히라는 단어가 강렬하게 남아서 간신히 푼 문제. 설명도 이미지에 있으니 설명은 생략
  

마치며...

이제 알고리즘 풀이가 남았다....!!!!! 으악!!