Javascript, 왜 중요한가?

웹사이트의 코어, 자바스크립트

HTML, CSS, Javascript (이하 자바스크립트)는 웹사이트 개발에서 떼려야 뗄 수 없는 존재들이다. HTML이 없으면 사이트의 골격을 만들 수 없고, CSS가 없으면 멋지게 보이는 사이트를 만들 수 없다.

 

자바스크립트가 없으면 무슨 문제가 있을까. 자바스크립트 없이 웹사이트를 만들게 되면, 그 사이트는 단순한 웹 문서에 지나지 않는다. 그저 눈으로 읽고 보는 수준에 그치게 된다. 이는 웹사이트를 사용하는 사용자들에게 굉장히 지루한 경험이 될 거다.

 

예전에는 인터넷 속도나 컴퓨터 사양 등의 문제로 애니메이션이나 기능을 최소화했지만, 지금은 그런 부분들이 많이 해소되어 다양한 애니메이션과 기능을 활용해 사용자들에게 흥미롭고 재미있는 경험을 제공하고 있다.

 

- 애니메이션과 기능을 활용해 홍보용 페이지를 만든 애플

https://www.apple.com/kr/iphone-se/

iPhone SE

아이폰 SE를 홍보하는 애플의 웹 페이지인데, 아이폰을 소개하는 페이지가 단순하게 텍스트와 이미지로만 이루어져 있다면 어떨 것 같은가? 생각보다 지루한 기분으로 페이지를 아래로 내려갈 것이다. 하지만 현재 웹 페이지를 보면 마우스를 아래로 스크롤할 때마다 다양한 애니메이션이 나타나 웹 페이지를 보는 동안 지루함이 어느 정도 해소된다.

 

이처럼 마우스 스크롤을 통해 특정 페이지 위치에  도달했을 때 실행되는 ¹인터랙션은, 왜 자바스크립트가 웹사이트 개발에 필수적인 요소인지 알려준다.

 

¹ 인터랙션이란, 사용자가 제품이나 서비스 간의 상호작용을 말한다. 예를 들어 메일 보내기 버튼을 누르면 메일이 보내지는 것이 사용자와 서비스 간의 상호작용이다.

1. 자바스크립트를 공부하려면?

현장에서 개발을 하고 있다 보면 자바스크립트를 공부하라고 강조하는 사람들이 정말 많다. 하지만 이렇다 할 커리큘럼이 제공되지 않는 것이 사실이고, HTML5 + CSS3 + Javascript 패키지로 나오는 책에서는 자바스크립트를 집중적으로 배우기 어려운 것도 사실이다. 원래 개발 공부 자체가 책에 의존해서 익힐 수 없는  분야이긴 하지만 어느 정도, 개념을 파악하며 공부할 필요는 있다.

 

그럼 자바스크립트를 공부하려면 어떻게 해야 할까?

 

1.1 나는 프로그래밍을 전혀 몰라요. (입문자)

프로그래밍을 전혀 모르는 상태에서 자바스크립트를 배우게 된다면, 그전에 프로그래밍에 필요한 기본적인 이론과 개념을 먼저 숙지하는 게 도움이 된다. 학원을 다니고 있다면 학원에서 그런 모자란 부분을 채워줄 수 있고, 독학을 한다면 주변 지인들에게 가르침을 부탁하거나 온라인 강의를 통하여 어떤 방식으로든 숙지하도록 하자.

 

개인적으로 누군가에게 자바스크립트를 가르쳐줄 때 프로그래밍을 전혀 모르는 사람은 프로그래밍에 대한 기초 중의 기초를 가장 먼저 알려주었는데, 그 내용은 다음과 같다.

 

- 변수 (Variable)

- 조건문 (if문, switch문)

- 반복문 (for문, while문)

- 함수 (Function)

 

이 네 가지가 프로그래밍의 핵심이다. 이는 자바스크립트뿐만 아니라 모든 프로그래밍 언어들도 해당된다. 프로그래밍에 입문하는 첫 언어로 자바스크립트로 시작하는 것은 권장하지 않지만, 어떤 언어로 시작하든 본인에게 필요한 언어를 익히는 게 더 중요하므로 크게 신경 쓰지 않아도 된다.

 

이 글은 자바스크립트의 중요성과 공부법을 알리는 것이 목적이므로 더 자세한 부분은 공부 편에서 다루도록 하겠다.

 

1.2 자바스크립트로 기본적인 예제는 따라가지만, 응용하는 법이 어려워요. (초급)

필자도 그랬지만, 사실 이 부분에서 많은 분들이 어려움을 느끼는 부분이라고 생각한다. 자바스크립트로 기본적인 예제를 따라가는 데 문제는 없지만, 여기서 더 한 단계 올라가는 법을 어려워한다. 개인적인 경험을 통해 중급자로 레벨 업하게 된 방법을 소개해보자면, 다시 책을 통해 자바스크립트의 이론과 개념을 다져둔 후 많은 실습 예제를 코딩해본 것이었다.

 

① 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

자바스크립트의 바이블이라고 불리는 책이 있는데, 제목은 『프론트엔드 개발자를 위한 자바스크립트 프로그래밍』이다. 내 책장에 꽂혀있는 책들 중 두께로는 부동의 넘버원을 차지하고 있다. 그만큼 자바스크립트의 모든 것이 담겨있는 책이니 더 깊이 있게 공부를 하고 싶다면 이 책을 추천한다. 단 가격이 만만치 않으니 서점에서 직접 보고 사는 것을 권한다. (아래 링크를 통해 구매한다면 필자에게 작은 도움이 된다!)

 

 

다음으로 실습 예제를 코딩했던 사이트를 소개하기 전에, 먼저 바닐라 자바스크립트Vanilla Javascript에 대해 얘기해보고자 한다. 비전공자의 경우 많은 분들이 학원에서 웹 퍼블리싱 혹은 프론트엔드 개발 과정을 수료하는 것으로 알고 있다. 내가 학원에 다니던 시절에도 그랬지만, 여전히 많은 학원들이 자바스크립트로 프로그래밍의 기초를 가르쳐준 후 웹사이트에 적용하는 것은 제이쿼리jQuery로 적용하는 것으로 알고 있다. 개인적으로는, 많이 아쉬운 부분이다.

 

- 제이쿼리와 바닐라 자바스크립트

제이쿼리라고 하면 굉장히 질색하며 제이쿼리를 쓰면 시대착오적이라고 하는 사람들이 있는데, 그건 잘못된 거다. 프로젝트나 업체의 성향에 따라 필요할 경우 사용할 수 있으므로 배우고 싶다면 배우는 게 좋다. 제이쿼리는 자바스크립트 프레임워크가 나오기 이전 수많은 웹사이트들에 사용된 편리한 라이브러리인 것은 분명한 사실이다. 그리고 여전히 현업에서도 활용되고 있다.

 

다만 많은 기업들이 '탈 제이쿼리'를 진행하고 있는 만큼 바닐라 자바스크립트의 중요성이 더 높아지고 있다는 점은 인지하길 바란다. 탈 제이쿼리를 진행하는 것에 대한 글은 별도로 다뤄보도록 하겠다.

 

바닐라 자바스크립트는 말 그대로 순수한 자바스크립트라는 뜻인데, 별도의 라이브러리 혹은 프레임워크를 사용하지 않은 자바스크립트를 말한다. 바닐라 자바스크립트의 공식 홈페이지에 들어가서 다운로드를 하여보면 파일 크기가 0kb이다. 응? 파일 크기가 0kb?

 

우리는 이미 자바스크립트를 사용할 때, 별도의 설정을 하지 않는다는 것을 알고 있다. 그 이유는 크롬, 익스플로러, 사파리, 오페라 등 웹 브라우저에 이미 자바스크립트가 내장되어 있기 때문이다.

 

2018년 5월, 프론트엔드 개발자로 먹고살기라는 강좌를 들은 적이 있다. 이때 들었던 내용 중 일부를 소개한다.

프론트엔드 개발자를 채용을 하려고 프론트엔드 개발자와 면접을 보며 코딩 테스트를 진행했는데, 테스트 내용은 바닐라 자바스크립트로 아날로그 시계를 만들어 보는 것이었다. 그런데, 프론트엔드 개발자가 해당 코딩 테스트를 통과하지 못했다.

이 개발자는 신입이었을까? 아니다. 7년 차(!) 프론트엔드 개발자였다. 개인적으로 당시 3년 차에 접어들며 나름 자신감도 있었는데 그것이 근거 없는 자신감이라고 깨닫는 계기가 되었다. 당시에는 많은 국내 개발자들이 제이쿼리 없이 개발하는 것을 힘들어하는 경향이 있었는데, 이 사례는 이를 방증한다.

 

이후 바닐라 자바스크립트에 대한 공부 필요성을 느꼈고, 이를 공부하기 위해 바닐라 자바스크립트 예제를 물색했다. 그리고 굉장한 사이트를 발견할 수 있었다.

 

② 바닐라 자바스크립트 30일 코스

https://javascript30.com/

JavaScript 30

No Frameworks, No Compilers, No Librarys, No Boilerplate!

위 사이트 상단에 적혀있는 문구다. 30일 동안 일일 예제로 바닐라 자바스크립트로 예제를 풀어보는 것이다. 필자도 모든 코스를 끝내진 못했는데 (게으름) 기회가 된다면 일일 예제를 풀이해보도록 하겠다. 안타깝게도 모두 영어다.

 

1.3 무슨 기능이든 어떻게든 만들 수는 있어요. 근데 이게 좋은 코드인지 모르겠어요. (중급)

개인적으로 필자는 이 단계에 있다고 생각한다. 이 단계에서 고민하는 거라면 코드 품질일 거라고 생각한다. 어떻게든 기능은 만들 수 있다. 작동도 되고, 버그도 잡을 수 있다. 근데 이게 코드를 이렇게 쓰는 게 맞을까? 더 간결하게 할 수는 없을까? 하는 의문들이 붙는 시기다.

 

즉, 효율적으로 개발하는 방법에 대한 고민을 하는 것이다. 이 단계가 되면 자신만의 방식이 있을 것이고 공부하는 방법도 다양할 테니 개인적인 경험담은 담지 않겠다.

 

1.4 기능에 대한 설계와 임기응변 (고급)

프로그래밍을 할 때 원칙에 기반한 설계와 다양한 사용자들에 대한 유연한 대응이 고급 단계의 개발자에게 필요한 부분이라고 생각한다. 결국 이 경지에 오르면, 원론적인 부분으로 돌아오게 된다.

 

효율적인 코딩을 위해선 설계가 필요하며, 프로그래밍 후 테스트 혹은 운영 단계에서 다양한 문제들이 발견된다. 이런 상황들에 대한 처리와 책임을 지는 것이 가장 필요한 덕목인 거다.

 

지금까지 자바스크립트 단계 별 공부법에 대해 서술해보았다. 단계 별로 나눈 것은 주관적으로 나눈 것이라 참고만 하되, 가장 중요한 것은 본인이 현재 어느 위치에 해당되는지 판단하고 더 나은 자바스크립트 개발자가 되고자 한다면, 단순하게 연차만 쌓이는 개발자는 되지 않을 것이라 믿는다.

 

2. 자바스크립트, 앞으로 더 중요해진다.

 

자바스크립트 프론트 프레임워크 3대장

프론트엔드 개발의 트렌드를 이끌고 있는 리액트, 앵귤러, 뷰로 대표되는 프론트 프레임워크 모두 자바스크립트 기반으로 이루어져 있다. 자바스크립트를 잘 다룰 경우, 각 프레임워크에 맞는 문법과 흐름만 공부하면 개발하는 데 큰 어려움이 없다.

 

자바스크립트는 웹 생태계를 모두 독점했고, 프론트엔드 단계에서만 사용되었던 한계를 넘어 백엔드 단계에서도 본격적으로 활용되기 시작했다. 이는 자바스크립트 하나만 잘 다뤄도 프론트와 백 두 분야 모두 개발이 가능하다는 이야기가 된다. 물론 각 분야에 대한 깊이 있는 지식이 동반되어야 하지만 말이다.

 

자바스크립트 백엔드 진출의 일등공신, NodeJS

 

필자가 좋아하는 말 중에 아마존 CEO 제프 베조스의 말이 있다. 변하지 않는 것에 주목하라. 변화가 많을수록 본질적인 부분에 집중하라는 의미다.

 

우리는 미래를 예측하기 힘들 정도로 변화가 빠른 시기에 살고 있다. 웹 또한 마찬가지로 하루가 멀다 하고 새로운 언어, 기술 등이 등장하며 혼란스럽게 한다. 그래서 더 공부하기 어려운 부분이 있다. 하지만 이 모든 변화의 중심에 있는 것이 자바스크립트다.

 

그런 만큼 자바스크립트의 본질을 공부하고 연구해나간다면 다양한 변화에 조금은 더 기민하게 대응할 수 있지 않을까.