그럼에도 불구하고 자바스크립트-2
이상한 나라의 자바스크립트
이 글은 자바스크립트에 대해 소개하는 글입니다.
총 3부작으로 작성하려고 합니다.
이전 글: https://brunch.co.kr/@princox/259
0. 리액트.. 이어서
https://medium.com/codex/the-javascript-framework-war-is-over-bd110ddab732
페이스북이 만든 리액트 라이브러리는 프론트엔드 개발 시장을 빠르게 점령했습니다.
Angular, VueJS, SvelteJS가 있지만, 여전히 우승자는 리액트로 꼽힙니다.
여러 가지 이유가 있습니다.
서버 사이드 렌더링을 지원하는 Next.js, 정적 페이지 생성기인 Gatsby.js와 같은 타 프레임워크 때문이 아닙니다.
물론 모바일을 타깃 하여 만든 React Native는 강력하게 리액트 생태계를 지지하는 프레임워크지만,
그것보다는 리액트가 제공하는 "철학"의 영향이 크다고 생각합니다.
위의 미디엄 글은 여러 가지 리액트의 장점을 이야기하지만, JSX에 대해서 이야기합니다.
사용자의 코드와 얽히지 않고 큰 수정 없이 동일한 코드가 다른 프레임워크에서 작동이 가능하다는 점입니다.
그래서 리액트가 프레임워크의 승자라고 말합니다. (리액트는 엄밀히 "라이브러리"입니다.)
사용자 코드 내에서 돌아가지고 않고, 손쉽게 조각으로 재사용 가능하니까요.
이제 제 주변에는 리액트를 먼저 배우는 사람들이 생기고 있습니다.
자바스크립트를 모르는 데도 리액트라는 것을 먼저 배우고 자바스크립트를 배웁니다.
(한 때 안드로이드를 먼저 배우고 자바를 배웠던 제 자신이 생각나네요. 생각보다 많이 힘들지만 재밌습니다.)
당연히 자바스크립트 문법으로 작성되는 리액트 라이브러리가,
이상하게도 웹 페이지를 쉽게 만들어줄 수 있다는 이유로 역방향으로 학습이 되고 있는 것입니다.
내가 무엇을 만들고 싶은지를 먼저 수립하고, 그다음에 그것에 맞춰 자바스크립트를 배우는 식입니다.
* JSX란?
페이스북이 만든 문법으로 XML 형태를 차용하여 ECMAScript로 확장할 수 있는 언어.
엔진이나 브라우저가 공식적으로 채택하기 위한 언어가 아니라 다른 형태로 변환되기 위한 언어로 전처리가 필요함.(Preprocessors)
공식문서: https://facebook.github.io/jsx/#sec-intro
1. 이상한 나라의 자바스크립트
다시 자바스크립트로 돌아옵니다.
저는 앞에서 자바스크립트라는 언어의 역사와 개괄적인 이야기를 했습니다.
이 글을 읽으시는 분이 모두 기술자는 아니지만, 언어 그 자체를 톺아보는 것은 어떨까 싶습니다.
자바스크립트는 다른 언어와 달리 결과를 예측하기도 어렵거니와, 일관성도 없는 경우가 많습니다.
대표적으로 유튜브 생활코딩 채널의 이 Shorts의 사례입니다.
자바스크립트는 특히 타입(데이터형태)이나 특정 Bool을 판정할 때 리턴값이 이상한 경우가 많습니다.
&&(AND) 연산자를 이렇게 작성하는 경우에는 false일 경우에는 false가 출력되지만,
조건이 참인 경우에는 뒤의 값을 출력합니다. 조금 이상하지 않나요?
자바스크립트는 또 축약형 표현이 많습니다. 예를 들어서 이런 것입니다.
원래??로 표기되는 것은 nullish coalescing operator라고 불리는 것으로, 한글로 "nullish 병합 연산자"입니다.
이 경우는 이것에 할당을 하는 = 표기를 추가한 것으로, 병합 할당 연산자라고 합니다.
??로 표기하는 것으로 앞의 값이 null, undefined인 경우에는 뒤의 값을 할당합니다.
이런 표기 외에도 함수를 파라미터로 넘기거나, 함수 자체를 리턴하는 경우가 있습니다.
함수만 넘기는 경우가 있는가 하면, 함수를 직접 실행시키는 실행문을 넣는 경우가 있죠.
어쨌든 다양한 상황에서 한 번에 딱 알아보기 어려운 경우가 종종 있습니다.
얼마나 자바스크립트 문법이 복잡하면 자바스크립트에 대한 문제를 푸는 사이트도 있습니다.
2. Think big, Start small.
생각은 크게 하되 작게 시작하라는 말이 있습니다.
저도 한 때는 자바스크립트를 모두 섭렵하고 웹 개발을 하려고 했습니다.
웹 개발을 위한 자바스크립트, 모던 자바스크립트 딥 다이브, 자바스크립트는 왜 그 모양일까 등 자바스크립트에 대한 온갖 책을 사서 읽곤 했습니다.
그러고는 다시 깨닫게 됐습니다.
프로그래밍은 암기와 공부 자체를 위한 것이 아니라 제품을 만드는 과정을 즐기는 것이 선행되어야 한다는 것을.
일단 간단한 To-do list를 만들어보고, 그다음에는 MBTI 같은 테스트나 퀴즈 사이트를 만들어 보는 것은 어떨까요?
랜덤 유튜브 영상을 보여주는 사이트도 좋고, 내가 좋아하는 것을 덕질하는 백과사전도 좋습니다.
일단 간단하게 만들기 시작하면 자바스크립트는 단숨에 여러분의 곁으로 다가올 것입니다.
추천해 드릴 만한 무료 코스도 있습니다.
바로 javascript 30이라는 프로젝트인데요. 아래에 링크를 달아놓겠습니다.
https://github.com/wesbos/JavaScript30
자바스크립트로 만든 30개의 프로젝트로 각각에 대한 영상과 모든 코드를 무료로 제공합니다.
처음으로 자바스크립트를 익힐 때 큰 도움이 될 것입니다.
다음 글은 WebGL, Web Assembly와 같은 자바스크립트와는 약간 다른 개념을 다루려고 합니다.
참고할만한 글
1. Javascript MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript
2. Javascript Info
