Front & Back 서버 연결(axios 실습)

기술과제

• Python Falsk 가 무엇인지

• Axios가 무엇인지 (Fetch함수는 무엇인지)

코딩과제

• 본인 포트폴리오 코드 Github에 올리기

• Varcel에 본인 코드 배포하기

• 본인이 만든 파이썬코드 내용을 Flask에 이동시키기

• localhost:5000/sendMessage API 만들기

• API호출, Next.js에서 사용자가 입력한값을 보내기 (Axios요청)

• 개발자도구 콘솔창에 응답값을 console.log가지고 찍어보기

---

https://eatitstory.tistory.com/22

백엔드 서버 구현해보기(flask 실습)

위 블로그 글에서 계속 이어나가서
 
 
axios
-자바스크립트에서 비동기로 http 통신을 쉽게 처리할 수 있도록 만든 라이브러리
-외부 라이브러리로 별도의 설치가 필요하며 import 또는 require필요
-운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
-http 요청 취소 및 요청과 응답을 json형태로 자동 변경 시켜 줌
-백엔드 서버와 프론트엔드 서버 간의 통신으로 데이터를 가져오거나 전송하는데 사용

fetch
-자바스크립트에서 api를 연동하기 위해서 사용
-웹 브라우저의 내장 api이기 때문에 별도의 라이브러리 설치 없이 사용 가능(import 필요없음)
-백엔드 서버와 프론트엔드 서버 간의 통신으로 데이터를 가져오거나 전송하는데 사용
-josn 변환 과정 필요
 
axios가 좀 더 호환성(여러 브라우저에서 가능) 및 기능이 많아 사용을 많이 한다
 
axios 기본세팅

npm install axios

 

import axios from 'axios';

// GET 요청 보내기

axios.get('https://jsonplaceholder.typicode.com/posts')

  .then(response => {

    console.log('Response:', response.data);

  })

  .catch(error => {

    console.error('Error fetching data:', error);

  });

// POST 요청 보내기

axios.post('https://jsonplaceholder.typicode.com/posts', {

    title: 'foo',

    body: 'bar',

    userId: 1

  })

  .then(response => {

    console.log('Response:', response.data);

  })

  .catch(error => {

    console.error('Error posting data:', error);

  });

 
 
• API호출, Next.js에서 사용자가 입력한 값을 보내기 (Axios요청)

import React, { useState } from 'react';

import axios from 'axios';

const ChatGPT = () => {

    const [inputValue, setInputValue] = useState('');

    const [chatHistory, setChatHistory] = useState([]);

    const [responseMessage, setResponseMessage] = useState('');

    const [isTyping, setIsTyping] = useState(false); // 초기에는 "입력하세요" 메시지를 표시하지 않습니다.

    const sendMessage = async () => {

        try {

            const response = await axios.post('http://127.0.0.1:5000/sendMessage', {

                user_input: inputValue // 사용자가 입력한 값을 전송합니다.

            });

            setResponseMessage(response.data.description);// API 응답에서 내용을 가져와 상태에 설정합니다.

            // 채팅 기록에 사용자가 입력한 메시지와 챗봇의 응답을 추가합니다.

            setChatHistory(prevChat => [...prevChat, { text: inputValue, sender: 'user' }]);

            setChatHistory(prevChat => [...prevChat, { text: response.data.description, sender: 'bot' }]);

            // 상태가 제대로 업데이트되었는지 콘솔에 출력

            console.log('Response message:', response.data.description);

        } catch (error) {

            console.error('Error sending message:', error);

        }

        // 사용자가 입력한 메시지를 비웁니다.

        setInputValue('');

        // 사용자가 입력 중인 것으로 간주하여 "입력해주세요" 메시지를 숨깁니다.

        setIsTyping(false);

    };

    const handleInputChange = (event) => {

        setInputValue(event.target.value);

        // 사용자가 입력을 시작하면 "입력해주세요" 메시지를 숨깁니다.

        setIsTyping(true);

    };

    const handleKeyPress = (event) => {

        if (event.key === 'Enter') {

            sendMessage();

        }

    };

    return (

        <div className="chat-container">

            <div className="chat-history">

                {chatHistory.map((message, index) => (

                    <div key={index} className={`message ${message.sender}`}>

                        {message.text}

                    </div>

                ))}

                {/* 입력 메시지가 없고 사용자가 입력 중이 아닌 경우에만 "입력하세요" 메시지를 표시합니다. */}

                {!isTyping && chatHistory.length === 0 && (

                    <div className="messagebot">서찬에 대해 궁금한 것을 입력하세요</div>

                )}

            </div>

            <div className="chat-input">

                <input

                    type="text"

                    value={inputValue}

                    onChange={handleInputChange}

                    onKeyPress={handleKeyPress} // 엔터 키 입력 감지

                    placeholder="메시지를 입력하세요..."

                />

                <button onClick={sendMessage}>전송</button>

            </div>

        </div>

    );

};

export default ChatGPT;

• 개발자도구 콘솔창에 응답값을 console.log가지고 찍어보기