[웹 개발] Front 두 번 째 발자국 - Node.js, React, Express 이런 게 뭔데?

프론트 개발을 할 때 뭐가 뭔지 / 뭘 공부해야할 지

모르는 경우가 많아서 공부하는 데 어려움을 겪는다. (시작이 반인데 반을 못 하게 주저하게 된다.)

 

 그러니 효율적으로 지금 당장 시작할 수 있도록 설명해주고, 글의 마무리에는 HTML, CSS, JS를 어느 정도 안다면 뭘 공부해야할 지 알려주겠다!

 

https://roadmap.sh/frontend?r=frontend-beginner

Frontend Developer Roadmap: What is Frontend Development?

 

위의 링크를 따라가면 프론트 엔드 개발자의 로드맵(어떤 걸 공부하면서 나아가야할 지)을 볼 수 있다.

(다른 직군도 있으니 꼭 보면서 어떤 공부를 할 지 잘 모르겠다면 이걸 참고하고, 공부를 시작하도록 하자.)

 

 이제 기초적인 HTML, CSS, JavaScript에 대해서 공부를 해보았고, 간단한 프로젝트(SPA 같은 거. 그냥 페이지 꾸밀 수 있다 정도.)를 할 수 있을 정도라면, 어떤 공부를 계속해서 나아가야 할 지를 적어보는 것이다.

 

---

 

프론트 뭘 공부해야 할까?

프론트 엔드 기술의 기술 스택(개발 시 어떤 언어, 라이브러리 등등을 사용할지 모아 놓은 것들)은 정~~~말 다양하다.

 

하지만 요즘에 사용하게 되는 것들은 몇 가지로 주류를 이루며 안정기를 찾게 되었다.

 

프론트엔드 개발 언어로 작성 시 : TypeScript.

-자바 스크립트로도 충분히 좋지만, 타입 스크립트 개발 실력이 중요해졌다.(기술 스택의 변화로)

그래도 배울 때는 JavaScript를 토대로 공부하되, TypeScript로 개발하는 것을 주저하지 않도록 하자.

 

프레임 워크 부문 : React.

시장 점유율도 높은 프레임워크.

Node.js가 React의 프레임워크를 잘 사용할 수 있도록 잘 짜여 있기 때문에 Node.js를 함께 공부하면서 짜는 걸 추천한다. 거의 필수적으로 Node.js 알아둬야 한다.

 

-"엥? React는 라이브러리인데요?" 하는 분은 아래 글을 더 읽어주세요.

 

 

---

 

Node.js

위키피디아를 갖고오자.

Node.js는 크로스플랫폼 오픈소스 자바스크립트 런타임 환경으로 윈도우, 리눅스, macOS 등을 지원한다. Node.js는 V8 자바스크립트 엔진으로 구동되며, 웹 브라우저 바깥에서 자바스크립트 코드를 실행할 수 있다. (출처 : https://ko.wikipedia.org/wiki/Node.js)

 

 

간단하게, 자바스크립트를 읽어서 실행하는 환경이다.

 

V8 엔진을 JavaScript가 채용하면서 속도가 개선 됐다. 원래는 인터프리터로 읽게 되는데 JIT를 이용하여 빠르게 개선 됐다. (인터프리터 방식은 컴파일러 방식보다 속도가 느리다는 것을 알고 있을 것이다. 백준 문제 하나에서 파이썬과 C언어 작성된 코드들의 속도를 보면 알 수 있다. JIT는 조금 컴파일러를 활용한 것이다.)

 

 즉, 인터프리터와 컴파일러를 혼합한 형태라고 생각하면 이해하기 쉽다. 아무튼 추가적으로 OS가 다름에 따라 프로그램이 돌아가지 않을 수 있는데 그것을 해결하여 V8은 OS에 구애받지 않으며, 꼭 브라우저가 아니더라도(서버사이드 어플리케이션 등 범용적인 용도로 모듈 시스템을) V8이 Embedding 되어 있는 것이라면 JavaScript를 돌릴 수 있는 환경이다.(Common.js의 특성을 이어받았다.)

 

Node.js = V8(런타임 실행 환경) + libuv(라이브러리 이름)

 

자바스크립트 언어를 백 엔드 개발에서 사용하기 위한 것이라고 생각하면 된다.

 

한 줄 요약 :

Node.js를 이용하면 "프론트를 배우고, 백을 배울 때 또 다른 언어를 배우지 않고도 서버를 구축하여 백엔드를 완성할 수 있다!" (Node.js는 언어가 아닌 백을 만들 때 쓰는 도구라고 생각하자.)

 

+ 자바스크립트로 서버를 만들고 관리할 수 있게 도와주는 환경.

---

React

React는 JavaScript 라이브러리이다.

 

독립된 개발자들이 컴포넌트라는 블록 단위의 코드들을 조합하여 효율적으로 화면을 구성할 수 있다. 컴포넌트 단위로 개발이 되니 가독성도 좋으며, 재사용하기도 좋고, 유지보수 측면에서도 탁월하다.

 

자바 스크립트를 배우면서 리액트를 공부하면 효율적으로 화면을 만들 수 있다는 의미이다.

 

먼저, 라이브러리와 프레임워크의 차이에 대해서 알아보자.

프레임워크	라이브러리
소프트웨어 개발을 위해 도움을 주는 도구라는 공통점
특정 규칙과 구조가 있으며 그 틀을 통해서 개발 진행.	특정 기능을 수행하는 코드들의 집합.
어플리케이션의 흐름을 프레임워크가 제어함.	어플리케이션의 흐름을 개발자가 제어함.

 

 물론, 라이브러리의 있는 것들을 토대로 React FrameWork가 만들어지고 적절한 컴포넌트가 업데이트되고, 렌더링 된다.

 

 여기서 프레임워크라는 것은 통상적인 의미로 틀이라고 생각하자. 그래서 위의 프레임워크 부문에서 React가 좋다고 한 이유는 그것이다. React는 라이브러리로 다른 라이브러리 및 프레임워크들을 유연하게 받아들일 수 있다!!

 

한 줄 요약:

라이브러리인 리액트를 통해서 화면을 더 효율적이고 빠르게 만들 수 있다. Front의 JavaScript의 도구.

 

---

 

Express

Node.js의 웹 어플리케이션 프레임워크로 Node.js의 규칙에 따라서 웹 어플리케이션을 만들어주는 것이다.

 

프레임워크를 통해서 개발자들에게 코드의 구조를 통일할 수 있어 좋다는 점이다. 서버를 쉽게 만들어주는 것으로 이것도 Back이다.

 

---

 

앞으로의 공부 :

HTML, CSS, JavaScript를 어느정도 알게 됐다면, 리액트 라이브러리를 사용하는 법을 통해서 효율적인 프론트 개발을 하도록 하자.