생활코딩 사용기(feat. 웹프로그래밍 배우기)

언젠가 기회(?)가 되면 웹프로그래밍을 꼭 배워야겠다 벼르고 있던 참이었습니다.
그 기회란..
if(원하던공부못함 and 늙음 and 미래가안보임 and 백수)
어차피 굶어죽을 것 같은데 하고 싶은거나 해라;

네 뭐 기회라고 포장했지만 사실 인생 나락쓸기 하는 기간동안 웹이나 배우자라는 생각이었습니다.
이유는 서비스하고 싶은 것들이 전부 웹으로 구현이 가능할 것 같다는 생각을 했기 때문입니다.
어느정도 학습하고 나니 어린시절에 좀 배워둘걸.. 이라는 생각이 들기도 했습니다만 뭐 이제와서야 배워야 하는 이유가 있기때문에 신이 나를 지금 인도하고 있지 않나 그런 생각도 해봅니다. 운명론자라 하하.
이 글이 저의 뇌를 정리하는 동시에 저처럼 웹을 처음 배우려는 분들에게 도움이 되었으면 좋겠습니다. 더불어 선배님들의 뼈가 되고 살이 되는 훈수도 환영합니다.

 

과거에 이고잉님께서 업로드하셨던 강의영상들이 많이 있지만, 어느 순간부터 마인드맵 형식으로 초심자들이 쉽게 배울 수 있도록 커리큘럼을 갈아엎(?)으셨습니다.

덕분에 저같은 초심자도 내가 다음으로 넘어가야 하는 수업에 대해서 방향성을 가지고 공부를 할 수 있었습니다.

현재 생활코딩의 웹강의는 WEB1 - HTML & INTERNET 수업에 의존하고 있습니다. 처음 시작하시려는 분들께서는 저 수업으로 진입을 하시면 자연스럽게 다음 코스로 넘어가시게 될 겁니다.
제가 탄 커리를 말씀드리고 각각의 내용과 느낀점에 대해서 말씀드려보겠습니다.
제가 거쳐온 메인수업은 WEB1 - HTML & INTERNET로 시작하여 CSS -> JAVASCRIPT -> NODEJS -> DATABASE -> MYSQL -> NODEJS&MYSQL입니다.

저의 목표는 '게시판' 한번 만들어보기였습니다. 꿈이 너무 소박하죠? 하하. 너무 그 작동 원리가 궁금했었거든요. 저 커리큘럼 끝에 내가 원하는 것을 달성할 수 있을까 싶은 마음으로 끝까지 완주하였습니다.
WEB1 - HTML & INTERNET : web에 대한 기초적인 지식을 올려주는 교양강의이면서 HTML을 소소하게 경험해 볼 수 있습니다.
HTML은 정보전달 성격으로 태생했으나 현재 저에게 있어서는 홈페이지의 뼈대(or 골격)을 잡는 도구라는 것으로 인식하게 되었습니다.
조금 어려워도 너무 큰 의문을 품지 말고 적당히 빠르게 강의내용을 습득해 나아갔습니다.
특히 HTML을 따로 검색했을때 나오는 무수히 많은 명령어들을 보면서 "설마 이걸 다 알아야 하나?"라는 생각을 했지만 이고잉님께서 항상 "외우지 말고 검색" 이라는 말로 격려해주신 덕분에 용기를 가지고 쭉쭉 넘어 갈 수 있었습니다.
초심자가 프로그래밍을 배우기 위해서는... 코딩은 정확하고 완벽하게 해야겠지만 어떤 지식에 대해서는 다 알려고하지 말고 적당히 타협하면서 넘어가야 지속적으로 배울 수 있지 않나 라는 생각이 듭니다.
웹을 공부하다보면 어렵고 모르는 것을 적당히 봉인해둔채 넘어가야 일단 다음 단계로 전진이 가능한데 저는 개인적으로 이 부분이 많이 힘들었습니다.

CSS : 강의보고 따라가면서 빠르게 진행하였습니다. HTML이 웹페이지의 골격을 잡는 것이었다면 CSS는 '색칠하기' 정도로 저는 머릿속에 담아두었습니다.
어린시절 pc통신에서 넷스케이프를 거쳐 익스플로러로 넘어가던 과도기 시절에 개인홈페이지를 가지신 분들이 꽤 있었습니다. 돌이켜보면 약간 날것의 홈페이지 같은 느낌이 많았었는데 그게 CSS가 덜 발달된 시기라서 그런가? 라는 생각이 들었습니다. 뭔가 치장되지 않은.. 그런 홈페이지 말입니다.
사실 웹페이지를 만드려는 첫 시도는 초딩때였습니다. 나모웹에디터4로 골격을 잡고(이제와서 보니 이게 html을 gui형식으로 도와주는 서비스) 그때 당시 netian 이라는 포털에서 마련해주는 작은 저장소를 이용해서 홈페이지를 만들었던 기억이 어렴풋이 납니다. 아 벌써 나이가..
뿐만 아니라 기억하시는 분들이 계실지 모르겠는데 제가 초등학교 6학년때 me2u2(명칭이 정확하지 않을수있습니다)라는 서비스가 있었습니다. 아주 단순한 형식으로 개인 홈페이지를 가질 수 있도록 도와주는 서비스였는데 자유도가 너무 낮았던 서비스였습니다. 낮은 자유도 때문에 어렸을때 이용하지 않았었는데
지금 제 기억속에 가지고 있는 그 아기자기한 색감들과 모양들을 떠올려보면 CSS조차 잘 못다루는 저에게는 선녀같은 서비스아니었나 하는 생각이 듭니다. 생각나는대로 글을 옮기다보니 연식인증만 잔뜩이네요.


JAVASCRIPT : 역시 강의를 보면서 빠르게 진행하였습니다. 여기서부터 뭔가 어렵고 받아들이기 힘든 것들이 많았는데.. 무시하고 쭉 진행하였습니다. 뒤져보니 자바스크립트는 HTML, CSS와는 달리 프로그래밍 언어로서 취급을 받는데, 그 자체적으로도 공부할 것이 많은 아이였습니다.
그러나 저는 이전에 C와 C++를 접하면서 하나의 언어에 능통한다는게 얼마나 어려운 일인지 알고 있었기때문에 자바스크립트를 깊게 파고들어갈 생각은 1도 없었습니다. 도전할 마음 조차 없었고 지금도 여전히 없습니다-_-..
이 수업에서 구현했던 것은 버튼을 누루면 홈페이지 배경 색깔이 변하는 내용이었는데 이를 통해서 뭔가를 사용자가 클릭하였을때 발생하는 이벤트를 도와주는 녀석 정도로 자바스크립트를 이해하고 넘어갔습니다.

여기까지가 흔히들 이야기하는 프론트엔드 부분이었습니다. 결국 프론트엔드는 사용자가 직접 대면해서 보고 있는 부분에 관한 이야기였고, 제가 원하는 게시판을 만들기 위해서 외형적인 부분을 컨트롤 할 수 있겠구나 하고 상상했습니다.
게시판이 어떻게 작동되는지에 대한 저의 궁금증은 아직 해소되지 않았기때문에 여기서 멈출 수 없었습니다.
백엔드에 대한 검색을 통해 여러가지 백엔드 언어들을 추렸고(파이썬, php, javascript) 클량아질게 질문을 통해 조금이라도 접해본 javascript로 할 수 있는 nodejs를 선택하였습니다.(공부량을 낮추기위해)
저는 클량 아질게에 도움을 상당히 많이 받은 사람으로서 이 자리를 빌어 도움주신 많은 분들께 감사하다는 인사를 드립니다. 프로그래밍에 관한 것 뿐만아니라 기타 여러가지 감사한 일들이 많았습니다. 사랑합니다.

NODEJS : NODEJS의 특징.. 뭐 그런것들은 제가 알 수 있는 레벨이 아니라 언급을 못하겠습니다. 다만 서버쪽을 다루면서 배운 것은 일단 웹서버를 열 수 있는 코드를 배웠습니다. 그리고 프론트엔드에서 만든 홈페이지는 내가 만든 정해진 문서들을 보여주는 것으로 만족해야 했습니다만 NODEJS를 활용하면서 현대의 웹처럼 작동하게 만드는 법을 배웠습니다. 이걸 동적으로 작동하게 한다 이런식으로 표현하는 것 같은데 홈페이지 내에서 글을 쓰면 파일로 자동으로 만들어지고 그걸 다시 불러오고 하는 것들을 배우면서 뭔가 제가 배우고 싶은 게시판의 핵심적인 내용을 배워가고 있는 듯한 느낌이 들었습니다.

다만 아직 종착지에 도달하지 못했다는 생각이 든 것은 결국 모든 내용들은 단순파일이 아니라 데이터베이스로 연동이 될 텐데 저는 아직까지 이것을 경험해 본 적이 없기때문입니다. 이 부분은 컴공수업을 재미있어서 즐겨 들었던 사람으로서 해소하지 못했던 부분입니다.
언어를 배웠고 데이터베이스도 배웠었는데 그걸 연동해서 무언가를 만드는 것은 가르침 받아 본 적이 없었습니다. 다들 알아서 개인프로젝트 하면서 배우는 것이겠지요.
NODEJS수업은 이전에 배워왔던 내용들과 비교해서 난이도가 100배쯤 어려워진 느낌이었습니다. 여기서도 역시 이해 안되는 것은 안되는 대로 남겨두고 넘어갔는데 NODEJS는 결국 추후에 다시 강의를 들으면서 2회독을 하게 되었습니다. 여기는 대충 넘기면 안되더라구요.

DATABASE - MYSQL : 이전에 저는 ORACLE을 배워본 적이 있어서 비교적 쉽게 스윽 하고 넘어간 강의였습니다. MYSQL과 ORACLE은 사실상 거의 문법이 같았기 떄문에 적응하는데에도 문제가 없었습니다.
다만, 끝까지 커리큘럼을 진행하고 와서 보니 데이터베이스를 깊게 공부하는 것이 얼마나 중요한지 깨닫고 있습니다. 아마 제 프로젝트를 진행하면서 따로 시간을 할애한다면 단연 데이터베이스가 최우선이지 않을까 싶습니다.
결국 데이터를 어떻게 적재하고 어떻게 불러와야 하는것인가가 중요한 화두가 되었습니다. 과거에 ORACLE을 배웠을때 정규화니 뭐 그런것들을 제대로 배우지 않은 탓에 솔직히 자신이 좀 없거든요. 정말 이런걸 다 공부하고 프로그래머로 활동하시는 분들 존경스럽습니다.

NODEJS&MYSQL : NODEJS에서 구현했던 내용들은 파일로 쓰고 읽었던 내용이었습니다. 이것을 IDE에서 MYSQL과 연동하여 파일로 작성된 코드 부분을 db query로 바꾸는 작업을 진행하였습니다. 드디어 제가 알고싶었던 내용에 거의 도달한 느낌이었습니다 오오. 사실 굉장히 단순하게 서술했지만 배우는 과정은 다사다난했습니다.
여기까지 오는데 있어서 시간할애를 가장 많이 한 것은 NODEJS와 NODEJS&MYSQL부분입니다. 파일로 작성된 부분을 db로 바꾸는 과정에서 제가 NODEJS 수업을 대충들었다는것이 느껴졌습니다. 함수와 코드 내용을 이해 못하고 쭉 진행을 하다보니 db로 바꾸는 과정에서 이해가 하나도 되지 않았습니다.
결국 이 시점에서 NODEJS로 다시 돌아가 복습을 하였고 완벽하게 해당내용을 이해한 후에야 NODEJS&MYSQL 수업을 무난히 진행할 수 있었습니다. NODEJS에서 배운 내용이 완벽하게 된 후에는 NODEJS&MYSQL에서 강의해주시는 내용을 보기 전에 제가 미리 코드를 작성할 수 있는 경지에 이르렀습니다.
초심자단계지만 내가 능동적으로 먼저 코드를 작성하고 선생님의 강의를 듣는다는 것이 얼마나 기쁜일인지는 저만 알고 있는 기쁨입니다. 또한 여기까지 도달하면서 이제 게시판을 만들어 볼 수도 있겠다라는 생각이 들었습니다.
따로 형태나 필요한 내용들을 공부해야겠지만 이제는 제가 스스로 걸음마 해야 할 때라는 것을 알고있습니다. 힘들때마다 아질게의 힘을 빌릴 것이고.. 어느 수준까지 올라오면 저도 스택오버플로우 같은 곳을 기웃거리지 않겠습니까 하하.

제가 설정한 메인커리큘럼의 끝에 도달한 후에는 잠시 쉬었습니다.
약 일주일정도 쉰 것 같은데, 쉬는동안에는 공부하면서 주워들었던 키워드들에 관한 강의가 생활코딩에 있으면 가리지 않고 들었습니다.
그 내용들은 다음과 같습니다

git(sourcetree) - github : 버전관리 시스템. git에대한 기본이해 - 백업 - 협업의 커리큘럼으로 되어있는데 저에게 지금 당장은 협업이 필요없어서 백업까지만 들었습니다. 이제 저는 제 프로젝트를 하면서 sourcetree를 통해 github에 프로젝트를 버전관리 할 것이고 뭘 모르는 사람이 보기에 조금 더 있어보이는 모습을 갖추게 되었습니다.

aws : 아마존 호스팅서비스. 워낙 유명해서 꼭 알아보려고 했던 서비스입니다. ec2같은 컴퓨터를 대여해서 웹서버를 운영할 수 있다는 것을 배우고 기타 비용이나 여러가지 측면들을 알게 되었습니다. 아마존 aws... 비싸다... RDS? 그런건 나에게 사치다..

http : 통신규약.. header에 포함되는 정보들을 간단히 살펴보는 정도..

cache , ajax : 같이 묶을 카테고리는 아닙니다만.. 서버를 운용한다는 측면에서 보면 결국 비용을 생각하게 되는데 그런 측면에서 제 머릿속에 그냥 같이 묶어버렸습니다.
cache는 자꾸 정보를 쏴주면 서버비용도 많이들고 힘드니까 저장할 건 저장해서 보여주자.. 어떤 주기로 새로 정보를 쏴줄래.. 뭐 이런내용이었던 것으로 기억합니다. 아파치로 수업을 진행하셨는데 저는 이제 nodejs의 노예니까 nodejs로 검색해보니 역시 npm cache가 나오더군요. 공부해야할게 끝도 없습니다..
ajax는 웹페이지 전체를 쏴주지말고 필요한 부분만 서버와 통신해서 쏴주는 내용인데 fetch라는 함수를 이용해서 간단하게 공부한터라 아직 내용이 머릿속에 정확하게 자리잡혀 있진 않습니다.
다시 한번 찬찬히 복습할 예정인데 ajax모르면 웹 구현을 못하냐? 그건 아닌 것 같은데 검색할때 마다 자꾸 키워드로 나오는 것을 보면 반드시 알아야하는 내용 같습니다. 효율적인 웹페이지 구성을 위해서는 물론이고요.

dns - 도메인네임시스템. 서비스를 만들면 ip대신 간판을 걸고 운용을 해야하니까 기본개념이라도 들어두었습니다.

여기까지가 현재 제가 공부한 내용들입니다. 공부를 하면 할 수록 새로운 키워드들이 계속 등장하고 공부에는 끝이 없음을 새삼스레 느낍니다.
이런 많은 것들을 공부하고 사람들에게 편리한 서비스를 제공하고 있는 프로그래머 분들에게도 존경을 표합니다. 아무렇지않게 쓰는 작은 기능조차 구현하는게 만만치 않음을 공부하면서 많이 느꼈습니다.

<여기까지 도달하고 나니 발생한 의문들>
1. 예를들어 아마존 ec2를 대여를 한다고 한다면.. 거기에 nodejs 및 mysql을 설치를 하고 내가 작성한 코드를 올려놓은뒤 pm2로 실행해서 ec2를 끄지않고 켜 놓으면 이제 나의 웹서비스에 사람들이 접속 할 수 있는 것인가? 그동안 localhost로만 공부를 해온터라 궁금한 부분입니다.
2. 코드를 수정하거나.. 데이터베이스 코드를 잘못입력해서 웹페이지에 말도안되는 타격을 날리면 어떡하지? 결국 복제품을 하나 만들어서 테스트용도가 필요하지 않을까? 그건 그냥 빌린 ec2에 포트하나 더 열어서 테스트 서버를 운용하면 되는 문제인걸까?
3. 수업 중간중간에 보안에 대해서 배우긴했지만.. 좀더 배워야 할 것 같은데.. 어디서 부터 어떻게 배워야 하는걸까..?

<극복해야 하는 키워드들>
react, express입니다. react는 좀 덜하긴 한데 express는 nodejs에 필요한 내용을 검색하다보면 무조건 사람들이 express로 구현을 해놔서 답답할때가 있습니다.
저는 당분간은 그만 공부하고 웹페이지를 실제로 만들어보고 싶은데 저런 키워드들이 자꾸 마음을 붙잡습니다. 여러 검색을 통해 찾아보니까 프레임워크는 도움을 주는 도구라니까... 지금 내가 알고 있는 정보로만으로도 충분히 웹사이트를 구축할 수 있지않을까?하고 생각하고 있습니다.
직접 구현을 해보고 과정에서 불편함을 충분히 체험하고나면 react와 express로 제가 알아서 한발 다가가지 않을까 싶습니다.

<구현하고 싶은 웹페이지들>
정말 구현해보고 싶은 웹페이지가 있긴한데.. 그건 조금더 공부해야할게 많더군요. 많은 사람들에게 이로운 효과를 낼 수 있는 웹페이지인데 아쉽지만 살포시 미뤄두었습니다.
당장 뭘 구현할만한게 있을까? 하고 고민하다가 lol전적관리페이지를 한번 만들어보기로 했습니다. 제가 또 백수로 있는기간동안 롤을 배웠거든요. 친구들이 어떻게 롤을 모르냐고해서.....(솔직히 우리는 스타크래프트로 만족해야 하는 세대 아니냐..)
여튼 그렇게 초보자가 lol을 배우면서 불편한 것들이 굉장히 많았습니다. 이미 롤을 잘하고 있는 친구들도 기존의 fow.kr, op.gg페이지에서 제공하는 서비스들 중에 부족한 부분을 토로하더군요. 그래서 그런 부분을 보완하여 저랑 제 친구들끼리 쓸 수 있는 간단한 lol전적페이지를 만들어보려고 합니다.
다음에는 실제로 웹페이지 구현기로 찾아뵙기를 고대합니다. 미래의 제가 게으르지 않았으면 좋겠군요!

<마무리>
저는 무언가를 새로 배우는 것을 비교적 좋아하는 편에 속합니다. 모르는 것도 부딪치면서 그냥 하면 되지! 라는 단순파라 :)
그치만 웹을 배우는 과정은 순탄치 않았고 앞으로도 그렇게 순탄해 보이지 않네요ㅠㅠ
앞으로 저처럼 웹을 처음 배우실 분들을 응원합니다 :) 고통과 경험을 공유할 수 있는 친구가 많이 늘어나기를 고대합니다.
앞서간 선배님들께는 존경을 표합니다. 어찌 그리 많은것들을 공부하셨는지:)
제 사용기는 여기까지입니다. 읽어주셔서 감사합니다 :)