0723 webpack / NEXT 의 개념

1. ec2 아마존 로그인하고

2. 가비아 도메인 관리 (서비스 관리 - 관리툴)

 

back

13.124.13.101

 

front

3.38.26.47

 

------------------------------------------

# local  server

 

$ npx webpack

build 가 완료 되면 하나의 폴더 (dist) 가 생긴다.

 

이렇게 하면 index.html 을 liver server 로 열 수 있다.

이렇게 했을 때 오류가 난다면

$ npm install -g webpack

$ npm install -g webpack-cli

$ npx webpack

 

app.js 코드만 읽어서 우리가 만든 코드가 잘 번들이 된것

-------------------------------------------------

 

front 폴더를 git 에 올려준다.

이거를 aws_front 에서 clone 받는다

 

$ cd ~      // home directory 까지 온다.

 

root /home/ubuntu/www; 이거를 git 저장소이름으로 바꿔줘야함

 

$ cd /etc/nginx/sites-available

$ sudo vi myapp.conf

 

$ sudo systemctl stop nginx

$ sudo systemctl start nginx

$ sudo systemctl status nginx

 

그리고 hyejun.co.kr 로 접속하면 댓글 쓰기가 나온다.

 

도메인 없으면 api.jsx 에 http 주소에 front - public IP 를 넣으면 된다.

 

---------------------------------------------------

# 월요일 부터 리액트 기능 중에 NEXT 라는 것을 배울 것이다.

Next.js

-> react 로 만든 프레임 워크다.

어? 근데 react 도 프레임 워크잖아!

프레임워크를 가지고 또 프레임 워크를 만들었다고??

-> 가능

 

# Next.js

리액트로 사이트를 그나마 편하게 만들어 주는 녀석

얘도 결국엔 리액트 코드로 작성이 된다.

 

완벽하게 이해가 되어야지만 사이트를 구축할 수 있다.

 

# 리액트 구조

브라우져가 클라(Nginx)에 80번 포트로 요청을 보내면

클라는 80번 포트로 브라우져에게 응답을 준다. 일단은 화면만 준다.

그래서 fetch, reducer 활용해서 로딩중.. 이런거 함

브라우져에서 백엔드에 요청하면 db에 있는 내용을 긁어다가 준다

 

index.html

app.js

-> 페이지가 1000개가 함축되어있는 느낌 - 코드가 한곳으로 몰리니까

브라 - 클라 - 브라 페이지 1000개 분량 내용을 한번에 줘서 브라가 버벅댐

화면 로딩이 오래 걸림 대신 그 이후 부터는 흰 화면 없이 사용가능

 

검색 엔진 ( 구글 네이버 ) 내 사이트 등록

 

네이버 웹마스터 도구에 내 사이트를 등록하면된다 - 무료

# 리액트의 단점

리액트는 하나의 페이지 뿐인데?

네이버가 모든 메뉴를 검색해주지도 않음

네이버는 내 페이지를 하나로밖에 인식하지않음

 

그래서 생긴게 서버사이드 렌더링

 

최초의 한번만 기존 옛날 방식으로 요청해서 답을 주고

그 이후부턴 리액트 방식으로 처리한다

이게 가능한 이유는 Next 로 클라 서버를 구축하게 되면

Next 라는 아이가 알아서 해준다

 

# 모집공고에 많이 나오는 단어

CSR : client side render

SSR : server side render

 

# Next 를 하게 되면 리액트의 단점이 어느 정도 커버 됨

1. 최초 렌더 시점 (속도를 더 빠르게 할 수 있음)

    시간을 분배했다 생각하면 됨.

2. 검색엔진에 노출가능함

 

# 간단한 블로그를 한번 만들어보는것도 좋음 

 

# NEXT 설치

 

1. npm init

2. npm install next react react-dom

    기본적으로 React 관련 개발환경이 모두 설치가 된 상태이다. (webpack 포함)

3. package.json 을 조금 수정할거다.

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev":"next dev -p 3001 -H 0.0.0.0",                // dev server

    "build":"next build",                               // 실서버 build 명령어

    "start":"next start",                               // next 도 자체적으로 갖고 있는 서버 - 그 서버를 실행하는 명령어

    "lint":"next lint"                                  //

},

저 부분을 수정해준다.

 

기본적으로 3000 포트를 갖고 시작한다.

노트북 / 와이파이 사용중이면

"dev":"next dev -p 3001 -H 0.0.0.0",

이렇게 바꿔준다,

4. pages 폴더 생성

5. /pages/ index.jsx 파일 생성 - 안에 내용작성

6. $ npm run dev

7. /pages/ about.jsx 파일 생성 - 안에 내용 작성

8. localhost:3001/about 하면 저기에 작성한 내용을 확인할 수 있음 - 라우터가 자동으로됨