4-1
자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행
ex) safari, firefox, chrome, edge, opera
기존의 자바스크립트는 html기반으로만 동작을 하다보니 웹사이트의 interaction을 수행하는 기능밖에 하지 못했음
but, v8을 브라우저에서 분리하여 자바스크립트를 어디에서든 사용할 수 있게 만들었음
그것이 바로 node.js
node.js가 생김으로써 javascript로 web server로 개발 가능
웹서버란
웹을 반환받으면 웹서버
미디어를 반환받으면 미디어 서버
채팅을 반화받으면 채팅서버
노드와 리액트와의 관계
리액트는 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 자바스크립트 파일을 만들어내는 기능
노드를 기반으로 기능하기 때문에 노드없이는 사용이 불가능함
4-2
nodejs 설치 및 환경설정
4-3
터미널이란?
GUI(graphic user interface)
크롬-----(이거 실행해)------>window
CLI(command line interface)
터미널----(명령어 입력)---->window
CLI는 화면에 나타나지 않고 명령만으로 실행이 되기 때문에 편리
기존의 javascript는 브라우저의 개발자 도구에서 실행을 확인할 수 있었는데
node의 경우 터미널 창에서 실행되는 것을 확인 할 수 있음
다른 파일에서 기능을 수행하게 하는 코드
//calc.js
//계산 기능을 하는 파일
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
//모듈을 내보내야함
module.exports = {
moduleName: "calc module",
add: add,
sub: sub,
};calc의 모듈을 index에서 수행하게 함
//index.js
const calc = require("./calc");
console.log(calc.add(1, 2));
console.log(calc.add(4, 5));
console.log(calc.add(10, 2));이러한 것은 common js라고 함
4-4
NPM(Node Package Manager): node.js의 패키지 관리 도구
패키지
누군가 만들어 놓은 기능들을 모아놓은 것
package.json : 패키지에 대한 정보들을 담아 놓은 파일
name, version, description, main, script, test...
npm사이트
무료로 이용할 수 있는 패키지 사이트
우리가 사용하는 패키지 : randomcolor
-npm install randomcolor를 이용해서 모듈을 설치
-json에 dependencies가 나타나게 됨
-자동으로 node_module, package-lock.json파일이 생김
-node_module에는 다운받은 randomcolor가 설치되어있고
-package-lock.json에는 다운받은 파일의 버전들의 정보가 기록되어 있음
const randomColor = require('randomColor');를 통해 패키지파일을 불러옴
5-1
why react.js ??
첫번째 이유
중복이 되는 부분에서 문제가 발생: shotgun surgery
공통적으로 사용될것으로 예상되는 것을 모듈로 제작을 함
-작성해야되는 코드의 양이 줄어 듬
기존의 방식으로는 컴포넌트화 하기가 힘듦
그래서 react가 필요함
v react는 component기반의 UI라이브러리v
레고를 만드는 것처럼 코딩이 가능해짐
두번째 이유
명령형 프로그래밍(절차를 하나하나 다 나열 해야함) 제이쿼리
--> 선언형 프로그래밍 (그냥 목적을 바로 말함)리액트
세번째 이유
virtual dom:
자바스크립트가 요소를 추가하는 과정에서 생기는 문제를 해결해줌
5-2
boiler plate:
보일러를 찍어내는 틀
마치 보일러를 찍어내듯이 서비스를 개발할 수 있는 빵틀의 역할을 하는 패키지를 의미함
