⚛️ React

서비스를 운영하다보면 이메일을 발송해야 하는 다양한 경우들이 종종 존재합니다. 개인 대 개인으로 이메일을 주고 받는 경우에는 단순히 이메일 서비스에서 제공하는 에디터를 통해 이메일을 작성하면 되지만, 서비스에서는 이미 만들어진 템플릿이 존재해야하죠.언틸에서 사용하고 있는 몇가지 사례를 소개해보자면.. 아래 사진처럼 이메일 로그인을 시도하거나,<img src="https://image.until.blog/morethanmin/article/1731746431184.png" data-width="75%" data-align="center" alt="2165">이메일 회원가입을 시도하는 경우에 이메일을 발송하게 됩니다.<img src="https://image.until.blog/morethanmin/article/1731746474123.png" data-width="75%" data-align="center" alt="2166">이런 이메일 템플릿은 어떻게 만들어질까요?<h2>이메일 템플릿을 만드는 방법</h2>우선 이메일에서는 일반적으로 JavaScript를 포함하거나 실행할 수 없습니다. 이는 보안 및 사용자 경험 문제를 방지하기 위해 대부분의 이메일 클라이언트(Gmail, Outlook 등)에서 JavaScript 실행을 차단하기 때문입니다.아래는 until에서 사용하는 회원가입 이메일 html 양식입니다.<pre spellcheck="false"><code class="language-xml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;

 &lt;head&gt;
 &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
 &lt;/head&gt;
 &lt;div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"&gt;until 회원가입 인증 요청&lt;div&gt;&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&lt;/div&gt;
 &lt;/div&gt;

 &lt;body style="background-color:#ffffff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Helvetica,Arial,sans-serif,&amp;quot;Apple Color Emoji&amp;quot;,&amp;quot;Segoe UI Emoji&amp;quot;"&gt;
 &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:480px;margin:0 auto;padding:20px 0 48px"&gt;
 &lt;tbody&gt;
 &lt;tr style="width:100%"&gt;
 &lt;td&gt;&lt;img alt="Until" height="48" src="https://static.until.blog/logo.png" style="display:block;outline:none;border:none;text-decoration:none;border-radius:50%;margin:0 auto" width="48" /&gt;
 &lt;p style="font-size:24px;line-height:1.25;margin:16px 0;text-align:center;font-weight:bold"&gt;회원가입 인증 요청&lt;/p&gt;
 &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:24px;border:solid 1px #dedede;border-radius:5px;text-align:center"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;환영합니다!&lt;/p&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지 않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면 문의해주세요.&lt;/p&gt;&lt;a href="https://until.blog/login" style="line-height:1.75;text-decoration:none;display:inline-block;max-width:100%;margin:20px 0;font-size:14px;background-color:color(display-p3 0.276 0.384 0.837);color:#fff;border-radius:0.5em;padding:6px 16px 6px 16px" target="_blank"&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%;mso-text-raise:9" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:4.5px"&gt;회원가입 인증&lt;/span&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;/a&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;&lt;a href="https://until.blog/login" style="color:#0366d6;text-decoration:none;font-size:12px" target="_blank"&gt;https://until.blog/login&lt;/a&gt;&lt;/p&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;

&lt;/html&gt;</code></pre>이런 html 템플릿을 직접 만든다면 재사용성도 떨어지고, 크로스 브라우징 이슈가 발생할 수도 있는 등 다양한 문제를 야기하게 됩니다.만약 이런 템플릿의 개수가 늘어날수록 관리하기는 점점더 힘들어지겠죠.그 외에도 모던 웹 개발환경을 사용하지 못함으로써 생기는 모든 단점들이 발생할것입니다.<h2>React 환경에서 이메일 템플릿을 만들 수 있도록 해주는, React-Email</h2>이런 문제를 해결하기 위해 만들어진 서비스가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.email/">React-Email</a>입니다. React-email에서 제공하는 컴포넌트를 통해 이메일 템플릿을 만들면, 알아서 email에서 사용할 수 있는 html로 변환해주고 손쉽게 관리할 수 있도록 도와줍니다.언틸에서도 아래와 같이 React-Email을 사용해 템플릿을 관리하고 있습니다.<img src="https://image.until.blog/morethanmin/article/1731747646091.png" data-width="100%" data-align="center" alt="2167">이 아티클에서는 React-Email을 사용하는 방법을 간략히 설명하겠습니다. 구체적인 가이드는 공식 문서를 참고해보시면 좋겠습니다. <h3>사용법</h3>아래 커맨드를 터미널에 입력하여 React-Email 프로젝트를 init할 수 있습니다.<pre spellcheck="false"><code class="language-bash">npx create-email@latest</code></pre>프로젝트를 열고 <code spellcheck="false">emails</code> 폴더 안에 컴포넌트 정의하듯이 만들고자 하는 이메일 템플릿을 만들면 됩니다. 아래는 react-email을 통해 만든 until 회원가입 템플릿입니다.<pre spellcheck="false"><code class="language-typescript">import {
 Body,
 Button,
 Container,
 Head,
 Html,
 Img,
 Link,
 Preview,
 Section,
 Text,
} from '@react-email/components'
import * as React from 'react'

type SignUpProps = {
 url?: string
}

const logoUrl = 'https://static.until.blog/logo.png'

export const SignUp = ({ url }: SignUpProps) =&gt; (
 &lt;Html&gt;
 &lt;Head /&gt;
 &lt;Preview&gt;until 회원가입 인증 요청&lt;/Preview&gt;
 &lt;Body style={main}&gt;
 &lt;Container style={container}&gt;
 &lt;Img
 src={logoUrl}
 width="48"
 height="48"
 style={{ borderRadius: '50%', margin: '0 auto' }}
 alt="Until"
 /&gt;

 &lt;Text
 style={{
 fontSize: '24px',
 lineHeight: 1.25,
 textAlign: 'center',
 fontWeight: 'bold',
 }}
 &gt;
 회원가입 인증 요청
 &lt;/Text&gt;
 &lt;Section style={section}&gt;
 &lt;Text style={text}&gt;환영합니다!&lt;/Text&gt;
 &lt;Text style={text}&gt;
 회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지
 않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면
 문의해주세요.
 &lt;/Text&gt;
 &lt;Button style={button} href={url}&gt;
 회원가입 인증
 &lt;/Button&gt;
 &lt;Text style={text}&gt;
 또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;
 &lt;Link style={link} href={url}&gt;
 {url}
 &lt;/Link&gt;
 &lt;/Text&gt;
 &lt;/Section&gt;
 &lt;/Container&gt;
 &lt;/Body&gt;
 &lt;/Html&gt;
)

SignUp.PreviewProps = {
 url: 'https://until.blog/login',
} as SignUpProps

export default SignUp

const main = {
 backgroundColor: '#ffffff',
 color: '#24292e',
 fontFamily:
 '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
}

const container = {
 maxWidth: '480px',
 margin: '0 auto',
 padding: '20px 0 48px',
}

const section = {
 padding: '24px',
 border: 'solid 1px #dedede',
 borderRadius: '5px',
 textAlign: 'center' as const,
}

const text = {
 margin: '0 0 10px 0',
 textAlign: 'left' as const,
}

const button = {
 margin: '20px 0',
 fontSize: '14px',
 backgroundColor: 'color(display-p3 0.276 0.384 0.837)',
 color: '#fff',
 lineHeight: 1.75,
 borderRadius: '0.5em',
 padding: '6px 16px',
}

const link = {
 color: '#0366d6',
 fontSize: '12px',
}</code></pre>이렇게 만들어진 이메일 템플릿을 개발서버에서 바로 전송해 테스트해볼 수도 있고, html 로 변환된 코드도 확인할 수 있습니다. <img src="https://image.until.blog/morethanmin/article/1731748353148.png" data-width="100%" data-align="center" alt="2168"><h2>결론</h2><ul><li>이메일 템플릿을 모던 웹 환경에서 체계적으로 관리해야한다면, React-email을 고려해보자</li></ul>

react-email을 사용하여 리액트 환경에서 이메일 템플릿을 편하게 관리하는 방법을 소개합니다.

React로 이메일 템플릿 쉽게 만들고 관리하기 (react-email)

<h3>코딩테스트 준비 일지</h3><ul class="tight" data-tight="true"><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/dashboard">해커랭크</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/challenges/one-month-preparation-kit-mini-max-sum/problem?isFullScreen=true&amp;h_l=interview&amp;playlist_slugs%5B%5D=preparation-kits&amp;playlist_slugs%5B%5D=one-month-preparation-kit&amp;playlist_slugs%5B%5D=one-month-week-one">Mini-Max Sum</a></li><li>난이도 : 하</li></ul><h3>문제</h3>Given five positive integers, find the minimum and maximum values that can be calculated by summing exactly four of the five integers. Then print the respective minimum and maximum values as a single line of two space-separated long integers.Example arr = [1,3,5,7,9] The minimum sum is 1+3+5+7 = 16 and the maximum sum is 3+5+7+9 = 24 . The function prints<pre spellcheck="false"><code>16 24</code></pre>Function DescriptionComplete the miniMaxSum function in the editor below.miniMaxSum has the following parameter(s):<ul class="tight" data-tight="true"><li>arr: an array of 5 integers</li></ul>PrintPrint two space-separated integers on one line: the minimum sum and the maximum sum of 4 of 5 elements.Input FormatA single line of five space-separated integers.Constraints1 &lt;= arr[i] &lt;= 10^9Output FormatPrint two space-separated long integers denoting the respective minimum and maximum values that can be calculated by summing exactly four of the five integers. (The output can be greater than a 32 bit integer.)Sample Input<pre spellcheck="false"><code>1 2 3 4 5</code></pre>Sample Output<pre spellcheck="false"><code>10 14</code></pre>ExplanationThe numbers are 1, 2, 3, 4 and 5. Calculate the following sums using four of the five integers:<ol class="tight" data-tight="true"><li>Sum everything except 1, the sum is 2 + 3 + 4 + 5 = 14.</li><li>Sum everything except 2, the sum is 1 + 3 + 4 + 5 = 13.</li><li>Sum everything except 3, the sum is 1 + 2 + 4 + 5 = 12.</li><li>Sum everything except 4,the sum is 1 + 2 + 3 + 5 = 11.</li><li>Sum everything except 5, the sum is 1 + 2 + 3 + 4 = 10.</li></ol>Hints: Beware of integer overflow! Use 64-bit Integer.<h3>문제 풀이 접근</h3>이 문제도 사실상 Basic 문제라, 어려울 건 없다. 딱 문제 보자마자 보이는 것이 있다. Minimum, Maximum 값 구해주세요. 5가지의 정수를 던져주고 Minimum은 당연히 제일 큰 수 빼고 더하는 것일 거고, Maximum은 제일 작은 수 빼고 더하면 나올 수 있는 조합 중 가장 큰 수가 될 것 이다. 더군다나 친절하게도 Hint. 오버플로우를 조심해! 64 비트 정수형을 써라고 알려주니 당연히 long 으로 결과 값을 담아주었다. 원리는 아래에 설명되어있다.<ol class="tight" data-tight="true"><li>최소, 최대 변수를 빼기 쉽게 정렬한다.</li><li>더하기 전, Minimum 은 Count -1 일 때, 더하지 않는다.</li><li>Maximum은 0 일때 더하지 않는다.</li></ol><h3>작성 코드 ( C# )</h3><pre spellcheck="false"><code>using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.Collections;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.Serialization;
using System.Text.RegularExpressions;
using System.Text;
using System;
class Result
{/*
 * Complete the 'miniMaxSum' function below.
 *
 * The function accepts INTEGER_ARRAY arr as parameter.
 */
public static void miniMaxSum(List&amp;lt;int&amp;gt; arr)
{
long minimum = 0;
long maximum = 0;arr.Sort((a, b) =&amp;gt;
{
return a.CompareTo(b);
});for(int i = 0; i &amp;lt; arr.Count; ++i)
{
if (i == 0) continue;maximum += arr[i];}for (int i = 0; i &amp;lt; arr.Count; ++i)
{
if (i == (arr.Count -1)) continue;minimum += arr[i];}Console.Write($"{minimum} {maximum}");}}class Solution
{
public static void Main(string[] args)
{ List&amp;lt;int&amp;gt; arr = Console.ReadLine().TrimEnd().Split(' ').ToList().Select(arrTemp =&amp;gt; Convert.ToInt32(arrTemp)).ToList();Result.miniMaxSum(arr);}}</code></pre>

해커랭크 - 1 Month Preparation Kit 2번 문제.