코딩연습장

이번 프로젝트는 팀원들의 개인 프로젝트 중 하나를 골라 업그레이드 하는 것이 목표이다.이번 mvp는 아래와 같다. 메인페이지무한스크롤로 pagenum에 따라 api 요청하기검색기능과 정렬필터 제작하기 디테일페이지영화 카드를 누르면 상세 페이지로 이동하여 내용을 보여주는것리뷰를 로컬스토리지를 활용하여 작성 및 조회하는 것 4가지 조건 중 영화카드를 상세 페이지에서 보여주는 것을 내 역할로 잡았다.위 사진의 위에 부분을 진행하는 것이다.어려운 부분이 없어 금방 끝낼 것이라고 생각하여 api에서 제공해주는 유튜브 링크로위 디테일 카드에 마우스 오버를 하면 유튜브영상이 재생되는 것을 더해볼 생각이다. 현재까지 작업상황은 위와 같다.영화 id에 따라서 해당 영화의 디테일내용을 받아오는 api를 사용했으며, 아직 ..

한 html에서 5명이 작업을 하다보니, 아래와 같이 script와 style태그가 엄청나게 길어졌다.  그래서 내가 작성한 style과 script들을 모듈화 시켜 분리작성해볼 생각이었다.한 html파일내에서 다양한 기능과 다양한 view들이 작업되다보니 git관련 문제들도 많았고, 코드가 길어져 가독성이 떨어지므로 가능한 최소단위의 기능별로 모듈화시키기로 결정했다. 먼저 쉬운 style분리부터 진행하였다. 모달관련 style태그를 modal.css라는 파일을 생성하여 그곳에 몰아놓고,  index.html의 head에서 아래와 같이 해당 파일을 css로 불러왔다.다행히 오류없이 정상작동하였다. 다음으로 script를 모듈화 시키는 것이었다. html파일에서 script를 모듈화 시켜본 적이 없어 예시..

먼저, 이전에 설명했던 메인축 방향의 정렬은 "justify" 수직축(교차축)방향의 정렬은 "align"임을 기억하자.justify-contentjustify-content에는 flex-start(기본값) / flex-end / center / space-betweeen / space-around / space-evenly가 있다. 가나다라 마바사아 자차카 타파하 flex-start는 기본으로 설정된 값으로 row일 때는 왼쪽, column일 때는 위를 시작점으로 정렬한다.flex-end는 끝점으로 정렬한다. row일 때는 오른쪽, column일 때는 아래가 기준이다.center는 가운데로 내용물을 정리한다.space-between은 ..