티포의개발일지

npm install next@latest react@latest react-dom@latest 실행하면 됩니다.

(저는 next@lastest만 실행했었는데 이런 오류가 떴었습니다.)

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

<< 실행하면 됩니다.

Git 등록방법

1.     깃에 등록할 파일에 git init

2.     git add .  , git commit -ma 실행

3.     git remote add origin git@github.com:[계정명]/[저장소명].git

4.     git remote show

5.     git push --force --set-upstream origin master

ssh 등록방법

1.     ssh 키 확인 ls -al ~/.ssh

2.     키 생성 ssh-keygen -t rsa -b 4096 -C gsjung06@naver.com

3.     Ssh-agent 실행 여부 확인 eval "$(ssh-agent -s)"

4.     키 등록 ssh-add ~/.ssh/id_rsa

정적 서버렌더링(getStaticProps)는 한번 불러오면 수정이 불가능하다. 따라서 왠만해서는

바꾸지 않는 내용들이 필요할 때 사용

동적 서버렌더링(getServerSidePorps)은 동적으로 데이터가 자주 바뀌는 페이지에 유용.

Next js 안에서 서버사이드 렌더링으로 db작업을 할 수는 있다.

서버 과부하가 왔을 때 express로 백엔드 서버를 만들고 하면

프론트 서버와 백엔드 서버중 과부하 되는 서버를 늘리기만 하면 되지만

Next js 안에서만 돌게하면 프론트 서버가 너무 무거워진다.

프론트엔드 서버 : 쿠키작업, 프론트 안에서 돌아가는 작업들( 로그인, 장바구니 등)

           → state가 프론트의 요청으로 바뀔 때

백엔드 서버 : DB작업, node_modules 사용할 작업

           → state가 백엔드의 요청으로 바뀔 때

           → 사실상 서버사이드 렌더링으로 프론트엔드에서도 node_module 사용 가능하다

           → DB작업은 차후에 GraphQL로 대체할 예정

Pages 에서 server, client 영역으로 나누고 각각에 맞는 요청을 정리할 것.

(node_modules를 어디서 쓸 지도)

1.     3000번 포트(next.js)에 /api/mobile/… 로 접속 -> modelquery 실행

장점 : 기본 oasis와 유사

단점 : /api/mobile 하위 파일들을 일일이 만들어줘야됨.

      무조건 /api/mobile 을 먼저 타고 가야됨.

2.     4000번 포트(graphql)에 쿼리 request전송(axios 처럼)

장점 : 3.3.3.3:4000 포트 한가지만 타고 쿼리 내용만 바꾸면 됨.

      원하는 쿼리문, 결과값을 받을 수 있음(라우터와 같은)

단점 : query에 대한 이해( 하루만에 설명 가능 )

3.     App 전용 backend port 설정 후 express 실행

장점 : 기존 oasis와 동일

단점 : 사용하는 포트의 개수가 많아짐.

4.     App 전용 backend server 구축

장점 : 기존 oasis와 동일

단점 : 사용하는 서버의 개수가 많아짐.

5.     Flutter-graphql 사용

학습 후 사용 가능

const express = require('express');

const next = require('next');

const morgan = require('morgan');

const cookieParser = require('cookie-parser');

const expressSession = require('express-session');

const dotenv = require('dotenv');

 

const dev = process.env.NODE_ENV !== 'production';

const prod = process.env.NODE_ENV === 'production';

 

dotenv.config();

 

const app = next({ dev }); // next 모듈을 사용

const handle = app.getRequestHandler();

 

//socket

const socketapp = require('express')();

const socketserver = require('http').createServer(socketapp)

const cors = require('cors');

socketapp.use(cors());

 

const ports = {

  next: process.env.NEXT_PUBLIC_React_Port,

  socket: process.env.NEXT_PUBLIC_Socket_Port

};

 

app.prepare().then(() => {

 

  //nextserver

  const server = express(); // back 서버에서의 const app = express()

  server.use(cors());

  server.use(morgan('dev'));

  server.use(express.json());

  server.use(express.urlencoded({ extended: true }));

  server.use(cookieParser(process.env.COOKIE_SECRET));

  server.use(

    expressSession({

      resave: false,

      saveUninitialized: false,

      secret: process.env.COOKIE_SECRET, // backend 서버와 같은 키를 써야한다.

      cookie: {

        httpOnly: true,

        secure: false,

      },

    }),

  );

  

  server.get('/hashtag/:tag', (req, res) => {

    return app.render(req, res, '/hashtag', { tag: req.params.tag });

  });

 

  server.get('/user/:id', (req, res) => {

    return app.render(req, res, '/user', { id: req.params.id });

  });

 

  server.get('*', (req, res) => { // 모든 get 요청 처리

    return handle(req, res); // next의 get 요청 처리기

  });

  server.listen(ports.next, () => {

    console.log('next+expresss running on port 3000');

  });

 

  //socketserver

  const io = require('socket.io')(socketserver,{

      cors : {

          origin: "http://"+process.env.NEXT_PUBLIC_IP+":"+process.env.NEXT_PUBLIC_React_Port, //해보니까 localhost는 안됨

          methods: ["GET", "POST"],

          allowedHeaders: ["*"],

          credentials: true,

      }

  });

 

  io.on('connection', socket=>{

      // socket으로 메세지가 들어올 때 

      socket.on('message',({chatList}) => {

          console.log("@@@")

          // 메세지가 들어올 때 보내줌

          io.emit('message',({chatList}))

      })

  })

 

  socketserver.listen(ports.socket, function(){

    console.log('listening on socket port 3001');

    })

});

1.     넥스트 서버를 동적분할하고 소켓서버를 열 수 있다.

2.     소켓서버에 cors설정을 해주고(json으로 된것들), 넥스트서버에도 cors 설정 해줘야함

정말 빠르게 AWS LightSail로 인스턴스를 만들어보자.

Lightsail에 관하여

https://lightsail.aws.amazon.com/ls/docs/ko_kr/all

1. aws 사이트에 회원가입, 로그인을 하고 Lightsail 서버를 찾아서 들어간다.

2. 인스턴스를 생성한다.

3. 원하는 리전을 선택한다.

※ 참고로 뭄바이는 다른 리전보다 느리다!! (이걸 모르고 회사에서 썼다가 애먹었다 ㅠㅠ)

4. 플랫폼을 선택한다. ( 저는 Linux Ubuntu 18.04 LTS 를 주로 사용했습니다. )

5. 가격을 선택한다. ( 물론 비쌀수록 더 성능이 좋습니다! )

6. 원하는 인스턴스 이름을 적고 생성해준다.

7. 생성하기 버튼을 누르면 끝!! ( 엄청 빠르다! )

  - 대기 중에서 조금 기다리시면 완료된다.