REACT + PHP

이강민·2022년 12월 27일

react+php

목록 보기

1/4

REACT

리액트는 페이스북에서 만든 라이브러리로 컴포넌트 구조의 리랜더가 핵심인 자바스크립트 기반의 라이브러리이다. SPA를 통한 사용자 경험 증대와 컴포넌트 기반의 개발로 개발성을 향상시키는 강력한 도구이다.
리액트의 다양한 훅과 커스텀된 라이브러리의 결합은 강력한 어플리케이션을 개발 할 수 있게 해준다. 리액트와 서버리스(파이어베이스 등)기반의 어플리케이션 제작과 노드JS를 통한 백엔드 구현은 다양한 아이디어를 실현시켜준다.
당연히 벡엔드의 툴이 무엇이 되든 프론트에서 요청하여 데이터를 제공받을 수 있다면 어떤 앱이든 만들 수 있다.

PHP

PHP 서버사이드 스크립트 언어로 최초 페이스북이 PHP로 만들어진 것을 모두 알고 있을 것이다. 갑자기 왜 PHP인가?
나는 얼마전 프로젝트를 진행하면서 대부분의 국내 호스팅 제공업체들이 PHP를 기본적으로 제공하는 것을 알 수 있었다. AWS처럼 내가 원하는 서버용 프로그램언어를 설치해서 사용하고 싶었지만 비용이 만만치 않았고 AWS의 단점은 달러로 결재를 해야한다는 것이 크게 부담되었다.
따라서 비교적 비용이 저렴한 카페24 웹호스팅을 사용했다. 카페24에는 개별 언어 호스팅으로 노드 JS서버를 제공하는 호스팅 서비스도 있었지만 예인아트 프로젝트는 일반적인 웹호스팅으로 PHP환경을 제공하였다.

더구나 REACT와 PHP로 어플리케이션을 만든 예시 검색이 나오지않아 내겐 새로운 도전이 아닐 수 없다.

사용 서비스

앞으로 내가 제공할 서비스와 만들 어플리케이션은 PHP서버기반의 REACT 웹페이지를 만들 예정이다. 따라서 카페24에서 제공하는 대표적인 호스팅 서비스 10G 광아우토반 FullSSD+를 이용할 것이다. 나는 개발용이라 많은 트래픽을 발생시키지 않으므로 절약형으로 구매했다. 또한 저가 도메인을 적용하여 실전적인 실습을 적용하려고 한다.
최근에 카페24 도메인 서비스에서 .shop 이 500원에 판매하여 1년 라이센스를 구매하였다. 또한 https는 비교적 비용이 높기에 3개월 무료 라이센스를 갱신하면서 이용하려고 한다.

PHP Mailer

react에서 메일사용

PHP Mailer

보통은 nodeMailer를 사용하여 무료로 메일 api를 이용하지만 우리가 사용할 벡엔드는 PHP로 PHP에서 사용하는 메일을 적용해야한다. PHP에서 제공하는 php mailer라이브러리를 사용하면 된다. 필요 라이브러리는 깃에서 PHPMailer라고 검색하면 다운받을 수 있다.
깃에 들어가면 다음과 같이 예시가 있다.

<?php
//Import PHPMailer classes into the global namespace
//These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

//Load Composer's autoloader
require 'vendor/autoload.php';

//Create an instance; passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->SMTPDebug = SMTP::DEBUG_SERVER;                      //Enable verbose debug output
    $mail->isSMTP();                                            //Send using SMTP
    $mail->Host       = 'smtp.example.com';                     //Set the SMTP server to send through
    $mail->SMTPAuth   = true;                                   //Enable SMTP authentication
    $mail->Username   = 'user@example.com';                     //SMTP username
    $mail->Password   = 'secret';                               //SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port       = 465;                                    //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`

    //Recipients
    $mail->setFrom('from@example.com', 'Mailer');
    $mail->addAddress('joe@example.net', 'Joe User');     //Add a recipient
    $mail->addAddress('ellen@example.com');               //Name is optional
    $mail->addReplyTo('info@example.com', 'Information');
    $mail->addCC('cc@example.com');
    $mail->addBCC('bcc@example.com');

    //Attachments
    $mail->addAttachment('/var/tmp/file.tar.gz');         //Add attachments
    $mail->addAttachment('/tmp/image.jpg', 'new.jpg');    //Optional name

    //Content
    $mail->isHTML(true);                                  //Set email format to HTML
    $mail->Subject = 'Here is the subject';
    $mail->Body    = 'This is the HTML message body <b>in bold!</b>';
    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

메일 변수에 객체를 할당하고 메일 변수에 필요한 정보를 객체형태로 저장하고 send()함수를 사용하면 메일이 보내진다.

react에서 적용?

php에서 사용하는 방법을 깃에서 살펴보았다. 리액트에서 어떻게 적용할까?
답은 간단하다. API처럼 사용하면 된다. 소셜로그인, 지도, 소셜데이터 사용 모두 api로 적용하는데 이는 API의 소스코드안에 실행하는 코드들이 들어있고 우리는 필요할 때마다 요청하여 실행시키는 것이다. 이러한 원리로 PHP 파일을 프론트에서 FETCH나 AXIOS를 통해 요청하면 PHP파일이 실행되고 성공하면 프론트로 성공응답을 반환할 것이다.
대략적인 흐름을 아래 그림과 같이 나타낼 수 있다.

리액트에서는 성공응답을 받으면 then이나 finally 문법을 이용하여 이후 행동을 처리하면 된다. 예를 들어 요청할때 버튼을 로딩스피너로 바꾸고 완료, 성공하면 로딩스피너를 종료하고 초기화면으로 돌아가는 등의 처리를 하면된다.

코드 작성

간단하게 css없이 리액트 프로젝트를 만들고 php 문법을 작성하였다.
mailer.php라는 파일을 만들어 다음과 같이 작성한다. 파일경로를 고려하여 PHPMailer폴더 안에 만들었다. 또한 PHPMailer 라이브러리의 소스코드 또한 저장하였다.

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require 'src/Exception.php';
require 'src/PHPMailer.php';
require 'src/SMTP.php';
$subject = $_POST['subject'];
$content = $_POST['content'];
$sender = $_POST['sender'];
$reciever = $_POST['reciever'];
if (!is_null($subject)) {
  $mail = new PHPMailer(true);
  //$mail->SMTPDebug  = 2;  //디버깅시 필요
  $mail->CharSet = PHPMailer::CHARSET_UTF8; //안쓰면 한글깨짐
  $mail->SMTPAuth = true;
  $mail->SMTPSecure = 'ssl';
  $mail->Host = 'smtp.gmail.com';
  $mail->Port = 465;
  $mail->Mailer = 'smtp';
  $mail->Username = '메일주소';
  $mail->Password = '비밀번호';
  $mail->addAddress('받는이의 메일', 'Receiver');
  $mail->setFrom('보내는 사람 메일', 'Sender');
  $mail->isHTML(true);
  $mail->Subject = $subject;
  $mail->Body = "<h1>" . $sender . "님이 보내는 메시지 입니다." . "</h1>" . $content;
  $mail->send();
}
?>

import React from "react";
import { useNavigate } from "react-router-dom";

export default function SendMail() {
  const navigate = useNavigate();
  const handleSubmit = (e) => {
    e.preventDefault();
    let formElem = document.getElementById("formdata");
    fetch("/PHPMailer/mailer.php", { // ftp서버에 들어있는 경로대로 작성한다.
      method: "POST",
      body: new FormData(formElem),
    })
      .then((res) => {
        console.log(res);
        if (res.ok === false) {
          alert("연결이 원활하지 않습니다.");
          navigate("/");
        } else if (res.ok) {
          alert("메일을 성공적으로 보냈습니다..");
          navigate("/");
        }
      })
      .catch(() => {
        console.log("초기 화면 돌아가기");
      });
  };
  return (
    <div className="form-group">
      <form onSubmit={handleSubmit} id="formdata">
        <p>
          <input type="text" name="subject" placeholder="제목" required />
        </p>
        <p>
          <input type="text" name="sender" placeholder="보내는 사람" required />
        </p>
        <p>
          <textarea name="content" required></textarea>
        </p>
        <p>
          <input type="submit" value={"보내기"} />
        </p>
      </form>
    </div>
  );
}