[241016 TIL] 본캠프 11일차 ('영화 사이트 만들기' 프로젝트 2일차)

 Today 1. Github에 알고리즘 Repository 생성 

GitHub - ParkGana/algorithm-javascript

지금까지는 알고리즘 문제를 풀면 velog에 포스팅을 하는 방식으로 정리를 해왔었다. 그러다 알고리즘 특강 시간에 Github Repository로 관리하는 방법을 듣게 되면서 블로그 포스팅보다 관리하기도, 나중에 다시 찾아보기도 훨씬 수월하겠다는 생각과 함께 왜 이 방법을 생각하지 못했을까? 싶었다. 알게 된 김에 바로 실천으로 옮기자는 생각으로 Github Repository를 생성하고 특강 시간에 숙제로 나왔던 문제들부터 우선 commit을 하게 되었다. 앞으로 꾸준히 문제를 풀어서 commit을 할 것이고 나중에 이 Repository가 나에게 큰 자산이 될 것이라고 믿는다.

---

 Today 2. [영화 사이트 만들기] 프로젝트 

• Github에 Repository 생성
• 디자인 및 퍼블리싱

메인 페이지

 

상세 정보 Modal 창

 

• 시행착오
  • 처음에는 modal 창의 height을 단순히 90vh로 설정 (고정 height)
  • modal 창 안의 내용이 90vh보다 짧은 경우, modal 창 하단에 빈 공간 발생 
• 보완 1
  
  • modal 창에서 height이 아니라 max-height을 90vh로 설정 (유동 height)
  • 시행착오에서 발생한 문제 해결
  • modal 창 안의 내용이 90vh보다 긴 경우, 스크롤이 동작하지 않지 않고 modal 창 하단의 padding을 밀고 내려가는 현상 발생
• 보완 2
  • modal 창의 overflow 속성을 scroll로 변경하고, modal 창 내부 영역의 height 값에 modal 창의 padding 값 반영
  • 보완 1에서 발생한 문제 해결

/* CSS 코드 */

.modal-container {
    /* height: 90vh; */
    /* overflow: hidden; */
    max-height: 90vh;
    overflow: scroll;
}

.modal-contents {
    /* height: 100%; */
    max-height: calc(90vh - 60px);
}

 

사람들마다 다르겠지만 나는 보통 웹페이지를 개발하면 하드코딩으로 퍼블리싱부터 완료한 다음에 기능 구현을 시작하는 편이기 때문에 오늘은 일단 페이지 디자인 및 퍼블리싱부터 진행하게 되었다. 디자인 감각이 제로에 가까운 편이지만 실무에서 프론트엔드 개발자가 디자인까지 해야할 일은 거의 없을 것이기 때문에 최대한 깔끔하게 구성하는 것에 집중했다. 또한 코딩을 진행하면서 다른 사람들은 어떻게 UI를 구성했는지, 어떤 흐름에 따라 개발을 진행하는지에 대한 궁금증이 생기는 시간이었다.

---

 Today 3. [달리기반] 이론 수업 2회차  

• 참조형 타입
  
  • 값을 직접 가지지 않고 해당 값이 저장된 메모리 주소를 가리킴
• 얕은 복사
  • 복사본의 속성이 원본 객체의 속성과 같은 주소값을 공유
• 깊은 복사
  • 배열의 모든 요소를 새로운 배열에 복사하여 원본 배열과 완전히 다른 배열을 참조
• 배열 메서드 - 변경 메서드
  • 원본 배열의 데이터 자체를 변경
  • push() / pop() / shift() / unshift() / splice() / sort()
• 배열 메서드 - 비변경 메서드
  • 원본 배열을 변경하지 않고 새로운 배열 또는 값을 반환
  • concat() / slice() / join() / includes() / indexOf() / forEach() / map() / filter()
• 객체 메서드
  • 객체의 속성에 접근하거나 객체를 조작
  • keys() / values() / entries() / assign() / freeze() / seal()

솔직히 강의 내용을 바탕으로 이론 및 실습 수업을 진행한다는 얘기를 처음 들었을 때는 강의에서 이미 배운 내용인데 굳이 또 수업을 편성해서 진행할 필요가 있을까 라는 생각을 했었다. 하지만 수업을 들을수록 강의를 들을 때 내가 잘 이해를 하고 습득을 했는지를 확인해볼 수 있는 시간이 되었고, 강의에서 미처 다루지 못했거나 내가 놓쳐버렸던 내용들도 새롭게 배울 수 있어서 많은 도움이 되고 있다는 생각이 들었다.