WEB

Node.js

: 자바스크립트 언어를 이용해 컴퓨터와 소통하는 프로그램

 

 

패키지 / 라이브러리란?

: 프로그램을 최소단위로 실행항 수 있는 프로그램의 묶음

 

이 패키지를 관리해주는게 NPM ( Node Package Manager)

node-modules 안에 있는 것들이 라이브러리(패키지)들

예) express, react-dom, ...,etc

 

 

프레임워크란?

: 패키지(라이브러리)들을 여러개 모은 것을 framework라고 한다.

 

프레임워크의 특징은 폴더트리가 존재한다는 것

 

Express?

: Web server 쉽게 만드려고 생긴 라이브러리

 

 

React

: node.js 로 만들어진 프론트엔드 프레임 워크

 

사실 리액트가 패키지인지 프레임워크인지에 대해서는 의견이 분분하다.

하지만 개발자들이 임의로 지키는 폴더트리가 나름 존재해서 흔히들 프레임워크라고 한다.

 

리액트는 SPA ( Single Page Application )을 기반으로 사용한다.

 

리액트를 한줄로 설명하자면 "데이터가 바뀌면 화면이 바뀐다."

이 한줄로 전체를 설명할 수 있음.

 

여기서 데이터 = 상태값 , 화면 = 컴포넌트 라고 하면 이해가 쉽다.

 

리액트에서는 이 데이터, 즉 상태값을 사용하여 SPA를 구현할 수 있게 한다.

 

컴포넌트는 jsx, 즉 babel로 화면에 그려진다.

 

babel 이란?

: 코드의 최신문법을 예전 문법으로 변환시켜줘서 버전이 낮은 브라우저에서도 사용할 수 있게 해주는 것.

 

컴포넌트는 두가지 방식으로 선언될 수 있는데 class 나 function(함수형)이다.

 

또한 컴포넌트에는 생명주기함수가 있어서 컴포넌트의 상태를 확인 할 수 있는데

class 형 컴포넌트에서는 componentDidMount( 상태값 변경시 최초 한번 실행 ) 나 componentDidUpdate( 상태값이 변경될 때 마다 실행 ) 가 있고

 

함수형 컴포넌트에서는 useEffect(()=>{},[]) ( 맨 뒤 배열에 값이 빈값이면 componentDidMount와, 값이 들어가 있으면 componentDidUpdate와 값은 의미이다.) 가 있다.

 

원래 함수형 컴포넌트에서는 상태값을 변경할 수 없었는데 hooks가 나오고 나서 상태를 가지고 변경할 수 있게 되었다.

앞에 use가 들어가있는 함수는 대부분 hooks이다.

: 예) useState, useReducer, useContext, useEffect, ... ,etc 등이 있다.

여기서 useReducer는 상태값을 객체로 설정할 때 많이 사용한다.

 

이 컴포넌트들에서 값을 주고 받을때 props를 사용하는데 이 값을 데이터를 하향식으로만 전달 할 수 있어서 불편함이 많았다.

그래서 그 값들을 전역에서 사용할 수 있도록 context를 사용한다.

 

 

Next란?

: react에 SSR( Server Side Rendering )을 도와주는 react기반 프레임워크

 

React-dom

: 이전 엘리먼트와 바뀔 엘리먼트를 컴포넌트 별로 비교를 해서 바뀐 부분만 찾아서 바꿔줌

 

Web pack?

: babel을 실행할때 webpack이 파일을 묶어서 처리할 수 있게 도와주고 코드가 변경되었을때 바로 변경할 수 있도록 도와준다.

Nodejs 안에서 돌아감