클론하기
개발 학습을 하면서 많이들 사용하는 방법중 하나가 클론코딩이다. 해설지가 존재하는 문제이다 보니 답을 도저히 모르는 경우 해답지를 찾아보면서 할 수 있는 방식이기에 처음 언어를 배울때 또는 배운 내용들을 활용하여 페이지를 제작함으로써 언어에 대한 이해를 높일 수 있는 좋은 방법이다
이번에는 과제로 2개의 프로젝트가 나왔다. 하나는 youtube 또는 naver mobile 클론, 또다른 하나는 내가 원하는 페이지 클론하기이다. 양이 많은 것은 사실이지만 지금까지 프론트엔드를 공부하면서 한번쯤은 클론코딩으로 완성시켜보고 싶었던 페이지들이다. 특히 유튜브의 경우, 여러번의 시도가 있었지만 지금까지 헤더부분까지만 완성해보고, 헤더를 완성했다 하더라도 뭔가 부족한점들이 많아서 몇번이고 좌절했던 기억이 많은 애증의 페이지이다.
아무튼 이번에 scss 교육과정이 끝나고, 바닐라js 학습도 어느정도 되어 있어 이번엔 좀더 잘할수 있을것 같은 근자감(?)으로 시작했다. 확실히 다른점이 있다면 이전에는 레이아웃을 잡는 수단으로 flex밖에 몰랐기 때문에 2차원으로 레이아웃을 잡는게 어려웠고 그로 인해 유연한 페이지 구성에 어려움을 겪었는데, 이번엔 grid까지 제대로 배우고 들어가다 보니 생각보다 내가 원하는 방식으로 빠르게 페이지 구성이 가능했다.
작업이 술술 끝난건 사실이지만 그래도 시간은 꽤나 걸렸다. 한개당 거의 이틀 내지 사흘 정도를 온전히 페이지 제작에만 시간을 쏟아 넣었던것 같다. 프로젝트가 끝난지 며칠이 지난 시점에서 다른 팀원들의 코드를 볼 기회가 있었는데 나와 다른점이 있다면 css파일을 1개만 연결했다는 점이다. 나는 컴포넌트 단위로 나눠서 작업한다는 명목으로 다양한 파일들을 연결했는데 이는 굉장히 잘못된 방법이었다. 서버로부터 하나의 파일을 다운 받는 시간이 생각보다 오래걸리기 때문에 하나의 파일의 용량이 좀 크더라도 나누지 않고 한큐에 넣는게 더 맞는 방식이었다.
scss파일을 컴파일 하는 방식으로 css 파일을 만들었기 때문에 1개의 파일만 연결시킬 방법은 충분히 있었다. 그러나 그런것은 신경쓰지 않고, 모든 파일을 컴파일하도록 scss watcher를 돌리다 보니 하나의 파일로 통합시킬 생각은 아예 하질 않았다.
현재는 코드 리뷰기간이다. 리뷰를 하면서 다른 팀원들의 코드를 보며 반성할 점, 배울 점들을 습득할 수 있었다. 아마 갈수록 시간이 더욱 빡빡해져서 내 코드를 리팩토링 할 시간이 얼마나 될지 모르겠지만 다른건 몰라도 유튜브, 네이버 클론 코딩의 경우 여러번 실패한 경험이 있는 애증의 페이지들이기 때문에 무슨일이 있더라고 리팩토링을 해보고 싶다. 추후 시간이 나서 리팩토링을 하게 되면 이후 후기를 남겨야 겠다.
해당 사진은 이번 클론 코딩의 결과물이다
유튜브
네이버
