dukDukz
0824 WEB 본문
탈 중앙화
- 서버가 무엇인지..
패키지란 무엇일까?
- 하나의 작은 단위를 설치할 수 있는 폴더
- 폴더의 역할은 하나의 프로그램을 최소기능으로 실행시킬 수 있는 단위
node js npm - node package manager
mysql2 - 비동기를 위한 녀석
리눅스에서도 package 관리툴을 사용했음!!
- apt 임
- 왜 사용? 패키지를 사용하기 위해서!!
# 리액트를 하면서 썼던것 - 프레임워크
프레임워크란 뭘까?
- 패키지와 다른점?
누군가가 만들었던 패키지를 하나로 모아서(하나의 프로그램을 구동할 수 있도록) 만든것
우리가 써봤던 프레임 워크 -> 리액트~
npm install react
npm install react-dom
npm install babel -> js 옛날 버전도 돌아갈 수 있도록 만들어주는 녀석
npm install webpack -> 실시간 빌드가 쉽도록 해주는 녀석
# 폴더 트리
스프링 - 웹페이지를 구성할때 어디 폴더에 어떤 코드를 넣어야 작동하는지를 알려주는 녀석
그래서 프레임워크는 폴더 트리가 존재한다.
리액트 : 프론트엔드 프레임워크이다.
# 개발의 종류...
어떤 개발자..?
웹개발자
우리가 배운 내용은 web 이다.
web 개발을 위해 필수로 배우는 과목들..
css - html - javascript
html의 역할?
- 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
- 우리가 사용자에게 보여줄 내용을 구분해서 영역을 나눴다,
css
- 구분한 영역을 꾸며주는 역할을 했다.
js
- 우리가 html 로 영역을 나눈것을 순서를 바꾸거나 클릭을 했을 때 다른 영역을 보여준다거나 하는 html 을 움직이는 요소를 만들때 사용한다.
얘네는 패키지나 그런게 아니라 언어이다.
얘네들은 어디서 구동이 되었는가?
- 브라우저 (얘네가 코드를 해석해주는 녀석)
그래서 브라우저별로 이해하는 문법이 조금씩 다르기도 하고 보여지는 것도 다르기 때문에
같은 코드인데도 보여지는게 다를 수 있다
다 맞춰주는것 - 크로스 브라우징
node js는 크롬에 있는 js 해석기를 떼서 만든애이다.
내가 사용한 언어가 어디에서 해석 되느냐?
css, html, js - 브라우저에서 해석
브라우저에서의 js 와
node js 에서의 js 가 다르다.
특색에 맞게 언어를 선택하는게 개발자의 역량
브라우저 - 사용자에게 화면을 보여주기 위함
css, html, js 를 통틀어서 프론트앤드 개발자 라고 한다.
# 서버 server 란 무엇인가?
프론트 앤드 개발자는 정적 인 것만 보여줄 수 있다.
데이터를 동적으로 가지고 있을 수 없었기 때문에 웹 서버라는게 생기기 시작했다
처음으로 클라이언트와 서버가 상호작용 할 수 있게 된 것이다.
브라우저는 어떻게 웹서버에게 요청을 보낼 수 있을까??
주소창에 도메인에 엔터를 넣고 보내는 순간 요청을 보내게 된다. - 구글은 거기에 대한 응답을 주게 된다.
브라우저의 역할은 해석이 끝인가?
- no! 또 하나의 중요한 역할이 있다
브라우저도 서버에게 요청을 보낸다.
뭘까?
http 프로토콜로 요청을 보내게 된다.
request msg를 만들어서 보내게 된다.
즉 요청이라는 것은 브라우저가 웹서버에게 규격이 정해져있는 텍스트파일을 보내주는 것이다.
텍스트 파일 형식이 프로토콜 규약이다.
(start line, 헤더있고 .. 빈줄있고.. body 있는...)
브라우저 -> 서버 요청일때 이런 텍스트 형태로 보내자고 규칙을 정한거임.
그래서 블록체인 같은 경우도 http 형식으로 받는다.
이것을 http 통신이라고 말하고 포트는 80번을 사용한다.
웹서버는 응답을 어떻게 줄까?
마찬가지로 응답을 어떤 특정 형태로 만들어서 보내준다.
(start line, header, 빈줄, body)
# get 요청 post 요청이 있는데, 무슨 차이가 있을까?
get - request method 도메인 주소에 어떤 값을 보내기 위해서는 key value 값이 도메인에 연결되어서
예를 들어서
http://localhost:3000?userid=web7722
이게 get 이고
post는 그 정보를
body 영역에 실어서 보내는 것이다.
그래서 웹 서버는 리퀘메세지의 텍스트를 해석 할 수 있게 하는게 브라우저이다.
텍스트 파일을 읽는 능력 - express 가 해줌
함수를 보면 app.get / app.post
get 으로 요청 ? post 로 요청 ?
읽어서 판단 - 근거가 텍스트 파일
express는 post로 보내는 body영역을 해석 할 수 있는 능력이 없기 때문에
body-parser를 설치한다.
웹서버는 그거에 응답을 준다.
body 영역에 html css js 를 담아서 보내주게 된다,
그래서 브라우저는 body 영역만 읽는다.
header 영역까지 조작할 수 있으면 딥하게 들어감
요청에 대한 기본 정보들을 계속 담고 싶을 때 헤더를 사용한다.
대표적으로 cookie 가 있는데,
request method...
전역변수.. 브라우저에서도 그런게 필요했던거임
브라우저가 담고 있는..
ingoo = web7722 라는거를 만들었음
브라우저가 변수 선언을 한거임 ( 요청을 보낼 때 마다 header에 담아서 보냄)
이 데이터를 header 영역에 넣는 거임 그리고 이렇게 저장한걸 cookie 라고 하는거임
cookie : ingoo = web7722
req.cookies 하면 볼 수 있다.
header로 받은 내용은 header로 답을 줘야함
따로 설정하지 않아도 웹서버는 header에 그대로 내용을 보내줌
웹서버를 할때 배우는 새로운 개념..!!
# Restful API
웹서버 개념 안에 있는게 API
# API ?
get 이든 post 든 요청을 보내는데
내용을 전달할 때 body영역에 json 형태 {userid : 'web7722'}로 보내는것을 API 라고 한다.
그리고 응답 {result : 'OK'} 을 받는것도 json으로 받는다.
근데 이거는 = 이 없기때문에 body-parser가 읽지 못한다.
body-parser는 = 을 기준으로 앞은 key값 뒤는 value 값으로 하기 때문.
그래서 저 json값을 읽기 위해서
app.use(bodyParser.json())
이렇게 써야지 json 타입의 데이터를 읽을 수 있게 된다.
그리고 헤더 영역도 바꿔줘야 한다.
헤더영역에 어떤 데이터 타입인지 선언해줘야한다.
그게 바로 Content-Type 이다.
Content-Type : application/json
그러면 웹서버는 content-type을 읽고 나서 데이터를 잘라서 쓸 수 있게 된다.
그리고 웹서버는 요청 받았던거를 토대로 json 형태로 응답을 보내주게 된다.
그리고 브라우저 헤더에도 Content-Type : application/json으로 보내주게 된다,
# 그러면 Restful API 는 뭘까?
- get, post, put, delete, options
요청 json 응답 json 기본으로 깔고
요청할때 데이터를 입력, 수정 ,삭제 등등 어떻게 할건지 알려주는거를 추가함
start line 에 get으로 요청을 보냈다? - 읽어오겠다는 뜻
post : 내용 입력
put : 데이터 수정
delete : 글 삭제
우리는 이렇게 하지는 않았음
대신 uri 값이 board/write board/modify board/delete 이렇게 됐을듯
근데 만약 restful 을 하게 되면 uri 가 board로 끝남
대신 앞에 이런게 붙는다. - 이런 규칙을 만든게 restful api 이다.
app.get( board )
app.post( board )
app.delete( board )
app.put( board )
# 서버와 서버의 연결 + 비동기 통신
# 비동기?
어려운 키워드 중 하나인데
한번의 요청 - 한번의 응답
이것이 http 프로토콜의 기본 룰이다.
그리고 브라우저가 요청을 보낼 수 있는 방법은 무조건 주소창에 도메인을 적고 엔터를 눌러야지만 요청을 보낼 수 있다,
요청을 보낸다는것은 ? msg 를 보낸다는
그게 바로 동기형태이다.
그렇다면 비동기는?
# 비동기
비동기도 기본적으로 요청을 보내야함
req msg 를 보내야 서버에게 내용을 전달 할 수 있다.
근데 요청을 어떻게 하냐? 가 중요하다.
동기 : 주소창에 엔터키를 누르면 화면이 바뀐다.
비동기 : js 로 요청을 보내는 것
- fetch / axios
fetch 는 js 가 내장으로 갖고 있는 패키지
axios 는 npm i axios 해서 사용할 수 있는 패키지
이 두가지로 요청을 보내는 것이 비동기이다.
js 를 쓸 수 있는 영역이라면 어디서든지 쓸 수 있다.
request message
header 영역 만들고 body 영역도 만든다.
대신 axios 는 axios.get axois.post 이렇게 했음
get post 는 start line에 들어가고
두번째 객체값은 header 와 body 에
여기서 부터 js 가 어떻게 해석하는지
js (브라우저)
화면에 1을 출력하고
1초를 쉬고 2출력하고
3을 출력하는 코드를 순서대로 적었다고 가정해봅시다.
결과 : 1 3 2 (1초 뒤에)
python (프로세스)
1을 출력하고
1초를 쉬고 2출력하고
3을 출력하는 코드
결과 : 1 (1초 뒤에)2 3
js는 멈추는게 불가능함
js 가 single therad 라서 그렇다.
브라우저가 html css 도 해석해야 할 녀석들이 있기때문에 멈출 수가 없음
이러한 방식때문에 callback -> promise -> async await 가 나오게 되었다.
요청을 보내는건 쉬움
근데 이 응답을 js 에서 받아서 쓰는게 어려웠던 것이다.
만약 fetch 문을 사용했다고 한다,
promise 객체... 비동기 통신으로 사용하려고 한다면
엄청 자세히 알 필요는 없다
.then()
fetch('http://localhost:3000')
.then(data => {
console.log(data)
})
만약 밖에서 data라는 변수를 사용하고 싶다면? - 그건 안됨 ㅜㅜ
그래서 생긴게 async await 구문으로 다른데서도 사용할 수 있게 했다.
함수로 묶어서 사용
async function Request(){
// 이 코드 영역 안에서는 사용할 수 있도록 함
await fetch('http://localhost:3000')
// 코드의 실행 순서를 파이썬처럼 되게 하겠다
}
하지만 이것도 함수 영역 안에서만 사용이 가능함
async await 구문이 좀 더 편함
-------------------------------------------------------------------
# React
리액트란 무엇일까? - 프론트앤드의 프레임워크이다.
* 프레임워크의 특징
- 폴더트리가 존재한다.
- 다른 여러개의 패키지를 넣어서 만든것
1. webpack
2. create react app
로 프로젝트 생성 - src 폴더 안에서 작업할 수 있도록
프레임워크처럼 사용할 수 있도록
프론트앤드..?
- 브라우저에 표현할 코드를 만드는 것
React는 어떤걸 만들기 편한가?
- SPA : 이게 react 의 주 목적이다!!
single page application
페이지 이동없이 페이지를 꾸미는 행동
*****데이터가 바뀌면 화면이 바뀐다. (핵 중요함!!!)
이거를 다른말로 표현을 하자면
(상태) - (컴포넌트) - 상태가 바뀌면 컴포넌트가 바뀐다.
* 컴포넌트 생성 방법
1. class
2. function
# 과거에 function comp
함수 컴포넌트는 상태를 만들 수 없었다.
생명주기를 사용할 수 없었다.
근데 hooks 라는 개념이 생기고 나서
함수 컴포넌트가 상태, 생명주기를 만들 수 있었다.
hooks 는
useEffect
useCallback
useMemo
[아래 3개는 상태관리]
useState
useReducer
useContext
앞에 use 가 붙는 거는 hooks 임
이것의 원조는 class comp임.
Redux 는 상태 관련 패키지/라이브러리이다.
- 상태를 전역으로 관리하는 라이브러리임
# React 는 서버가 아니에요!
npm run dev
를 했다고 서버가 아니다.
왜 react 가 node js 환경에서 개발 할 수 밖에 없었는가?
react 가 돌아가는 공간이 node js 인데
이 이유는 jsx 를 사용하기 때문이다.
javascript + xml
얘 결과물이
<button> </button>
이렇게 html 처럼 생겼다.
이 꺽쇄... js 에서는 비교연산자임...
그래서 이 문법을 해석해줄 패키지가 필요하다.
그게 바로 babel 이다.
webpack 에 babel 을 넣어줌으로써 자동적으로 build를 해주는 역할
하나의 html 와 js 를 변환해서 처리해줌
webpack 안에 있는 build를 자동적으로 해줄 수 있는 패키지
ㄴ DevServer
ㄴ hot load
그래서 node js 환경에서 구축을 해야했다.
# Nginix
요청을 받아서 보여줄 화면 - nginx 를 이용해서 배포를 함
------------------------여기까지가 web 에 대한 내용 --------------------