클라우딩 어플리케이션 엔지니어링 TIL Day 26 - Node.js 기초

오늘은 2월의 시작이다

2월의 시작을 맞이하여 오늘부터 리액트 강의가 시작된다

옛날에 직접 구매해서 봤던 강의와 동일한 내용이라 복습하는 차원에서 기초부터 보면서 다시 한번 리액트의 개념에 대해 정리하고 간단한 토이 프로젝트를 만들어보려고 한다

2월도 화이팅!

---

# React 소개

# React 란?

지금은 Meta가 된 Facebook이 개발한 오픈소스로 자바스크립트의 UI 라이브러리이다

즉, 자바스크립트를 알아야지 리액트를 쓸 수 있다

 

# Node.js란?

자바스크립트는 어떻게 실행될까?

브라우저에 내장되어 있는 자바스크립트 엔진을 이용하여 실행된다

하지만 브라우저들은 서로 다른 엔진을 사용한다

브라우저 종류

아래는 각 브라우저 별로 사용하는 내장 엔진의 종류이다

브라우저별 엔진 종류

크롬 브라우저가 가진 v8이 가장 대표적인 자바스크립트 엔진이다

Node.js는 이 v8엔진을 이용하여 자바스크립트를 어떤 환경에서든 실행시켜주는 자바스크립트의 실행환경이다

Node.js의 개발로 인해서 기존에는 자바스크립트 전용 엔진에서만 실행될 수 있던 것이 어디서든 실행 가능하게 바뀌며

자바스크립트의 한계가 사라졌다

간단한 기능 구현을 위해서 사용되던 자바스크립트로 웹서버도 개발이 가능해진 것이다

 

# 리액트와 Node.js

리액트는 브라우저에서 동작하는 복잡하고 여러가지 동작을 하는 js 파일을 쉽게 만들어주는 프레임워크이다

리액트로 만든 웹사이트를 웹 어플리케이션이라고 부르며

리액트 역시 Node.js 기반이다

 

# Node.js & VsCode 환경 설정

# Node.js 설치

1. node.js 사이트의 다운로드 클릭

안정적인 LTS 버전으로 자신에게 맞는 OS 파일을 설치한다

2. 설치 완료 후 터미널에서 확인

node -v

나의 node version

 

# VsCode 설치

1. Vscode 사이트 다운로드 클릭

각자의 OS에 맞는 다운로드 파일 클릭 후 설치하기

 

# VsCode 확장 프로그램

1. Prettier

소스 코드 자동 정렬 및 format 맞춰줌

 

2. Material Icon Theme

단축키 ctrl + shift + p 를 누른 후 theme를 입력한다

Material Icons : Activate Icon Theme 를 눌러 해당 extension을 활성화 시킨다

 

# Node.js 기초

CLI 환경에서 JS 파일 실행 시킬 수 있다

node 실행시킬파일명.js

//실행 결과가 terminal에 나옴

 

# js 파일 내보내기

module.exports 키워드를 사용해서 모듈을 내보낼 수 있다

해당 모듈을 사용할 파일 내에서는 require 키워드로 받는다

// 계산 기능을 하는 파일
const add = (a , b) => a + b;
const sub = (a , b) => a - b;

module.exports = {
	modulesName : "calc module",
    add : add, 
    sub : sub,
  };

// calc 파일을 사용할 index.js
const calc = require("./calc");

console.log(calc.add(1, 2));
//3

---

# 새로 알게 된 점

리액트와 Node.js에 대한 기본 개념을 다시 정리할 수 있는 시간이었다

단순히 해당 프레임워크를 사용하는 것에서 그치지 않고 그 프레임워크가 어떤 이유 때문에 생겨났으며 어떤 역할을 하기 위해서 만들어졌는지 등에 대한 것을 알고 사용하면 더 도움이 될 것 같다

이번 강의에서 새롭게 알게 된 것은 js 파일을 내보내는 방법이었다

export default 를 사용해서 내보내는 방법만 알았는데 module.exports 를 사용해서 내보내고 require로 받을 수 있다는 것은 처음 알게 되었다

하나 또 배워가는 유익한 시간이었다