노드 리액트 기초 - 5th Day

 

클라이언트, 서버, 데이터베이스에서 데이터의 흐름을 보면 다음 그림과 같다. 

 

Data Flow

 

예를 들어, 유저가 로그인을 하기 위해 아이디와 비밀번호를 입력하고 로그인 버튼을 누른다고 하자. 

그러면 클라이언트에서 서버로 로그인 request가 넘어가게 되고, 서버는 먼저 데이터베이스에 유저 아이디가 있는지 찾고 만약에 있다면 클라이언트에서 보내준 비밀번호가 데이터베이스에 저장된 해당 아이디의 비밀번호와 일치하는지 확인한다. 

이 때, 모든 정보가 일치하면 success로 response가 넘어가고 해당 아이디가 없거나 비밀번호가 일치하지 않을 경우에는 에러코드를 response로 넘겨준다.  

 

 

Axios

이전까지는 React JS 부분이 없어서 Postman을 이용해서 request를 보내고 response를 받았는데, 이제 클라이언트 파트를 만들었기 때문에 Axios를 사용해서 요청을 보낼 것이다. 

여기서 Axios는 jQuery에서 AJAX와 같은 것이라고 한다. 

이제 터미널 창에 cd client를 통해 client directory로 이동한 다음에 npm install axios --save를 입력해서 다운받는다. 

하지만 지금 이 상태에서 서버로 요청을 보내게 되면 서버는 5000, 클라이언트는 3000으로 서로 다른 포트 넘버(Origin)를 가지고 있어 CORS(Cross-Origin Resource Sharing) 정책에 의해 서버가 요청을 받지 못하고 에러가 뜬다.

 

CORS Policy

 

 이를 해결하기 위한 방법으로는 

1. 개발자 도구 사용 (Chrome CORS Extension)

2. JSONP

3. Proxy

등과 같은 방법들이 있는데, John Ahn님의 노드 리액트 기초 강의에서는 Proxy를 사용한다.

 

Proxy

→ 클라이언트와 서버 사이에서 데이터를 전달해 주는 서버

→ 방식에 따라 클라이언트의 IP 주소가 서버에게 노출될 수도 있고 아닐 수도 있다.

 

Proxy Server

 

Proxy Server의 기능

1. 방화벽

2. 웹 필터

3. 캐쉬 데이터, 공유 데이터 제공

 

Proxy Server를 사용하는 이유

1. 회사에서는 직원들, 집에서는 아이들의 인터넷 사용 제어

2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공

3. 더 나은 보안 제공

4. 이용 제한된 사이트 접근 가능

 

 

↓참고 사이트

https://create-react-app.dev/docs/proxying-api-requests-in-development/

 

위 참고 사이트에서 Configuring the Proxy Manually 부분을 보고 따라하면 된다.

 

먼저 client directory에서 npm install http-proxy-middleware --save를 하고, 

client 안에 있는 src 폴더에 setupProxy.js를 생성한다. → client/src/setupProxy.js

//setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function(app) {

    app.use(
    
        '/api',
        
        proxy({
        
            target: 'http://localhost:5000', // 현재 server port number를 타겟으로
            
            changeOrigin: true,
            
        })
        
    );
    
};

 

이제 서버에 있는 index.js에 다음과 같은 코드를 추가해주고 

// index.js

app.get('/api/hello', (req, res) => res.send('안녕하세요~'))

 

클라이언트에 있는 LandingPage.js에 서버에 요청을 보내는 코드를 추가해준다.

// LandingPage.js 

import React, { useEffect } from 'react'; 

import axios from 'axios';


function LandingPage() { 
	
    useEffect(() => {

        axios.get('/api/hello')
        
        .then(response => { console.log(response.data) })

    }, [])

	return ( 
    
	<div> 
        
		LandingPage 
            
	</div> 
        
	) 
    
} 

export default LandingPage

↓useEffect에 대한 참고 사이트

https://react.vlpt.us/basic/16-useEffect.html

 

 

그리고나서 실행시켜보면 콘솔창에 다음과 같이 '안녕하세요~'가 뜬 것을 확인할 수 있다.

 

 

Concurrently

지금까지는 서버 파트와 클라이언트 파트를 각각 실행시켜줬는데, concurrently를 이용하면 동시에 실행시킬 수 있다. 

먼저, 프로젝트 root directory에서 npm install concurrently --save를 통해 다운로드 받는다.

 

그런 다음에 root directory에 있는 package.json에서 scripts에 위와 같이 "dev" 부분을 추가해준다. 

이제 터미널 창에 npm run dev를 입력하면 server와 client 부분이 동시에 실행된다. 

 

 

프로그램 실행 시 발생한 오류

 

터미널 창에 뜬 에러

프로그램 실행시 위와 같은 에러가 발생했는데 해결 방법은 아래와 같다. 

 

코드 수정하여 에러 해결

client와 server 폴더로 나누면서 경로가 변경되었는데 기존 경로를 수정해주지 않아 발생한 에러였다. 

경로를 수정해주니 에러가 해결되었다.