이 글의 결론은 자바스크립트로 무엇을 하는가에 대한 결론이다.
솔직히 최근까지 웹 프로그래밍의 목적성이 없었던 것 같다.
왜 자바스크립트를 공부했는지. 왜 리액트를 사용하였는지.
결국 리액트와 자바스크립트로 무엇을 하려는지에 대한 목적이 불분명했었다.
웹페이지로 서비스를 제공하기 위해서? 그건 html이나 웹 퍼블리싱으로도 가능하지 않은가?

결국 자바스크립트와 리액트를 가지고 무엇을 만드는 것이 아닌 무엇을 하는건지에 대한 명확한 대답을 모르니 계속 빙글빙글 도는 느낌이였다.
단지 프론트엔드 개발자가 되기 위해서, 웹 어플리케이션을 구현하기 위해서라는 모호한 목적만 가지고 있었다.
그래서 그동안 자바스크립트의 개념을 파고 파도 결론은 왜 이런 개념이 있는건데? 라는 자문으로 귀결되었다.

프론트엔드 개발자로서 서비스를 높은 퀄리티로 구현하느 것도 중요하지만
결국 내 코드가, 지금 내가 하는 개발이 궁극적으로 어떤 일련의 과정을 거쳐 구현이 되는지 아는 것도 중요하다는 생각이 들었다.
그래서 자바스크립트의 언어적 특성과 엔진이 코드를 해석하고 번역하는 과정 (간단하게만)
그리고 그 특징과 과정으로 인해 마주치는 대표적인 이슈들에 대해서 정리해보면서
결론적으로 자바스크립트 코드로 무엇을 하는지에 대한 결론을 내보자.

1. 자바스크립트가 뭔데?

간단하게 자바스크립트는 웹 브라우저 위에서 동작하는 언어다.
즉 웹 브라우저에서 HTML, CSS를 동적으로 제어하기 위해 만들어진 언어다.
그럼 동적으로 제어한다는건 무엇을 말하는 것일까?

2000년대 초반 웹사이트와 현재 웹사이트를 비교해보자.
요즘은 뱅킹 사이트에 로그인하면 자동 로그아웃까지 남은 시간을 보여준다.
또한 회원가입시 일정 조건에 맞지 않으면, 예를 들어, "비밀번호는 8글자 이상 입니다." 등의 경고를 띄워주며 동적으로 보여주면서 상호작용한다.
과거의 웹사이트는 어떠한가?
이런 경고창이나 알림창이 전혀 없었다. 즉 상호작용이 없다고 생각해도 무방하다.

2. 자바스크립트는 왜 쓰는데?

이런식으로 웹사이트에 생명을 불어넣어주는 상호작용을 자바스크립트라는 언어로 하는 것이다.
HTML과 CSS로 웹 사이트의 구조를 잡는다면 자바스크립트는 그 구조로 정적인 상호작용을 만들어 내는 것이다.
기억해야 할것은 바로 HTML을 변화시키거나 반응하게 하는것이라고 생각하면 된다.
그 이유는 자바스크립트의 코드가 정적인 html을 반응하게 하거나 새롭게 추가 시켜주기까지 할 수 있기 때문이다.

이렇게 웹 페이지가 발전해 나가면서, 즉 자바스크립트로 웹 페이지를 동적으로 만드는일이 가능해지면서, 하나의 이슈가 생겼다. (아마도?)
그건 바로 코드의 가독성이 떨어지는 것인데 html코드와 자바스크립트 코드가 각각 다른 파일에 위치하면서 UI에 집중하기 힘든 구조이기 때문이다.
(별도의 자바스크립트 파일을 만들어서 html <script>라는 태그의 src로 넣어줘야 한다.)
html 태그를 직접적으로 호출 또는 조작해야하고 html에 변경이 생기면 html 전체를 다시 읽어들여야 하기 때문에 어플리케이션의 무게는 무거워지고 작동의 흐름이 복잡해질 수 밖에 없다는 이슈가 생겨났다.
그 때 혜성같이 (아마도) 나온 라이브러리가 바로 리액트다.

3. 리액트가 뭔데?

리액트는 자바스크립트 라이브러리로서 다양한 편의성을 제공한다.
이 글에서는 가볍게만 알아보는 것이기 때문에 간단하게만 정리해보겠다.
먼저 JSX문법을 통해 UI에 더 집중할 수 있는 구조로 프로그래밍이 가능해졌다.
예전에 UI와 동적움직임에 관한 파일과 코드가 분리되어 있었다면
리액트에서는 JSX문법으로 인해 한 파일에서 한 UI에 대해 모두 작성할 수 있게 됐다.
html 태그에 접근하는 방법이 매우 쉬워졌다.
가상의 카피본을 사용하여 변경점이 생긴 부분을 (자바스크립트로 동적인 상호작용을 구현이 시작되거나 완료된 부분) 알아채서 실제의 변경된 부분만 고쳐준다.
이 말은 즉슨, 바닐라 자바스크립트로 html 태그에 직접 접근하여 조작할 때는 html 태그 전체가 영향을 받았지만 리액트는 변경된 부분만 콕 찝어서 접근하여 조작한다.

정리해보자면
자바스크립트는 정적인 웹 페이지를 동적으로 만들 수 있는 기능을 제공하여 많이 쓰이게 되었다.
이 뿐만 아니라 홈페이지에 들어가는 각종 리소스들을 (사진, 글 또는 각종 데이터들)
웹 어플리케이션에 보관할 필요 없이 서버와의 통신으로 받아올 수 있게 되어 성능면에서도 개선이 되었다.

4. 리액트는 왜 쓰는건데?

이런 자바스크립트의 등장으로 웹페이지들은 동적으로 변했지만
가독성과 UI에 집중할 수 없는 어플리케이션 구조 때문에 리액트라는 라이브러리가
각광받게 되었는데 리액트에서 사용할 수 있는 JSX 문법으로 인해 html 파일이 아니더라도 html 코드를 작성하여 같은 위치에서 자바스크립트 코드를 입힐 수 있게 되었다.
또한 예전에는 직접 html 파일의 element에 접근하여 자바스크립트 코드를 입혀야 했지만
리액트의 등장으로, UI의 세분화 즉 html element를 세분화하여 사용할 수 있게 되어
UI에 더 집중할 수 있는 환경이 만들어 진 것이다.
그리고 리액트가 제공하는 htmle 엘리먼트에 대한 가상본으로 인해 실제 변경된 부분에만 접근하게 되어 어플리케이션의 성능에 최적화를 이룰 수 있게 된 것이다.

그렇다면 결국 리액트는 자바스크립트와 html을 더 편리하게 사용할 수 있게 만들어준 라이브러리다.
그럼 리액트를 사용하여 자바스크립트로 html에 무엇을 하는 것일까?
결국은 html element에 접근하여 무언가를 하는 것이다. 이것이 자바스크립트의 사용 목적이다. 그리고 그것이 바로 DOM에 접근하여 동적으로 변경시켜 주는 것이고 그것을 리액트가 편리하게 구현할 수 있게 해준다.

5. DOM이 뭔데?

DOM은 Document Object Model의 줄임말으로서, 문서 객체 모델로 불리며 HTML 문서에 접근하기 위한 일종의 인터페이스, 즉 접점이다.
문서 내의 모든 요소를 정의하고, 정의된 각각의 요소에 접근하는 방법을 제공 한다.

쉽게말해, DOM의 모습은 트리 형태로서 자바스크립트로 하여금
1) 새로운 HTML 요소나 속성을 추가
2) 존재하는 HTML 요소나 속성을 제거
3) HTML 문서의 모든 HTML 요소를 변경
4) HTML 문서의 모든 HTML 속성을 변경할
5) 문서의 모든 CSS 스타일을 변경
6) HTML 문서에 새로운 HTML 이벤트를 추가
7) HTML 문서의 모든 HTML 이벤트에 반응
할 수 있게 해줘 웹 페이지를 동적으로 만드는데 알아야할 중요한 개념이다.
위 일련의 행위를 하는 것을 DOM에 접근한다 라고 흔히들 말한다.

리액트 같은 라이브러리나 비슷한 기능을 제공하는 프레임워크들 (Vue / Angular)이 나오기 전에
DOM에 접근을 하려면 DOM API들인 method와 property들을 자바스크립트로 사용해서 접근해서 1~7번의 행위를 해야했는데 html 파일과 자바스크립트 파일이 분리되어 있었기 때문이다.

하지만 리액트의 등장으로 컴포넌트 (view에서 최소한의 UI 단위로 나눠진 블록) 단위로 html과 자바스크립트를 작성할 수 있게 되어 별로의 다른 파일이 존재할 필요가 없어진 것이다.
또한 JSX문법은 자바스크립트와 html을 함께 사용할 수 있게 해주어 DOM에 접근하기 위해 method와 property로 접근할 필요없이 직접 코딩을 하면 된다.
마지막으로 리액트가 제공하는 가상본, 즉 가상 DOM은 실제 DOM에 접근하기 전에 바뀐 부분만 체크하여 그 부분의 실제 DOM 요소에 접근하여 조작하게 해주어 성능면에서도 장점을 보인다.

정리하자면 DOM은 책 한권을 한장 한장 분리 시켜서 같은 대단원별로, 그 안에서 소단원 별로 so on.. 트리 구조로 바닥에 펼쳐놓는 것이다.
JSX문법 이전에는 그 한장 한장을 실제로 찾아서 (tree 구조 이기에 root, 최상단부터 찾아 들어가게 된다) 수정사항을 수정해야 했다면 리액트는 그 한장 한장을 각 파일로 컴퓨터에 저장할 수 있게 해줘 작성과 수정에 편리함을 준 것이다.

7. 프론트엔드 개발자의 본질은 뭔데?

그럼 처음 질문으로 돌아와 자바스크립트로 무엇을 하는가에 대해 잘 생각해보면,
더 나아가 프론트엔드 개발자가 하는 일을 생각해보면 DOM을 조작하는 일이다.
DOM을 조작하는 일은 정적인 html코드에 각종 action을 추가시키고, 반응시키고, 수정시키고 더 나아가 그들의 styling도 변경하고 삭제하고 추가하는 것이다.
그러나 바닐라 자바스크립트로는 이슈가 발생하기에 조금 더 편리하게 개발하고 유지 보수하기 위해 리액트같은 라이브러리를 사용하는 것이다.
그럼 결국 DOM을 조작하는 일은 html을 가지고 이리 저리 노는 것(은 아니지만)이라고 볼 수 있겠다.
(물론 단편적인 프론트엔드가 무엇을 하는가에 대한 대답이다. 코드 성능, 어플리케이션 최적화 등 신경써야할 부분은 무수히 많다.)
궁극적으로 UI를 html로 구성을 하고 interactiv하게 유저와 상호작용을 할 수 있는 interface를 코드로서 프로그래밍 하는 것이 프론트엔드가 해야 할 일이다.
그 안에는, 앞서 말한바와 같이, 무수히 많은 고려사항이 존재한다.
데이터를 효율적으로 받아오고, 어플리케이션 내부에서 상태를 효율적으로 관리해야하고 에러와 버그와 끝없는 싸움 등등 너무 많다.

또한 SinglePageApplication 이라는 리액트의 특성도 고려해봐야 한다.
모든 페이지의 script를 DOM으로 나타내는 것이 아닌 현재 필요한 view UI에 관한 스크립트만 존재한다.
한장에 페이지를 그렸다가 지웠다가 하는 것이라고 생각하면 된다.
그럼 결국 SPA도 최적화와 관련된 있지 않을까?
그럼 결국 자바스크립트도 how가 아닌 what 목적에 조금 더 초점을 맞춰야 되겠다는 생각이 든다.

근본적으로 위의 행동들은 자바스크립트로 프로그래밍 하게 된다.
그렇기 떄문에 자바스크립트의 궁극적인 목표와 목적에 대해 명확히 알고 있으면
위의 여러 고려사항들로 인해 공부해야할 자바스크립트 중급 이상의 개념들에 대해 조금 더 이해도가 높아지지 않을까 하는 개인적인 희망사항으로 정리 해 보았다.
그리고 how에서 what으로 생각의 중점을 조금씩 옮겨봐야 겠다는 생각이 들기도 한다.

---

다음글에서는 위에서 말한 일련의 행위들로 생겨나는 issue들을 자바스크립트의 실행 방식과 함께 정리해볼 예정이다.