TIL#13(서브페이지 제작, script defer , branch 이름 변경)

오늘 한일

• 서브 페이지 제작

메인 페이지.js 에서 서브 페이지에서 사용할 데이터를 localStorage에 저장후 서브페이지 .html로 이동하게 하였다.

서브 페이지.js에서 localStorage의 데이터를 가져온후 movideData에 JSON배열 형식으로 넣어주었다.

메인 페이지에서 받아온 데이터가 서브 페이지에서 정상적으로 출력되었다.

• script defer

위와 같은 방식으로 script를 불러오면 불러온 자리 기준으로 아래의 DOM은 코드를 읽기 전 이므로 아래의 DOM에 대한 정보를 불러올 때 오류가 발생하게 된다.

subPage.js에서 querySelector로 #sunpagecard를 불러왔지만 아직 subpagecard가 있는 DOM을 읽지 전이라 아래의 에러가 발생한다.

subpagecard를 찾을 수 없어서 생긴 에러

이 때 defer를 이용하여 script를 가져오면 DOM을 끝까지 읽고 script가 실행되기 때문에 에러가 발생하지 않는다.

• branch 이름 변경

branch이름 변경 코드 oldname을 new name으로 바꾼다.

바꾼 후에 git push로 원격 저장소(github)에 변경된 정보를 알려줘야 하고 다른 팀원들이 변경했을 경우에는 fetch나 pull을 하여 로컬 저장소에 원격 저장소(gitbub)의 변경된 정보를 가져와야한다.

어려웠던 점

• defer를 안했을 때 생긴 문제는 html 파일에서 <script>태그를 이용해 script파일을 가져왔을 때 어떤 순서대로 작동이 되는지 몰라 생긴 문제였다. (defer 외에도 async, charset 등 HTML <script>태그를 더 찾아보고 공부해야겠다.)
• branch이름을 변경하고 그냥 사용하면 되는줄 알았는데 변경 후 로컬 저장소와 원격 저장소(github)를 동기화 해주어야하는 것을 몰랐다.(로컬 저장소와 원격 저장소의 통신에 대해 더 자세히 알게 된 것 같다.)

오늘의 TIP

• localStorage는 일반적으로 5MB~10MB의 용량을 가지고 있다(많은 양의 데이터를 사용할 때는 데이터 관리를 해주어야한다.)

• ex) 위의 영화 상세페이지를 들어갈 때 마다 그 영화의 데이터가 중복 저장되므로 그 데이터를 지워주거나 같은 데이터가 있으면 저장을 하지 않게 하는 방법을 사용하는 것이 좋다

localStorage의 모든 데이터를 삭제하는 코드

• git pull과 git fetch는 변경 내용을 가져오는 것은 같지만 git fetch는 가져오기만 하고 git pull은 변경 내용을 가져온 후 로컬 저장소와 병합한다는 차이점이 있다.