* 패키지란?
- 하나의 프로그램을 최소기능으로 실행시킬 수 있는 폴더. 사람들이 만든 개발 단위의 모음집
ex) nodeJS - NPM(Node Package Manager) / Linux - apt
* 프레임워크란?
- 패키지를 모아서 하나의 프로그램을 구동할 수 있도록 만든것.
- 정해진 폴더트리가 존재.
ex) React - react, react-dom, babel, webpack (리액트는 프론트앤드 프레임워크) / python - Django
* 웹개발을 배울때 필수과목
- html - css - javascript
- html: 우리가 사용자에게 어떠한 정보를 보여줄 것인지 영역을 구분해주는 역할
css: html 로 나눠진 영역을 꾸며주는 역할
javascript : html을 동적으로 보이게 해주는 역할
이것들을 해석해서 눈에 보여주는 역할을 하는 것은 브라우저
( 그래서 html 실행해보면 브라우저마다 느낌이 조금씩 다른 것 )
html/css/javascript 세개를 통틀어 프론트앤드 개발자라고 한다.
*그렇다면 서버란 뭘까?
프론트앤드 개발자는 정적인 파일만 보여줄 수 있다. ex) 회사 소개
그런데 웹서버가 나오면서
처음으로 클라이언트와 서버(코드개발자)가 서로 상호작용 할 수 있게 되었다. ex) 게시판
* 웹서버의 통신
브라우저 -> 웹서버 로 요청을 보낼 수 있다.
* HOW?
- http 프로토콜(request message)을 통해서 요청을 보내게 된다. (주소창에 도메인을 적어서 사용)
* Request message
-형식이 존재 / 각 영역별로 해당되는 내용이 있음
1. Start Line (request method가 뭔지? ex) post / get )
2. Header
3. 빈줄
4. Body ( request method가 post일 경우에, 주고 받는 데이터를 여기에 실어 보낸다. )
즉, 요청이라는 것은 브라우저가 웹서버에게 정해진 규격에 맞춘 텍스트파일을 보내주는 것이라고 할 수 있다.
여기서 말하는 텍스트 파일 정해진 형식이 바로 "프로토콜 규약"! (=http통신)
포트는 80번포트를 사용하기로 되어있다!
여기에 응답을 주는것이 웹서버
* 무엇을 응답으로 주는가?
- html, css, javascript (브라우저가 알아듣는건 얘네뿐이니까)
- 요청을 보낼 때와 마찬가지로 Response mesage를 만들어서 보내준다.
* Response mesage
1. Start Line
2. Header
2. 빈 한줄
3. Body
브라우저와 웹서버가 서로 데이터를 주고받을 때 GET방식 / POST방식 으로 나뉜다.
* GET 방식
- 도메인 주소 옆에 물음표를 기준점으로 해서 그 뒤로 데이터가 쌓이는 방식.
- ex ) http://localhost:3000?userid=csprout
* POST 방식
- 보내고자하는 데이터를 http통신의 body 영역에 실어서 보내는 방식
=> 즉, GET 과 POST의 차이점으로는, 보내고자 하는 데이터를 싣는 위치가 다르다고 할 수 있다.
과거에는 이 텍스트를 한줄한줄 서버가 다 읽을 수 있도록 하는게 웹개발자의 영역이었지만 지금은
간단하게 nodejs환경을 설치하고 express 사용법만 알아도 웹서버를 구축 할 수 있게 되었다.
(구체적으로 따지자면
express 자체적으로는 만약 request method가 post인 경우에 body에 실려있는 데이터를 읽을 능력이 없다.
그래서 다른 패키지를 가져와야 하는데, 그게 바로 body-parser 이다. body-parser가 데이터를 읽는 방식은
예를 들어 userid=csprout 라고 하는 데이터가 있으면 "=" 을 기준으로 해서
=앞에 있는 건 key값, = 뒤에 있는 건 value값으로 인지해서 json 형태로 바꿔서 해석함.)
응답의 경우,
해당 요청에 대한 결과물을 마찬가지로 body 영역에 담아서 보내주게 되는데
그 결과물에는 html , css , javascript 가 있다. 그래서 브라우저는 body영역만 읽어서 해석함.
여기까지가 웹페이지의 기본적인 통신과 구성이라고 할 수 있다.
----------------------------------------------
심화과정으로 header 영역을 조작 할 수 있다.
* header 영역
-요청에 대한 데이터들의 타입이라던가, 전역 변수들의 설정, 보안설정, 기본 정보들 계속적으로 담고 싶을때 사용한다.
대표적인 예시로 쿠키가 있다.
* 쿠키란?
- 브라우저가 계속해서 담고 있는 정보 (전역변수)
- 이 데이터를 보낼 때는 body 영역이 아닌 header 영역에 담는다.
- cookie : mun=csprout
- 응답을 받을 때 header로 보낸건 header로 받게 된다.
- ex) 웹서버가 로그인 유무를 체크할 때 header에 쿠키값이 있는지 없는지 본다.
브라우저가 항상 header로 쿠키값을 주기 때문에
이 값이 없어졌다면 로그인을 하지 않은 상태라는걸 미리 알 수 있는 것.
* API
- 내용을 전달 할 때 body영역의 데이터를 json형태로 보내는것을 API 라고 한다. 응답을 받을 때도 json 으로 받는다.
- ex) Request Message - Body - { userid : csprout } /// Response Message - Body - { result: "OK !" }
- 그런데 body-parser는 얘를 읽을 수 없게됨 ("="이 없자나...). 그래서 웹서버에서 설정을 하게됨
- app.use(bodyParser.json())
app.use() 가 모냐면 >>> body-parser 이자식 미들웨어에 실을거얌.. 너 json형태도 읽을 수 있게 할거야.. 라는 뜻
- 웹서버 설정만 해서 되는게 아니라 Request message / Response Message의 header영역도 손봐줘야 함.
- Content-type : application/json
>>> 웹서버가 요청을 받을 때 이제 헤더 내용 먼저 보고
"아 내 데이터 타입이 json이구나" 알게 될것임! 그리고 body를 볼때 json 데이터를 읽을 수 있게 되는것.
브라우저가 응답을 받을 때도 마찬가지
* Restful API
- 응답을 받을 때 규칙을 만들어서 받음.
- Start Line에 request method를 표시해서 구분함!
- 이런식
app.get(board)
app.post(board)
app.delete(board)
app.put(board)
그리고 uri는 기존(board/modify, board/list) 에서 -> 모두 그냥 board로 통일. request method로 구분
* 동기 / 비동기
- 동기방식 : 주소창에 도메인을 적고 엔터키를 누르기 + 한번의 요청에 한번의 응답( http프로토콜의 기본 룰이다. )
- 비동기방식 : 자바스크립트로 요청 날림 -> 즉, 어느 때이든지 사용이 가능함. (ex 클릭했을때, 스크롤했을 때 등등)
1. fetch - 인자 1. 요청 url / 2. 옵션 값 ( 이 값으로 헤더와 바디 영역을 만들어줌 )
2. axios - axios.[request method]
자바스크립트는 single thread이기 때문에 원하는 내용을 원할때 띄우기 위해서
callback함수를 이용해야 한다. 따라서 이것과 관련되어 나온 내용이 promise객체 / async-await 구문.
* promise 객체
- .then : 처리 완료된 시점을 알고 싶을 떄 사용.
ex ) Fetch("http:localhost:3000").then (data=> {
console.log('data')
}) //요런 식으로 사용
※ 여기서 만약 data라는 변수를 then구문 밖에서 사용하고 싶어도, 밖에서는 사용할 수 없음.
왜? 아직 응답을 받기도 전인데 어떻게 써.. 모..모르는데 어떻게 써요..
이 변수를 .then 밖에서 사용하고 싶어서 나온것이 바로 async-await구문!
* async-await 구문
- 응답을 받을 때 까지 기다린다는 뜻
- async function Request(){
await fetch("http://localhost:3000")
}
이것도 함수 영역 안에서만 가능하다~
then구문을 쓸것인지 vs async-await 구문을 쓸것인지
-> 결국 비동기의 결과가 떨어지는 시점을 then으로 잡을거냐 함수로 따로 빼서 잡을거냐 차이
* React 란 ?
- 프론트앤드를 위해 만들어진 프레임워크
- 리액트의 주 목적은 SPA (Single Page Application: 페이지 이동 없이 하나의 사이트를 만드는 것)
- 데이터가 바뀌면 화면이 바뀐다 (= 상태가 바뀌면 컴포넌트가 바뀐다)
- 컴포넌트
1. class 2. function
2. function (Hooks) - useEffect / useState / useReducer / useCallback / useContext / useMemo
* 이 중 상태 관련 hooks (hooks - 상태만들기 & 생명주기 사용 가능해짐)
- useState : 상태가 바뀌면 컴포넌트가 바뀜
- useReducer : reducer로 만든 상태가 바뀌면 컴포넌트가 되는 것
- useContext : 컴포넌트가 저장하고 있던 상태와 reducer를 전역으로 관리하게끔 하는것
* Redux? 리덕스는 상태를 전역으로 관리하는 라이브러리 패키지임
-----------------------------------------------------------------------------------------------------------------
"리액트 = 프론트앤드 프레임워크"라고 하지만, 막상 리액트를 사용해보면 서버처럼 느껴지는 경우가 많음.
그 이유가 무엇일지?
- 리액트를 사용할 때 node.js 환경에서 개발하기 때문임.
why?
대표적인 이유로 jsx를 꼽을 수 있음.
* jsx
- (javascript + xml) 이 문법은 html 형태로 이루어져있는데, 자바스크립트에서는
html 문법을 사용할 수 없음. (html에서 꺾쇠는 컴포넌트를 의미하는데, javascript에서 꺾쇠는 비교 연산자임)
따라서 자바스크립트에서 이 문법을 해석하려면 babel이라는 패키지가 필요함.
해당 패키지를 사용할 수 있는 곳이 바로 node.js임. 그래서 리액트를 node.js 환경에서 개발할 수 밖에 없는것!
html에서 babel을 사용할 때 그냥 스크립트로 연결해서 사용할 수도 있음.
하지만 그렇게 되면 한 파일에 너무 많은 컴포넌트가 생기게 되고, 코드의 유지/보수가 힘들어짐.
따라서 직접 바벨로 연결할 게 아니라 간단한 세팅을 통해서 결과물을 바로 확인할 수 있게 해줄 수 있음.
그 역할을 해주는것이 바로 Webpack임.
그 웹팩을 또 자동적으로 빌드하도록 해주는 패키지가 DevServer. 와 진짜 뭐가 드럽게 많네
DevServer는 우리가 코드를 칠 때 마다 웹팩이 빌드를 새로 하도록 만들면서, 화면이 실시간으로 변하게 해줌.
(DevServer 안에 hot load 설정을 해줌으로써 코드를 칠때마다 화면이 로드 되도록 만듦)
(✔ 여기까지의 과정은 모두 개발환경을 기반으로 설명한 것임. 실제 배포는 다른것을 이용- nginx ✔)
* 사용자와 클라이언트
- 사용자를 실제 사람이라고 하면, 클라이언트는 사용자가 보는 화면이라고 할 수 있다.
예를 들어 사용자가 웹 페이지를 보고 있다고 하면 클라이언트는 브라우저가 되는것임. 사용자가 스마트폰 어플을 이용하고 있다고 하면 클라이언트는 어플리케이션.
- 즉, 클라이언트란 사용자와 서버의 중간역할이자, 상호작용이 일어나는 공간이다.
--------------------------------------
* 블록체인에서 사용자가 요청을 보내는 방법
- 사용자가 요청을 보낼때, 클라이언트는 주로 브라우저 or 어플리케이션이고 http통신을 통해 요청을 보낸다.
- 여기서 블록체인은 탈중앙화라는 말이 나온다.
각각의 블록들은 하나의 서버라고 할 수 있다.
우리가 만든 서버에 요청데이터를 보내는 것을 중앙화라고 하는데.
여기서 사용자는 요청을 보내는 곳이 고정되어있지 않고, 어느 블록에 요청을 보내든 같은 값을 불러올 수 있다.
-> how?
모든 블록들에 같은 데이터를 가지도록 하는 것이다.
각각 블록들은 요청을 받으면
1. 먼저 자신이 가진 데이터를 확인한다.
2. 다른 블록들이 가진 데이터를 확인한다.
3. 그리고 그 데이터가 맞는지 틀린지, 어느 값이 더 다수의 블록이 맞다고 하는지 확인한다.
4. 그 결과로 사용자 요청에 응답을 준다. 이것을 "합의 알고리즘"이라고 한다.
ex) 사용자 : a 의 값은 몇인가? -> 블록1에게 요청
블록1 : a = 9 -> 블록2, 블록3, 블록4 에게 확인
블록2 : a = 10
블록3 : a = 9
블록4 : a = 9
-
블록1 : a = 9 -> 사용자에게 응답
이런식으로 모든 서버가 모두 같은 정보를 가지고 있어야 한다면 매우 비효율적이지만 높은 신뢰성을 가질 수 있따!
-------------------------------------------------------
