기존의 영화소개 페이지에서 상세페이지 기능을 더하는 두번째 팀프로젝트가 끝났다. 코드리뷰를 통해 우리가 구현한 코드의 의도를 다시 떠올리고, 보완해야할 점들도 피드백 받을 수 있었다. 1. 기초적이지만 자주 놓치는 HTML 마크업의 구성(SEO & Semantic한 구조설계) 2. HTML파싱 타이밍을 고려한 script태그의 위치와 속성(defer) 3. 코딩컨벤션의 통일(파일구조, 변수명, 모듈화) 4. 크로스브라우징 이슈를 해결하기 위한 reset.css 5. git과 github의 적절한 활용으로 협업의 효율성 증가(clone, pull, push, commit , branch)

자바스크립트의 동기적 작동 방식에 대해 여러번 학습했지만 꾸준하게 헷갈렸다. Promise와 async await을 사용했었지만 그 원리에 대해 자세히 알지 못했다. 그래서 이번에 이 파트에 대해서 정말 꼼꼼하게 여러번 학습했다. 그러던 중 의아한 게 있었다. await은 promise에 사용해야한다. fetch함수는 promise를 반환하는 함수라 await을 사용한 걸 알겠지만 movieResponse.json()또한 await을 쓰지 않으면 오류가 발생했다. 처음엔 단순히 변수의 선언 할당 과정에서 위의 fetch데이터가 들어오지 않아서 발생하는 오류라고 생각했지만 다른 함수에선 fetch를 받아오는 함수에만 await을 사용해도 오류가 나지 않았다. 알고보니 .json()함수도 promise를 반..

영화 디테일 페이지에 찜하기 기능을 추가하는 과정에서 데이터 베이스를 사용하지 않으므로 localStorage를 이용하려 했다. 하지만 다른 팀원들이 댓글(리뷰)기능을 위해 localStorage를 사용하며 다른 데이터를 추가할 때 리뷰쪽에서 오류가 발생했다. 원인은 리뷰를 CRUD하는 기능들에서 반복문이 돌며 작동하기 때문이었다. 리뷰쪽 기능이 이미 많이 구현된 상태였기 때문에 다른 방법을 찾아야 했다. 고민하던 중 localStorage말고 sessionStorage를 사용하기로 했다. 데이터는 배열 형태로, url에서 아이디값을 받아와 저장시켰다. 상세 페이지에서 하트를 클릭했을 때 세션스토리지에 추가되고 메인페이지 로드시 영화 데이터를 fetch받아온 함수 내에서 세션스토리지에 저장된 id값에 해..

영화 API를 활용해 영화 목록들을 불러와 보여주고 클릭했을 때 다시 해당 ID의 영화정보를 불러왔다. 추가적으로 버튼을 클릭했을 때 API에 fetch요청으로 비디오의 key값을 받아와 해당 영화의 트레일러 영상을 보여줬는데 클릭이 발생하고 fetch요청을 시도해서 반응이 느리고 재생까지 시간이 오래 걸렸다. 해결한 방법은 영화 상세페이지로 이동시 해당 ID로 Fetch요청을 보내고, 동시에 key값을 받아오는 Fetch요청을 보냈다. 그래서 클릭시 미리 받아놓은 Fetch 데이터로 빠르게 영상을 보여줄 수 있었다. 추가적인 궁금증은 promise를 사용하며 각종 함수를 동기적으로 연산했는데 이런 상황에서 가장 효율적이고 빠른 방법이다. 자료를 찾아보고 실제로 적용해봐야겠다.

https://devdox.tistory.com/154 javascript 실행 컨텍스트, 콜스택, 호이스팅 자바스크립트의 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 한다. 1. 호이스팅( 선언된 변수를 위로 끌어 devdox.tistory.com 오늘은 js 엔진의 구동 방식 실행 컨텍스트와 콜스택 호이스팅에 대해 학습했다. 각 실행 컨텍스트의 LexicalEnvironment의 record에 의해 발생하는 가상개념인 호이스팅 학습중 변수를 선언하는 3가지 방법 중 재선언과 재할당이 가능한 var에 대해서는 이해했지만 찾아보니 var let const의 선언 할당 실행부분의 차이가 존재했다. 기존에 알던대로 var 키워드..

js의 두가지 데이터 타입별 메모리 저장방식을 학습했는데 https://devdox.tistory.com/152 의문이었던건 두 타입(primitive, reference) 모두 값은 메모리의 데이터 영역에 저장된 주소값이 데이터로 저장된다. 값이 변경되어도 기존 데이터가 변경되는 것이 아닌 새로운 주소값으로 갈아끼워지는 것 근데 기본형데이터는 불변하고 참조형데이터는 불변하지 않은 이유였다. 좀 더 자세히 알아보니 불변성의 여부를 나누는 메모리의 영역은 데이터 영역이었다. 기본형 데이터타입과 참조형 데이터타입 모두 변수 영역의 데이터는 새로운 주소 값으로 변경되지만 기본형 데이터타입의 경우 데이터영역의 값들은 변경되는 게 아닌 새로운 값이 입력된다. 기존 데이터 값이 변경되는게 아닌, 새로운 메모리에 새..