Node, Express, React ) 대충 정리

Node.js

LTS 16.14.0 (include npm 8.3.1)       // 형상관리 해줌

 

REPL(Read Eval PrintLoop) 터미널      // 윈도우 커맨드, Unix/Linux의 Shell 같은 것

Read : 값을 입력받아 JS 데이터 구조로 메모리에 저장

Eval : 데이터처리 (Evaluate)

Print : 출력

Loop : Read, Eval, Print를 User가 종료할 때 까지 반복

 

언더스코어 변수 : 바로 이전의 결과 값을 가지고옴

ex)  var sum = _;

 

node shell에서 나오기 위해서는 Ctrl + D를 누르거나 Ctrl + C을 두번 누르면 된다.

 

require 함수는 우리가 알고있는 import와 같다.

 

.listen(3000)      // 포트번호를 지정한다. 일반적으로 3000번대를 선호한다. 

(tomcat, oracle : 8080 / maidadb, mysql : 3306)

서버를 끄는 방법은 ctrl + C

 

http모듈 (라이브러리)를 import 받아야 createServer함수 사용이 가능하다.

.query      // query string과 같은역할    ex) ~~~.com?year=2000&month=03 에서 year~03까지 가지고감

큐는 FIFO 방식이다.

Ajax는 비동기 특징을 가지고 있다.

Node  =>  client(http 페이지)      // http모듈은 기본 내장되어있다.

                 server(HTTP 객체)

라우팅 처리 : url맵핑이라고 생각하면 된다.

 

Node를 프레임워크화 한것이 Express다.

 

npm iit을 쓰면 package.json이 생성된다.

=> ^2.18.1

^은 major버전 중 가장 최신버전이라는 뜻.

2 는 major버전, 기능자체가 바뀌는 큰 변화

18은 minor버전, 업데이트를 많이 했을 때

1은 release, update버전, 짤짤이 업데이트를 했을 때

~(tild) : 2.18.1    // 2.18은 고정

tild가 없으면 : 정확히 2.18.1버전

npm install로 package.json에 적힌 버전에 따라 라이브러리 들을 다운받는다 or 설치한다.

 

Express

npm install -g express-generater

express --view = ejs myapp

package.js      // gradle방식             

require('Express')      // import 받아야함

Java script는 js확장자를 안써도 된다.

app.js      // spring의 web.xml같은 역할을 한다.

npm start = 서버실행

 

React.js

React Native      // 어플 만들 때 씀

 

ES6을 쓴다, JSX는 JS용 xml 이다.

 

npm install -g create-react-app

npx create-react-app myact      // project 생성

viewport      // 반응형 웹 설정

react의 class 속성      // className

function과 class중에서 뭘 써도 상관 없으나 class는 내용물 처리를 위해 component라는 모듈을 상속받아야 한다.

render는 매개변수가 2개 필요하다.  각각 Html코드, 코드를 담을 대상

 

서버가 켜진 상태로 수정을 하면 약간의 시간이 지나고 바로 새로고침을 해준다.

 

const element = (
	<div>
    	<h1>
        <h1>   // 요소가 두개 이상이면 Top level요소로 묶어줘야한다.
    </div>
);                   
const element = <h1>{(x) < 10 ? "Hello":"Goodbye"}</h1>
					// 위의 문장은 if문 역할을 한다. (ternary expression)

 

function Car(props) {~~~}를 만들면,

Class 처럼 Car.js를 만들어서 export default Car;로 보내면 사용가능

만약 props가 object 자료형으로 넘어오면 props.color(속성명).object Key(key값) 으로 사용해야 한다.

 

// 애로우 함수도 사용이 가능하다
function Football() {
	const shoot = (a) => {
    			alert(a);
        }
        return(
        	<button onclick={ () => shoot("Goal!")}>Take the shoot!</button>
        );
    }