광고 수익을 창출할 웹사이트 만들어보기 4-4(React서버 프론트엔드 부분 기능 추가구현 및 개선사항)

이번엔 Vercel에 배포되어있는 React 웹페이지에 수정 및 구현한 사항에 대해서 알아보겠다.

 

---

리액트는 크게 바뀐건 로고가 생겼다는거, 그리고 화면에 사용자가 어떤 텍스트를 입력했는지 보이게 한 부분 등

짜잘짜잘하게 바뀌었고 크게 바뀐부분은 없다.

 

상세 변경된 Git 커밋내역은 아래와 같다.

 

2024년 12월 8일

1. feat: 카카오톡 공유 기능에 사용자 프롬프트 텍스트 포함
   • 카카오톡 공유 기능 추가.
   • 사용자가 입력한 프롬프트 텍스트를 공유 메시지에 포함하도록 구현.
2. feat: 백엔드 에러 메시지 사용자에게 표시 개선
   • 백엔드에서 발생한 에러를 사용자에게 더 직관적으로 전달하도록 개선.

---

2024년 12월 9일

1. feat: title 수정 및 logo image 추가
   • 프로젝트 타이틀 수정.
   • 로고 이미지를 새롭게 추가하여 UI 개선.
2. feat: detailed_explanation 텍스트 추가
   • detailed_explanation 기능에 텍스트 추가.
   • 사용자 경험 개선을 위한 세부 설명 강화.

---

에러 메세지창 추가

첫번째로 개선 진행한 사항은 백엔드 부분의 에러메세지를 사용자에게 보여준다는 점이다.

const backendUrl = process.env.REACT_APP_BACKEND_URL;

            if (response.data.image_url) {
                setImageUrl(response.data.image_url);
            }
        } catch (error) {
            if (error.response && error.response.data.error) {
                alert(error.response.data.error);
            } else {
                alert("이미지를 생성하지 못했습니다. 다시 시도해 주세요.");
            }
        } finally {
            setLoading(false);
        }
    };

 

첫번째로 .env에 백앤드URL을 추가로 정의해 준 뒤,

.env 파일에 정의된 환경 변수를 가져와 백엔드 API URL을 설정해준다.

 

백엔드에서 받은 응답 데이터에서 image_url 필드가 존재하는지 확인 후 존재한다면,

해당 URL을 React의 상태 변수 imageUrl에 저장한다.

 

• 이 상태 값은 컴포넌트 내에서 이미지를 렌더링하거나 표시하는 데 사용된다. (기존 코드)

 

이후 catch (error)애서 에러가 발생하면

서버 응답 오류(error.response)와 네트워크 오류 또는 기타 예외를 구분하여 적절한 메시지를 사용자에게 보여준다.

 

이전 백엔드에서 검증로직을 구분해놨기 때문에

• 서버에서 응답을 반환했으나 에러가 포함된 경우 처리.
• 서버 응답의 error 필드를 읽어 사용자에게 경고 메시지(alert)로 표시.

위 두가지사항으로 표시가 된다.

 

 

 

위 이미지처럼 필터링이 걸리거나 이상한 값이 들어오면 검증로직으로 빠져 경고 메시지(alert)로 표시한다.

---

카카오톡 공유 기능에 사용자 프롬프트 텍스트 포함

두번째로 개선한 부분은 이미지처럼 카카오톡 공유했을때 이전에는 아무 정보 없이 확인해보세요! 하고 끝났따면

 

현재는 어떤 프롬프트를 입력했는지까지 같이 보여주게 한다는 점이다.

신라면 완전 신라면

 

    const shareToKakao = () => {
        const frontendUrl = process.env.REACT_APP_FRONTEND_URL; // Frontend URL from .env
        if (window.Kakao) {
            if (!imageUrl) {
                alert('생성된 이미지가 없습니다. 먼저 이미지를 생성하세요.');
                return;
            }
            window.Kakao.Share.sendDefault({
                objectType: 'feed',
                content: {
                    title: '만능 그림봇',
                    description: `"${prompt}"로 생성된 이미지입니다.`,
                    imageUrl: imageUrl,
                    link: {
                        mobileWebUrl: frontendUrl,
                        webUrl: frontendUrl
                    }
                }
            });
        } else {
            alert('Kakao SDK is not initialized');
        }
    };

 

 

이 부분은 사실 이부분안 추가한거라 별로 어려울게 없다.

description: `"${prompt}"로 생성된 이미지입니다.`,

 

넘어가도록 한다.

---

detailed_explanation 텍스트 추가

세번쨰로 추가한 기능은 이미지에 대한 디테일한 프롬프트를 추가한 부분이다.

 

코드에서 디테일 프롬프트(상세 설명)를 받는 부분은 axios.post 요청으로 백엔드로부터 데이터를 받아오는 부분이다.

이 값은 플라스크 서버의 응답으로 전달되고, React의 상태 변수인 detailedExplanation에 저장된다.

imageUrl이 존재해야만 detailedExplanation도 함께 렌더링된다.

 

(추가로 설명하자면 Axios는 JavaScript HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 **비동기적으로 HTTP 요청(GET, POST 등)**을 보내고 데이터를 처리하는 데 사용 된다.

 

비동기 방식이기 떄문에  여러 사용자가 동시에 요청을 보내더라도 각각의 요청이 서로 독립적으로 처리된다.

만약 동기방식이면 요청오고 응답하고 하는걸 계속 기다려야 한다. 많이 쓸수록 오래 기달려야됨)

const response = await axios.post(`${backendUrl}/generate`, { prompt });

        if (response.data.image_url) {
            setImageUrl(response.data.image_url);
            setDetailedExplanation(response.data.detailed_explanation); // 상세 설명 저장
        }

 

이후 저장한 detailedExplanation을 화면에 보여준다.

<div className="translated-prompt">
    <p>{detailedExplanation}</p>
</div>

• 디테일 프롬프트를 받는 부분: handleGenerate 함수 내에서 axios.post 요청을 통해 서버로부터 응답받은 response.data.detailed_explanation 값.
• 디테일 프롬프트를 화면에 표시하는 부분: <div className="translated-prompt"> 내부에서 detailedExplanation 상태를 사용하여 렌더링.

# python 로직에서 디테일한 프롬프트는 응답에 같이 껴서 이미지와함께 리액트서버에 전달된다.

return jsonify({
    "image_url": image_url,
    "detailed_explanation": detailed_explanation
})

 

그럼 이렇게 이미지의  아랫부분에 설명이 추가된다.

짜파구리

---

마지막으로 

 

붓을 들고있는 귀여운 여우이미지를 GPT를 통해 생성했다.

이 후 배경을 제거하고 index.html에 title부분에 이미지를 넣어줬다.

 

어려운게 없으니 넘어가겠다.

귀여운 여우나 보자.

---

다음편에 끼속??