[번역]알고리즘과 자료구조를 즐겁게 배울 수 있는 앱을 만들어 보았다 - Jiwon Yeom - Medium
[번역]알고리즘과 자료구조를 즐겁게 배울 수 있는 앱을 만들어 보았다
이 글은 peterWeinberg의 I built an app that makes learning algorithms and data structures way more fun를 번역한 글입니다. 모든 저작권과 권리는 Peter에게 있습니다.
*This article is a translated version of peterWeinberg’s article: I built an app that makes learning algorithms and data structures way more fun. All rights are with him.
*도움이 되셨다면 Peter의 원글에 clap 한번씩 부탁드립니다 :)
나는 프로그래밍을 독학했다. 그리고 그 때문에 끊임없이 가면 증후군에 시달렸다. 나는 자주 내가 부족하다고 느꼈고, 복잡한 컴퓨터 공학 지식을 이해하기에 불리한 위치에 있다고 생각하고는 한다.
나는 수학을 항상 못했다. 나는 언제나 탄탄한 수학 실력이 곧 프로그래밍 실력과 직결된다고 생각해 왔고, 그렇기 때문에 다른 (수학적 능력을 타고난) 사람들보다 더 열심히 해야 같은 개념을 이해할 수 있다고 믿었다. 이러한 생각들은 내 머릿 속 깊숙히 뿌리박혀 있었고, 그래서 나는 내심 내가 절대로 이진트리 순회(traversing binary search)를 배운다거나, 머지 소트(Mergesort)같은 악몽같은 재귀 패턴은 소화할 수 없을 거라고 느꼈다.
하지만 약간의 노력으로, 내 스스로 놀랄만한 성과를 이루어냈다. 그래서 어떻게 그렇게 했는지, 그리고 실제로 어떤 결과를 이루어 냈는지 공유하고자 한다. 언제나 그렇듯이, 어디선가 컨트리뷰터(contributor)들이 나타날 지도 모르는 것이기 때문에.
알고리즘과 자료구조를 연습하고 배워볼 수 있는 간단한 브라우저 자바스크립트 샌드박스, CS-Playground-React를 소개한다.
가입이 필요 없는 이 인터뷰 준비 앱은, 진행 상황을 자동으로 저장해주고, 막혔을 때는 답을 제공하고, 여러분이 내가 겪었던것 고통을 덜 겪으면서 여행할 수 있도록 다양한 링크(문서, 튜토리얼 등)을 제공한다!
이 앱이 그렇게 혁신적인 것은 아니라는 것을 인정한다. (분명 그렇게 생각하고 있었겠지!) 이런 비슷한 내용들을 브라우저에서 바로 코드를 작성하고 실행시키는 식으로 학습시키는 앱이 많다는 것은 나도 잘 알고 있다.
하지만 CS Playground React는 최대한 간단한 디자인으로, 매우 구체적인 주제에 대해서 파고든다. 또 하나는, 이 앱은 혁신적인 무언가를 위해서 만들어진게 아니다. 이 앱은 내가 이러한 내용들을 즐겁게 학습하기 위해서 택한 하나의 방식이다. 그 도중에 다른 누군가에게 귀중한 자료가 될 수 있다면, 더욱 기쁜 일이다.
이 앱은 아직 작업 중으로, 다루는 내용이나 기능 면에 있어서 아직 다양한 가능성이 열려있다. 그러니 만약 내가 아직 포함하지 않은 멋진 챌린지나 자료구조 같은 것이 있다면, 혹은 더 개선할 만한 부분이 있다고 생각한다면, 서슴치 말고 이슈를 오픈하거나 pull request를 보내줬으면 한다.😊
앱을 직접 확인해보고 싶다면, 지금 당장 여기에서 라이브로 확인해 볼 수 있다(오프라인 캐싱을 위해 서비스 워커를 등록해서 https로도 접속 가능하다)
코드가 궁금하다면, 바로 여기서 확인할 수 있다.
여기서부터는 그냥 좀 지루한 ‘왜’ 와 ‘어떻게’에 대한 이야기이다 :-)
왜 만들었는가
이 앱을 만든 동기는 간단했다: 배우고 싶었고, 그 과정을 좀 더 쉽고 재밌게 만들고 싶었다. 그보다 더 중요한 것은 내가 왜 이 지식들을 습득하고 싶었는가에 대한 이야기일 것이다.
지난 18개월 정도의 시간을 통해, 나는 내가 코딩을 할 수 있다고 자신있게 말할 수 있게 되었다. 하지만 내 자신을 프로그래머라고 부르기에는 머뭇거려지는 부분이 있었다. 내가 코딩을 생업으로 삼고 있지 않아서(실제로 내 직업이 아니다)가 아니라 앞서 말한 가면 증후군 현상 때문이었다. 무언가 만드는 것은 할 수 있다. 하지만 꽤 최근까지도 나는 제대로 된 컴퓨터 공학 지식을 거의 갖추지 못했었다.
컴퓨터 공학 기본 개념들을 배움으로써 나는 내가 조금 더 자신있게 내 자신을 프로그래머라고 느끼는 것은 물론, 다른 사람들도 나를 그렇게 볼 수 있도록 하고자 했다.
최근 IT 업계는 꽤 쉽게 독학으로 공부한 프로그래머들을 받아들이고 있다. 코딩 부트캠프가 여기저기서 생겨나고 있는 실리콘 밸리에서는 더욱 그러하다.
그럼에도 불구하고, 정식으로 컴공 교육을 받지 않은 프로그래머들은 업계에 들어가기 위해 꽤 큰 허들을 넘어야 한다.
이과 대신 문과를 나와서 입은 타격을 조금이라도 줄이기 위해서, 나는 컴공과 대학생 1~2학년들이 배울 만한 개념 몇 가지를 학습하기로 했다. 나는 이것이 내 실용적인 개발 실력을 뒷받침 해주고, 다른 이들이 나를 프로그래머로서 진지하게 받아들이도록 하는데에 도움이 될 것이라고 생각했다.
나는 프로그래밍 인터뷰에 자주 등장하는 주제들을 기준으로 범위를 정했다.
버블 정렬, 선택 정렬, 삽입 정렬, 병합 정렬, 퀵 정렬, 힙 정렬, 스택, 큐, 연결 리스트, 해시 테이블, 이진 탐색 트리.
이렇게 나열된 문제들은 나를 상당히 압도했고, 그래서 제대로 도전하는 것을 꽤 오랫동안 미뤄두게 되었다.
하지만 그렇게 패배를 인정할 수는 없었기에 나는 곧 작업을 시작했다. 튜토리얼들을 찾아보고, 모든 문서들을 읽어보며, 수 없이 혼란을 겪으며 매일매일을 보냈다.
시간이 지나자 몇몇 개념들이 자리를 잡기 시작했다. 하지만 몇 가지 문제가 있었다.
지루해지기 시작했다. 문제를 해결하는 것은 즐거운 일이지만, 이진 탐색 트리의 reverseLevelOrder 같은 것을 푸는것은 실제 앱 개발 중에 마주하는 문제와는 비교도 안 될 정도로 재미가 없다.
너무나 오랜 시간이 걸렸다. 하루 종일 (코드를 한줄도 쓰지 않는) 업무를 보기 때문에, 코딩을 할 수 있는 시간은 매우 귀중했다. 내가 여기에 몇 개월을 쏟다보면, 실제로 실무에서 쓰기 좋은 기술들이 녹슬까봐 걱정이 되었다.
컴공 지식을 갖추는건 좋은 일이지만, 현실을 직시해보면, 웹 개발자들은 대부분 무언가를 만들기 위해 고용된다. 이런 지식들을 실제로 웹 개발을 하면서 활용할 기회는 거의 없다시피 한 것이다.
나에게는 이러한 개념들을 배우는 것이 일종의 자존심 문제였고, 포기할 마음이 없었다. 하지만 나의 제일 중요한 목표는 역시 실질적인 웹 개발 기술이었다.
그래서 나는 두가지를 하나로 합치기로 결정했다. 나의 목표를 이루면서 동시에 내 핵심 기술들을 연습할 수 있도록 해주는 간단한 앱을 만드는 것.
내가 생각하기에 무언가를 배우는 가장 좋은 방법은 (그것이 무미건조한 것일수록) 스스로가 좋아하는 것과 연결시키는 것이다. 그렇게 해서 즐겁게 앱을 만드는 것과 동시에, 컨텐츠도 개발하게 되었다.
이 프로젝트에 있어서 알고리즘과 자료구조는 필수적인 요소였다. 당연한 것이, 인터뷰 준비 앱을 만드는데 문제를 채워넣지 않으면 의미가 없으니까!
나는 며칠에 걸쳐 새로운 알고리즘이나 자료구조를 배운 후, 거의 다 이해했다 싶으면 학습 자료들을 취합해서 앱에 추가하였다. 이제 나는 내가 직접 만든 간단한 작업 공간에서 몇번이고 그 내용을 연습할 수 있다. 엄청나지 않은가?!
내가 발견한 정렬 알고리즘과 자료구조들이 어떻게 작동하는지를 시각화한 사이트이다. 이 퀵소트는 100개의 요소가 든 배열을 정렬한다. 전체 시각화 리스트는 여기서 확인할 수 있다. 멋진 사이트를 만들어준 USF에게 감사한다!
요점은, 내가 오랫동안 미뤄두었던 것을 즐겁게 배울 수 있는 방법을 찾아냈다는 것이다. 덕분에 내가 기존에 계획했던 목표를 더욱 더 잘 이뤄낼 수 있던 것은 물론이다.
이 앱은 내 스스로를 위해서 만들었지만, 여러분과도 공유하고 싶은 이유가 있다. 누구 한명이라도 CS-Playground-React를 유용하게 사용하게 된다면, 나는 이 커뮤니티에서 내 역할을(혹은 적어도 어떤 부분을) 했다고 느낄 수 있을 것 같다.
많은 프로그래머들이 자신들의 지식과 경험을 무료로 공유하고 댓가로 매우 적은 것을 받거나 혹은 아무것도 바라지 않는다. 이런 오픈 마인드 커뮤니티가 없이 혼자서 코딩을 배운다는 것은 거의 불가능한 일일 것이다.
10년 전만 해도 스스로 학습하기 위한 방법이 지금보다 훨씬 적었었다. 나는 내가 어떤 정보든 쉽게 얻을 수 있는 정보화시대에 살고 있다는 것에 감사하고 있다.
덕분에 내가 이번 여정을 잘 마칠 수 있었고, 이 글을 읽게 될 누군가도 조금 더 쉽게 개발자로서의 길을 걸을 수 있게 되었음을 느꼈으면 좋겠다.
기술 스택 & 방법
이 앱은 리액트와 React-Redux로 만들어졌다(첫번째 버전은 바닐라 JS, CSS 그리고 HTML로 만들었다). 편집기를 브라우저에 추가하기 위해서는 CodeMirror와 React-Codemirror2를 이용하였다.(추가: 기존 React-CodeMirror는 더 이상 관리되고 있지 않고, 리액트의 새로운 버전과도 상성이 좋지 않다. 차기 버전을 만들어준 Scniro의 리파지토리에 별 하나씩 부탁한다)
모의 콘솔
유저가 코드에서 console.log를 호출할 때 마다 redux 액션이 발생하도록 하였다. 이렇게 하면 로그 메세지들을 수집해서 브라우저에 모의 콘솔로 코드의 출력 내용을 보여줄 수 있다 — 개인적으로 꽤 신기하다고 생각한다! 언제든 clearConsole() 명령어로 모의 콘솔의 내용들을 지울 수도 있다.
로그로 기록된 코드를 수집, 저장하기 위한 console.log 재정의
나는 이 앱을 정말 사용하기 쉬운 앱으로 만들고 싶었다. 그래서 데이터베이스를 만들고 사용자를 로그인 시키는 대신, 진행 상황을 저장하기 위해 더 간단한 방법을 선택했다. Redux는 매 세션의 애플리케이션의 상태를 관리하는데, 나는 세션간에 코드를 유지하기 위해 localStorage를 사용하였다. 앱은 다음 번에 사용자가 방문했을 때 이 정보를 받아오고, Redux에 그 정보를 제공한다. 이렇게 함으로써 마지막으로 했던 위치에서 다시 진행할 수 있다.
만약 어떤 이유로 유저가 진행 상황을 모두 삭제하고 싶다면, 언제든 resetState()를 사용하면 된다. 당신의 코드가 로컬 스토리지에 저장되는 것이 싫다면, 다른 페이지로 이동하기 전에 // DO NOT SAVE 라는 주석을 코드에 남기면 된다. 이렇게 하면 모든 파일에 대해서 코드를 저장하지 않게 된다.
로컬 스토리지로 redux 상태(state)를 유지하는 간단한 예시
덧붙이자면, 이러한 기능을 가진 Redux-Persist 라는 패키지가 있는 듯 하다 (나는 뒤늦게 알게 되었다). 하지만 유즈케이스가 단순한 상황에서 코드 몇줄로 이러한 기능을 구현하는 것과 NPM 패키지를 설치하는 것 중에 어느게 더 나을까? 나는 매번 전자를 선택할 것이다. 아마 그 쪽이 코드 몇 백 줄과 의존성을 줄일 수 있게 되지 않을까 싶다. 이런 것은 언제나 기브 앤 테이크의 문제이므로, 고도로 최적화된(하지만 무거운) 방법이 간단한 방법보다 나은지는 스스로 선택해야 한다.
조절 가능한 패널(pane)
(*역: 창 정도로 번역하려 했으나 패널이 더 직관적인 표현인듯 하여 의역하였습니다)
마지막으로 나는 나의 작업 공간을 더욱 더 유연하고 사용하기 쉽게 하는 기능을 추가하였다. 유저들이 편집기와 콘솔 양쪽의 크기를 모두 조정할 수 있도록 하기 위해서 simpleDrag.js, React refs, 그리고 flexbox를 이용했다.
그럼 읽어준 분들께 감사의 인사를 전하며, Happy hacking!
그냥 지나치기에는 너무나 공감이 많이 가는 글이었습니다.
독학이나 다름없는 비전공자에, 문과… 매일매일 ‘나는 너무 부족한 것이 아닐까’ 라고 느끼고 필사적으로 비전공자라는 약점을 매우기 위해 하루하루 뭐라도 더 보려고 노력한 순간들이 스쳐지나갔습니다.
항상 붙잡고 있다가도 ‘실무에 필요한’ 기술들이 뒤떨어질까 시간에 쫓겨 놓게 되었던 알고리즘, 자료구조… 이번 기회에 저도 조금 다른 방식으로 접근해 볼까 하는 생각이 드네요 :) 피터의 글을 읽고 댓글란에서 발견한 이것도 한번씩 보시면 어떨까 싶습니다.
저에게 그랬듯이, 많은 분들께 위로와 힘이 되는 글이었으면 좋겠습니다!