아무도 이야기하지 않는 자바스크립트 쉽게 배우는 방법
프로그래밍을 처음 시작하는 단계에서는
스스로만의 생각으로 무언가를 해냈다는 경험을 해서 성취감과 재미를 느끼는 것이 중요합니다
하지만 입문 초반에는 프로그래밍 언어라는것을 공부하는것으로 대부분의 시간을 씁니다
그리고 그 공부의 범위는 생각보다 넓게느껴집니다
단지 느낌이 아니라 실제로 많습니다
그런데 반가운 소식이 있는데요 이 많은것들 중에는 선택적요소가 상당수라는점입니다
선택적요소란 알면 편하고 몰라도 좀 불편할 뿐 뭔가를 해내는데 문제는 없는 요소입니다
어떤것은 몰라도 불편하지도 않을 것들도 많이 있습니다
그런데 생각해봅시다
프로그래밍을 처음 입문해서 아무것도 할 줄 모르는 상태에서 간단한것이라도 할줄 알게 되는 것과 더 편하게 다양한 방법으로 할수 있게되는 것 둘중 무엇의 가치가 클까요?
못하는 상태에서는 편하게 하는것의 가치보다 할줄 알게되는 것의 가치가 훨씬 큽니다
간단한 것이라도 할 줄 알게되서 해내는 경험을 하는게 더 중요합니다
이런점에서 처음에는 무엇을 공부하고 무엇을 공부하지 않을지 우선순위를 잘 정해서 해 나가는것이 너무 중요합니다
하지만 입문자 입장에서는 무엇이 중요한지를 판단하기 어렵습니다
그래서 제가 제안해드리고자 합니다
이 제안은 프로그래밍을 처음 입문하고 아직 스스로 뭔가 생각대로 코드를 만들어낸 경험을 못해본 분들을 대상으로 합니다
이 글에서는 자바스크립트 학습에 있어서 학습범위를 줄이는 방법에 대해 안내하고자 합니다
학습범위를 줄인다고해서 덜 할수있게 되고 그런게 전혀 아닙니다
---------------------
자바스크립트에서는 변수를 만드는 키워드가 세개가 제공되죠
let, const, var
값을 담는 변수를 준비하는 키워드들입니다
이것들은 서로 사용상 조금씩의 차이점들이 존재합니다
이 모든걸 다 익힘으로써 이 차이점들에 대해 다 숙지할 필요가 없습니다
let 하나만을 쓰도록 하고 let의 특징만을 알아두는것 만으로도 초반에 다양한 프로그래밍 경험해보는데에 있어서 전혀 문제없습니다.
let 하나만 선택하게 될때 몰라도 되는것들은 var와의 차이점, 특히 var에서의 호이스팅과 스코프의 특성들에 대해서 알 필요가 없게되고 물론 const와의 차이점도 알 필요가 없게됩니다.
---------------------
자바스크립트에서는 함수를 준비하는 방법이 아래와 같이 나뉠 수 있습니다
/*1*/ let ff = function(){}
/*2*/ let ff = ()=>{}
/*3*/ function ff(){}
셋중 1번의 방식만을 습득합니다
1번의 방식만 선택하면 몰라도 되는것들은 당연 2, 3번과의 차이점이며 차이점에는 2번과의 차이점은 생성자로써의 사용가능여부, this, arguments등등에 대한 이야기.. 3번과의 차이점은 호이스팅, 스코프에 대한 특성들이 있습니다.
또한 1번의 방식은 변수에 12, "hello"와 같은 데이터를 담는것처럼 함수도 데이터로써 취급해서 변수에 담을 수 있다는 감각을 익힐 수 있게되어 생각을 다음과 같이 확장 할 수 있습니다
함수도 12와 "hello"와 같은 데이터라면
console.log(12) 와 console.log("hello") 처럼 어떤 함수의 매개값으로 넘기는것이 가능한것 처럼
console.log(function(){}) 처럼 함수도 매개값으로 넘기는것이 가능하겠구나~ 라는 생각으로 확장할 수 있는 기회가 됩니다
---------------------
자바스크립트에서 클래스를 준비하는 방법도 함수를 준비하는 방법의 차이가 존재하는 것 같은 차이가 존재합니다
/*1*/ let Hello = class {}
/*2*/ class Hello {}
둘중 1번의 방식을 습득합니다
1번을 선택한 이유는 함수준비하는 방법에서의 이유와 같습니다
class{} 또한 값으로써 취급한다라는것을 받아들이기에 용이하며 특별히 2번방식으로 했을때 스코프와 호이스팅이 어떻게 이루어지는지에 대해 따로 알아볼 필요가 없어집니다
---------------------
자바스크립트에는 TDZ, 호이스팅이라는 개념이 있습니다
그러나 윗 글들에서 선택을 배제함을 통해 호이스팅을 몰라도 되는 상황을 만들었습니다
그리고 애초에 변수 선언 전에 접근하고자 하는 시도 자체를 안하면 TDZ라는것에 대해 신경쓰지 않아도 됩니다
console.log(data);
let data=123;
이와 같은 시도 하지 말자는겁니다.
---------------------
자바스크립트에서는 비구조화할당, 스프리드, 옵셔널체이닝, 템플릿리터럴, 널리시등등의 문법이 제공됩니다
알면 편합니다. 그러나 몰라도 문제 없습니다. 불편할뿐입니다.
모른다고해서 뭘 못하고 그러진 않습니다
---------------------
실행컨텍스트, 클로저라는 개념이 존재합니다
이것들에 집중하는 대신 스코프에 대해 집중합시다
스코프를 알고나면 이것들은 당연한 이야기가 됩니다
그리고 스코프의 이해는 윗 글들에서 let 하나만 사용하고 함수와 클래스선언에 대한것도 let에 담는것으로 상황을 제한해둔 덕에 훨씬 쉬워지게 되었습니다
let 의 스코프 특성에 대해서만 이해하면 됩니다
---------------------
자바스크립트에는 상황에 따라 다른코드를 실행할 방법들이 존재합니다
if, 삼항연산자, switch 등이 존재 하지만 이 중에서는 if 하나만 익힙니다.
if 하나로 충분합니다
---------------------
자바스크립트에는 반복기능을 제공하는것들이 많이 있습니다
for, while, do while 또한 Array 객체에 붙어있는 다양한 배열반복 함수들.. forEach map filter등등..
이중 while 하나만 알아도 상관없습니다
while 하나로 그 외의 것들이 모두 커버됩니다
물론 상황에 따라 좀더 편한게 있을수도 있지만 처음에 할줄 모를때는 편한것의 가치보다 불편하게라도 할줄 알게되는 것의 가치가 크며 사실상 while 하나로 모든걸 다 할수 있습니다
그럼 왜 for가 아닌 while인지에 대해 이야기해보자면 "만약 비가오면 우산을 쓰자" 와 같은처리를 하기 위해 사용하는것이 if 라는것입니다.
if(비오면){우산쓰기} 와 같은 모습의 코드가 만들어지죠
while은 코드의 모습이 if와 완전동일합니다
while(비오면){우산쓰기}
우리는 if는 이미 사용하기로 결정했습니다
그렇다면 if를 하는 김에 모양이 if와 똑같은 while를 선택하는게 아무래도 배움의 부담을 줄일수 있겠지요
---------------------
자바스크립트에서는 객체를 생성하는 방법이 다양하게 존재합니다
여기서 이야기하는 객체 생성이란 new 키워드를 이용해서 생성하는 객체입니다
이 객체생성에 대한 내용은 안보도록 합시다
일단 안봐도 괜찮습니다
초심자를 조금 지난 분들이라면 본다 하더라도 함수를 생성자로써 사용하는 방법은 사용하지 않도록 합시다
대신 class문법을 사용합니다
class문법을 사용할때 알지 않아도 되는 내용은 prototype을 직접 준비 하는 등의 자바스크립트의 특성을 재치있게 응용해서 객체지향을 직접 개발자가 구현하는 방법에 대해 신경 쓸 필요가 많이 줄어듭니다
class를 쓰는것이 곧 그것들을 하는셈입니다.
---------------------
자바스크립트에는 엄격모드란게 있습니다
엄격모드일때와 아닐때의 작동의 차이가 있습니다
그냥 항상 엄격모드로 쓰면 이 차이를 모두 알 필요가 없어집니다
---------------------
자바스크립트에는 값을 비교하는 방법으로 ==와 ===가 있습니다
===는 내 생각과 조금 더 가까운 결과를 내줍니다
==는 특성을 모두 알아야 오해없이 쓸수 있다는 어려운점이 있습니다
===하나만 알면됩니다
---------------------
자바스크립트에서는 문자열 "5" 를 5로 바꿔주는 방법이 다양합니다
+"5" ~~"5" Number("5") "5"-0 "5"*1 등등..
이중 아무거나 하나 사용하면 됩니다
모두 알필요 없습니다
---------------------
자바스크립트에서는 비동기코드를 예쁘게 만들어주는 수단들이 존재합니다
여기서 예쁘다는것은 프로그래머가 코드를 보는 입장에서 느끼는 것입니다.
자바스크립트에서는 비동기코드를 만들때 코드의 복잡도가 올라가는 경향이 있습니다.
이것을 개선해주기 위한 수단으로써 Promise, async/await, generator등이 존재하는데요
그냥 이것들 모두 사용하지 않고 코드를 예쁘게 만드는 것을 포기합시다
좀 농담같은 말이지만 지금 이 전체적 이야기의 맥락에서 볼때 코드를 예쁘게 만드는것은 선택사항으로 구분짓는것이 어울립니다
예쁘게 만들지 않는다면 선택할 수 있는 방법이 콜백함수를 사용하는것인데 이것의 단점은 코드가 복잡해진다는 것입니다
그래도 불편한 것보다 할줄알게 되는것이 더 우선순위에 있다는 점과 특히 이 비동기코드를 예쁘게 만들어주는 방법들은 일단 예쁘지 않은 코드에 고통받아본 경험이 있는 상태에서 받아들일때 그 필요를 더욱 공감할 수 있기 때문에 배제했습니다.
초심자를 조금 지난 분들이라면 Promise에는 then 이라는것이 있습니다. 이 then을 사용하는 대신 async/await 를 사용합시다.
---------------------
에러처리를 하는 방법이 제공됩니다
try{}catch{} 라는것인데
알면 좋습니다
그런데 모른다고해서 막 뭘 절대 못만들고 그러는건 아닙니다
---------------------
이외에 더 있을 수 있는데 우선 생각나는 것들에 대해 이야기해봤습니다
이 이야기는 앞서 언급했듯 대상자가 정해져있습니다.
스스로 생각한대로 무언가 만들어가는 경험을 못해본 분들이 최소한의 것만 익히고 무언가를 해보는데에 있어서 필수적인 내용들만을 선정한겁니다.
이것들을 익히고 무언가를 해 나가는 경험을 해 나가게 되면 그때 스스로에게 무엇이 필요할지 무엇을 공부해야할지에 대한 판단을 어느정도는 스스로하는것이 가능해질 수 있습니다
또한 위에 선정한 필수요소들만으로 다양하게 만들어보면서 익숙해지고 나면, 그 외의 배제되었던 것들을 배우는 것은 처음에 아무것도 할줄 몰랐을 때보다 여유가 생겨서 그걸 배우는게 큰 문제가 아니게 됩니다.
어느정도 기본 개발의 감이 생긴 시점에서 부족한 부분을 채워넣는것은 하려면 얼마든 할수 있는것이 되는것입니다.
처음부터 한번에 모든걸 다 잘할 수는 없습니다
우선순위를 정해서 먼저 필수적인것을 익혀서 뭐라도 할줄아는 상태가 되는게 중요합니다.