04. Q: 어디에 뭘 넣어주면 좋겠어?
A: 에러 해결코드가 어느 적당한 장소에 넣어야되는지 알려줘!!!!!
혼자서 무언가를 배우고자 할 때, 제대로 된 방향성을 찾지 못하면 아주 엄청나게 잘못된 것을 할 수 있습니다. 하지만 아무것도 모르는 초보는 그게 잘못 된 줄도 모르죠. 제 인생 만화, 애니메이션으로 꼽는 아리아ARIA를 예시로 들어 보겠습니다.
이 만화의 주인공은 수상안내원이 되고 싶어서 혼자서 VR로 연습을 합니다. 당당하게 사수 앞에서 처음으로 실제로 곤돌라 노를 저었는데, 사수가 웃으며 감상을 이야기 해 줍니다.
"방향이 거꾸로야."
노를 젓고 배를 운행하는 방향 자체가 틀렸지만, 혼자서 꾸준히 열심히 연습한 덕분에 아무튼 운행은 안정적으로 잘 합니다. 아무것도 모르는 초보가 열심을 가지고 무언가를 할 때 반드시 일어나는 사건 중 한 가지입니다. 개발자로 일을 시작한다면 최소 3년차가 되기 전까지도 저러고 있을 거에요. 왜 3년차냐면 전 아직 1년 차이지만 아마도 3년이 될 때까지도 그러고 있을 것 같으니까요. 미리 떡밥을 깔아두는 거에요.
연말연시에 시간이 남으시면 아리아 만화는 완결이 났고, 애니메이션은 기존에 아마 3기 정도까지 있을 것이고 이번에 신작이 또 나오니까 봐 주시면 좋습니다.
우리 문과생들은 인터넷에 수많은 거짓과 권모술수가 넘쳐나는 것을 이미 알고 있습니다. 블로그나 유투브, 심지어 뉴스조차도 제대로 된 레퍼런스가 없는 조잡한 글이 넘쳐나죠.
자고로 글쓰기의 기본은 사실에 기반한 신빙성 있는 자료들을 취합하여 기승전결에 맞춰 적절한 타이밍에 근거 자료를 제시하여 내가 말하고자 하는 주장을 뒷받침하는 것입니다. 사실 프로그램 코딩도 이와 비슷하다는 느낌이 있습니다.
이게 무슨 헛소리냐하면... 글의 문단과 목차처럼 프로그램에도 파일 구조가 나뉘어져 있고, 각 언어마다 특징적인 알고리즘과 코드가 구현되는 기승전결 있으며, 그 기능과 알고리즘에 버그가 없이 구현하려면 기초적인 문법을 확실히 알아야지 혼자서 꼬물꼬물 코드를 만질 수 있게 됩니다.
그렇지 않으면 에러가 발생했을 때, 에러코드로 구글링을 해서 해결방법까진 찾을 수 있지만...
그 해결방법을 제 코드에 어떻게 적용해야할지 모르는 까막눈이 될 거니까요. 자물쇠에 맞는 열쇠를 찾아도 그걸 제대로 맞춰 끼우지 못하면 전 ...절단기를 찾겠지만 아무튼 그렇습니다.
1. 파일 구조
사실 남들보다 조금 빠르게 컴퓨터를 배웠습니다. 내가 처음 배운 컴퓨터는 386. 그 당시 컴퓨터는 DOS 화면으로 지금 프로그래밍 화면과 비슷합니다. 까만화면에 영어로 글자를 토독 치면 무언가 뾰롱 하고 반응하는 형식이죠. 컴퓨터가 작동되는 원리를 배운다고 마름모와 원형, 네모 등 도형으로 이루어진 무언가를 공책에 쓰면서 배웠고, 곧 이어 DOS 화면에서 윈도우가 연결되었고 편한 것에 빠르게 적응하면서 금방 까먹게 됩니다.
그리고 곧 이어 모뎀의 도입으로 천리안, 하이텔 초기 인터넷 통신이 발달하고 개인 홈페이지 만드는 걸 배웁니다. 당시 홈페이지는 정말 별 게 없어서 html과 css가 딱히 분리될 필요도 없었고,
index.html 을 기준으로 각 페이지만 쭉 만들어서 하이퍼링크로 연결하는 식이었어요.
[index] ㅡ [profile]
ㄴ [diary]
ㄴ [board]
단순하고 직관적인 파일 구조였다면, 올 해 배우게 된 홈페이지 만들기는 가히 충격적이었습니다.
홈페이지를 하나 만드는 데에도 다양한 구조와 방법이 있더라구요. 아마도 css로 반응형 웹을 구현하면서 이런 저런 방법이 생겨난 것 같습니다.
1) html 과 global css 분리
2) html 과 html마다 css 분리
3) html 안에 css 를 같이 작성 - 각종 라이브러리 css를 사용할 수도 있음
<생활코딩 https://opentutorials.org/course/2129/8 참고>
본인이 만들기 편한 방법으로 구현만 하면 되는 것이다...! 세 가지 방법을 이래저래 다 해 봤는데 각각 장단점이 있어서 개인 취향에 맞춰서 파일 구조를 잡고 프로그래밍을 하면 됩니다. 코딩은 정해진 정답이랄게 많지 않아서 좋을 순 있지만, 결과적으로는 여러 가지 가능성을 다 경험해봐야 되서 손에 익히는 데 시간이 오래 걸리게 되서 조바심이 났어요. 그래도 시간을 들일 필요가 있는 부분이라고 생각합니다.
그리고 html과 css로 홈페이지를 간단히 해 보고 react로 다시 만들 때는 완전히 다른 파일 구조에 다시 한 번 절망했어요. 이럴 때 적절하게 깃허브나 구글링을 통해서 타인의 코드와 파일구조를 쭉 훑어보면서 도움을 받았습니다. 구조를 어떻게 잡느냐에 따라서 거기서 사용하는 코드가 달라지더라구요. 그래서 최대한 기초적인 기능만으로 완성해 둔 결과물을 찾아서 찬찬히 살펴봤습니다.
2. 언어와 프로그램의 기승전결
윗 이야기에 이어지는 이야기입니다. 결국 프로그램에서 코드가 작동하는 방법과 기승전결 흐름은 다른 사람들이 해 둔 코드를 처음부터 끝까지 뜯어먹어본다는 생각으로 많이 살펴보는 게 도움이 되었어요. 근데 보기만 하고, 똑같이 따라 치는 것도. 아무리 봐도 모르겠잖아요. 화면 속에 있는 코드가 이 책의 설명이 뭔지 모르겠어요. 그래서 저는 고전적인 방법을 사용했습니다... 손으로 썼어요. 그렇지 않으면 이게 어디랑 연결되는 코드인지 도저히 이해할 수가 없었거든요.
사실 가장 처음에 보는 기초 책도 초보자인 우리에게는 너무 어렵잖아요. 똑같이 따라치면 에러나고, 깃헙에 올려준 코드 복사해서 붙여넣으면 똑같은 거 같은데 실행되서 날 미치게 만듭니다. 그리고 찬찬히 살펴보면 괄호가 하나 빠지거나 . , 같은 기호가 틀리거나 어디선가 영어 철자가 틀려서 에러가 났을 겁니다. 정말 어떻게 이런 초보적인 실수를 하냐! 라고 화가 날 수 있지만 이건 그냥 앞으로도 평생 똑같은 실수를 하게 될 겁니다... 그냥 실수를 했을 때 좀 더 빠르게 어느 부분에서 오타와 실수가 발생했는지 파악하는 눈치를 키우는 게 더 좋을 것 같습니다.
이렇게 손으로 써서 좋은 점은 정말 코드를 한 글자도 빠짐없이 볼 수 있어서 좋았고, 이 후로는 괄호가 많거나 적어서 생기는 에러가 줄었어요. 기초 책에 있는 코드는 그래도 적은 편이니까 해 볼 만 하네요.
기초 문법은 일할 때 가장 중요한 부분이 될 거에요. 얼마 전에 있었던 KT 통신장애 기억나시죠. 초보자인 저희는 에엥 할 수도 있지만 어느 정도 연차가 있는 개발자들은 입을 모아서 이야기를 하더군요.
어떻게 저런 기본적인 실수를 할 수가 있냐구요.
저런 큰 사건의 주인공이 되지 않도록 좀 더 꼼꼼하게 코드가 작동하는 원리를 살펴봐야겠습니다.
저는 한 번씩 시간이 나면 이런 거 보고 따라 만들어요. 그러면 이 개발자는 어떤 식으로 기능을 쪼개서 구조를 잡고 어떤 식으로 코드 구현을 해 나가는지 영상으로 하나씩 볼 수 있어서 나중에 제가 작업할 때도 도움이 되었어요. 코드는 한글로 문장을 적는 것처럼 무조건 위에서 아래로, 왼쪽에서 오른쪽으로 작성하지 않습니다. 일정한 틀이 있고, 그 안에 필요한 것을 채워나가요.
짧은 에세이가 아니라 20페이지가 넘는 소논문 같은 보고서를 쓴다고 생각해 봅시다. 다른 사람은 어떨지 모르겠지만 저는 분량이 있는 글을 쓰기 전에 먼저 어떤 내용을 어느 정도 분량으로 작성하고 어떤 소재거리를 어느 순서로 배치하면서 글을 작성할지 초안을 미리 생각해둡니다. 그리고 대략적으로 큰 틀만 툭툭 덩어리잡아두고 그 다음에 세세한 내용으로 바꾸어서 채워나갑니다. 제가 지금까지 작업한 코드도 이와 비슷한 느낌이었거든요. 큰 것을 제가 혼자 한번에 완성하기란 어렵습니다. 그치만 우린 수단과 방법을 가리지 않고 작은 공부라도 해 보는 게 필요하니까요.
사실 일을 하면서도 코드가 막히는 것이 있을 때 유투부에 사는 우리의 존잘 인도 친구가 많은 도움을 주었어요. 비록 영어발음이 조금 신기한 것이 있지만 그래도 인도 친구가 해 주는 유투브 강의가 제일 배울 게 많았습니다... 미쿡 양놈들은 성의가 없어요... 인도인이 하는 유투브 강의가 있다면 최우선적으로 들어봅시다. 의외로 귀에 쏙쏙 들어오는 영어에 쉽고 안정적인 설명에 빠져들게 됩니다.
3. 기초 문법
얼마 전 트위터에서 게임처럼 쉽게 배울 수 있다던 코딩 사이트 두 곳을 들어가보았습니다. 제가 또 이렇게 속았죠. 대신 속아드린겁니다.
첫번째는 위즈랩(https://wizlab.net/)
게임 형식에 맞춰 화려한 이미지들과 동적인 요소들이 시선을 사로잡아 흥미가 확 올라가지만 자바스크립트를 거의 모르는 저는 초급 1번 문제를 쳐다만 보고 홈페이지를 나왔습니다. 초보라고 하지만 초보가 아닌 듯한...
이게 바로 그 1버 문제입니다.
전.. 할 수가 없었어요. 지금도 뭔지... 잘... 모르겠어요...
그래서 조금 더 쉬운 버전입니다. 조금 더 못 생겼지만요.
스탠포드 대학교에서 만든 교육용 게임입니다.
https://stanford.edu/~cpiech/karel/learn.html
단순하게 캐릭터를 상하좌우 움직이면서 프로그래밍에서 기초 문법을 어떤 식으로 사용할 수 있는지도 맛 볼 수 있습니다. 사실 이게 좀 더 외국 쪽 코딩 교육용 사이트에서 이용되는 형식인 것 같아요.
제가 올 초에 정~말 아무것도 모르는 상태에서 서울42 프로그램(https://42seoul.kr/seoul42/main/view) 에 합격을 했는데, 1차 테스트도 저런 모양의 로켓트를 이렇게 저렇게 움직여서 별 모양에 도달시키는 것이었습니다.
사용할 수 있는 코드 줄 수가 정해져있고, 게다가 시간 제한까지 있어서 난이도가 있었지만 아무튼 프로그래밍의 기초는 이런 느낌으로 설명하는 게 외국식인 모양입니다.
기초문법은 저도 지금 배워가는 과정이라 어떻게 공부해야할지 헤매고 있어요. 근데 어떤 언어든 그 언어로 의사소통을 하기 위한 기본적인 골격은 알아야하니까요. 다들 각자 배우고 있는 그 방법으로 힘내세요. 생활코딩 아저씨가 그랬어요. 가장 기초적인 것이 가장 중요한 것이라구요. 코딩은 정말 그러하더라구요. 가장 처음 배우고 가장 먼저 까먹을 수 있지만 계속 반복해서 듣다보면 그것들을 응용해서 할 수 있는 것이 많아져요. 잊지 말아요.
코딩 공부를 하는 시간이 길어질수록 내가 구현하고자 하는 기능에 딱 맞는 완벽한 답과 코드를 찾을 수 없습니다. 검색하면 나오는 글들은 다들 코드 한 줄 적어두고 이걸로 해결했어요. 하는 모습을 보면서 점점 더 자신감이 없어지기만 하더라구요.
정말 자바스크립트는 하나도 모를 때 발견한 이 분 블로그 글이 진짜 큰 위로가 됐어요. 전 아직도 저 괄호들의 향연을 잘 이해하진 못하지만 대충 감으로 때려넣고 있습니다. 마치 지도의 축척같은 개념인 map두요.
아무튼 이 글을 보는 여러분들도 이래저래 헛 타자질 하는 절 보고 한 번 피식 웃고 또 힘내서 공부하시면 좋겠어요. 그리고 기분이 좋아지시면 작은 후원도 감사하구요!
참, 저는 이번 주 코로나 확진되서 조금 힘들었어요. 회사-집만 다녔고 자주 코로나 검사를 받았는데, 음성 결과 받은 다음날부터 증상이 발현되었어요. 어디서 걸릴 지 정말 모르는 거니까 건강 조심하시기 바랍니다 :)
