모멘텀 클론코딩 - 강의 작업물

work [ 27시간 53분 ]

lecutre [ 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders ]

ghpage [ Unchaptered/2021-07-clone-momentum: study "Momentum Clone 2021 Update with Nomad Corder" (github.com) ]

강의후기 [ 모멘텀 클론코딩 - 강의후기 :: Unchaptered의 초보코딩 (tistory.com) ]

강의결과물 [ 모멘텀 클론코딩 - 강의 작업물 :: Unchaptered의 초보코딩 (tistory.com) ]

 

두 번째 HTML, CSS 클론코딩이자

첫 번쨰 Vanilla JS 클론코딩이여서 역시나 여러 에러나 문제점이 발견되었다.

 

첫 번째 강좌였던 [ 코코아톡 클론코딩 - 강의결과물 :: Unchaptered의 초보코딩 (tistory.com) ] 아래의 문제점은 역시나 제대로 해결하지 못하였다. 접은 글에는 전술한 문제점이 들어있다.

• display: flex
  • 너무 좁은 경우 : 오브젝트들이 겹쳐지거나, 글자가 겹쳐지거나, 글자가 두 줄로 변함
  • 너무 넓은 경우 : 오브젝트들이 너무 넓어짐
  • Solution : @media screen and (max-width: ...) 등을 이용하자
  • Porblem of Solution : 미디어 쿼리를 사용할 경우 작업량이 늘어나는 데... 이를 해결할 방법이 필요할 듯 하다.
• bem
  • Block : (상단)네비게이션_바, (하단)주석_바, (중앙)내용부분
  • Elemnt : nav_column, nav_row, nav_img, nav_text 등등
  • Modifier : nav_column-size, nav_row-size, nav_img-size, nav_text-size 등등
  • Problem : bem 을 사용할 경우 id나 class가 지나치게 길어지는 경향이 있음.
  • Solution_1 : bem 을 사용하되 최대한 약어를 사용하도록 하자.
  • Solution_2 : 단일 css 요소를 추가하거나 제거하는 경우에는 bem을 사용하지 말자.
• github
  • ghpage : 뭔가 잘못 건드려서 파일이 날아가거나 에러가 발생하는 경우가 있다.
  • Soluton : 정해진 방법으로만 github 를 사용하자.. 에러가 나면 구글링을 하는 수밖에 없다.

해당 강의에서는 실제 클론코딩하는 부분까지는 다루지 않았기에 나는 개별적으로 클론코딩을 진행하였다.

그리고 내 수준에서 추가할 수 있는 기능 중에 뭐가 있을까 하던 중 아래의 기능을 추가하였다.

• To do List 완료시 중간에 선긋기 기능
• To do List 오른쪽으로 넣고 꺼내기 기능
• User-name 오기입 시 이를 초기화하는 기능

이 중 제대로 구현하지 못해서 아쉬운 부분들이 있었다.

• To do List 완료시 중간에 선긋는 기능을 추가하기는 했지만 글자에만 선을 긋는 방법을 찾지 못하였다.
  • ⭕ button 을 클릭했을 때 어떻게 그 옆에 있는 글자를 찾아낼 수 있는지를 알지 못하겠다.
  • 이는 앞으로 공부하면서 깨닫게 될 것이라고 생각하고 일단 넘어가기로 하였다.
• To do List 오른쪽으로 넣고 꺼내기 기능 중, 꺼내기 기능과 애니메이션 리버스 방법을 찾지 못하였다.
  • close 를 누르면 오른쪽으로 슬라이드해서 들어가는 기능을 넣었다
  • 이 또한 앞으로 강의를 들으면서 배울 것이라고 생각하고 넘어가기로 결정하였다.

스스로 생각하고 배우는 과정은 언제나 가장 정확한 방법이겠지만 또한 비효율적이기도 한 방법이라고 생각하고 있다. 무언가 처음 배우는 사람에게 가장 빠른 성장의 길은 모방이라고 생각하고 있기에, 이를 일단 넘어가기로 결정하였다.

 

지금까지 직면한 문제점들을 다음 강의 혹은 개인 클론코딩에서 해결하여 더욱 멋진 사이트를 만들기를 고대하며...

 

012

모멘텀 클론코딩