키유실록

포트폴리오 페이지: DekiyU-niverse

데키유 — Mon, 26 May 2025 03:04:37 +0900

DekiyU-niverse

완성된 포트폴리오 페이지는 이 곳에서 볼 수 있다.

작업물에 대해

제작 기간

2025. 3. 26. ~ 2025. 3. 27. (약 2일)

사용 기술

서론

본인은 일상 속에서 아이디어를 찾고자 노력하고 있고, 생각이 난 아이디어는 활용하지 못하면 못 배기는 성격이다. 그 아이디어는 여러 가지 형태로서 떠오르는데, 키워드와 같은 단편적인 단어로도 떠오를 수도 있고, 프로젝트의 컨셉, 게임의 스토리 주제 등이 있겠다.

한 가지 아이디어로만 결과물을 만들어내는 것은 무진장 어렵다. 여러 주제와 컨셉, 그리고 내포하고 있는 성격. 그것들을 전부 담아내어야 스스로 만족스러운 결과물이 나온다고 생각하고 있다. 따라서 본인은, 여러 가지 키워드를 적절히 조합하는 능력 또한 아이디어에 범주에 속하는 것이라고 본다.

이러한 아이디어가 가장 빛을 발할 수 있는 프로젝트 중 하나는 단연 포트폴리오라고 할 수 있다. 한 사람의 내면세계, 작업물, 마인드셋, 기술 스택 등, 즉 여러 주제들을 하나의 페이지에 담을 수 있다는 장점이 있기 때문이다. 나를 잘 나타내는 페이지는 곧 나의 평가를 더욱 정확하게 만든다. 정확한 평가는 나를 더 강하게 만들고, 그러지 못한 것들은 갈피를 잡지 못하게 만든다.

포트폴리오의
주제

주제가 '주제 나와라 뚝딱' 해서 나오는 것은 아니지만, 지금 만드는 것은 '포트폴리오'이다. 즉, 나에 대해 가장 잘 나타내는 것이 주요 목적이다. 그러므로 나와 관련된 무언가에서 주제를 가져오는 것이 좋을 것이라고 생각했다.

본인에게는 늘 '나는 우주다'라는 모토가 있었다. 너무 거창할 수도 있지만, 나름대로의 이유가 있다. 무수히 많아 셀 수 없는 양의 구성 요소를 가지고 있다는 것, 그리고 어느 형태로든 서로 상호작용할 수 있다는 것 등이 인체와 우주의 공통점이다. 나도 나 자신이 너무 넓어 스스로 잘 알 수 없지만, 오히려 너무나 넓기에 무한한 가능성이 있다고 생각한다. 다시금 생각해 보면, 여러 번아웃 또한 이러한 마인드로 이겨낸 적이 있었던 것 같다

내가 우주라면, 내가 나를 탐험하는 여행을 함께하는 사람이 있으면 어떨까? 하는 생각이 머릿속을 스쳤다. 포트폴리오를 보고 관심을 가진다는 것 자체가 '나의 탐험'에 관심이 있다는 것이 아닐까? 이걸 '여행'이라고 생각하고, 관심이 있는 사람이 나의 우주로 빠져들게끔 하는 컨셉은 어떨지 고민했다.

최종적으로, 포트폴리오 페이지의 컨셉을 '내 우주를 탐험하는 여행'으로 잡고 개발을 시작했다.

제작 과정 중
인상적인 일들

아이디어에 ChatGPT 활용하기

플랑크톤은 깨방정!

영어를 꾸준히 공부하고 있지만, 아직 완전히 유창하게 하지 못한다. 그리고, 한국어로도 느낌 좋고 누구나 감동받을 수 있는 감언 쓰기를 어려워하는데 영어라고 그게 쉽지는 않을 터다. 스스로의 영어 실력을 너무나 잘 알고 있어서, ChatGPT의 도움을 조금 받기로 했다.

ChatGPT가 추천하는 "이상을 향하는 개발자"에게 어울리는 카피들

살짝씩은 오그라들기도 하지만, 개인적으로는 이 녀석. 생각보다 낭만 있는 것 같다. 하지만 이렇게 많은 카피들을 한 번에 얻으니 오히려 이것들 중에 선택하기가 더 어려웠다. 또, '나'를 최대한 간단하게 표현하는 것은 내 이름(또는 별명)일 것이라는 생각이 갑자기 들어, ChatGPT에게 다시 내 닉네임(Dekiyu)을 사용해서 역두문자어로 카피를 만들어달라고 부탁해보았다.

최근 게임 개발과 시나리오 라이팅 또한 하고 있다는 것을 참고해 주었다.

정말 마음에 드는 카피가 나왔다. '네 우주 속에서 운명이 피어난다'라니. 조금 많이 오그라들지만 오히려 이런 멘트가 눈길을 끌기에는 좋지 않을까? 하는 생각에 그냥 바로 포트폴리오의 비주얼 섹션에 박아넣었다. 이외에도 스크롤 유도 버튼이나, 여행에 참가하길권하는 문구 등을 ChatGPT의 도움을 받아서 작성했다.

아부를 너무 잘 떤다.

디자인 리뷰도 해 주었다! 물론, 사용자의 의도에 따라 최대한 좋은 답변을 한 것이라고 생각한다. 아직까진 ChatGPT와 같은 생성형 AI의 의견은 객관적이라고 보기에 어려우므로, 완전히 믿기보다는 참고만 하는 것이 좋다고 생각한다.

지구본

지구본 섹션. 현재 시간에 따라 지구본의 밤낮이 바뀐다.

가장 애를 많이 먹었다. Three.js에 익숙하지도 않았고 Vertex Shader, Fragment Shader 등을 제대로 알지도 못했다. 이와 관련해서 찾아보느라 시간을 많이 잡아먹은 것 같다... 그럼에도 아직 완전히 이해하지 못했다.

하지만 지구본이 마우스 드래그로 돌아가는 것을 보고 나니 칠레 아저씨 포즈가 자동으로 나왔다. 어려우면 어떠한가! 결과물이 이리도 마음에 드니 애먹던 기억도 싹 사라지는 것만 같다.

마치며

그간 (쓸 것이 없어서) 블로그에 무언가 많이 올리지를 못했다. 기회가 된다면 더 자주 글을 올려보도록 노력하고자 한다...지만 언제 올지는 본인도 알 수가 없다. 하고 있는 프로젝트는 많지만, 그 놈의 완성하기 전까지 아무것도 밝히지 않으려는 욕심 때문에 블로그에 글을 쓸 거리가 없었다.

이 글이 포트폴리오 페이지를 만드는, 특히 주제를 잡는 부분에서 막힌 웹 디자이너나 웹 개발자들에게 도움이 되었으면 좋겠다고 생각한다. (그럴 일은 없다고 생각하지만) 이 작업물이 추후에 많은 관심을 받게 된다면 나중에라도 이 작업물에서 사용한 테크닉 등을 따로 정리하여 올려볼 계획이다.

마지막으로, 긴 글 읽어 주시어 감사드린다.

Node.js에서 WinRT API로 재생 중인 미디어 정보 가져오기: NodeRT

데키유 — Thu, 1 Aug 2024 23:56:30 +0900

서론

여느 기술자나 다 그렇듯, 필자 또한 미래적인 느낌이 나는 것들에 흥미가 있고 좋아한다. 그런 성향 때문인지, 가끔 집에 남는 기기가 생기면 그 기기에 '미래적인 느낌의 소프트웨어'를 직접 개발해서 넣으며 스트레스를 풀곤 한다. 이번에도 집에 안드로이드 태블릿이 하나 남게 되어 무얼 만들까 고민하다가, 예전에 봤던 애니메이션에서 보여준 미래적인 시계에서 아이디어를 얻어 바로 컴퓨터를 켜고 자리에 앉아 코드를 써내려가기 시작했다.

몇 시간이 흘러, 충분히 미래지향적인 시계를 만들 수 있었다. 디지털 시계, 아날로그 시계 기능 뿐 아니라 웹에서 지원하는 MediaDevices.getUserMedia(constraints) 메서드 이용해 만든 거울 기능, 그리고 컴퓨터에서 지금 재생하고 있는 미디어 정보까지 표시해주게끔 만들었다.

벽에 걸고 있는 모습이 조금 조잡하지만, 충분히 마음에 든다.

이 시계를 만들며 가장 노력을 들인 것이 바로 위 사진에서 보이는 현재 음악 정보 표시 기능이다. 이 기능을 어떻게 구현할지 고민한 결과, 다음과 같이 요약할 수 있었다:

Chrome Extension을 만들고 재생 중인 미디어가 있다면 이를 엔드포인트에 전송
Windows에서 현재 재생 중인 미디어 불러오기

필자가 선택한 것은 후자였는데, 작은 규모의 프로젝트를 위해 익스텐션 프로젝트를 하나 더 만들기에는 애매하다는 이유에서였다. 'Windows에서 현재 재생 중인 미디어 불러오기'라고만 써 둔다면 잘 와닿지 않을 수 있지만, 이미 Windows 내에서 이 방식을 사용하는 UI가 존재한다.

상태 설정 위에 보이는 UI가 바로 설명하고자 하는 UI이다.

그렇다면, 해당 UI가 어떤 방식으로 현재 재생 중인 미디어를 불러오는지, 그리고 필자가 해당 기능을 구현하는 데에 있어 어떤 실수들을 했을지 살펴보고자 한다.

Step 1.
NodeRT 설치하기

Windows 8에서는 WinRT(Windows Runtime) API를 지원하고, Windows 10에서는 WinRT를 계승한 UWP(Universal Windows Platform) API를 지원한다. 바로 이 API들이 현재 미디어를 불러오는 역할을 한다. 이를 알게 된 계기는 WinRT를 활용하여 작성된 파이썬 코드를 찾은 것이었는데, 이 코드에서 아이디어를 얻고 Node.js에서 WinRT를 사용하는 방법을 구글링해 보았다. 그리고 찾은 것이 NodeRT였다.

NodeRT는 WinRT API나 UWP API를 Node.js에서 사용할 수 있게끔 만들어주는 라이브러리이다. NodeRT를 사용함으로써 현재 Windows 환경의 온갖 정보들을 가져올 수 있다. 저장소의 샘플에도 있는 내용이지만, 현재 위치를 가져와야 하는 Geolocation 서비스나 화면 캡쳐 등의 여러 기능들을 추가할 수 있다는 장점이 있다.

NodeRT를 사용하려면 먼저 Windows SDK를 설치해야 한다. Visual Studio Installer가 설치되어 있다면 SDK 체크만 하고 설치하면 되지만, 그렇지 않다면 Microsoft Developer Page의 Windows SDK 아카이브에 방문하여 직접 설치할 수 있다.

원하는 SDK를 체크하고 설치한다.

SDK를 설치하였다면, 본격적으로 NodeRT를 프로젝트에서 사용해 보자. GitHub의 README에서는 Windows 10의 Redstone 4 버전 SDK를 설치하게끔 설명하고 있지만, npm에서 조금만 검색해 보면 Windows 11 SDK를 사용하는 패키지들을 찾아볼 수 있다. 필자는 Windows 11 SDK를 사용하는 패키지를 설치했다.

npm i @nodert-win11/windows.media.control

NodeRT 내의 기능은 각각의 패키지로 구분되어 있는데, 필자가 사용할 기능은 'Windows.Media.Control' 네임스페이스 내에 있으므로 windows.media.control 패키지만 설치하면 된다.

Step 2.
미디어 불러오기

WinRT에서는 미디어 세션들을 묶어 매니저를 통해 접근하도록 유도하고 있다. 여기서 사용하는 매니저는 GlobalSystemMediaTransportControlsSessionManager 클래스로, 해당 클래스의 .RequestAsync() 메서드를 호출하여 세션들이 담긴 인스턴스를 가져올 수 있다. 매니저 인스턴스를 가져오는 과정까지의 코드를 작성한다면 다음과 같이 작성할 수 있다.

const mediaControl = require('@nodert-win11/windows.media.control');
const mediaManager = mediaControl.GlobalSystemMediaTransportControlsSessionManager;

mediaManager.requestAsync((_, manager) => {
    console.log(manager);
});

유의해야 할 것은, NodeRT에 구현된 비동기 메서드들이 JS의 await 키워드를 지원하지 않고 오로지 Callback 함수만을 받는다는 것과 결괏값이 Callback 함수의 첫 번째 파라미터가 아닐 수 있다는 것이다. 위 코드에서도, 첫 번째 인자가 매니저 인스턴스가 아닌 undefined이기에 두 번째 인자를 manager라고 작명한 것임을 알 수 있다. 필자는 이 점들을 인지하지 못해서 몇 시간을 낭비했다.

.RequestAsync() 메서드로 불러온 매니저 인스턴스는 .GetCurrentSession()과 .GetSession() 메서드를 가진다. 물론 여러 세션들이 있겠지만, 현재 활성화해 둔 창의 미디어가 제일 중요할 것이라고 생각한다면 필자가 사용해야 할 메서드는 .GetCurrentSession() 메서드일 것이다.

const mediaControl = require('@nodert-win11/windows.media.control');
const mediaManager = mediaControl.GlobalSystemMediaTransportControlsSessionManager;

mediaManager.requestAsync((_, manager) => {
    const currentSession = manager.getCurrentSession();
});

이 메서드는 세션 클래스인 GlobalSystemMediaTransportControlsSession 클래스를 반환한다. 이 세션 인스턴스는 현재 미디어의 정보와 그 정보를 가져오는 메서드를 포함한다. 이 세션 클래스의 .TryGetMediaPropertiesAsync() 메서드를 통해 정보(GlobalSystemMediaTransportControlsSessionMediaProperties 클래스)를 가져올 수 있다.

const mediaControl = require('@nodert-win11/windows.media.control');
const mediaManager = mediaControl.GlobalSystemMediaTransportControlsSessionManager;

mediaManager.requestAsync((_, manager) => {
    const currentSession = manager.getCurrentSession();
    
    if (currentSession != null) {
    	currentSession.tryGetMediaPropertiesAsync(async (_, info) => {
        	const object = {};
            const keys = [
                "albumArtist", "albumTitle", "albumTrackCount",
                "artist", "genres", "playbackType",
                "subtitle", "thumbnail", "title",
                "trackNumber"
            ];

            for (const k of keys) {
                object[k] = info[k];
            }
            
            console.log(object);
        });
    }
});

이제 위 코드를 실행하면 다음과 같은 형식으로 미디어의 정보가 표시될 것이다.

{
    "albumArtist": "",
    "albumTitle": "",
    "albumTrackCount": 0,
    "artist": "Novelbright",
    "genres": {
        "__winRtInstance__": true
    },
    "playbackType": 1,
    "subtitle": "",
    "thumbnail": {
        "__winRtInstance__": true
    },
    "title": "Novelbright - ツキミソウ [Official Live Video at ZeppTokyo]",
    "trackNumber": 0
}

Extra 1.
썸네일에 대해

위 미디어의 정보 형식을 보면 알 수 있듯, 썸네일에 대한 정보를 제대로 보여주지 못한다. 필자가 원한 것은 썸네일 버퍼 데이터를 Blob이나 Base64로 변환한 것이었는데, 여러 문제가 겹쳐 의도대로 되지는 않았다.

원래 로드되는 썸네일은 IRandomAccessStreamReference 인터페이스의 구현체로, .OpenReadAsync() 메서드를 호출하여 스트림 인터페이스인 IRandomAccessStreamWithContentType의 구현체를 얻을 수 있다. 이 구현체는 실제 스트림을 읽고 버퍼에 삽입하는 .ReadAsync(IBuffer, UInt32, InputStreamOptions) 메서드를 가지고 있는데, NodeRT에서는 이 메서드에 접근할 수 없었다.

해당 내용에 대해 찾아보니, nodert-streams 패키지에서 스트림에 관한 내용을 따로 구축하고 있다고 명시하고 있었다. 하지만 유지보수가 잘 되어있지 않은지 Visual Studio 버전과 관련한 오류가 지속적으로 발생하는 것을 보고 썸네일 구현은 포기하였다.

마치며

이번 글에서는 NodeRT에 대해 살펴보고, 실제로 사용해보는 내용을 다루었다. Node.js로 개발하는데도 C# UWP 레퍼런스를 봐야 한다는 것은 오묘했고 썸네일을 구현하지 못한 것은 아쉬웠지만, 충분히 원하는 기능을 만들었으니 나쁘지는 않다고 생각하고 있다.

이 글이 당신에게 유익했거나 참고가 되었다면 아래의 공감 버튼을 한 번 클릭해 주시길 부탁드린다. 필자는 여러분의 의견에 따라 이 글이 실제로 독자에게 도움이 되는지 판단하고, 양질의 컨텐츠를 생산하기 위해 노력하게 된다. 앞으로 여러분들에게 도움이 되는 글을 작성하기 위해서는 도움이 필요하다.

이 글에 오류가 있거나, 지나치게 편향적이거나 주관적인 서술이 존재한다고 생각되거나, 이해를 방해하는 내용, 문체 등을 포함하고 있다고 느껴진다면 언제든지 댓글로 피드백을 작성해 주시어 오류 수정에 도움을 주실 수 있다.

글을 읽어주시어 진심으로 감사드린다.

텍스트 에디터로 메일 전송 페이지 만들기: 웹메일 클라이언트 개발하기 6

데키유 — Sun, 28 Jul 2024 18:19:56 +0900

필자가 개발하고자 하는 웹메일 클라이언트의 프로토타입은 이 글의 내용을 구현함으로써 완성된다. 앞으로의 내용은 UI, UX와 같은 디자인과 관련된 내용이 될 것이기에 연재되지 않을 것이므로, 지금 이 글과 다음 글이 웹메일 클라이언트 개발하기의 마지막 내용이 될 것이다.

SMTP와 SMTP를 활용한 라이브러리인 nodemailer를 사용하는 메일 전송 엔드포인트 개발은 이 글의 Step 8에서 진행하였으므로 아직 읽지 않았다면 한 번쯤 읽어보기를 권장한다. 또한, 이 프로젝트의 진행 과정에 흥미가 있거나, 메일 클라이언트 개발에 참고하고 싶다면 '웹메일 클라이언트 개발하기' 태그 페이지에 방문하여 내용을 읽어보는 것도 좋다.

이 글은 프로젝트 개발의 핵심 내용과 원리를 정리하고자 하는 글일 뿐, 강의를 하려는 목적의 글이 아니다. 따라서, 독자가 HTML, CSS, JavaScript와 같은 웹 프론트엔드의 기초 지식과 Node.js, Express.js와 같은 Node.js 기반 웹 백엔드의 기초 지식을 알고 있다는 가정 하에 작성되었다. 따라서 이러한 기초 지식 없이 글을 읽는다면 당신의 의문점이나 관심사에 큰 도움을 주지 못할 수 있다. 하지만 당신이 실제 서비스를 비슷하게 구현해보고 싶거나, 마땅히 개발에 사용할 아이디어가 없는 사람이라면 이 글이 참고가 될 수도 있다.

Step 14.
프론트엔드: 메일 전송

메일 전송 페이지는 사용자에게 제목, 수신 메일 주소, 첨부 파일, 본문 등 여러 입력 창을 보여주고, 내용을 받아 엔드포인트로 내용을 전송하는 역할을 하는 페이지이다. 이 점을 고려하여 메일 전송 페이지의 ejs 파일을 작성하고, 라우트를 연결한다.

<!-- view/mail_write.ejs -->

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="/assets/scripts/everyday.client.js"></script>
</head>
<body>
    
    <div class="wrap" id="mail-form">
        <div>
            <label for="subject">Subject</label>
            <input type="text" id="subject" name="subject">
        </div>

        <br>

        <div>
            <label for="to">To</label>
            <div class="to-list"></div>
            <input type="text" id="to" name="to">
            <button id="to-add">Add</button>
        </div>
        
        <br>

        <div class="editor-wrap">
            <p>Content</p>
            <div class="editor-menu">
                <button id="bold-btn" type="button">
                    <b>Bold</b>
                </button>
                <button id="italic-btn" type="button">
                    <i>Italic</i>
                </button>
                <button id="underline-btn" type="button">
                    <span style="text-underline-offset: 16%; text-decoration: underline">Underline</span>
                </button>
                <button id="line-through-btn" type="button" style="margin-right: 30px;">
                    <span style="text-decoration: line-through">Line-Through</span>
                </button>
     
                <div>
                    <span style="display: inline-block; margin-right: 10px; font-size: .9em">Text Size</span>
                    <button class="text-size-btn" type="button" data-prop="1">Small</button>
                    <button class="text-size-btn" type="button" data-prop="3">Normal</button>
                    <button class="text-size-btn" type="button" data-prop="5">Big</button>
                    <button class="text-size-btn" type="button" data-prop="7">Bigger</button>
                </div>
            </div>
            <div id="editor" style="width: 400px; height: 200px" contenteditable="true"></div>
            <textarea id="editor-raw" readonly style="display: none"></textarea>
        </div>
        
        <br>

        <div>
            <label for="attachment">Attachments</label>
            <div id="attachment-list"></div>
            <input type="file" name="attachment" id="attachment">
        </div>
        
        <br>

        <button id="send">Send</button>
    </div>

</body>
</html>

// route/public.route.js

// ...

router.use("/create", checkUserPermission);
router.get("/create", (req, res) => {
    // Create a new email
    res.render("mail_write");
});

// ...

메일 작성 페이지

ejs 파일의 HTML 구조 내에 있는 각 입력창을 $ELEMENTS에 넣음으로써 추후에 쉽게 접근할 수 있도록 만든다. 텍스트 에디터의 관련된 버튼은 $ELEMENTS에 넣지 않고 추후에 메서드에서 이벤트 리스너를 등록한다.

// assets/scripts/everyday.client.js
// ...

const Client = {
    // ...
    initTable() {
        Object.assign($ELEMENTS, {
            // ...
            "write.input.subject": {
                element: document.querySelector("#subject")
            },
            "write.input.to": {
                element: document.querySelector("#to")
            },
            "write.input.body": {
                element: document.querySelector("#editor-raw"),
                eventListeners: [
                    {
                        event: "input",
                        eventListener: Client.writePage.onBodyInput
                    }
                ]
            },
            "write.input.attachment": {
                element: document.querySelector("#attachment"),
                eventListeners: [
                    {
                        event: "input",
                        eventListener: Client.writePage.onFileInput
                    }
                ]
            },

            "write.button.toAdd": {
                element: document.querySelector("#to-add"),
                eventListeners: [
                    {
                        event: "click",
                        eventListener: Client.writePage.addReceiver
                    }
                ]
            },
            "write.button.send": {
                element: document.querySelector("#send"),
                eventListeners: [
                    {
                        event: "click",
                        eventListener: Client.writePage.send
                    }
                ]
            },
            
            "write.list.to": {
            	element: document.querySelector(".to-list")
            },
            "write.list.attachments": {
            	element: document.querySelector("#attachment-list")
            },
            
            "write.editor": {
            	element: document.querySelector("#editor"),
                eventListeners: [
                    {
                        event: "initialize",
                        eventListener: Client.writePage.initEditor
                    },
                    {
                        event: "input",
                        eventListener: Client.writePage.onBodyInput
                    }
                ]
            }
        });
    },
    // ...
};

이벤트 리스너로 사용한 ..writePage 객체의 여러 메서드들을 정의한다.

// assets/scripts/everyday.client.js
// ...

const Client = {
    // ...
    writePage: {

        onBodyInput() {

        },


        onFileInput() {

        },


        addReceiver() {

        },
        
        
        initEditor() {
        
        },


        async send() {

        }

    },
    // ...
};

먼저 구현할 것은 ..writePage.toAdd() 메서드, 즉 받는 사람을 추가하는 메서드이다. input#to 개체의 값을 배열에 추가하고, 배열의 내용을 div.to-list 개체 내에 표시한다.

// assets/scripts/everyday.client.js

// ...

const Client = {
    // ...
    writePage: {
        
        to: new Set(),
        
        // ...
        
        addReceiver() {
            const address = $ELEMENTS["write.input.to"].element.value;

            const isEmpty = address.trim().length < 1;
            const emailExp = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z]+\.[a-zA-Z]+$/;

            if (isEmpty || !emailExp.test(address))
                return;

            Client.writePage.to.add(address);
            Client.writePage.showReceivers();
        },


        showReceivers() {
            $ELEMENTS["write.list.to"].element.innerHTML = "";

            for (const address of Client.writePage.to) {
                const element = document.createElement("p");

                element.innerHTML = address;
                element.addEventListener("click", _ => Client.writePage.removeReceiver(address));

                $ELEMENTS["write.list.to"].element.appendChild(element);
            }
        },


        removeReceiver(address) {
            Client.writePage.to.delete(address);
            Client.writePage.showReceivers();
        },
        
        // ...
        
    },
    
    // ...
    
};

// ...

받는 메일 리스트 구현

첨부 파일 입력란은 받는 메일 입력란과 비슷한 방식으로 작동되므로 쉽게 구현할 수 있다. ..writePage.onFileInput(event) 메서드를 구현한다.

// assets/scripts/everyday.client.js

// ...

const Client = {
    // ...
    writePage: {
        
        // ...
        files: [],
        
        // ...
        
        onFileInput(event) {
            for (const file of event.target.files) {
                const fr = new FileReader();

                fr.onload = () => {
                    const filename = file.name;
                    const content = fr.result.split(",")[1];

                    Client.writePage.files.push({ filename, content });
                    Client.writePage.showFiles();
                }

                fr.readAsDataURL(file);
            }
        },


        showFiles() {
            $ELEMENTS["write.list.attachments"].element.innerHTML = "";

            for (const [i, { filename }] of Object.entries(Client.writePage.files)) {
                const element = document.createElement("p");

                element.innerHTML = filename;
                element.addEventListener("click", _ => Client.writePage.removeFile(i));

                $ELEMENTS["write.list.attachments"].element.appendChild(element);
            }

            console.log(Client.writePage.files);
        },


        removeFile(idx) {
            Client.writePage.files = Client.writePage.files.filter((v, i) => i != idx);
            Client.writePage.showFiles();
        },
        
        // ...
        
    },
    
    // ...
    
};

// ...

이번에는 에디터에 관련된 이벤트 리스너들을 구현한다. ..writePage.initEditor()를 먼저 구현해 본다. contenteditable 속성이 적용되어 있는 div 개체는 document.~~execCommand~~(command)으로 폰트, 크기 등을 설정할 수 있다.

// assets/scripts/everyday.client.js

// ...

const Client = {
    // ...
    writePage: {
        
        // ...
        
        initEditor() {
            const q = s => document.querySelectorAll(s);
            const setStyle = c => document.execCommand(c) || focusEditor();
            const focusEditor = _ => editor.focus({ preventScroll: true });

            const editor = $ELEMENTS["write.editor"];

            const boldBtn = q("#bold-btn")[0];
            const italicBtn = q("#italic-btn")[0];
            const underlineBtn = q("#underline-btn")[0];
            const strikeBtn = q("#line-through-btn")[0];
            const textSizeBtns = q(".text-size-btn");

            boldBtn.addEventListener("click", _ => setStyle("bold"));
            italicBtn.addEventListener("click", _ => setStyle("italic"));
            underlineBtn.addEventListener("click", _ => setStyle("underline"));
            strikeBtn.addEventListener("click", _ => setStyle("strike"));

            textSizeBtns.forEach(v => {
                v.onclick = _ =>  {
                    document.execCommand("fontSize", false, v.getAttribute("data-prop"));
                };
            });
        },
        
        // ...
        
    },
    
    // ...
    
};

// ...

내용을 작성하고, 스타일을 적용할 수 있다.

내용을 수정할 때마다 textarea에 수정된 내용이 반영되도록, 정확히는 textarea의 내용과 contenteditable div의 내용을 동기화하도록 ..writePage.onBodyInput(event) 메서드를 작성한다.

// assets/scripts/everyday.client.js

// ...

const Client = {
    // ...
    writePage: {
        
        // ...
        
        onBodyInput(event) {
            const isTextArea = event.target instanceof HTMLTextAreaElement;
            const html = event.target.value ?? event.target.innerHTML;

            if (isTextArea)
                $ELEMENTS["write.editor"].element.innerHTML = html;
            else {
                $ELEMENTS["write.input.body"].element.value = html;
            }
        },
        
        // ...
        
    },
    
    // ...
    
};

// ...

각 내용이 잘 반영된다.

모든 내용을 다 받았으므로 실제로 메일을 전송하는 메서드인 ..writePage.send()를 작성함으로써 메일 전송 기능을 마무리한다.

// assets/scripts/everyday.client.js

// ...

const Client = {
    // ...
    writePage: {
        
        // ...
        
        async send() {
            const subject = $ELEMENTS["write.input.subject"].element.value;
            const to = [...Client.writePage.to];
            const attachments = Client.writePage.files;
            const html = $ELEMENTS["write.input.body"].element.value;

            if (subject.trim() == "" || to.length == 0 || html.trim() == "")
                return;

            await sendRequest(POST, "/endpoints/mails", {
                to, subject, html, attachments
            });
            location.reload();
        }
        
        // ...
        
    },
    
    // ...
    
};

// ...

이대로 메일을 전송하려고 시도하면 오류가 발생하는데, 이는 엔드포인트가 받는 사람을 한 명으로 상정하고 작성되었기 때문이다. 따라서, 받는 사람이 여러 명일 수 있도록 엔드포인트를 수정해 준다.

// route/endpoint.route.js

// ...

router.post("/mails", async (req, res) => {
	try {
    	// ...
        
        if (to.length == 0 || [ subject, html ].some(e => e == null || e.trim() == ''))
            return sendResponse(res, 400, "Bad Request");
        
        // ...
    } catch (e) {
    	// ...
    }
}

// ...

이후, 메일을 전송하여 본다. 받는 사람과 첨부파일을 설정하여 잘 전송되는지 확인한다.

메일이 성공적으로 전송되는 모습을 볼 수 있다.

마치며

이렇게, 웹메일 클라이언트의 프로토타입이 완성되었다. 앞으로는 조금의 UI/UX 디자인을 적용하여 GitHub에 소스 코드를 공개하고 누구나 사용할 수 있도록 만들 생각이므로, 많은 관심 부탁드린다. 이후의 UI/UX, 또는 추가 과정을 작업하는 개발일지는 누구나 볼 수 있게 공개할 생각은 아직 없지만, 추후에 공개할 수 있다면 글로 작성해 보도록 노력해 보겠다.

이 프로젝트가 당신에게 유익하다거나, 참고가 되는 프로젝트라고 생각된다면, 아래의 공감 버튼을 한 번 클릭해 주시길 부탁드린다. 여러분의 의견을 바탕으로 이 글이 유익한지, 실제로 독자에게 도움이 되었는지 다시금 생각해 볼 수 있고, 이는 곧 양질의 컨텐츠를 생산하는 것으로 이어진다. 앞으로 여러분들에게 도움이 되는 글을 작성하기 위해 여러분들의 도움이 필요하다.

이 글에 오류가 있거나, 지나치게 편향적이거나 주관적인 서술이 존재한다고 생각되거나, 이해를 방해하는 내용, 문체 등을 포함하고 있다고 느껴진다면 언제든지 댓글로 피드백을 작성해 주시어 오류 수정에 도움을 주실 수 있다. 6부 분량에 이르는 이 긴 과정을 읽어주셔서 진심으로 감사드린다.

웹메일들은 어떻게 메일을 보여주는가: 웹메일 클라이언트 개발하기 5

데키유 — Tue, 23 Jul 2024 22:13:05 +0900

웹메일 클라이언트 개발일지가 벌써 다섯 편이나 작성되었다. 필자로서도, 기나긴 내용의 끝이 다가오기에 더 열정적으로 개발하고 있다. 그중에서도 이번 글은 웹메일 서비스에서 메일 리스트와 메일 상세, 즉 메일 데이터를 가공하여 사용자에게 보여주는 페이지를 작성하는 내용을 다룬다. 이 글에서 요하는 '사용자의 로그인 여부 확인' 등의 내용은 이전 글에서, 메일 데이터를 요청받고 응답하는 백엔드에 관한 내용은 이 글에서 확인해 볼 수 있다. 만약 당신이 필자가 개발하는 이 프로젝트에 관해 관심이 있거나, SMTP 및 POP3를 활용한 클라이언트 개발에 참고하려는 경우 '웹메일 클라이언트 개발하기' 태그 페이지에 방문해 보는 것도 좋다.

이 글은 하나의 개발일지로서, 개발을 위해 필요했던 상식, 지식, 코드 등을 정리해 놓은 글이다. 강의 목적의 글이 아니기에 HTML, CSS, JavaScript와 같은 기초적 프론트엔드 웹 지식과 Node.js, Express.js와 같은 기초적 JavaScript 기반 백엔드 웹 지식을 요한다. 따라서, 개발자가 아니거나, 프로그래밍에 관심이 없는 사람이라면 이 글이 당신의 의문점이나 관심사에 큰 도움을 주지 못할 수도 있다. 당신이 만약 기술은 있지만 아이디어가 없는 사람이거나, 웹 기술이나 이메일 관련 기술에 대해 학습이 필요한 사람이라면 이 글이 도움이 될 수도 있다.

Step 12.
프론트엔드: 메일 리스트

이전 글에서 작성했던 $ELEMENTS 객체 상수를 기억하고 있는가? 이 상수는 Node.querySelector(selector) 메서드의 사용 횟수를 줄이고 코드 가독성 향상을 위해 작성한 것으로, DOM 개체의 기본적인 정보와 해당 개체에 할당되어야 할 이벤트 리스너들을 전부 담고 있다.

const $ELEMENTS = {};

// ...

Object.assign($ELEMENTS, {
    "login.username": {
        element: document.querySelector("#login-id")
    },
    "login.password": {
        element: document.querySelector("#login-pass")
    },
    "login.submit_button": {
        element: document.querySelector("#login-btn"),
        eventListeners: [
            {
                event: "click",
                eventListener: Client.loginPage.submit
            }
        ]
    },
});

하지만, 필자가 지금 개발하려는 페이지는 페이지가 로드되는 즉시 실행되어야 한다. 이를 위해서는 페이지 로드 시 실행되는 이벤트 리스너를 사용해야 할 것이다. 예를 들어서 DOMContentLoaded 이벤트가 있겠다. 이미 필자가 작성한 클라이언트 스크립트에서도 해당 이벤트 리스너를 사용한 모습을 볼 수 있다.

// everyday.client.js

// ...

document.addEventListener("DOMContentLoaded", () => {
    Client.init();
});

하지만, DOMContentLoaded 이벤트에 대해 리스너를 작성하기에는 문제가 한 개 있다. 이는 DOMContentLoaded가 완료되어 이벤트가 발생한 뒤에는 Node.addEventListener(event, callback) 메서드를 통해 새 이벤트 리스너를 할당하더라도 동작하지 않는다. 즉, 일회성 이벤트이다.

DOMContentLoaded 이벤트가 일회성이기에 이벤트 리스너가 호출되지 않는다.

그렇다고, $ELEMENTS 객체에 할당하지 않고 Client를 초기화하는 이벤트 리스너에 코드를 추가하자니, $ELEMENT 상수를 정의한 의의를 해치는 것이라는 느낌이 든다. 그래서 필자가 생각한 방법은, $ELEMENTS 내 요소의 event 값이 특정 값일 때, eventListener를 노드에 할당하지 않고 그 자리에서 즉시 호출하는 것이다.

// assets/scripts/everyday.client.js

    initTable() {
        Object.assign($ELEMENTS, {
            // ...

            "mails.load": {
                element: null,
                eventListeners: [
                    {
                        event: "initialize",
                        eventListener: Client.mailListPage.load
                    }
                ]
            }
        });
    },

// ...

    listen() {
        for (const v of Object.values($ELEMENTS)) {
            for (const listener of (v.eventListeners ?? [])) {
                if (listener.event == "initialize")
                    listener.eventListener();
                else
                    v.element.addEventListener(listener.event, listener.eventListener);
            }
        }
    }
    
// ...

다만, 이렇게 작성한다면 요청한 페이지에 대한 이벤트 리스너뿐만 아니라 event가 "initialize"인 다른 모든 이벤트 리스너가 호출될 것이다. 즉, 필요하지 않은 기능이 작동하여 페이지에 예기치 못한 영향을 끼칠 수 있다는 것이다. 따라서, 코드를 아래와 같이 수정한다.

// assets/scripts/everyday.client.js

// ...

    initTable() {
        Object.assign($ELEMENTS, {
            "login.username": {
                element: document.querySelector("#login-id")
            },
            "login.password": {
                element: document.querySelector("#login-pass")
            },
            "login.submit_button": {
                element: document.querySelector("#login-btn"),
                eventListeners: [
                    {
                        event: "click",
                        eventListener: Client.loginPage.submit
                    }
                ]
            },

            "mails.load": {
                element: document.querySelector("#mails-page"), // <-- 추가
                eventListeners: [
                    {
                        event: "initialize",
                        eventListener: Client.mailListPage.load
                    }
                ]
            }
        });
    },


    listen() {
        for (const v of Object.values($ELEMENTS)) {
            if (v.element == null) // <-- 추가
                continue;

            for (const listener of (v.eventListeners ?? [])) {
                if (listener.event == "initialize")
                    listener.eventListener();
                else
                    v.element.addEventListener(listener.event, listener.eventListener);
            }
        }
    }
    
// ...

페이지에 해당하는 DOM 개체가 있는지 확인한 다음, 개체가 존재할 경우에만 이벤트 리스너 할당 및 실행 코드가 동작하게끔 설계해 둠으로써, 불필요한 경우에도 이벤트 리스너가 실행되는 것을 막았다.

이번에는 리스너로서 사용하려는 Client.mailListPage.load(startIdx?, size?) 메서드를 작성한다. Client 객체 내에 mailListPage 객체를 만들고, 그 안에 메서드를 정의한다.

// assets/scripts/everyday.client.js

// ...

const Client = {
	
    // ...
    
    mailListPage: {

        async load(startIdx = 0, size = 20) {
            const mailList = await sendRequest(GET, `/endpoints/mails?start=${startIdx}&size=${size}`);
            console.log(mailList);
        }

    },
    
    // ...

};

// ...

이 메서드는 메일 리스트 엔드포인트에 시작 메일 인덱스와 응답 크기를 담은 요청을 보내고 이에 응하는 응답을 받는 역할을 한다. 따라서 엔드포인트에 요청을 전송하기 위해 이전 글에서 정의했던 sendRequest(method, uri, body?) 함수를 사용할 것이다.

메서드의 내용은 나중에 구현하고, 일단은 /mails로 접근하면 메서드가 실행되는지 확인해보기 위해서 ejs 파일을 만들고, 라우트에 할당해 본다.

<!-- view/mail_list.ejs -->

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="/assets/scripts/everyday.client.js"></script>
</head>
<body>
    <div class="wrap" id="mails-page">
        <table>
            <thead>
                <tr>
                    <th>발신자</th>
                    <th>제목</th>
                    <th>첨부파일</th>
                    <th>수신 시각</th>
                </tr>
            </thead>

            <tbody id="mail-list">

            </tbody>
        </table>
    </div>
</body>
</html>

// route/public.route.js

// ...

router.use("/mails", checkUserPermission);
router.get("/mails", (req, res) => {
    // Mailbox
    res.render("mail_list");
});

// ...

메일 내용이 잘 표시된다(모자이크).

작성한 ejs 파일의 구조에 따라서, load 메서드에서는 메일의 내용을 받아 가공하여 tbody#mail-list에 적절히 삽입해 주어야 한다. 받는 응답이 JSON 배열 구조이므로, Array.map(callback) 메서드를 사용하여 HTML 구조를 만들고 이를 삽입하는 방향으로 생각해 본다. 엔드포인트에서 돌려주는 응답은 다음과 같은 형식을 가진다.

[
    {
        idx: 1, // 메일 인덱스
        from: {
            value: [
                {
                    name: "", // 보내는 사람 이름
                    address: "" // 보내는 사람 메일
                }
            ]
        },
        subject: "", // 제목
        hasAttachment: true // 첨부파일 여부
    }
]

위 형식을 이용하여 메일 리스트를 보여주는 코드를 작성한다.

// assets/scripts/everyday.client.js
// ...

const getDateString = (rawDate) => {
    const date = new Date(rawDate);
    let dateStr = `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}. `;
    dateStr += `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;

    return dateStr;
};


const Client = {

    // ...
    mailListPage: {

        async load(startIdx = 0, size = 20) {
            const raw = await sendRequest(GET, `/endpoints/mails?start=${startIdx}&size=${size}`);
            const mailList = JSON.parse(raw);

            const trArr = mailList.map((mail) => {
                const sendersLength = mail.from.value.length;
                const firstSender = mail.from.value[0];
                let firstSenderName = firstSender.name;
                const hasMultipleSenders = sendersLength > 1;

                if (firstSenderName.trim() == "")
                    firstSenderName = firstSender.address;

                const date = getDateString(mail.date);
                const hasAttachment = mail.hasAttachment;

                return `
                    <tr>
                        <td>${firstSenderName} ${hasMultipleSenders ? ` + ${sendersLength - 1}` : ""}</td>
                        <td><a href="/mails/${mail.idx}">${mail.subject}</a></td>
                        <td>${hasAttachment ? "✔️" : "❌"}</td>
                        <td>${date}</td>
                    </tr>
                `;
            });

            $ELEMENTS["mails.list"].element.innerHTML = trArr.join("");
        }
       
    },
    
    // ...
    
    initTable() {
    	Object.assign($ELEMENTS, {
            // ...
            "mails.list": {
            	element: document.querySelector("#mail-list"); // tbody
            }
        });
    }
    
    // ...

};

이제 로그인 후 /mails에 접근해 보면 메일 리스트가 로드되는 모습을 볼 수 있다. 발신인의 이름이 없을 경우, 발신인의 메일 주소를 표시하는 모습, 첨부파일 여부가 잘 표시되는 모습, 받은 날짜 또한 형식에 맞추어 표시되는 모습을 전부 볼 수 있다.

메일 리스트가 의도된 대로 표시된다.

Step 13.
프론트엔드: 메일 상세

메일 리스트에 표시되는 링크를 클릭하면 메일 상세 페이지로 이동한다. 이 페이지는 제목, 발신자, 날짜, 내용, 첨부 파일 등 메일에 포함된 여러 데이터들을 사용자에게 표시한다. 메일 리스트 페이지를 만들 때처럼, ejs 파일을 만들고 라우트에 할당한다.

<!-- view/mail_detail.ejs -->

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="/assets/scripts/everyday.client.js"></script>
</head>
<body>
    <div class="wrap" id="mail-detail-page">
        <a href="/mails">Back</a>

        <h1 id="mail-title"></h1>
        <p><b>From:</b> <span id="mail-sender"></span></p>
        <p><b>To:</b> <span id="mail-receiver"></span></p>
        <p><b>Date:</b> <span id="mail-date"></span></p>
        <hr>
        <iframe id="mail-content" frameborder="0"></iframe>
        <div id="mail-attachments"></div>
    </div>
</body>
</html>

// route/public.route.js
// ...

router.use("/mails/:mail_idx", checkUserPermission);
router.get("/mails/:mail_idx", (req, res) => {
    // Mail detail
    res.render("mail_detail");
});

// ...

메일 리스트 페이지의 로드 이벤트 리스너를 작성했던 것과 같이, $ELEMENTS 상수에 DOM 개체와 그에 대한 이벤트 리스너를 명시한다.

// assets/clients/everyday.client.js
// ...

const Client = {
	// ...
    initTable() {
    	Object.assign($ELEMENTS, {
            // ...
            "mails.detail.load": {
                element: document.querySelector("#mail-detail-page"),
                eventListeners: [
                    {
                        event: "initialize",
                        eventListener: Client.mailDetailPage.load
                    }
                ]
            }
        });
    }
	// ...
};

//...

이후 Client.mailDetailPage.load 메서드를 구현한다. 엔드포인트(/endpoints/mails/:mail_idx)에 메일 데이터를 요청하여 돌려받은 응답을 사용자에게 표시하는 역할을 가진다. 물론, 해당 메서드에서 사용할 DOM 개체들을 $ELEMENTS 상수에 명시해 주어야 한다.

// assets/scripts/everyday.client.js
// ...

const Client = {

    // ...
    initTable() {
    	Object.assign($ELEMENTS, {
            // ...
            "mail.detail.subject": {
                element: document.querySelector("#mail-title")
            },
            "mail.detail.from": {
                element: document.querySelector("#mail-sender")
            },
            "mail.detail.to": {
                element: document.querySelector("#mail-receiver")
            },
            "mail.detail.date": {
                element: document.querySelector("#mail-date")
            },
            "mail.detail.content": {
                element: document.querySelector("#mail-content")
            },
            "mail.detail.attachments": {
                element: document.querySelector("#mail-attachments")
            }
        });
    }
    // ...

};

// ...

본격적으로 Client.mailDetailPage.load 메서드를 작성한다. 이 메서드의 내용을 작성하기 위해 필요한 엔드포인트 구조는 다음과 같다.

{
    attachments: [
    	{
            checksum: "",
            content: {
            	type: "Buffer",
                data: [] // 버퍼 데이터 등, type에 따른 raw 데이터
            },
            contentDisposition: "attachment",
            contentType: "audio/mpeg", // MIME 타입
            filename: "0000.mp3", // 파일 이름
            headers: {},
            size: 0 // 파일 크기
        }
    ],
    from: {
    	value: [
            {
            	name: "", // 발신자 이름
                address: "" // 발신자 메일 주소
            }
        ],
        html: "", // HTML 형식으로 표시된 발신자 리스트
        text: "", // 텍스트 형식으로 표시된 발신자 리스트
    },
    to: {
    	value: [
            {
            	name: "", // 수신자 이름
                address: "" // 수신자 메일 주소
            }
        ],
        html: "", // HTML 형식으로 표시된 수신자 리스트
        text: "", // 텍스트 형식으로 표시된 수신자 리스트
    },
    headerLines: [
    	// 메일 헤더 Raw 목록
    ],
    headers: [
    	// 메일 헤더 목록
    ],
    html: "", // 메일 내용 HTML
    idx: 1, // 메일 인덱스
    messageId: "", // 메일 메시지 ID
    subject: "", // 메일 제목
}

위 구조에서 필요한 부분만을 추출하여 DOM 개체의 내용에 삽입함으로써 메일 상세 표시 기능을 완성한다. 메일의 첨부 파일은 데이터를 Blob으로 읽어 들여 Object URL로 만들고, a 태그의 href 속성에 적용함으로써 다운로드할 수 있게끔 만들면 된다.

// assets/scripts/everyday.client.js
// ...

const Client = {
    // ...
    mailDetailPage: {

        async load() {
            const idx = window.location.pathname.split("/")[2];
            const raw = await sendRequest(GET, `/endpoints/mails/${idx}`);
            const detail = JSON.parse(raw);

            const from = detail.from.html;
            const to = detail.to.html;

            const { subject, date, attachments } = detail;
            const dateStr = getDateString(date);
            const body = detail.html;

            const attachmentLinks = attachments.map(attachment => {
                const blob = new Blob(attachment.content.data, {
                    type: attachment.contentType
                });
                const url = URL.createObjectURL(blob);
                const filename = attachment.filename;

                return `<a download="${filename}" href="${url}">${filename}</a>`
            });

            $ELEMENTS["mail.detail.subject"].element.innerHTML = subject;
            $ELEMENTS["mail.detail.from"].element.innerHTML = from;
            $ELEMENTS["mail.detail.to"].element.innerHTML = to;
            $ELEMENTS["mail.detail.date"].element.innerHTML = dateStr;
            $ELEMENTS["mail.detail.attachments"].element.innerHTML = attachmentLinks.join("");

            const iframe = $ELEMENTS['mail.detail.content'].element;
            const iframeDoc = iframe.contentWindow.document;

            const div = iframeDoc.createElement("div");
            div.innerHTML = body;

            iframeDoc.body.appendChild(div);
        }

    },
    // ...
}
// ...

iframe의 내용에는 document.createElement(tagSelector), document.appendChild(node) 메서드를 활용하여 받은 메일 데이터의 HTML 데이터를 삽입한다.

노래방 음악 전송 기능을 사용한 예시.

다운로드가 잘 작동한다.

마치며

이로써 메일 리스트와 메일 상세 기능 구현을 모두 완료했으므로 이제 메일 전송과 관련된 프론트엔드 페이지의 구현만이 남았다. 마찬가지로, ejs 생성과 이벤트 리스너 추가, 그리고 엔드포인트와의 통신만으로 구현해 낼 수 있다.

만약 이 프로젝트가 당신에게 유익하거나, 참고가 될 만한 프로젝트라고 생각한다면, 아래의 공감 버튼을 한 번만 클릭해 주시길 부탁드린다. 필자는 여러분의 의견을 바탕으로 이 글이 얼마나 유익했는지, 얼마나 도움이 되었는지, 소위 '양질의 컨텐츠'인지 다시금 생각해 보아야 한다. 앞으로도 여러분들에게 도움이 되는 글을 작성하기 위해서는 여러분의 도움이 필요하다.

이 글에서 오류가 있거나, 지나치게 편향적이거나 주관적인 서술이 있다고 생각하거나, 이해를 방해하는 내용이나 적절하지 못한 문체를 포함하고 있는 등의 문제가 있다고 생각된다면 언제든지 댓글로 피드백을 작성하여 오류 수정에 도움을 주실 수 있다. 긴 글 읽어 진심으로 감사드린다.

로그인 페이지 구현해보기: 웹메일 클라이언트 개발하기 4

데키유 — Sat, 20 Jul 2024 10:32:25 +0900

이번에도, 글을 시작하기 전에 이전 글을 한 번쯤 읽거나 훑어볼 것을 강력히 권한다. 또한, 이 프로젝트가 어떻게 진행되었는지 궁금하거나 과정에 대해 관심이 있다면, 여기에 글들을 정리해 두었으니 가볍게 읽어보는 것도 좋다. 이 글은 기초적 웹 기술(HTML+CSS, Node.js, Express.js)에 대한 지식을 요구하고, 그에 대한 예제 코드를 포함하고 있어 프로그래밍에 관심이 없거나 웹 기술을 경험해보지 못한 사람에게는 적절하지 않은 내용일 수 있다.

저번 글에서 엔드포인트 개발을 완료했기에, 사용자에게 페이지를 표시하고 엔드포인트에 요청을 전송, 사용자가 원하는 명령을 처리하는 것이 주 목표이다. 로그인, 메일 목록, 메일 상세 정보, 메일 전송 등을 담당하는 페이지를 각각 만들 계획이다. 차례대로 천천히 개발해 본다.

Step 9.
프론트엔드: 라우터 셋

이제, 엔드포인트 라우터가 아닌 프론트엔드를 위한 라우터를 설정해 줄 차례이다. 로그인 페이지를 제외한 모든 페이지는 전부 사용자의 ..session.username의 null 여부를 판단하는 미들웨어를 요한다는 것에 유의하며 코드를 작성한다. 일단, 현재로서 예상 가능한 모든 경우의 라우트를 추가한다.

// route/public.route.js
const express = require('express');
const router = express.Router();



function checkUserPermission(req, res, next, opposite = false) {
    if (req.session.username == null) {
        if (opposite)
            next();
        else
            res.redirect("/login");
            
        return;
    }

    if (!opposite)
        next();
    else
        res.redirect("/");
}


router.use("/login", (req, res, n) => checkUserPermission(req, res, n, true));
router.get("/login", (req, res) => {
    // Login
});


router.use("/", checkUserPermission);
router.get("/", (req, res) => {
    // Dashboard
    res.send("");
});


router.use("/mails", checkUserPermission);
router.get("/mails", (req, res) => {
    // Mailbox
});


router.use("/mails/:mail_idx", checkUserPermission);
router.get("/mails/:mail_idx", (req, res) => {
    // Mail detail
});


router.use("/create", checkUserPermission);
router.get("/create", (req, res) => {
    // Create a new email
});


router.use("/logout", checkUserPermission);
router.get("/logout", (req, res) => {
    // Logout?
});


module.exports = router;

일단 로그인, 대시보드, 메일함, 메일 상세, 메일 전송, 로그아웃에 대한 라우트들을 라우터에 할당한다. 추후 페이지를 만들고 라우트에서 res.render(...) 등을 통해 렌더링하는 방향으로 코드를 작성하면 된다. 로그인 페이지에 대한 라우트에만 checkUserPermission 함수의 opposite 파라미터를 참으로 전송하는 것으로, 예외로서 반대로 동작하도록 설정할 수 있다.

Step 10.
프론트엔드: 로그인

checkUserPermission(req, res, next, opposite?) 함수 정의 부분을 보면, 사용자의 세션 값에 username이 없고 opposite가 거짓이라면, res.redirect(uri) 메서드를 호출하여 강제로 로그인 페이지로 이동시키는 것을 볼 수 있다.

function checkUserPermission(req, res, next, opposite = false) {
    if (req.session.username == null) {
        if (opposite)
            next();
        else
            res.redirect("/login");
        
        return;
    }

    if (!opposite)
        next();
    else
        res.redirect("/");
}

이렇게 설정하고 상술한 것과 같이 로그인 페이지 라우트에 적용되는 미들웨어만 opposite 파라미터를 참으로 넘기는 방식을 사용하여 Guest 상태로 페이지에 접근 시 로그인 페이지를 표시하게끔 만든다.

ejs 파일을 HTML 페이지로서 표시하기 위해 ejs 라이브러리를 설치하고, Express 앱에 포함시킬 필요가 있다. 코드를 적용한 이후에는 res.render(filename) 메서드를 통해 쉽게 ejs 파일을 보여줄 수 있다.

// main.js
// ...

app.set("view engine", "ejs");
app.set("views", "./view");

// ...

이제 ejs를 사용할 수 있게 되었으므로 view 폴더에 login.ejs 파일을 만들고, 템플릿의 기초 내용을 채운다. ejs 템플릿에 대한 문법은 여기에서 확인할 수 있다.

<!-- view/login.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <div class="wrap">
        <h1>Login</h1>
        
        <form onsubmit="return false;" action="">    
            <input type="text" id="login-id" name="login-id" required>
            <input type="password" id="login-pass" name="login-pass" required>
            <button id="login-btn">Login</button>
        </form>
    </div>
</body>
</html>

이제, res.render 메서드를 활용하여 로그인 라우트에 접근하면 view/login.ejs 파일을 보여주도록 설정한다.

// route/public.route.js
// ...

router.use("/login", (req, res, n) => checkUserPermission(req, res, n, true));
router.get("/login", (req, res) => {
    res.render("login");
});

// ...

로그인 페이지가 잘 표시됨을 확인할 수 있다.

상단에서 적용한 미들웨어에 따라, 기본 라우트에 접근할 경우(예제의 경우에는 http://localhost/) 로그인 페이지로 자동으로 리다이렉트되는 것도 확인할 수 있다.

이제, 로그인 페이지를 엔드포인트와 연결하는 코드를 작성한다. /assets 디렉터리를 만들고, Express.js에 정적 디렉토리임을 명시함으로써 웹 페이지에서 JavaScript 파일을 불러올 수 있도록 만들면 된다.

// main.js
// ...

app.use("/assets", express.static(__dirname + "/assets"));

// ...

정적 어셋 디렉터리에 JS 파일을 위한 디렉터리를 생성하고, 그 안에 클라이언트를 담당하는 JS 파일(예제에서는 everyday.client.js)을 생성한다. 이후, 로그인 버튼인 '#login-btn'에 대한 클릭 이벤트 리스너를 작성해줌으로써 로그인 요청을 보낼 수 있도록 만든다.

이벤트 리스너를 작성하기 전에 요청을 전송하는 함수 sendRequest(method, uri, body?)를 작성한다.

// assets/scripts/everyday.client.js
const sendRequest = (method, uri, body = {}) => {
    return new Promise((res, rej) => {
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            const { status } = xhr;
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (status < 400)
                    res(JSON.parse(xhr.responseText));
                else
                    rej(JSON.parse(xhr.responseText));
            }
        };

        xhr.open(method, uri);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(body));
    });
};

그리고 개체와 이벤트 리스너들을 저장하는 객체를 하나 만들어, 이벤트 리스너의 등록, 개체 관리 등을 더욱 쉽게 할 수 있도록 만든다. 이렇게 하면, document.querySelector(selector) 메서드가 여러 번 동작하지 않게 되어 효율적이다.

// assets/scripts/everyday.client.js

const $ELEMENTS = {};

// ...

아직은 아무 내용도 없다. Document가 완전히 로드되고 난 후 속성들을 설정해줄 것이다.

이제 아직 존재하지 않는 메서드인 Client.loginPage.submit() 메서드를 작성해야 한다. 이 메서드가 실질적으로 로그인 요청을 보내는 메서드가 된다.

먼저, Client 객체를 작성한다. 이 객체는 개체 테이블 업데이트, 개체에 이벤트 리스너 추가(할당), 이벤트 리스너들의 컨테이너 등을 담는 역할을 하게 된다.

// assets/scripts/everyday.client.js
// ...

const Client = {

    init() {
        this.listen();
    },


    initTable() {
        Object.assign($ELEMENTS, {
            "login.username": {
                element: document.querySelector("#login-id")
            },
            "login.password": {
                element: document.querySelector("#login-pass")
            },
            "login.submit_button": {
                element: document.querySelector("#login-btn"),
                eventListeners: [
                    {
                        event: "click",
                        eventListener: Client.loginPage.submit
                    }
                ]
            }
        });
    },


    listen() {
        for (const v of Object.values($ELEMENTS)) {
            for (const listener of (v.eventListeners ?? [])) {
                v.element.addEventListener(listener.event, listener.eventListener);
            }
        }
    }

};

Client.init() 메서드는 Client 객체의 초기화 메서드로, 외부에서 Client 내부의 메서드들을 한꺼번에 호출하는 것은 보기에 좋지 않으므로 추가하였다.

이제 Client.loginPage 객체와 Client.loginPage.submit() 메서드를 작성하여 코드를 완성한다. 로그인 요청을 전송하고, 성공 시(Resolve 함수 호출 시) location.href 속성 수정을 통해 대시보드 페이지로 리다이렉트한다. 그렇지 않으면 오류 메시지를 표시하면 된다.

// assets/scripts/everyday.client.js
// ...
const Client = {

    loginPage: {

        async submit() {
            const username = $ELEMENTS["login.username"].value;
            const password = $ELEMENTS["login.password"].value;

            try {
                await sendRequest(GET, "/endpoints/login", { username, password });
                location.href = "/";
            } catch (e) {
                alert("Incorrect ID or password");
            }
        }

    },


    init() {
        this.initTable();
        this.listen();
    },


    initTable() {
        Object.assign($ELEMENTS, {
            "login.username": {
                element: document.querySelector("#login-id")
            },
            "login.password": {
                element: document.querySelector("#login-pass")
            },
            "login.submit_button": {
                element: document.querySelector("#login-btn"),
                eventListeners: [
                    {
                        event: "click",
                        eventListener: Client.loginPage.submit
                    }
                ]
            }
        });
    },


    listen() {
        for (const v of Object.values($ELEMENTS)) {
            for (const listener of (v.eventListeners ?? [])) {
                v.element.addEventListener(listener.event, listener.eventListener);
            }
        }
    }

};

이제, Client의 초기화 메서드를 자동으로 호출해주는 코드를 작성한다. 페이지 컨텐츠가 로드되면 실행할 것이므로 document에 'DOMContentLoaded' 이벤트 리스너를 추가하면 된다.

// assets/scripts/everyday.client.js
// ...

document.addEventListener("DOMContentLoaded", () => {
    Client.init();
});

다시 ejs 파일로 들어와서 작성한 JS 파일을 script 태그로 불러옴으로써 페이지에 스크립트를 적용한다.

<!-- view/login.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <script src="/assets/scripts/everyday.client.js"></script>
</head>
<body>
    <div class="wrap">
        <h1>Login</h1>
        
        <form onsubmit="return false;" action="">    
            <input type="text" id="login-id" name="login-id" required>
            <input type="password" id="login-pass" name="login-pass" required>
            <button id="login-btn">Login</button>
        </form>
    </div>
</body>
</html>

잘못된 ID, 비밀번호 조합을 입력하면 오류가 표시된다.

올바른 ID, 비밀번호를 입력하면 / 페이지로 리다이렉트된다.

Step 11.
프론트엔드: 대시보드

대시보드라는 말은 거창하지만, 사실 별 거 없이 메일함과 메일 작성 페이지로 향하는 메뉴만을 포함하는 페이지이다. 적어도 지금 만드는 프로토타입에서는 그렇다. 따라서, view 디렉터리에 dashboard.ejs 파일을 만들고 내용만 채워 둔다.

<!-- view/dashboard.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <script src="/assets/scripts/everyday.client.js"></script>
</head>
<body>
    <div class="wrap">
        <h1>Dashboard</h1>

        <a href="/logout">Logout</a>
        <a href="/mails">Mail list</a>
        <a href="/create">New mail</a>
    </div>
</body>
</html>

물론, ejs 파일을 res.render를 통해 보여주는 코드도 작성해야 한다.

// route/public.route.js

// ...

router.use("/", checkUserPermission);
router.get("/", (req, res) => {
    // Dashboard
    res.render("dashboard");
});

// ...

로그인하여 대시보드에 접근한 모습.

마치며

ejs 파일을 표시하고, 표시된 ejs 파일에 클라이언트용 JS 파일을 불러와서 엔드포인트와 통신하는 데에 성공했다. 이번에는 Client 객체, sendRequest(method, uri, body?) 함수 등을 설정하기 위해 목표까지 조금 돌아갔지만, 앞으로 구현하는 기능들은 모두 ejs 작성과 이벤트 리스너 추가로 구현되므로 더욱 명확하리라 생각한다.

지금 작성하는 프로젝트 개발일지가 좋은 컨텐츠일지 필자로서는 알 수 없지만, 그래도 당신의 도움이 필요하다. 만약 이 개발일지에 관심이 있거나, 이 개발일지가 유익하거나 좋은, 양질의 컨텐츠라고 생각된다면 아래의 공감 버튼을 한 번 클릭해 주시길 바란다. 이 프로젝트의 마지막 글은 프로젝트에서 사용한 다양한 핵심 개념만을 정리한 내용으로 작성할 생각이기에, 프로젝트에는 관심이 없지만 Nodemailer, mailpop3, Express.js 등의 용례 등에 관심이 있을 경우에도 더욱 도움이 되는 자료를 만들 수 있게끔 도와주시기를 부탁드린다.

본 글에서 오류가 있거나, 지나치게 편향적이거나 주관적인 서술이 있어 이해를 방해하는 등 문제가 있다면 언제든지 댓글로 피드백을 해주어 오류 수정에 도움을 주실 수 있다. 긴 글 읽어 주시어 진심으로 감사드린다.

웹 우체국으로 편지 보내는 방법: 웹메일 클라이언트 개발하기 3

데키유 — Fri, 19 Jul 2024 10:40:56 +0900

글을 읽기 전에, 이전 글을 읽어보기를 권한다. 간략하게나마 언급하자면, 이전 글에서는 Express.js, mailpop3 등을 이용하여 POP3 서버로부터 이메일 리스트를 받아와 RESTful API 형식으로 만들어내는 과정을 거쳤다. 이번에는 POST 요청을 받아 SMTP 서버를 통해 다른 이메일 주소로 메일을 전송하는 코드를 작성할 것이다. 만약, 당신이 이 과정에 대해 관심이 있고 지금 이 글을 통해 처음 접했다면, 웹메일 클라이언트 개발하기 태그 페이지를 방문해보는 것도 좋다.

POP3 과정에서 사용한 라이브러리인 mailpop3는 필자가 사용하기 편하게 구조를 변경할 필요가 있었지만, SMTP 과정에서 사용할 라이브러리인 nodemailer는 그럴 필요 없이 편리하게 코드를 작성할 수 있도록 설계되었다. 따라서, 저번보다는 더 쉽고 빠르게 원하는 기능을 구현할 수 있다.

Step 7.
엔드포인트: 이메일 전송

POST 요청을 통해 실행될 것이므로, 엔드포인트 라우터에 라우트를 한 개 더 추가한다. 로그인한 사용자만 접근할 수 있도록 세션을 체크해야 함을 주의한다.

// route/endpoint.route.js

// ...

function checkUserPermission(req, res, next) {
    if (req.session.username == null) {
        sendResponse(res, 401, "Unauthorized");
        return;
    }
    next();
}

// ...

router.use("/mails", checkUserPermission);
router.post("/mails", async (req, res) => {
    
});

module.exports = router;

Step 3에서 테스트 용도로 미리 작성된 코드를 참고해본다. 메일을 전송할 때마다 Transport를 생성하고 삭제하기보다는 POP3 클라이언트를 clientMap에 저장한 것과 같이 로그인 시에 Transport를 생성되게 하여 Map에 저장하고, 메일을 전송할 때마다 활성화된 Transport가 메일을 전송하게끔 만들면 된다.

// 이전 글에서 SMTP를 테스트하기 위해 사용한 코드
const nodemailer = require("nodemailer");

const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    secure: process.env.SMTP_TLS_SSL == "true",
    auth: {
        user: process.env.TEST_EMAIL,
        pass: process.env.TEST_PASSWORD
    }
});



// route/endpoint.route.js

// ...

const transportMap = new Map();


function createTransport(username, password) {
    return nodemailer.createTransport({
        host: process.env.SMTP_HOST,
        port: process.env.SMTP_PORT,
        secure: process.env.SMtP_TLS_SSL == "true",
        auth: {
            user: username,
            pass: password
        }
    });
}


router.post("/login", async (req, res) => {
    // ...
    	await client.login(username, password);
        // ... POP3 서버 로그인에 성공하면 SMTP Transport를 생성한다.
        transportMap.set(username, createTransport(username, password));
    // ...
});

이후, 미리 만들어둔 메일 전송 라우트에 여러 내용을 포함하여 요청하면 username, 즉 사용자의 이메일을 통해 Transport를 불러오고, 불러온 Transport로 메일을 발송하게 된다.

// route/endpoint.route.js

// ...

router.post("/mails", async (req, res) => {
    const username = req.session.username;

    const { to, subject, html } = req.body;
    const transport = transportMap.get(username);

    if ([ to, subject, html ].some(e => e == null || e.trim() == '')) {
        return sendResponse(res, 400, "Bad Request");
    }

    await transport.sendMail({
        from: username,
        to, subject, html
    });

    sendResponse(res, 200, "Ok");
});

Postman으로 메일 전송 시도

메일이 잘 전송된 모습

받는 메일 주소가 잘못되면 nodemailer가 오류를 Throw함과 동시에 통신 클라이언트에는 커넥션 리셋 오류가 표시된다. 잘못된 메일 주소를 입력하여 nodemailer에서 오류를 던지면 사용자에게 오류가 발생하였음을 알리기 위해 try~catch 문으로 코드를 감싼다.

// route/endpoint.route.js
// ...
router.post("/mails", async (req, res) => {
    try {
        const username = req.session.username;

        const { to, subject, html } = req.body;
        const transport = transportMap.get(username);

        if ([ to, subject, html ].some(e => e == null || e.trim() == '')) {
            return sendResponse(res, 400, "Bad Request");
        }

        await transport.sendMail({
            from: username,
            to, subject, html
        });

        sendResponse(res, 200, "Ok");
    } catch (e) {
        switch (e.responseCode) {
            case 451:
                return sendResponse(res, 451, "DNS Server Error");
            default:
                return sendResponse(res, 400, "Bad Request");
        }
    }
});

Step 8.
엔드포인트: 파일 첨부

이메일의 내용 요소에는 첨부된 파일도 있다. urlencoded를 통해 파일을 업로드받는 방법이 있겠지만, POST 요청의 Body에 Base64 형식으로 받아도 크게 문제될 것이 없다. 따라서 최대한 코드를 변형하지 않고 필요한 코드를 맞추어 넣는다.

// route/endpoint.route.js
router.post("/mails", async (req, res) => {
    try {
        const username = req.session.username;

        let { to, subject, html, attachments } = req.body;
        const transport = transportMap.get(username);

        attachments = attachments?.map(e => {
            const { filename, content } = e;

            if ([ filename, content ].some(el => el == null || el.trim() == ''))
                return null;

            return ({
                filename, content: Buffer.from(content, "base64")
            });
        }) ?? [];

        if ([ to, subject, html ].some(e => e == null || e.trim() == ''))
            return sendResponse(res, 400, "Bad Request");

        if (attachments.some(e => e == null))
            return sendResponse(res, 400, "Bad Attachment");

        await transport.sendMail({
            from: username,
            to, subject, html, attachments
        });

        sendResponse(res, 200, "Ok");
    } catch (e) {
        switch (e.responseCode) {
            case 451:
                return sendResponse(res, 451, "DNS Server Error");
            default:
                return sendResponse(res, 400, "Bad Request");
        }
    }
});

프론트엔드에서 파일 자체를 Base64로 인코딩하고 POST Body에 담아 전송할 것이기에, 따로 가공은 거치지 않고 오로지 유효성 검사만을 실행한다.

Postman으로 메일 전송 시도

첨부파일이 잘 포함된 모습

프론트엔드 단에서 엔드포인트에 첨부 파일 정보를 넘길 때에는, FileReader.readAsDataURL() 등을 사용하여 전송하면 된다.

마치며

SMTP 라이브러리가 편하게 구성되어 있어서 그런지, 정말 쉽게 SMTP 클라이언트를 만들 수 있었다. 다음 과정은 프론트엔드 페이지를 구축하고 엔드포인트와 연결해주는 것이 되겠다.

이번에는 길지 않은 분량이었지만, 여기까지 읽어주신 여러분께 감사의 말씀 전한다. 글 내용에 오류가 있거나, 착오가 있으면 댓글로 피드백해 주시는 것은 언제나 환영한다.

메일은 어떻게 받아오는가: 웹메일 클라이언트 개발하기 2

데키유 — Tue, 16 Jul 2024 08:32:53 +0900

이 글을 읽기 전에, 이전 글을 읽어보는 것을 권한다. 이전 글에서는 계기와 설정 과정만을 생각했다면, 이번 글부터 본격적으로 메일 클라이언트를 개발해 본다. 중점적으로 볼 내용은 엔드포인트 부분으로, 실질적인 메일 전송과 수신을 담당한다. 이 글은 웹메일이 실제 서비스에서 동작하는 원리에 대한 기초적 아이디어를 설명하고 있다. 구현해야 할 분량이 많지 않지만, 프로젝트의 엔드포인트인 만큼 중요한 위치에 있음에 유의하면서 코드를 작성해 본다.

Step 4.
엔드포인트: 사용자 로그인

로그인을 위해 'express-session'과 'memorystore' 라이브러리를 설치해 준다. 메모리에 크나큰 부담을 줄 정도로 세션을 발급할 것은 아니기에, MySQL이나 MongoDB와 같은 데이터베이스를 사용하지 않게끔 메모리에 세션 데이터를 저장해도 문제가 없을 것이라 본다.

{
  "name": "everyday",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./main.js",
    "start:dev": "nodemon --watch ./ --exec \"npm start\""
  },
  "author": "player_decuple",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "express-session": "^1.18.0",
    "mailpop3": "^0.1.0",
    "memorystore": "^1.6.7",
    "nodemailer": "^6.9.14"
  }
}

적용한 라이브러리들을 main.js에서 사용해 볼 때는 다음과 같이 사용한다. 옵션 객체의 secret은 세션 암호화 시의 salt로 사용되기에 아무런 문자열이나 사용해도 괜찮고, resave 옵션은 요청이 들어올 때마다 무조건 세션을 다시 저장하는 옵션이지만 데이터의 충돌을 방지하기 위해 비활성화한다. saveUninitalized 옵션은 데이터가 없어 비어 있는 세션을 저장하는 옵션이다. 마찬가지로 필요하지 않고 효율성만 낮추어 좋을 것이 없으므로 비활성화한다.

const session = require('express-session');
const MemStore = require('memorystore')(session);

const sessionOption = {
    secret: Math.random().toString().split(".").pop(),
    resave: false,
    saveUninitialized: true,
    store: new MemStore({ checkPeriod: maxAgeSec * 1000 })
};
 
// ...

app.use(session(sessionOption));

백엔드나 사용자 데이터를 저장하지 않고 POP3 서버에 로그인 정보를 넘겨 그 응답으로 로그인 여부를 판단하게 된다. 이전 글의 플로우 차트에서 이 부분을 제작함으로써 사용자 로그인을 처리할 수 있다.

로그인 플로우

일단, POST /login으로 요청을 전송하면 받은 요청을 통해 POP3 서버에 로그인 시도해보아야 한다. mailpop3 라이브러리가 POP3Client.login(username, password) 메서드를 통해 POP3 서버 로그인을 지원하므로 받은 사용자 이름(아이디)과 비밀번호 데이터를 그대로 파라미터로 사용하면 된다.

POST 요청은 요청 내의 Body를 통해 데이터를 전송받을 수 있다. RESTful API와의 통신에서는 보통 Body를 JSON 형식으로 사용하는데, JSON 형식으로 전송된 Body의 여러 속성들에 편리하게 접근하기 위해, Express.js 내에 존재하는 파서를 사용하도록 만들어 준다.

// main.js
app.use(express.json());

이제 라우터 등지에서 Body가 자동으로 파싱 되어 req.body.username과 같이 각 속성에 객체처럼 바로 접근할 수 있다.

const express = require('express');
const router = express.Router();

router.post("/login", async (req, res) => {
    const body = req.body;
    const username = req.username;
    const password = req.password;
    
    console.log(username, password);
});

mailpop3는 POP3 서버 연결과 자체 이벤트 처리를 모두 이벤트 리스너 형식으로만 지원하고 있다. 그 말인즉, 필자가 원하는 플로우를 구현하기 위해 여러 제약이 존재한다는 점이다. 예를 들어, 로그인 후에 즉시 메일을 전송하는 플로우 A가 있고, 로그인 후 즉시 메일 리스트를 불러오는 플로우 B가 있을 때, 로그인 이벤트 리스너 내부에서 각 플로우에 대한 코드를 직접 작성해 주어야 한다는 불편함이 있었다.

따라서, mailpop3을 Promise로 동작하게 만들기 위해 아래와 같이 코드를 작성한다.

// core/pop3.client.js

const Core = require("mailpop3");


class POP3Client {

    client;

    host; port; useSSL;


    constructor() {
        this.host = process.env.POP3_HOST;
        this.port = process.env.POP3_PORT;
        this.useSSL = process.env.POP3_TLS_SSL == "true";
    }


    connect() {
        const { host, port, useSSL } = this;

        this.client = new Core(port, host, {
            tlserrs: false,
            enabletls: useSSL,
            debug: false
        });

        return new Promise((res, rej) => {
            this.client.on("connect", res);
            this.client.on("error", rej);
        });
    }


    disconnect() {
        this.client.quit();
    }


    login(username, password) {
        return new Promise((res, rej) => {
            this.client.on("login", (st, raw) => (st ? res : rej)(raw));
            this.client.login(username, password);
        });
    }

}


module.exports = POP3Client;

connect 메서드와 login 메서드는 일회성으로 실행되는 메서드들이기에, 이벤트 리스너를 on으로 등록하여도 큰 상관은 없다. 하지만 LIST나 RETR과 같이 여러 번 실행되는 메서드들은 이벤트 리스너를 off 처리해 줄 필요가 있다.

Reject 처리된 Promise 객체에 await 키워드를 사용할 경우, Error가 Throw 된다는 점을 이용해서, try~catch로 로그인 성공과 실패 여부를 구별해 낼 수 있다.

// route/endpoint.route.js
const express = require('express');
const POP3Client = require('../core/pop3.client');
const router = express.Router();


function sendResponse(res, st, ...msg) {
    res.status(st).send({
        statusCode: st,
        message: msg
    });
}


router.post("/login", async (req, res) => {
    const body = req.body;
    const username = body.username;
    const password = body.password;

    if (username == null || password == null) {
        return sendResponse(res, 400, "Bad Request");
    }

    const client = new POP3Client();
    await client.connect();
    
    try {
        await client.login(username, password);
        sendResponse(res, 200, "OK");
    } catch (e) {
        client.disconnect(); // 로그인에 실패한 클라이언트가 메모리에 점유되는 것을 방지한다
        sendResponse(res, 401, "Invalid username or password");
    }
});


module.exports = router;

로그인 성공 시엔 OK 응답을 돌려준다.

사용자 이름, 비밀번호 조합이 올바르지 않으면 Reject 함수가 실행되고, 401 응답을 돌려준다.

이후의 요청에서 사용자가 누구인지 확인할 수 있도록 세션에 사용자 이름(이메일)을 저장한다. 또한, 사용자마다 다른 클라이언트를 사용할 수 있도록 Map을 활용하여 사용자 이름을 키로, 클라이언트를 값으로 저장한다. 따라서 앞으로의 요청에서는 세션 내의 사용자 이름을 통해 클라이언트를 가져와 원하는 명령을 실행할 수 있다.

const clientMap = new Map();

// ...

router.post("/login", async (req, res) => {
    // ...
    
    try {
        await client.login(username, password);

        if (clientMap.has(username))
            clientMap.get(username).disconnect();
        clientMap.set(username, client);

        req.session.username = username;
        sendResponse(res, 200, "OK");
    } catch (e) {
        client.disconnect();
        sendResponse(res, 401, "Invalid username or password");
    }
});


module.exports = router;

사용자 이름으로 연결된 클라이언트가 이미 존재할 경우 존재하던 클라이언트의 연결을 종료한다. 여기까지만 한다면 사용자 로그인이 완료된다.

Step 5.
엔드포인트: 이메일 리스트

로그인 후 이메일 목록을 확인할 수 있는 메인 페이지에 접근하면 엔드포인트 호출을 통해 메일들을 확인할 수 있어야 한다. 이전 글에서는 메일 목록을 아래와 같은 예제를 통해 불러온 것을 확인할 수 있다.

client.list();


client.on("list", function (st, cnt, no, d, raw) {
    console.log(raw);
});


/*
1 23860
2 30638
3 8559992
4 5656932
...
*/

이 과정 또한 async-await 키워드를 사용하기 위해 Promise 형식으로 변형할 것이다. 그리고 사용자 로그인 이후에도 목록을 불러올 필요가 있기에 하나의 메서드로 정의할 것이다. 이메일의 내용을 추출하기 위해 'mailparser' 라이브러리를 npm을 통해 설치해 준다.

이메일 리스트를 불러오는 .list(startIdx, size) 메서드는 시작 인덱스와 메일의 개수를 받아 제목, 첨부파일 여부 등의 간략한 정보를 반환한다. 이때, 시작 인덱스는 오름차순이다. 즉, 시작 인덱스가 0인 경우 제일 최근의 메일 정보부터 가져오게 된다.

// core/pop3.client.js
const simpleParser = require('mailparser').simpleParser;


class POP3Client {

    // ...

    async list(startIdx, size) {
        const count = await new Promise((res, rej) => {
            const $this = this;
            
            this.client.on("list", function listListener(st, cnt, no, data, raw) {
                (st !== false ? res : rej)(cnt);
                $this.client.off("list", listListener);
            });

            this.client.list();
        });

        const data = [];
        startIdx = count - startIdx;

        for (let i = startIdx; i >= Math.max(startIdx - size, 1); i--) {
            data.push(await this.retr(i));
        }

        return data;
    }


    async retr(idx) {
        return new Promise((res, rej) => {
            const $this = this;

            this.client.on("retr", async function retrListener(st, no, data, raw) {
                const parsed = await simpleParser(data);
                parsed.idx = idx;

                (st !== false ? res : rej)(parsed);
                $this.client.off("retr", retrListener);
            });

            this.client.retr(idx);
        });
    }
    
//  ...

.retr(idx) 함수는 이전 글의 예제와 같이 'idx' 인덱스에 해당하는 메일의 상세 정보를 가져와 파싱한다. 이후 메일 상세 정보 페이지에 접근하기 쉽도록 idx를 파싱한 데이터에 삽입한다.

이후 엔드포인트에서 list 함수를 호출하고 사용자에게 표시한다. 이 엔드포인트는 로그인한 사용자 이외에는 접근할 수 없어야 하므로, 'use'를 통해 미들웨어를 추가해 주는 작업도 필요하다.

// route/endpoint.route.js

// ...

function checkUserPermission(req, res, next) {
    if (req.session.username == null) {
        sendResponse(res, 401, "Unauthorized");
        return;
    }
    next();
}

// ...

router.use("/mails", checkUserPermission);
router.get("/mails", async (req, res) => {
    try {
        const client = clientMap.get(req.session.username);
        const startIdx = (req.start ?? 0) * 1;
        let size = (req.size ?? 20) * 1;

        if (size <= 0 || startIdx < 0 || isNaN(startIdx) || isNaN(size))
            throw new Error();
        if (size > 40)
            size = 40;

        const list = await client.list(startIdx, size);
        const data = list.map((mail) => ({
            idx: mail.idx,
            subject: mail.subject,
            date: mail.date,
            from: mail.from,
            hasAttachment: mail.attachment.length > 0
        }));

        res.status(200).send(data);
    } catch (e) {
        sendResponse(res, 400, "Bad Request");
    }
});

이렇게 하면 로그인 이후 GET /endpoints/mail을 요청하여 메일 리스트를 가져올 수 있다.

필요한 정보만 정확히 표시하고 있다.

Step 6.
엔드포인트: 이메일 상세

이미 이전 단계에서 .retr(idx) 메서드를 만들어두었기에 단순히 RETR 명령을 실행하는 엔드포인트만 작성해도 된다.

// route/endpoint.route.js

// ...

router.use("/mails/:mail_id", checkUserPermission);
router.get("/mails/:mail_id", async (req, res) => {
    try {
        const client = clientMap.get(req.session.username);
        const mailIdx = req.params["mail_id"] * 1;

        if (isNaN(mailIdx))
            throw new Error();

        res.status(200).send(await client.retr(mailIdx));
    } catch (e) {
        console.error(e);
        sendResponse(res, 400, "Bad Request");
    }
});

// ...

하지만 .retr(idx) 메서드가 올바르지 않은 idx를 받으면 메일 정보를 가져올 수 없어 simpleParser 부분에서 오류가 발생한다. .retr(idx) 메서드 하나만으로는 메일함 크기 등을 가져올 수 없으므로, 오류가 발생하면 Reject 함수를 실행하도록 만들어야 한다.

// ...

    async retr(idx) {
        return new Promise((res, rej) => {
            const $this = this;

            this.client.on("retr", async function retrListener(st, no, data, raw) {
                try {
                    const parsed = await simpleParser(data);
                    parsed.idx = idx;

                    (st !== false ? res : rej)(parsed);
                    $this.client.off("retr", retrListener);
                } catch (e) {
                    rej();
                }
            });

            this.client.retr(idx);
        });
    }
    
// ...

이 부분까지 완료하고 나면, 메일을 성공적으로 받아오는 것을 확인할 수 있다.

값을 정상적으로 불러오는 모습

마치며

mailpop3와 mailparser를 통해 메일의 내용을 불러오고 파싱하는 과정이었다. 메일 수정 기능은 거의 사용하지 않고, 메일 삭제 기능은 추후에 구현할 예정이기 때문에 메일 가져오기와 메일 보내기를 주요 기능으로 보고 개발하고자 한다. 다음 글에서는 nodemailer를 사용한 메일 발신에 대한 내용을 확인할 수 있을 것이다. 이번에도 긴 글 읽어 주시어 진심으로 감사한 말씀을 전한다.

내 도메인 주소에서 보내는 메일: 웹메일 클라이언트 개발하기 1

데키유 — Sun, 14 Jul 2024 09:08:32 +0900

도메인 주소는 IP 주소에 비해 외우기 쉽다는 장점이 있어 주로 웹 페이지 등에 쉽게 연결할 수 있도록 사용된다. 도메인 주소 하나만으로도 개인이나 단체의 이름, 특성, 컨셉을 나타낼 수 있기도 하고, 도메인 주소를 부여함으로써 내 웹 페이지에 특별함을 추가해 줄 수도 있다. 시대가 가며 웹 개발을 아예 모르는 사람이더라도 'Velog'나 'Tistory' 등의 유명 블로그 플랫폼이나 'WordPress'와 같은 설치형 블로그를 쉽게 운영할 수 있게 되었기에, '나다움'이나 본인만의 개성을 강조하기 위한 다른 수단으로써 사용되는 것이 보통이 되었다.

하지만 도메인 주소를 꼭 웹 페이지 운영에만 사용할 수 있는가 하면, 그렇지는 않다. 사실 이미 모두에게 친숙한 곳에서 도메인이 사용되는 곳이 있는데, 그것은 바로 이메일이다. 으레 알고 있듯이, 이메일 계정의 '@' 문자 뒤에 오는 것이 도메인 주소다. 포털 사이트에서 만든 계정이 그대로 이메일 주소가 되는 경우가 대다수이기 때문에, 개발자나 회사원이 아닌 일반적인 개인이나 단체라면, 대개 'naver.com', 'gmail.com' 등을 사용하기 마련이다.

내가 도메인 주소를 구매하여 갖고 있다면 웹 사이트 하나만을 위해 사용하는 것은 아까울 수도 있고, 특히 개발자에게는 자신의 도메인 주소로 구성된 메일 주소를 가지고 있는 것이 더 로망 있을 수 있다. 어디서든 내 도메인 주소에 접근하여 그 곳에서 메일을 송신하고, 수신할 수 있다면 그것은 정말 멋져 보일 것이다. 필자는 그러한 가벼운 마음에 '내 도메인에서 작동하는 웹메일 클라이언트'를 개발해보고자 한다.

Step 1.
내 도메인으로 메일 주소 만들기

'도메인으로 메일 주소를 사용할 수 있도록 해주는 서비스'는 이미 많이 존재한다. 'Mailplug'나, 'Mailgun'이 그 좋은 예시이다. 이 서비스 내에선 이메일 프로토콜을 통해 메일 데이터를 직접 전송하고 수신하는 서버인 메일 서버가 존재하고, 이메일 주소의 '@' 뒤에 오는 도메인 주소가 바로 이 메일 서버의 주소를 나타낸다. 따라서, 내 도메인으로 메일 주소를 만들려면 '메일 서버'를 구축해야 한다는 결론에 다다른다.

회사나 규모가 매우 큰 단체, 재단 등이 아니라면, 메일 서버를 자체 구축하는 경우는 많지 않다. 괜히 많은 기업들이 'Mailplug'와 같은 외부 메일 서비스를 이용하는 것이 아니다. 실제로 구축에는 상당히 다양한 과정이 있고, 구축을 완료하더라도 추후 그 메일 서버를 통해 보낸 메일들이 전부 스팸 메일로 분류되는 경우가 생기기도 한다. 따라서 필자도 외부 메일 서비스를 통해 메일 주소를 만드려고 한다.

다음이나 카카오 메일 서비스는 한 번도 사용해 본 적이 없지만, 다음에서 제공하는 '다음 스마트워크'를 통해 메일 주소를 만들어 보았다. 무료라는 점에 이 서비스를 이용했지만, 만약 다른 클라이언트에서 SMTP, POP3에 연결할 수 있는 서비스라면 다른 어떤 서비스라도 이용할 수 있다. 스팸메일이 아니라는 것을 인증하는 SPF까지 설정해야만 Gmail로 메일이 전송되는 점에 유의해야 한다.

SPF까지 설정하면 Gmail 주소로도 이메일이 잘 발송된다.

보유한 도메인 주소의 DNS를 설정할 수 있다면, MX 레코드를 제공된 정보에 따라 설정해주고, SPF 설정을 해주면 이 단계가 끝난다. 필자의 경우는 가비아에서 DNS를 설정할 수 있게끔 기능을 제공하고 있었다.

가비아에서 설정된 DNS 정보

Step 2.
플로우 계획해보기

목표만 생각해 본다면 단순히 클라이언트를 만들고 메일 프로토콜을 통해 메일 서버와 통신하는 것으로 요약할 수 있다. Form에 내용을 입력하여 SMTP를 통해 메일을 전송하고, POP3를 통해 수신된 메일을 가져와 화면에 표시하는 것이 전부이다.

연결, 이메일 목록 받기, 이메일 전송하기만 생각한다면, 이런 모양새일 것이다.

POP3 서버는 엔드포인트로부터 여러 명령어들을 받아 메일 데이터를 전송해 줄 것이고, SMTP 서버는 요청에 따라 사용자가 입력한 메일 정보를 대상 메일 주소로 전송해 주는 역할을 하게 된다.

사용자가 엔드포인트에 로그인을 요청하면, 사용자가 입력한 이메일 주소와 비밀번호를 POP3 서버에 각각 USER, PASS 명령으로 보낸다. POP3 서버가 이에 대해 'OK' 응답을 한다면 사용자가 입력한 이메일 주소와 비밀번호가 로그인 성공한 것으로 간주되어 세션을 부여하고 사용자를 로그인 처리할 것이고, 그렇지 않는다면 사용자에게 Fallback 메시지를 표시할 것이다.

규모가 크지 않기 때문에 세션 데이터를 저장하기 위해 MySQL이나 MongoDB와 같은 데이터베이스들을 사용할 필요가 없다. 도메인 메일 주소를 많은 사람에게 사용할 수 있게끔 할 것도, 내 도메인이 아닌 다른 도메인도 이 서비스를 이용하게끔 할 것도 아니기 때문이다. 만약 추후에 생각이 바뀐다고 해도, 그저 세션 하나만을 저장하는 용도이기에 라이브러리 추가와 설정 정도만 해주면 된다.

Step 3.
서버 준비와 테스트

이번 프로젝트에서는 데이터베이스를 사용하지도 않고, 복잡할 것으로 예상되는 기능이 몇 없으므로 가볍지만 강력한 Node.js 프레임워크인 'Express.js'를 사용하고자 한다. 적절한 장소에 빈 디렉터리를 만든 후 npm을 통해 기본적인 package.json 파일을 작성하고, 빠른 디버깅을 위해 'nodemon'을 설정해 준다.

npm init과 nodemon 설정을 마친 후 package.json

세션 사용을 위한 'express-session'과 디버깅을 위한 'dotenv'도 설치한다. 메일 수신, 발신이 가능하게끔 만들기 위해 SMTP를 통한 메일 전송을 지원하는 'nodemailer'와 POP3를 통해 서버에서 메일을 가져올 수 있는 'mailpop3' 또한 사용해 볼 생각이다.

SMTP, POP3
서버 정보 알아보기

일단, 제일 중요한 기능인 메일의 송수신을 테스트할 생각이다. 따라서, 자체적으로 구축한 메일 서버가 아니라면 관련 설정에서 SMTP와 POP3을 활성화하여야 한다. 그리고, 현재 사용하는 메일 서버의 SMTP 서버 정보와 POP3 정보가 필요하다. 필자가 사용하기로 한 다음 스마트메일에서는 SMTP와 POP3를 활성화할 수 있는 메뉴에서 해당 정보들을 찾을 수 있었다.

다음 메일은 설정에서 SMTP와 POP3를 활성화할 수 있도록 되어 있다.

다음 메일의 POP3 서버와 SMTP 서버 정보

얻은 POP3 서버와 SMTP 서버의 정보를 프로젝트 폴더에 '.env' 파일에 저장하였다.

POP3_HOST=pop.daum.net
POP3_PORT=995
POP3_TLS_SSL=true

SMTP_HOST=smtp.daum.net
SMTP_PORT=465
SMTP_TLS_SSL=true

POP3 연결
테스트하기

미리 설치해 두었던 'mailpop3'를 테스트해 본다. 아래 코드는 순서대로 클라이언트를 POP3 서버에 연결하고, 로그인을 요청하고, LIST 명령어를 전송하여 메일 리스트를 불러오며, 메일 리스트의 2번째 메일을 다운로드하여 데이터를 콘솔에 표시하게끔 작동한다.

// main.js
const POP3Client = require("mailpop3");

const client = new POP3Client(process.env.POP3_PORT, process.env.POP3_HOST, {
    tlserrs: false,
    enabletls: process.env.POP3_TLS_SSL == "true",
    debug: false
});


client.on("connect", function () {
    client.login(process.env.TEST_EMAIL, process.env.TEST_PASSWORD);
    console.log("Mail server connect success");
});

client.on("login", function (st, raw) {
    console.log(raw);
    if (st) {
        console.log("Login Pass");
        client.list();
    } else {
        client.quit();
    }
});

client.on("list", function (st, cnt, no, d, raw) {
    console.log(raw);
    client.retr(2);
});

client.on("retr", function (st, no, d, raw) {
    console.log(d);
});

로그인 요청을 받으면, client.login(username, password)를 실행하여 USER username, PASS password를 POP3 서버에 전송한다. 이후 아래와 같이 "OK" 응답을 받는 경우, 로그인 완료로 간주하고 세션을 발급하게끔 만들 생각이다.

로그인 요청에 대한 POP3 서버의 응답

client.list()를 호출하여 LIST 명령을 서버에 전송하면, 서버는 현재 보관 중인 메일의 ID들을 돌려준다. 앞에 있는 숫자는 인덱스(순번)로, 1부터 시작한다. 그리고 뒤에 있는 숫자가 메일의 ID이다. 중요한 것은 인덱스로, 이를 통해 메일의 상세 내용을 알아볼 수 있다.

LIST 명령어에 대한 POP3 서버의 응답

client.retr(n)을 호출하여 n번 메일을 받는 명령어인 'RETR n'을 서버에 전송하면, 서버는 LIST의 n번 메일의 상세 정보를 돌려준다. 보낸 이, 받은 이, 메시지 ID, 제목과 여러 헤더들이 포함되어 있고, 내용은 Content-Transfer-Encoding 헤더의 내용에 따라 인코딩 되어 있다.

Date: Sun, 14 Jul 2024 06:55:02 +0900 (KST)
From: =?UTF-8?B?6rmA64yA7KSR?= <me@dekiyu.xyz>
To: =?UTF-8?B?6rmA64yA7KSR?= <me@dekiyu.xyz>
Message-ID: <20240714065502.YHQL0uuWSwe9uqY-DZqS3w@kr.decu.hanmail.net>
Subject: =?UTF-8?B?64K06rKM7JOw6riwIO2FjOyKpO2KuA==?=
Errors-To: <kr.decu@hanmail.net>
MIME-Version: 1.0
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: base64
X-Kakaomail-MID: CvAKNAAAAAgAAAGQrheiVQAM2O8=
X-Mailer: mint

PGh0bWw+CjxoZWFkPgogICAgPHN0eWxlPgogICAgICAgIHB7bWFyZ2luLXRvcDowO21hcmdpbi1i
b3R0b206MH0KICAgIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8ZGl2IHN0eWxlPSJjb2xv
cjojMTExO2ZvbnQtZmFtaWx5OkFwcGxlIFNEIEdvdGhpYyBOZW8sTWFsZ3VuIEdvdGhpYywn66eR
7J2AIOqzoOuUlScsc2Fucy1zZXJpZjtmb250LXNpemU6MTBwdDtsaW5lLWhlaWdodDoxLjU7Ij48
cD7rgrTqsozsk7DquLA8L3A+PHA+PGJyPjwvcD48L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+Cg==

받은 이와 보낸 이, 제목의 형식이 익숙하지 않은 형식인데, 이는 Gmail 등 글로벌 이메일 서비스에서 내용을 표시할 때 인코딩 문제로 깨지는 것을 방지하기 위해서 =?UTF-8?B? 문자열과 BASE64로 인코딩 된 문자열을 포함하기 때문이다.

SMTP 연결
테스트하기

mailpop3는 잘 동작함을 확인했다. 리스트를 어떻게 보여주어야 하는가는 잘 생각해보아야 하겠지만, 아직은 테스트 단계이니 넘어가 보고 이번에는 SMTP 통신을 위해 nodemailer를 테스트해 본다. nodemailer는 이벤트 핸들러 기반으로 작성된 mailpop3에 비해 사용하기 상당히 쉽다. 연결하고 메일을 보내는 코드만 작성하면 된다.

const nodemailer = require("nodemailer");

const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    secure: process.env.SMTP_TLS_SSL == "true",
    auth: {
        user: process.env.TEST_EMAIL,
        pass: process.env.TEST_PASSWORD
    }
});

transporter.sendMail({
    from: process.env.TEST_EMAIL,
    to: "playerdecuple@dekiyu.xyz",
    subject: "nodemailer 테스트",
    html: "<b>Hello, world!</b>"
}).then(info => {
    console.log(info);
});

nodemailer는 transport를 생성하고, 생성된 transport가 메일을 송신하는 방식으로 작동한다. mailpop3는 필자가 직접 코드를 작성하여 명령어를 송신해야 하는 데에 반해, nodemailer는 SMTP 명령어를 송신하는 과정을 압축하여 transport를 생성하여 메일을 전송하게끔 만들기만 하면 된다.

대상 메일 주소별 전송 성공 여부, SMTP 서버에서 수신한 응답, 메시지 ID를 돌려받을 수 있다.

{
  accepted: [ 'playerdecuple@dekiyu.xyz' ],
  rejected: [],
  ehlo: [ 'PIPELINING', '8BITMIME', 'SIZE 73400320', 'AUTH LOGIN PLAIN' ],
  envelopeTime: 25,
  messageTime: 2114,
  messageSize: 333,
  response: '250 2.0.0 20240714071111.XgLwZpPFRLy30WDiyh1c1w@me.dekiyu.xyz Message accepted for delivery',
  envelope: { from: 'me@dekiyu.xyz', to: [ 'playerdecuple@dekiyu.xyz' ] },
  messageId: '<6cbc1ff1-a44f-d0b0-19b5-4d70ad03f76b@dekiyu.xyz>'
}

받는 이메일 주소를 가진 계정으로 다음 메일에 로그인하면, 다음과 같이 성공적으로 메일을 받았음을 확인해 볼 수 있다. Gmail과 같은 다른 메일 주소로도 스팸 메일로 분류되지 않고 잘 전송되는 모습을 확인할 수 있었다.

메일이 성공적으로 전송되었다.

Gmail에서도 제목이 깨지지 않은 모습을 확인할 수 있다.

Express.js
설정해 보기

Express.js는 간단한 코드로도 강력한 서버를 개발할 수 있는 웹 프레임워크이다. 미니멀리즘을 추구하는 것은 아니지만 빨리 개발하기 위해 적은 코드로도 큰 효율을 내기 위해 사용하기로 했다. 백엔드에서 예상되는 주요 기능이 웹 페이지를 보여주는 것과, POP3, SMTP 서버로의 데이터 전송, 클라이언트로부터 파일 업로드받기로 요약할 수 있을 정도로 규모가 크지 않아 의도에 부합한다.

require("dotenv").config();


const express = require('express');
const app = express();

const publicRouter = require("./route/public.route");
const endpointRouter = require("./route/endpoint.route");

const port = process.env.EVERYDAY_PORT;


app.listen(port, () => {
    console.log(`Everyday server is listening on port ${port}.`)
});

app.use("/assets", express.static(__dirname + "/assets"));
app.use("/endpoints", endpointRouter);
app.use("/", publicRouter);

퍼블리싱된 웹 페이지를 보여주기 위한 라우터와 REST API를 위한 엔드포인트 라우터를 생성하고 연결해 주면 기본적인 Express.js 설정은 끝이다.

마치며

이 과정을 진행함으로써, Express.js 서버를 설정하고 SMTP, POP3 관련 라이브러리를 사용해 보았으며 플로우 설계를 완료했다. 큰 규모가 아닐 것이라 생각되기에 틈이 날 때 조금씩 개발하여도 빠르게 완료할 수 있으리라고 본다. 프로젝트의 길이가 짧더라도 한 번에 몰아 올릴 정도는 아니기에 여러 부작으로 나누어서 글이 작성될 수 있음에, 불편하시더라도 양해 부탁드린다.

키유실록

포트폴리오 페이지: DekiyU-niverse

작업물에 대해

제작 기간

사용 기술

서론

포트폴리오의주제

제작 과정 중인상적인 일들

아이디어에 ChatGPT 활용하기

지구본

마치며

Node.js에서 WinRT API로 재생 중인 미디어 정보 가져오기: NodeRT

서론

Step 1. NodeRT 설치하기

Step 2. 미디어 불러오기

Extra 1. 썸네일에 대해

마치며

텍스트 에디터로 메일 전송 페이지 만들기: 웹메일 클라이언트 개발하기 6

Step 14. 프론트엔드: 메일 전송

마치며

웹메일들은 어떻게 메일을 보여주는가: 웹메일 클라이언트 개발하기 5

Step 12. 프론트엔드: 메일 리스트

Step 13. 프론트엔드: 메일 상세

마치며

로그인 페이지 구현해보기: 웹메일 클라이언트 개발하기 4

Step 9. 프론트엔드: 라우터 셋

Step 10. 프론트엔드: 로그인

Step 11. 프론트엔드: 대시보드

마치며

웹 우체국으로 편지 보내는 방법: 웹메일 클라이언트 개발하기 3

Step 7. 엔드포인트: 이메일 전송

Step 8.엔드포인트: 파일 첨부

마치며