티포의개발일지

리액트에서는 컴포넌트를 선언할 때, 속성을 전달할 수 있다.

JQuery에서는 페이지 내에서 객체를 선언하고, 다른 페이지로 그 객체를 전달하려면 백엔드를 거쳐야 했지만, 

리액트같은 경우에 보다 편리한 방법으로 객체를 전달할 수 있다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

Hello 파일의 컴포넌트를 가져와서 선언하고, return될 때 사용되게끔 했다. 또한 name = "react" 라는 값을 보내주었다.

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

그럼 이처럼 함수의 인자값으로 props 안에 name이 들어가게되고, 아까 보내주었던 name을 컴포넌트에서

사용할 수 있다.

만약 컴포넌트에 props를 지정하지 않았을 경우에 default 값도 설정해줄 수 있는데,

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

이런식으로 사용이 가능하다.

컴포넌트끼리 원하는 객체나 변수를 주고 받는 기능은 매우 유용하다고 느꼈다.

-참조

https://react.vlpt.us/basic/05-props.html

JSX란 리액트에서 생김새를 정의할 때 사용하는 문법이다. Javascript이나 HTML같이 생겼다.

JSX에서 꼭 지켜줘야 하는 문법이 있는데, 바로 태그를 꼭 닫아주어야 한다는 것이다.

컴포넌트 안에 변수를 선언하거나 style을 json형태로 선언하고, { } 중괄호 안에 담아서 속성을 부여할 수도 있다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = { 
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

참조

https://react.vlpt.us/basic/04-jsx.html

1. 전에 만들어 두었던 폴더 중 src 폴더 밑에 Hello.js 파일을 만든다.

Hello.js

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

2. 그 다음 App.js 에서 Hello 컴포넌트를 불러올 수 있다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

정말 기본적인 컴포넌트 사용방법이다.

1. 등장 배경

    - 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 클래스형 컴포넌트가 가지는 단점인

       코드가 길고 복잡하며, Logic의 재사용이 어렵다는 점 때문에 사용하기 힘들다는 의견이 많았다.

    - 그 때 Hooks의 등장으로 인해 함수형 컴포넌트들이 클래스형 컴포넌트들의 작업을 할 수 있게 되었다.

2. 예제

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

보통의 자주 쓰는 hook은 useState와 useEffect 인데, 

컴포넌트 내에 객체나 변수가 필요할 때 useState로 선언을 해주고, JQuery에서 Object를 썼던 방식과 같이 컴포넌트에서도 객체를 다룰 수 있다. ( json 형태도 가능 )

사용 방법도 정말 간단하며, JQuery에서 썼던 방식보다 객체를 다루기 쉬우며, 클래스형 컴포넌트처럼 코드가 많이 복잡하지도 않다. 

useEffect같은 경우는 useState로 선언한 변수들의 변함에 따른 Logic을 구성할 수 있다.

useEffect(()=> { //페이지가 바뀔 때마다 설정값 바꿔줌
      let emptyArray = [];
      let start = (currentPage-1) * postNumber;
      let end = ((currentPage-1) * postNumber) + postNumber;
      
      for(var i = start ; i < end; i ++) {
            if(!listArrayall.array[i]) { //더이상 값이 없을 때의 조건문
              emptyArray.push("")
            }
            else {
              emptyArray.push(listArrayall.array[i]);
            }
          }
          
      setListArraypost(emptyArray);
      
      let emptyJson = {};
      let j = 0;
      for (var i = start; i < end; i ++) {
        if(listArrayall.array[i] !== undefined) {
          emptyJson[j] = {indexid : j, rowsid : listArrayall.array[i]._id, checked : false}
        }
        j++;
      }
      j = 0;
      setCheckedArray(emptyJson);
  } ,[currentPage]);

해당 코드는 내가 Next.js로 개발하면서 썼던 구문인데,  간단하게 말하자면 두번째 인자값으로 [] 배열 안에 변경이 감지될 변수( currentPage )를 넣어주고, 첫번째 인자로 변경이 감지되었을 때 로직( arrow 함수 )이 실행되도록 구현하였다.

참조

https://codingbroker.tistory.com/23

1. aws 서버에 인스턴스를 만들고 터미널창을 켜서 React를 설치한다. ( 폴더 이름은 원하는대로 가능하다. )

npx create-react-app gsreact

2. 그럼 이런식으로 폴더들이 생성되는것을 확인할 수 있다.

3. 여기서 바로 npm start를 해보면 3000번 포트에 리액트 화면이 나오는것을 확인할 수 있다.

정말 쉽다!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(node_modules를 어디서 쓸 지도)

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 설정 해줘야함