클론코딩 유튜브 사이트 따라 만들기 드림코딩 by 엘리 영상 참고

www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15

 

 

다른 사람들은 길어봐야 3시간 걸렸던 코딩을 나는 7시간은 한 것 같다..

 

밤을 새 버려서 너무 피곤하지만 그만큼 얻어가는 부분이 참 많다.

 

wirefram 구축부터 아직 이해하지 못한 JS를 통한 동적 할당까지..

코딩을 하면 할수록 배울 것이 이곳저곳에서 튀어나온다.

 

코딩 과정을 전부 나열하기에는 효율이 많이 떨어지는 것 같아서

내가 인지한 실수와 발생한 문제를 기록해보려 한다.

 

 

 

바로 html 마크업 시 클래스 지정에 규칙성이 없는 점이다.

 

이로 인해 발생한 문제는 css 코딩 시에 강의 영상의 말미에서 더 이상 참고를 하지 못하게 되는 것이었다.

 

막히는 부분이 있을 때마다 영상을 보면 의미가 맞지 않는 클래스들 때문에 번거롭게 처음부터 내려보며 찾아야 했다.

 

이는 JS를 활용한 동적 할당을 할 때에 너무 헷갈려서 결국 적용하지 못하는 결과를 초래하였다..

 

따라서 다음부터는 wireframe을 작성할 때 클래스에 대한 틀을 어느 정도는 짜 놓아야겠다고 생각했다.

 

 

 

그리고 두 섹션의 화면 분할 과정에서 1:1 비율이 아닌 1:2 비율의 화면 분할이 되어서 엘리님의 코드와 한 줄 한 줄 비교해보며 원인을 찾아보았지만 찾을 수 없었다.

 

그러다가 오늘 우연히 동영상 title 문장을 매우 길게 해 보았더니 1:1 비율로 분할되는 것을 발견하였다.

 

내 코드뿐만 아니라 엘리님이 깃허브에 올리신 코드에도 적용해보았더니 같은 현상을 볼 수 있었다.

 

그런데 문장을 더 길게 하니까 title이 있는 박스의 비율이 더 높아졌다.

 

title 길이가 비율 결정에 관련이 있는 건 알겠지만 어떻게 해결해야 하는지 감은 잡히지 않았다.

 

아마도 이에 대한 방안은 차차 배워나가는 부분인 것 같아서 일단 원인을 찾은 것으로 만족하였다.

 

 

 

일단 이번 클론 코딩은 이렇게 마쳤다.

 

다음 클론 코딩에서는 실수를 보완하고 JS로 동적 할당하는 것을 이해하는 것으로 목표를 잡아본다.

 

아직 왼쪽 박스 비율이 조금 작은 상태

문장을 더 길게 하니 비율이 역전되었다.