클론코딩은 뭐고 공부 어떻게할까?

다양한 클론 코딩 강좌들

웹 개발 관련 다양한 강의들이 있지만 가장 매력적인 강의는 누가 뭐래도 클론 코딩 강의가 아닐까싶다. 내가 즐겨 쓰는 서비스를 내 손으로 만들어 볼 수 있다는 점은 강의에 대한 흥미를 돋우기 충분하다. 하지만 그 흥미에 비해 결과물인 클론 코딩을 제대로 활용하는 사람은 많지 않은 것 같다. 나름 클론 코딩 강의도 많이 듣고, 시행착오도 많이 겪으면서 결국에는 많은 도움이 되었던 경험을 바탕으로 글을 써보고자 한다.

🤷‍♂️ 클론 코딩이란?

말 그대로 클론하는 코딩으로, 주로 웹 개발에서 쓰이는 용어이며 인스타그램, 카카오톡, 에어비앤비, 유튜브, 넷플릭스 등 우리가 자주 사용하는 서비스나 웹사이트를 밑바닥부터 만들어가는 강의를 의미한다. 이후 이야기하는 클론 코딩은 클론 코딩 강의를 의미한다.

노마드 코더 클론 코딩 설명

👍 클론 코딩의 장점

위에 언급한 것처럼 가장 큰 장점은 흥미도이다. 내가 자주 사용했던 서비스들이 어떠한 방식으로 작동되는 지 알고, 이것을 만들어 볼 수 있다는 것은 흥미를 이끌기에 충분하다. 인스타그램을 자주 사용하는 개발자가 어떤 식으로 휴대폰의 카메라에 접근하고, 이미지를 업로드하고 이 사진을 포스팅에 올리는 과정을 하나하나 밟아간다고 생각하면 얼마나 흥미로운가? 내가 좋아하는 서비스도 만들고 그 과정에서 코딩도 배우고 이 강의를 마치고 결과물만 나오면 포트폴리오용 결과물도 얻고, 코딩 실력도 비약적으로 상승할 것 같다.

내가 인스타그램을 만든다고?

😫 당신의 클론 코딩은 왜 실패하는가?

당신은 클론 코딩 강의를 끝까지 수강했다. 결과물도 나왔고, 잘 작동한다. 그런데 코딩 실력이 늘어난 것 같지는 않다. 결과물이라는 겉은화려한데 알맹이는 비어있는 꼴이다. 왜일까? 여러 이유가 있겠지만, 대부분 다음의 항목에 해당될 것이다. 클론 코딩이 실패하는 이유를 몇 가지 뽑아봤다. 클론 코딩을 해본 독자가 있다면 한 번 체크를 해보자.

• 강의를 들으면서 별다른 고민없이 그냥 강의자의 코드를 따라쳤다.
• 강의자의 Github에 올라온 코드를 복사했다.
• 강의를 한 번만 들었다.
• 모르는 내용에 대해 질문하지 않았다.
• 강의를 들으면서 배운 내용을 문서화하지 않았다.
• 결과물이 강의자의 결과물과 100% 일치한다.
• 강의를 끝내고 결과물 코드를 다시 보지 않았다.

 

👨‍🏫 클론 코딩 제대로 활용해보자

왜 실패하는 지 알았으니, 이제 클론 코딩을 제대로 활용할 방법에 대해 알아보자.

🐙 Github에 올리자

클론 코딩을 본인 로컬에서만 작업하고 있다면 바로 당신의 클론 코딩 프로젝트를 Github에 올려보자. 강의를 들으면서 코드를 추가하고, 매 강의마다 커밋을 하자. Github에 프로젝트를 올리는 것의 장점은 매우 많다. 우선, Github에 올리면 웹 상에 본인의 작업물이 공개되는 것이기 때문에 README도 열심히 꾸미고, 커밋도 꾸준히 하게 된다. 즉, 억지로라도 열심히 공부하게 된다는 것이다. 부가적으로 열심히 공부하고 커밋하다보면 내 Github의 풀밭도 짙어질 것이다. 강의자도 강의 마다 커밋을 하기 때문에 혹시 에러가 나는 경우 강의자의 코드와 바로 비교하기 쉽다. 그리고 가장 큰 장점이 있는데, Github에 클론 코딩 프로젝트를 올리 때마다 하나의 참고용 프로젝트가 늘어나게 된다는 것이다. 다른 프로젝트를 진행하면서 클론 코딩 때 사용했던 방식을 떠올리며 클론 코딩 프로젝트의 코드를 참고해보자. 이런 프로젝트들이 한 두개씩 늘어나면,문제가 생겼을 때 참고용 프로젝트를 통해 빠르게 문제를 해결할 수 있게 된다.

리액트훅 강의를 듣고 정리한 Github 리포지토리

🤔 항상 생각하며 코딩하자

강의를 들으면서 추가적 의문 혹은 잘 이해가 가지 않는 부분들이 있을 것이다. 클론 코딩의 장점이자 코드가 올라와있기 때문에 해당 코드를 보고 잘못된 부분을 수정할 수 있다는 점이고, 단점은 그 코드를 당장 이해가 안 돼도 일단 코드를 복사해서 다음 강의로 넘어갈 수 있다는 점이다. 이러한 의문들을 계속 미루다보면 당신의 코딩실력은 늘지 않을 것이다. 의문이 생기는 부분에 대해 구글링을 통해 먼저 조사하고, 그래도 이해가 가지 않는다면 강의자나 커뮤니티에 의문이 생기는 부분에 대해 질문하자. 내가 어떤 것을 모르는 지 아는 것부터가 배움의 시작이다.

♻️ 반복하자

강의를 한 번만 듣고 모든 지식을 내 것으로 만들기란 매우 어렵다. 그래서 반복해서 강의를 듣는 것이 중요한데, 새로 시작한다는 마음으로 한 번 클론 코딩 강의를 처음부터 끝까지 들어보자. 듣다보면 분명 "이런 내용이 있었어?" 하는 부분이 생길 것이다. 또한 처음 들었을 때는 잘 이해가 가지 않은 부분이 전체를 한 번 다 들어서 이해가는 부분도 생길 것이다. 동영상 강의의 장점이 무엇인가? 한 번 결제하면 몇 번이든 반복해서 들을 수 있다는 것이다. 새로 공부한 내용도 확인할 겸 뽕(?)도 뽑을 겸 강의를 무한 반복해서 들어보자

✍️ 문서화하면서 듣자

어떤 공부든 문서화 과정은 매우 중요하다. 특히 면대면으로 마주보며 강의를 하는 게 아닌 온라인 강의의 특성상 강의에서 나오는 정보를 그냥 듣기만 하는 등 수동적으로 공부하기 쉽다. 그래서 온라인 강의는 더욱 능동적으로 듣는 노력이 필요하다. 다양한 방법들이 있겠지만, 가장 좋은 방법은 문서화가 아닐까 싶다. 강의를 들으면서 배운 내용들을 문서화하거나 배운 내용에 대해 더 궁금한 내용이 있다면 그것을 문서화하는 것이다. 문서화 방법은 다양하다. 실제 공책에 필기구를 이용해 정리해도 좋고, 마크다운 파일을 만들어서 정리를 하거나 노션을 이용하여 정리를 해도 좋다. 또한 블로그에 추가적인 내용을 찾아서 많을 사람들이 볼 수 있도록 올리는 것도 좋다. 나는 노션이나 클론 코딩 리포지토리에 따로 마크다운 파일을 만들어 정리하는 것을 추천한다. 웹 상에 저장되어 있기 때문에 필요할 때 쉽게 찾아볼 수 있고 사용성도 편리하기 때문이다. 노마드 코더에서 활동하시는 @DalYoon님의 강의노트를 보면 많이 도움이 될 것이다.

DalYoon/nuber-server

👷‍♂️ 처음부터 만들어보자

강의의 도움을 받아서 결과물이 나왔는데 실력이 늘지 않았다면 사실 결론은 간단하다. 강의의 도움을 받지 않고 처음부터 결과물을 만들어보자. 물론 이 과정은 굉장히 어려울 것이다. 강의에서 어떤 식으로 문제를 접근했는 지, 어떤 라이브러리를 사용했는 지, 전체적인 구조는 어떤 식이였는지 기억이 나지 않고 머리가 깜깜해질 것이다. 차근차근 본인만의 해결책을 찾아보거나, 정 모르겠는 부분은 강의를 잠깐 잠깐 참고하면서 나만의 결과물을 만들어보자.

🎨 나만의 색을 입히자

혹시 강의를 다 들었을 때 강의자의 코드와 내 코드가 100% 일치하는가? 그렇다면 여기에 본인만의 색을 입혀보자. 변경가능한 부분들을 내가 취향에 맞게 바꾸는 것이다. 웹이라면 간단한 CSS나 HTML부터 바꿔보자, 화면 구성이 바뀌면서 흥미가 생길 것이다. 이번에는 자바스크립트를 통해 새로운 컴포넌트를 만들거나 변수를 바꿔보자. 라이브러리를 추가하는 것은 어떤가? 각종 애니메이션 라이브러리를 이용해서 좀 더 인터렉티브하게 만들어보자. 기술 스택을 아예 바꿔보는 방법도 좋다. 리액트로 만들어진 프로젝트를 바닐라 자바스크립트로 짜보거나, REST API로 만들어진 프로젝트를 GraphQL로 바꿔보자. 데이터베이스를 MySQL에서 MongoDB로 바꿔보는 것도 좋다. 나만의 색을 입히는 것의 장점은 코딩 실력도 늘지만, 복제품같은 결과물이 아닌 나만의 색이 담긴 소중한 나만의 결과물이 나온다는 것이다.

👨‍💻 사이드 프로젝트를 하자

사이드 프로젝트는 코딩 실력을 늘리는 가장 좋은 방법 중 하나이다. 클론 코딩을 하면서 계속 사이드 프로젝트에 대한 아이디어를 구상해보자. 예를 들어 유튜브를 클론하는 강의를 듣는다고 해보자. 우리가 해당 강의를 통해 배우는 내용은 웹을 통한 영상 업로드, 자바스크립트를 이용한 플레이어 구현 등이 있을 것이다. 이를 이용하여 간단한 유튜브 영상 플레이어를 만든다는 등의 아이디어를 구상하는 것이다. 구상한 아이디어를 바탕으로 사이드 프로젝트를 진행하게 되면 기존 클론 코딩의 프로젝트를 반복해서 참고하게 되어 학습 효과가 배가 된다.

추천하는 클론 코딩

다양한 클론 코딩 강의가 있지만 내가 들어봐서 좋았던 강의만 나열해보려한다.

노마드 코더

Academy

클론 코딩으로 가장 유명한 사이트이고, 나도 이 곳을 통해 많이 성장한 곳이다. 다양한 클론 코딩 강의들이 있고, 최신 기술 스택들을 다뤄서 트랜드에 민감한 개발자라면 강추하는 사이트이다. 슬랙 커뮤니티도 굉장히 활성화 되어있어서 학습적 교류도 많고 편안한 분위기이다. 클론 코딩을 메인으로 내건 만큼 클론 코딩의 장점에 대해 설명하는 영상도 있다. 그 아래 영상은 바닐라 자바스크립트를 이용한 넷플릭스 클론 코딩영상인데 내 작업물이 나와서 넣어봤다. 😄

 

 

Ben Awad

Ben Awad

유튜브에서 어떻게 찾게 된 유튜버이다 GraphQL, Prisma, TypeScript, Docker등 주로 최신 기술 스택을 사용하여 프로젝트를 만드는 강의를 올리며, 그 중 슬랙 클론 강의도 있다.

출처: https://geonlee.tistory.com/171 [빠리의 택시 운전사]