Solidity에 이어 Javascript를 배우기 시작했습니다. 시은이 형의 추천을 받아 WatchandCode라는 사이트에서 Practical Javascript(PJS)라는 초보 코스를 들었습니다. 이 콘텐츠가 초보자를 위해 제일 좋은 콘텐츠 인지를 판단하는 건 어렵겠지만 HTML, CSS, Javascript간의 관계와 Javascript로 함수(function)를 작성하는 방법을 배우고 함수가 어떻게 구현되는지 살펴볼 수 있었기 때문에 굉장히 성공적이었다고 말할 수 있겠습니다.
WatchandCode에서는 TodoList라는 기능을 구현하는 방식으로 Javascript에 접근합니다. TodoList란 해야 할 일을 적어서 무엇을 완료 했는지 확인할 수 있는 기능을 포함하고 있습니다. 이는 총 5가지 기능을 포함합니다.
1. TodoList를 저장한다
2. TodoList를 추가한다
3. TodoList를 수정한다
4. TodoList를 삭제한다
5. TodoList 완료를 표시한다
작성한 코드로 처음 Github repository도 만들어 보았습니다. Github Repository에 프로젝트를 commit하는데 command line작성이 필요하다는 것도 처음 배웠습니다. 초보자를 위해 차근차근 설명해 주신 김우정님께 감사드립니다.
TodoList는 Javascript와 HTML로 구성되어 있습니다. HTML은 제가 작성한 문서(text)가 인터넷 화면에 구현될 수 있도록 해주는 언어입니다. Repository의 index.html에 보시면 제가 작성한 내용이 담겨 있습니다. 정리하자면 HTML 페이지는 Todo List라는 타이틀 아래 Toggle All, Add, Change Todo, Toggle Completed라는 버튼이 있습니다.
이러한 버튼에 기능을 추가하는 것이 Javascript입니다. 예를 들어 제가 input 상에 제가 필요한 Todo List를 입력하고 Add 버튼을 누르면 제가 추가한 Todo List가 아래에 생성됩니다. HTML 상에 구현된 이 Add 버튼이 작동하고 Todo List를 구현하도록 만들기 위해서는 Javascript에 작성된 todoList, handlers 객체(object)와 view를 들어다 볼 필요가 있습니다.
우선 todoList의 addTodo 함수(function)는 제가 입력한 todotext를 todos 배열에 추가하는 기능을 수행합니다. handlers의 addTodo는 HTML에 입력한 값을 todoList의 addTodo에 입력한 값으로 보내주는 역할을 수행하며 버튼을 누르면 값을 초기화 하여 새로운 값을 입력할 수 있도록 해줍니다. 이후 추가된 입력 값은 view의 display function에 따라 HTML에 새로운 List를 생성하고 이 List가 화면에 나타나게 됩니다.
Watchandcode는 이러한 Todo List를 작성하는 일련의 과정을 세분화하여 초보자가 처음부터 구현해 볼 수 있도록 도와줍니다. 이 방식은 Cryptozombies가 좀비 생성부터 거래까지 일련의 과정을 설명해주는 방식과 닮아 있습니다. 그렇지만 Javascript를 처음 접하는 사람에게 좀 더 특화되어 있어서 한번에 원하는 모듈(앞서 말한 3개의 object와 HTML Document)을 구현하는 대신 각 Version마다 array, function, object 등 다양한 Javascript의 개념으로 Todo List를 구현하고 있습니다.
수업 중에 “debugging”이라는 부분이 있었는데 그 비디오에서 Gordon(수업 진행자)이 비디오를 띄엄띄엄(skip around)하지 말고 진득하게 볼 필요가 있다는 말을 했을 때는 조금 뜨끔 했습니다. 단 하나의 function이라도 수동적으로 적고 그저 “어 이런 거구나"하고 넘겼을 때는 나중에 나에게 남는 게 적지만 console에서 내가 적은 코드를 확인하면서 debugging을 통해 제대로 작동돼지 않으면 “왜 안될까?”를 고민하는게 필요하다는 지적이었습니다. 앞으로 코드를 배우는데 있어서 조금 더 능동적으로 꼼꼼히 살펴보는 버릇을 습관화 해야겠다는 생각이 들었습니다.
수업을 마치고 이 글을 적으면서 드는 생각은 참 단순한 기능을 수행하는 모듈을 만드려고 해도 많은 노력이 필요하구나 였습니다. 개념 상으로는 Add를 할 수 있는 새로운 버튼을 추가하고 input에 적은 값을 아래 화면에 새로운 list로 표시한다는 건 한 줄로 설명이 가능하지만 이 기능을 실제로 구현하기 위해서는 작업을 훨씬 세분화해야 한다는 생각이 들었습니다. 또한 Todo List를 구현을 목표로 하는 Javascript 교육 비디오가 Watchandcode하나만 있는게 아니라는 점을 보았을 때(다른 비디오를 보지 않아 확신은 못하겠지만) 같은 기능을 구현하는데에도 여러가지 방법이 있겠구나 라는 생각이 들었습니다. 복잡하지 않은 기능이라도 찬찬히 하나씩 구현해 보는 연습을 해야 돼겠다는 마음이 들면서 아직 갈 길이 먼 것 같습니다.
