내일배움캠프 WIL __ 10/23 ~ 10/29

 

 

 

👩🏻‍⚖️  Facts

 

1.  개인과제 제출

• 10.18 ~ 10.23

 

 

2.  팀 과제 진행 _ 영화 정보 사이트 추가기능 구현

• 10.24 ~ 10.30
• 순수 바닐라 자바스크립트 사용하기
• 벨리데이션 체크하기
• 장르별, 인기순, 평점순 데이터 보여주기
• 모든 페이지 더보기, 검색기능
• 상세페이지 로컬스토리지 이용 데이터 CRUD

 

 

 

---

 

 

😳  Feelings

 

1.  개인과제 제출

 

모듈화를 진행하니 확실히 코드가 깔끔해 졌다.

그렇지만 아직 정확한 동작 원리에 대해 잘 모르고 있는 것 같다.

공부의 필요성을 많이 느낀다.ㅠㅠ

 

 

 

2. 팀 과제

 

팀원들 중 한명의 작업물을 가지고 추가 기능구현을 진행하자고 결론이 나왔다.

5명중, 나의 작업물을 가지고 진행하게 되었는데, 구현하고자 했던 부분은 이랬다.

• 메인페이지 카드 슬라이드 기능으로 장르별, 인기순별, 별점순 영화데이터 보여주기
• 더보기 누르면 리스트 페이지로 이동
• 리스트 페이지에서 더보기 누르면 데이터 더 보여주기
• 상세페이지 영화데이터 영상 및 상세정보 가져와서 보여주기
• 탭을 눌러서 localStorage에 리뷰 CRUD 기능 구현
• 로고 작업 및 사운드 삽입
• 코드 리펙토링 및 모듈화 진행

 

예상했던 것보다 작업속도가 느리게 나왔다.

 

일단 내가 모듈화 한 코드를 제대로 건들 수 가 없었다.

살짝만 건들게 되면 에러 폭탄이 나와서 도대체 왜 이러는 건지 찾는데 정말 힘들었다.

 

메인 페이지에서 api 를 이용해 데이터만 더 가져오는 거라고 생각해서 금방 끝날것이라고 생각했다.

그렇지만 큰 오산이였다.

 

모듈화된 코드를 나는 만져본 적이 없었기에, 모듈화에 대한 깊은 이해 없이는 쉽지 않은 작업이였고,

에러를 찾는 루트도 좀더 길고 복잡했다. 

 

또한 스와이퍼 라는 라이브러리를 처음 사용해 봤는데,

몇시간 동안은 이걸 어떻게 만지고 사용해야 하는지 끙끙대며 애먹었던 것 같다. 

추가로 css까지 말썽이였다..ㅎㅎ

 

로컬스토리지 부분을 이용한 데이터 crud 기능은 내 파트가 아니였지만, 작업이 완료되지 않아 함께 하게 되었다. 

로컬 스토리지의 데이터 입력, 수정, 출력은

파이어베이스를 이용해서 게시판 crud 기능을 만들어본 경험과 유사했다.

그래서 어렵지 않았다. 

 

 

 

 

 

---

 

 

 

👀   Findings

 

api를 여러개를 가져와서 사용하다 보니, 구분값이 필요했다. 

그래서 Object.assign() 을 이용해 새로운 키 벨류를 넣어주었더니 아주 원활하게 진행되었다.

 

스와이퍼 사용에 관한 부분도

공식 홈페이지에 따라서 주어진 코드를 가져오면 바로 될줄 알았는데, 

쉽지 않았다. 

스와이프에서 지정한 것들이 뭐가 뭔지 하나도 모르기 때문이 오히려 어려웠다.

그래도 다행이 찾아보니 어떻게 입력해야 될지 나와서 적용해보니 되었다.

 

 

// 메인화면의 슬라이드 기능 구현
let swipers = new Swiper(".mySwiper", {
  direction: "horizontal", // 가로 슬라이드 설정

  slidesPerView: 5, // 동시에 보여줄 슬라이드 갯수
  spaceBetween: 1, // 슬라이드간 간격
  slidesPerGroup: 5, // 그룹으로 묶을 수

  // 그룹수가 맞지 않을 경우 빈칸으로 메우기
  loopFillGroupWithBlank: true,

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

 

 

 

---

 

 

🔮  Future 

 

 

내일 드디어 제출인데 잘 마감하고 제출하면 좋겠다.

화요일 부터는 진짜 Node.js 강의를 시작한다.

그때 부터는 이론강의를 계속 듣지 않을 까 싶다.