[Express] 19. React Nodejs Start

Server & Client 구조

Server

• 서버는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템
• Node.js로 서버 개발을 한다면, 기본적으로 routing(어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정)을 하게 된다.

 

이전 게시물에서 구현한 모든 파일을 server에 넣고 client와 분리하여 Server&Client 구조를 형성할 것이다.

 

 

React

• 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨
• facebook에서 제공하는 프론트엔드 라이브러리

component 구조

• React는 UI(view)를 여러 component로 쪼개서 구현
• 한 페이지 내에서도 각각의 부분을 독립된 component로 만들고, 이 components를 조합해 화면을 구성

 

이전까지 구현한 모든 서버구조를 server 폴더에 넣고, client 폴더를 만들어 components를 구성한다.

 

 파일명: Header.js

import React, { useEffect, useState } from 'react'
import ListElement from './ListElement'
import { fetchGet } from '../utils/utils'

export default function Header() {
  const [topicList, setTopicList] = useState([]);

//fetch 형식으로 port:3000의 서버에서 정보를 받아옴
  const fetchData = async() => {
    const url = 'http://localhost:3000/'
    const topics = await fetchGet(url);
    setTopicList(topics.topics);	//homeController 모듈의 함수 이용
  }
  useEffect(() => {
    fetchData();
  }, []);
  //list의 정보를 새로운 component로 분리하여 구성
  return (
    <div>
    <a href="/"><h1>REACT!!!</h1></a>
    <ol>
      <ListElement />
      <ListElement />
      <ListElement />
    </ol>
    <a href="/topic/create">create</a>
    </div>
  )
}

 

 

 파일명: ListElement.js

import React from 'react'

export default function ListElement() {
  return (
    <li><a href="/topic/read/1">test</a></li>
  )
}

 

 파일명: homeControllers.js

const homeModel = require('../models/homeModel.js'); 

module.exports = {
    getTopics: async (req, res) => {
        const topics = await homeModel.home(); 
        // res.render('home.ejs', {topics: topics});  
        res.json({topics: topics});  //json 형태로 반환
    }
}

 

CORS

• Cross-Origin Resource Sharing의 약자로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념
• 위 상황에서 port:3001에 열린 웹페이지가 port:3000의 정보를 얻어오기 위해서는 CORS 정책에 준수하여 요청해야만 정상적으로 응답

+ 이와 관련해서는 공부할 내용이 많은데, 차차 배워가보자..(ㄷㄷ)

 

 파일명: main.js

...
const cors = require('cors');
app.use(cors());
...

 

 

>> localhost:3001 웹 페이지에 정상적으로 표시됨

---

참고자료

• https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

[React] React.js란? (간단 정리)

• https://escapefromcoding.tistory.com/724

CORS란 무엇인가?

• https://velog.io/@peration/React-server-client-%EA%B0%9C%EB%B0%9C

[React] server & client 개발