Intro🚶
자바스크립트의 런타임 환경을 제공하는 Node.JS에 대해서 공부하는 날이었다. 보통 서버를 구현할 때 대부분은 express 라이브러리를 가져와 서버를 구축했었는데, Node.JS에서 제공하는 서버 관련 API를 사용하는건 너무나도 고통스러웠다. 그래도 이번 기회에 Node.JS에서 제공하는 API들을 사용해 fs 모듈이나 http 모듈 등을 공부하게 되어 상당히 재미있었다.
Week 1 ~ 2🌞
역시나 Node.JS를 알기 위해선 탄생 배경에 대해서 알아야 할 필요가 있다고 생각했다. 항상 새로운 지식을 배울 때 왜 배워야 하는지 이해가 되지 않는 경우가 있는데. 이러한 생각을 지우고 자연스레 받아 들이려면 탄생 배경부터 알면 유연성을 기르는 데 도움이 된다.
Node.JS 탄생 배경
1995년 수많은 웹 브라우저들이 자바스크립트 엔진을 탑재하고 개선하기 시작했었다. 대표적으로는 사파리의 Javascript Core, 익스플로러의 Chakara, 파이어폭스의 Spider monkey, 크롬의 V8 엔진등이 있다. 그중에서도 특히나 크롬은 JIT(Just-in-time Compilation)을 개발하면서 획기적인 성능을 끌어냈다.
(여기서 재미있는 사실은 익스플로러가 Edge라는 브라우저로 개편하면서 Chakara라는 엔진을 그대로 가져와서 쓰고 있는데 너무 구리다고 판단한 걸까?? 크롬의 V8 엔진으로 바꾸게 되었다.)
이렇게 웹 시장이 커지면서 JavaScript 개발자들의 거버넌스도 커지기 시작했는데. "라이언 델"이라는 사람이 JavaScript로 모든 걸 할 수 있으면 어떨까 하는 생각을 하게 되었고 2009년 Node.JS라는 프로그램을 세상에 내놓게 되었다. (대단쓰...👍)
Node.JS란??
Node.JS란 오픈 소스 프로그램이며, JavaScript로 런타임 환경을 제공한다 크로스 플랫폼이며 백엔드도 지원이 가능하다. 특히나 크롬의 V8엔진 사용하여 성능에 대해서도 보장할 수 있는 프로그램이다.
최근에 안 사실인데 Node.JS는 프론트엔드, 백엔드, 서버 뿐만 아니라 스크립팅이나 자동화도 가능하다는 사실을 알게 되었다.
왜 Node.JS를 배워야 할까?
일단 가장 큰 이유는 JavaScript라는 한 가지 언어로 프론트엔드와 백엔드를 같이 작업할 수 있기 때문이다. 여러 가지 서비스들을 보면 프론트엔드는 JavaScript, 백엔드는 Java나 Python등 두 가지의 언어를 배워야 한다는 게 불리하게 작용하는 점이 있다. 그 말은 즉 한 가지 언어에 대해서 깊게 알 수 있다는 점에서 생산성이 올라간다는 점이다.
두 번째로 JavaScript라는 언어는 강력한 커뮤니티가 형성되어있다. 그렇다는 말은 어떠한 어려움에 봉착했을 때 빠르게 극복할 수 있는 환경이 이미 조성되어 있으므로 배워야 할 만하다고 볼 수 있다.
세 번째로는 넷플릭스, 우버, 이베이, AWS, 페이팔, 카카오톡, 네이버 등 매우 큰 기업들이 Node.JS를 채택하고 있으므로 성능 보장은 물론이고 취업 시장에서도 수요가 충분히 있다고 볼 수 있기 때문이다.
네 번째로는 근본적으로 빠른 성능에 있다.
Node.JS의 특징
특징은 크게 4가지로 볼 수 있다.
- Javascript라는 언어로 Runtime 환경을 제공한다.
- 싱글 스레드로 동작한다.
- Non blocking I/O 이다.
- Event-Driven 이다.
하나씩 부연 설명을 달자면 첫째로 JavaScript로 Runtime 환경을 제공한다고 했는데. 이 말은 성능이 좋은 V8 엔진을 사용한다는 점에서 높은 성능을 보장한다.
둘째로 싱글 스레드로 동작한다는 말은 JavaScript라는 언어의 고유한 특징이기도 하다. 운영체제에서 여러 가지 어플리케이션은 여러 개의 프로세스로 분리하여 동작하게 되는데 각각의 프로세스에 시간을 할당하여 여러 프로그램을 왔다리 갔다리하면서 병렬적으로 처리하는 것처럼 보이게 만든다. (물론 어떠한 CPU를 사용하고 있느냐에 따라서 달라지는 부분도 있다.)
각각의 프로세스는 실행에 대한 로직을 담고 있는 코드, 함수를 실행할 때 순서를 기억하는 Stack, 그리고 동적으로 변화하는 데이터를 담고 있는 Heap, 전역변수 같은 다양한 데이터를 담고 있는 메모리 구역을 할당받게 된다. 그 프로세스 안에서도 스레드처럼 병렬적으로 나누어서 처리하는데 이 또한 병렬적으로 처리하는 게 아닌 왔다리 갔다리하면서 병렬적으로 처리하는 것처럼 동작한다. 하지만 항상 프로세스를 병렬적으로 분리하여 처리한다는 건 메모리에 부담을 줄 수 있다. 그래도 병렬적으로 처리할 수 있다는 건 하드웨어가 성장한 현대에 시점에서 아주 큰 장점인데... 이 시점에서 자바스크립트의 싱글 스레드는 단점이 아닌가 생각할 수 있다.
이러한 특징을 Node.JS는 Non blocking I/O 와 Event-Driven을 통해 극복했다.
Non-blocking 이란 비동기적이라는 말에 비유할 수 있는데 어떠한 실행을 할 때 기다리지 않고 콜백을 던져줌으로써 원하는 응답이 왔을 때 처리할 수 있다는 말이다. Event-Driven은 앞서 말한 Non-blocking I/O와 깊은 연관이 있는데 어떠한 이벤트가 발생했을 때 우리가 짠 로직이 담겨 있는 콜백을 실행한다는 말이다.
이와 관련하여 공부할 수 있는 키워드는 "Event-Roof" 이다. 이와 관련하여 정리를 따로 해봐야겠다.
Week 3 ~ 5🌞
리액트 라이브러리 중 하나인 styled-component 와 자체적인 라이브러리인 Redux에 대해서 배웠다. 평소 컴포넌트를 만들 때 module.css를 사용했었는데 가장 인기가 있다고 하는 styled-component를 사용하게 되었는데. 생각보다 직관적이어서 너무 좋았다. 컴포넌트 안에서 컴포넌트의 해당하는 HTML, CSS, JavaScript 를 전부 구현하게 되어서 굉장히 직관적으로 서비스를 이해하는 데에 도움이 될 거라고 느꼈다. 리덕스는 약간 벽이었는데 따로 공부해야 할 만큼 만만한 라이브러리는 아닌 듯 하다.
styled-component
styled-component는 리액트의 컴포넌트 개발환경에 직관적인 스타일링을 하기 위한 CSS 라이브러리이다. 컴포넌트 단위로 개발할 때 그 코드 안에 CSS를 기재함으로써 개발자들의 머리를 식혀줄 수 있는 요인이 강점이다.
styled-component의 특징은 크게,
- Automatic critical CSS
- No class name bugs
- Easier deletion of CSS
- Simple dynamic styling
- Painless maintenance
- Automatic vendor prefixing
이 있는데 종합적으로 얘기하면, 화면에 어떤 컴포넌트가 랜더링 되었는지 추적해 해당 컴포넌트에 대한 스타일을 자동으로 기입하고, 스스로 유니크한 className도 생성한다. 또 가비지 컬렉터처럼 사용하지 않는 스타일은 자동으로 삭제하며 컴포넌트 스타일을 상속할 수 있어서 일일이 CSS 파일을 뒤적거리지 않아도 된다.
보통 라이브러리를 사용할 때 의존성이 높아지고 라이브러리 자체를 공부해야 하는 시간을 많이 아까워하는 편이라 잘 사용하지 않는데 styled-component는 충분히 공부해서 활용할 좋은 라이브러리라고 판단했다. 앞으로 개발을 할 때 styled-component를 사용해 좀 더 좋은 코드를 쓸려고 노력해봐야겠다.
Redux
리액트를 개발하다 보면 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달해줄 때 props를 반복적으로 작성해야 하는 경우가 생기는데 이를 Prop Drilling 이라고 말한다. 이러한 불편함을 극복하기 위해 상태를 관리하는 자체적인 라이브러리 "Redux"가 존재한다.
리덕스는 크게 3가지의 동작으로 프로세스를 이해하면 되는데.
- action
- reducer
- store
이에 대해선 redux를 소개하는 공식문서 혹은 구글링을 통해 지식을 쌓아야겠다.
결론
다른 건 둘째치고 redux만 깊게 공부해봐야 겠다. 잠깐이나마 상태를 관리하는 redux를 사용했는데 굉장히 편했다고 느꼈기 때문이다. 하지만 순수함수를 통해 구조를 만들기 어려워 보이기 때문에 두렵기도 하다.
