자바스크립트 수준별 단계 분류 [출처] 자바스크립트 수준별 단계 분류 (하드코딩하는사람들) |작성자 HanbitSoft수호

출처 :http://cafe.naver.com/hacosa/162050

괜찮은 글을 써주셔서 남깁니다. 전 3.8 ~ 3.9사이같군요 이런데 감히 es5로 바로 점프를 뛰려고 했다니...

갈길이 멀어요 ㅜㅜ

안녕하세요 김수호 입니다.

자바스크립트 학습 방법과 관련해서 저에게 직접 물어오시는 분도 많고, 도대체 어떻게 공부해야하는가 감을 못잡는 게시판 글도 많이 보여서 원래는 자바스크립트 학습 방법에 관련한 글을 쓰려고 했었습니다. 

그러나 학습 방법이라는 것이 본디 자신과 가장 잘 맞는 방법을 찾아야 하는 것이지 남의 방법을 무조건 따라가는게 해답이 아니라는 것은 잘 아시리라 생각합니다. 

그리고 1년전의 제 학습 방법과 지금의 학습 방법은 또 다르기에 사람마다 잘 맞는 학습 방법을 잘 찾아야하는 점도 중요하겠지만, 수준별 학습 방법에도 차이를 두어야 하는 것이 아닌가라는 생각이 문득 들어서 현재 시점에서 저의 지난 과거를 돌아보고 당시 제가 느꼈던 감정이나 지식의 수준을 기준으로 단계를 매겨보려고 합니다.

 이 단계는 1~10 단계로 이루어져있으며 어디까지나 미천한 제 경험에 의한, 좁디 좁은 시야의 주관적인 생각임을 참고하시기 바랍니다.

 본론으로 들어가기 전에 실력이나 수준을 논하는 이 지극히도 주관적인 제 기준이 무조건적으로 일반적이지 않고 비합리적인것만은 아니다라는 것을 먼저 증명하기 위해 썰을 좀 풀고 가겠습니다.

문제가 몇 문제 주어지고 각 문제마다 점수가 할당 되어있어서 맞춘 개수만큼 점수가 짠 하고 나올수가 없기 때문에 실력이라는 것은 절대적으로 평가 될 수 없고 주변의 더 잘하는 사람 혹은 더 못하는 사람과 비교를 통해 상대적으로 평가된다고 생각합니다. 

몇 년 경력을 가지고도 내가 얼만큼 하는건지 잘 모르겠다는 말도 결국은 비교 할 대상이 없기 때문에 모르는거고 비교 할 대상이 누구냐에 따라서 못하는 사람도 잘하는 사람이 될 수 있고, 잘 하는 사람도 더 잘 하는 사람 때문에 못 하는 사람이 될 수 있습니다. 

그렇다고 나와 너를 비교하여 내가 무조건 잘한다고 할 수도 없는것이 너는 깊게 공부해서 어느 한 분야에 전문성을 가지고 있고 나는 넓게 공부해서 뭐든 할 수 있다처럼 상대적인 평가라고 하더라도, 기준과 중요도를 어디에 어떻게 두느냐에 따라 공평하지 않거나 비교의 성립 자체가 불가능 할 수도 있다고 생각합니다.

그리하여 제가 수준을 나누는 기준은,  저 자신의 성장만을 지표로 삼고 흘러간 시간과 습득된 지식의 양을 나와 남이 아니라 나 자신의 전과후를 비교하여 상대적으로 평가하고 단계를 나누려고 하는겁니다.

그렇다고 완전 저 한 사람만을 이야기하지는 않을겁니다. 자바스크립트에 관해서는 현 회사에서도 누군가를 평가하고 가르칠 수 있는 입장이기 때문에 이해를 돕기 위해 저에게 평가받는  사람들의 수준과 상태도 함께 고려했고, 스터디를 통해 만난 다양한 사람들과 이 카페를 통해 봐온 분들의 일반적인 모습도 그 대상이 됩니다.

그래서 지식 습득 수준의 기준은 저 한 사람 이지만, 이야기를 풀어가기 위해 여러사람의 상황을 조합했습니다.

당연히 제가 제시한 이 단계는 절대적인게 아니라 나 스스로의 상태를 파악하는 나만의 지표이며, 이것을 참고는 하시되 절대적인게 아니므로 각자의 상황에 맞게 단계를 조금씩 조절하여 본인의 상태를 점검하시면 됩니다. 

알맞는 학습 방법을 찾는것은 본인의 상태를 진단하는 것에서 시작합니다.

0단계 : HTML, CSS만 아는 상태. (웹 퍼블리셔의 수준을 레벨에 따라 나누는 글이 아님을 상기 시켜드림..) 제이쿼리랑 자바스크립트의 차이점이 뭔지 잘은 모르겠지만, 제이쿼리가 더 쉽다고 하니 제이쿼리에 관심이 가는 상태. 그러나 뭘 어디서부터 어떻게 시작해야할지도 모르겠고 어떤 책이 좋은지도 모르겠다.

0.5단계 : 어찌 어찌 학습은 시작했지만 도대체 이게 무슨 소린지 이해도 안되고 너무 어렵다. 내가 이걸 할 수 있을까라는 회의감이 들 지경이다. 그래도 먹고 살려면 해야지 어쩔. 마치 큰 산 같다. 내가 정복해야 할 큰 산. 이 산은 동네 뒷 산이라고 생각하고 정복해나가기로 하자.

1단계 : 무작정 따라하기 종류의 책을 읽으며 코딩을 해본다. HTML, CSS만 이용했을 때는 무언가를 만드는 느낌이었다면, 제이쿼리를 더해서 생명을 불어넣는 기분이다. 제이쿼리에 흥미를 느끼기 시작한다. 눈에 바로 바로 보이니까 재미있고, 왜 진작 이걸 하지 않았을까라는 생각이 든다. 전공자나 서버쪽 프로그래밍 같은 걸 잠깐 하다가 이걸 접한 사람은 신세계다. 그건 재미가 없었는데 이건 재미있다. 왜냐? 눈에 바로바로 보이니까. 그건 적성에 안 맞았는데 이제야 내 적성을 찾은 것 같다. 

1.5단계 : 나름 열심히 공부한다. 책을 볼 때는 아하 그렇구나 이해가 되고 당장 무엇이라도 만들어보고 싶어서 손이 근질 거린다. 그러나 여전히 책을 덮고 빈 화면에서 무언가를 만들어내기는 쉽지 않다. 생각하는 방법을 모르겠다. 책과 똑같이 코딩했는데도 안 돌아간다. 도대체 뭐가 문젠지 모르겠어서 결국은 한글자 한글자 비교해본다. 오타 하나가 숨어있었다. 오타는 반복된다.

1.7단계 : 셀렉터가 css의 그것과 같기 때문에 제이쿼리를 공부하면서 css실력도 덩달아 상승한다. 이제 셀렉터는 이해했고 완전 빈바탕에서 무언가를 하는 것은 여전히 힘들지만, 기존 소스코드가 있다면 버튼을 클릭 했을 때 색깔을 바꾼다든지 간단히 움직이는 정도는 자신있게 할 수 있겠다. 기존 소스가 없더라도 책이나 인터넷 검색으로 대충 흉내는 낼 수 있다. 이 정도일 때 신입이라면 나쁘지않은 평가를 받고 시작 할 수 있는 단계

2단계 : 취업을 했다면 회사에 묻어간다. 제이쿼리도 서버개발자가 한다거나, 사수나 기존 사람이 한다거나하고 나는 이미 작성되어 있는 실무 코드를 보고 공부도 하며 알게 모르게 내 실력을 키워나간다. 사수에 대한 열망이 가장 높아지는 시기. 이 시기에 사수 없이 잘 헤쳐나갈 수 있도록 혼자서 독하게 공부하고 오히려 일에 흥미를 갖게 되는 사람과, 혼자서는 뭘 잘 못하고 사수가 없어서 힘들고 일에 대한 흥미마저 떨어지는 사람의 실력 차이가 극명하게 갈리기 시작하는 기점. 실무자가 한 명이라는 회사의 현실적인 문제도 있을 수 있지만, 받아들이는 사람에 따라 다른 결과가 나오는 것은 분명하므로 무조건 회사 탓이라고만 볼 수는 없다는 것이 중론.

2.5단계 : 제이쿼리 활용에 물이 올랐다. 열심히 공부해서 물이 올랐을수도 있고 하던것만 계속 반복해서 물이 올랐다고 느껴질수도 있다.  for 문 if 문 활용이 어렵지 않다. 이제 조금 복잡한 애니메이션도 가능하고 타이머를 써서 시간차 공격도 가능하다. 제이쿼리 플러그인 수정은 힘들지만 가져다 쓰는건 어렵지 않다. 밑 바닥에서 슬라이더를 직접 만들 수는 없지만 얼마든지 가져다 쓸 수 있고 업무상 제이쿼리로 인한 고통은 거의 없다. 일반적인 대부분의 웹에이전시에서 원하는 경력자의 스킬이 여기쯤 이라고 생각한다.

2.7단계 : 플러그인을 직접 만들어볼까 하는 생각을 갖는다. 여러 사람에게 공개 할만한 건 아닐지라도 나 스스로 사용하기에 좋은 레퍼런스들을 많이 확보한다. 부트스트랩 같은 것도 한 번 써본다.

2.9단계 : 마음 한 구석에 자바스크립트를 제대로 모르는 것에 대한 일종의 죄의식이 있다. 서버 개발자들이 무시하는듯한 태도로 말하는게 듣기 싫다. 저런걸 듣지 않기 위해서라도 내가 서버 언어를 공부하든 자바스크립트를 공부해서 콧대를 눌러주고 싶다.

3단계 : 자바스크립트를 공부하기로 마음 먹는다. 이 때 자바스크립트 언어 그 자체를 공부 하는 사람도 있고, Angular나 Backbone 같은 프레임워크를 학습하면서 자바스크립트의 벽을 느끼고 자바스크립트와 프레임워크를 함께 공부하기도 한다. 여기서 가장 큰 문제는 자바스크립트를 공부한다고 해놓고 DOM API 활용을 공부하는 사람이 태반이라는 것이고 대부분은 그것을 인지하지 못한다. 자바스크립트를 공부한다고 해놓고 document.getElementById() 를 하고 있다면 분명 문제가 있다. DOM 이 무엇인지, 자바스크립트를 학습한다는 의미가 어떤 의미인지 구분하지 못하고 여기서 길을 잃는 경우를 많이 봤다. 지금까지 눈에 보이는 것을 위주로 공부하고 구현해왔다면, 이제는 눈에 보이지 않는 개념적인 부분을 이해하려는 노력이 필요하다. 간단하게는 객체와 배열은 무엇이고 어떤 차이점이 있는지, 자바스크립트의 타입 시스템은 어떠한지, 함수의 호출에 따른 this의 바인딩은 어떻게 달라지는지 등등 자바스크립트라는 프로그래밍 언어가 가지는 특성에 따른 학습법이 필요하다. 그러나 이 때는 방향성에 대한 문제를 스스로 자각하지 못한다. 스터디도 나가보고 하지만, 실력은 별 진전이 없는것 같고 끊임없이 무언가를 하고 있기는 한 것 그 자체에 의의를 두고 발전하고 있다며 스스로를 합리화하며 착각에 빠진다. 아래에 나오는 키워드를 가지고 이야기 하는 글이나 책을 많이 봤다면 생각보다 3단계가 빨리 지나갈 것이고 그렇지 않다면 3단계가 벽이 되어 길을 잃을 것이다.

3.2단계 : 호이스팅 정도는 확실하게 알겠고 프로토타입은 붕어빵 틀이라며 뜬구름 잡듯이 이해가 될 것만 같다. 그렇지만 이걸 어디에 어떻게 써야될지 모르겠다. 나는 제이쿼리로 인해 더 이상 고통 받지 않는 레벨인데, 이런건 써본일이 없고 앞으로도 없을 것 같다. 

3.5단계 : 클로저, 실행컨텍스트 같은 개념 학습을 시도하지만, 이해가 될 것 같으면서도 도저히 무슨 소린지 잘 모르겠다. 와 닿지 않는다. 몰라도 업무상 지장이 전혀 없으니 일단 제쳐둔다. 

3.6단계 : 자바스크립트에는 배열이 없다는 것을 이해한다. 다시 말하자면 Array 타입이 없다는 것을 이해한다. Array 타입이라 함은 메모리 상에서 연속된 공간을 확보하여 인덱스로 순서를 찾아가는 구조를 의미하는데 자바스크립트의 배열은 이렇게 동작하지 않는다. 자바스크립트의 배열은 마치 링크드리스트처럼 동작하며 length를 가지는 유사 배열로 분류되며 그 타입은 object 이다. 어디 채팅방에서 타입의 종류를 이야기하며 Array를 포함시키던데, 이야기가 길어질거 같아서 간단하게 이야기 하였었으나 자바스크립트의 타입 추론 시스템에 Array는 없음을 분명히 하고 싶다..

3.7단계 : 자바스크립트를 공부하다보니 API 문서 보는게 어느 정도 눈에 들어오기 시작한다. 특히 제이쿼리가 아닌 프레임워크를 공부하다보면 API가 더 눈에 잘 들어올 것이고 덩달아 제이쿼리 API도 눈에 들어오기 시작한다. 제이쿼리가 하찮게 느껴진다. 제이쿼리는 공부하는게 아니라 그냥 API보고 갈기면 되는것이구나하고 느낀다. 자바스크립트와 제이쿼리가 이제 명확히 구분된다. 수 많은 라이브러리 중에 하나일 뿐 인것을, 나는 제이쿼리에 왜 그렇게 큰 의미를 부여하며 공부를 했는가.

3.8단계 : 콜백이 무엇인지 정확하게 이해한다. 1급 객체인 함수를 인자로 넘겨서 함수 호출의 제어권이 다른 컨텍스트로 넘어가는 것이다. 설명을 돕기위해 제이쿼리로 예를 들자면, $('#btn').on('click', function(e){//$(this)}) 여기서의 this가 id 가 btn인 엘리먼트를 가르키는것에 당연히 의문을 품어야하고 원래는 btn이 아니어야 하는데 왜 btn 이 되는지 이해해야한다. 콜백을 이해했다면 파라미터 e 가 어떻게 저기서 쓰일 수 있는지도 이해해야하고 e가 아니라 event 또는 afaefag 처럼 아무 의미 없는 이름을 부여해도 파라미터의 값은 이벤트객체라는 것을 이해해야한다. 이 때 커스텀 이벤트도 이해해두면 좋다. 'click' 이 아니라 'suho' 같은 문자열을 넣고 'suho' 이벤트를 발생시켜 보도록.

3.9단계 : 제이쿼리만 하던 예전의 나와 지금의 나는 클라스가 달라졌다고 인식한다.  다양한 프레임워크도 써봤고, 자바스크립트 언어 그 자체에도 자신이 생겼고 딱히 자바스크립트를 학습하지 않은 서버개발자보다는 내가 더 잘 안다고 자부 할 수 있다. 그들도 나의 지식을 존중하고 되물어오기도 하지만, 이 전 처럼 말 한마디 잘못했다가 나한테 걸리면 아주 제대로 눌러준다고 생각하며 복수할 기회를 엿보기도한다. 이 때 어느정도 본인만의 개발 철학과 신념이 슬슬 생기기 시작한다. 위험하다. 선무당은 사람을 잡고, 무식한 놈이 신념을 가지면 무섭다. 그래서 이 시기에 섣부른 신념을 갖는 것은 위험하다. 신념을 갖더라도, 남에게 적극적으로 자신의 신념을 전파하다가 큰 코 다칠 수 있다. 그러나 누가 뭐라 하든 뒷 산 정상이 바로 눈 앞에 보이는 것은 사실이다. 저 정상에만 올라서면 나는 두려울 것이 없다.

4단계 : 드디어 뒷 산을 정복했다. 이제는 Angular든 React든 그냥 API문서 보고 대충 갈기면 짠 하고 나온다. 새로운 학습에 큰 부담을 갖지 않으며 오히려 재미를 느낀다.  Grunt, Gulp 같은 빌드툴 도입이나 사용에도 거리낌이 없으며 yeoman, bower, jasmine, Ionic 등등 자바스크립트 개발툴이나 트렌드를 인지하고 필요에 따라 스스로 학습한다. 새로운게 나와도 걱정이 없다. API 읽고 뚝딱뚝딱 만들면 되기 때문. 회사에서도 능력면으로 인정을 받는다. 물론 상대적인 관점에서  특출나야 한다. 2.5단계의 인력은 일은 잘 하나 얼마든지 대체 가능한 인력이다. 대체 가능하다는 말은 연봉협상에서 우위를 가지지 못한다는 것을 의미한다. 4단계쯤의 인력부터 슬슬 쉽게 대체 불가능한 인력의 반열에 오른다. 

4.5단계 : 말빨과 패기가 뒷받침되면 원하는 조건으로 이직이 쉬울 수도 있다. 시장에서 프론트엔드 개발자를 원한다고 할 때 요구되는 필수와 우대조건에 해당하는 지식을 대부분 갖추고 있다. 서버 지식도 일부 있다. 서버 지식이나 다른 프로그래밍 언어 지식이 전혀 없이 자바스크립트만 가지고 이 단계까지 오는 사람은 엄청난 시간이 걸렸거나 운이 좋았거나 정말 극소수이거나 여튼 자바스크립트만 가지고 일반적으로 쉽게 되는 영역은 아니다. 그래서 연봉 협상에서 우위를 갖는다. 쉽게 대체 불가능하기 때문에. 이미 좋은 회사에 자리 잡고 있거나 좋은 회사에서 다 빨아가서 이런 인력은 안 좋은 회사에 있지 않는다. 있다고 하더라도 좋은 회사로 금방 빨려간다.

5단계 : 뒷 산을 정복했다고 좋아했는데 저 멀리 지평선이 보인다. 알고보니 산을 정복한게 아니고 깊은 구덩이 밑에서 이제 겨우 땅으로 기어 올라온 것이다. 그래서 김이 빠진다. 들리는 소문에 에베레스트라는 산이 있다고 한다. 그런 세상을 몰랐던 나를 자책한다. 혹은 에베레스트를 등정하고 온 사람을 만나기도 한다. 그래서 난 뭔가 하며 좌절감을 느낀다. 나 같은 경우는 나는 지구라는 별에 살고 있고 이 지구는 우주라는 공간에서 수 많은 별 중에 하나이고 이 수 많은 별이 모여 은하계를 이루고 이 은하계는 다시 수 많은...... 여튼 골목 대장 정도는 되는줄 알았던 나인데 기준을 달리해서 상대적인 관점에서 바라보면 먼지 한톨도 안되는 아무 의미 없는 존재라는 것을 깨닫게 되는 너무 큰 계기가 일순간에 와서 농담 한 숫갈 보태면 한동안 식음을 전폐했었다.

5.2단계 : 벽 뒤에 우주를 보고 나니, 내가 지금까지 알고 있다고 생각하고 있던게 실은 아는게 아니었다는걸 깨닫는다. 아는것으로 착각하고 있었을뿐. 이제는 안다는게 무엇인지 조차도 모르겠다. 변수조차도 개념적으로 이해하기 힘들어질만큼 내가 알고 있던 지식과 사고의 체계가 무너진다. 여전히 결과물은 잘 돌아가고 사람들은 만족하며 박수를 친다. 그러나 나는 내가 짠 코드를 실행하는 컴퓨터에게 미안해서 코딩을 할 수가 없다. 그동안 나 때문에 얼마나 힘들었니. 딱히 비교 할 대상이 없는 회사를 오래 오래 만수무강하게 다니면서 외부 인맥을 만드는 네트워킹도 안하고 있다면 에베레스트가 있다는 것도 모르고 뒷산에서 타잔처럼 사는 것이다. 에베레스트가 있다는걸 알면 그나마 다행이지만 눈 앞의 정상만을 바라보고 달려와서 정상을 정복했는데 에베레스트라니 이무슨. 그래서 곧 길을 잃는다. 나는 우주 미아가 되었다.

5.5단계 : 좌절감이 사나이를 키운다. 더 이상 자바스크립트 학습만으로는 나아갈 수 없는 한계에 봉착했다는것을 안다. 그리고 이내 공포감이 밀려온다. 그 한계를 돌파하지 않으면 이게 딱 내 한계라는것을 안다. 이제는 시선 자체가 달라진다. 수많은 프로그래밍 언어중 하나인 자바스크립트 따위가 문제가 아니다. 프로그래밍 그 본질에 더욱 집중하고 기본으로 돌아간다. 이산수학, 자료구조, 알고리즘 등. 그리고 자바스크립트를 이해하기 위해서라도 다른 언어를 학습한다. 모든 인간에겐 똑같이 한정된 시간이 주어졌으나 머리가 좋고 배움이 많은 사람은 더 적은 시간으로 나보다 더 빨리 습득한다는 사실에서 오는 박탈감과 조급증만을 제외하면 학습에 어려움은 전혀 없다.

5.7단계 : 디자인패턴을 학습해서 자바스크립트 개발에 적용한다. 나와 컴퓨터만을 위한 코드가 아닌 다른 사람을 위한 아름다운 코딩을 하려고 한다. 부수 효과가 없는 함수형 패러다임과 상태 프로그래밍의 차이를 이해하고 이를 자바스크립트에 적용시킨다. 습득이 빠르지만 습득해야할 분량이 엄청나게 방대하다는걸 깨닫고 다시 공포감에 빠진다.

5.9단계 : Immutable, Mutable 을 이제 좀 이해 할 수 있을것 같다. 

6단계 : ES5 스펙의 완벽한 이해와 설계 및 활용

7단계 : ES6 스펙의 완벽한 이해와 설계 및 활용

8단계 : 나에게 우주를 선사하신 분. 사실상 나에겐 9단계와 10단계는 없다.

9단계 : 미스코 헤브리, 존 레식 형이다. Angular.js 와 제이쿼리의 아버지. 

10단계 : 브랜든 아이크 형이다. 자바스크립트의 아버지.

위와 같습니다.

앞 뒤 단계의 순서에 조금씩 차이는 있을지라도 큰 틀의 맥락은 공감하시지 않을까 싶어서 적어봅니다.

제가 바라보는 시야에서 중급은 6단계 이상, 고급은 8단계 이상으로 분류합니다. 

우주를 선사하신 분께서 생각하는 중급이라는 단계에 제가 미치지 못하는 것을 제 스스로 인정하므로 저는 5.9단계이고 초중고 세 단계로 분류하자면 전 초급이네요.

전 사수가 없었습니다. 시작부터도 없었고 지금도 없고 이직을 하지 않는한 앞으로도 없을 것 같습니다. 4단계까지는 회사의 실무경험이나 사수의 존재 유무도 있으면 좋은 것이지 필수는 아니라고 생각합니다. 그리고 그 단계까지 얼마나 빨리 도달하느냐에 따라서 그 이후를 결정하는데도 지대한 영향을 미친다고 생각합니다. 공부하는 습관이나 자기 계발의 노력은 마음먹은 한 순간에 만들어지기도 합니다. 그렇지만 첫 1년에 그러지 않은 사람이 2년 되었다고 그러기는 힘들고 2년째에 안그랬던 사람이 3년째 되서 갑자기 그럴 가능성은 더욱 희박합니다.

하고 싶은 말의 결론은 그겁니다.

4단계까지는 본인의 노력에 의해 얼마든지 빠르게 성취 할 수 있다. 그리고 그 정도 노력은 쏟아부어야 우주가 있다는것도 이해 할 수 있다는 것. 이해 할 수준이 되지 않았는데 우주가 있다는걸 알아봐야 너무 먼소리라 감흥이 없을겁니다. 물론 그 때는 알려줘도 아는게 아닐테지만. 군대에나 있다는 사수를 찾기보다는 TV 속에서라도 만날 수 있는 롤모델을 찾는게 빠를겁니다.  그리고 그 롤모델과 보잘것없는 자신을 비교해서 채찍질 하면 부스트를 단 효과는 날 겁니다. 스스로 느끼는 만족도는 별개.

공감되는 본인의 레벨대에 저는 어떻게 학습했는지 궁금하시면 댓글을 통해 도움을 드릴 수 있을거 같습니다.

추후 Angular 스터디를 하게 되면 위 기준으로 1.7레벨 이상을 대상자로 하려고 합니다.

그럼 이만...

[출처] 자바스크립트 수준별 단계 분류 (하드코딩하는사람들) |작성자 HanbitSoft수호