자바

---

명언 앱 리팩토링 과정

---

명언 앱 테스트 주도 개발

---

1단계 : 테스트할 때 사람이 일일이 입력하는 것을 자동화

//AppTest.java

package com.ll;

import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;

import java.io.ByteArrayOutputStream;
import static org.assertj.core.api.Assertions.*;

public class AppTests {
    @Test
    @DisplayName("출력을 모니터에 하지 않고 문자열로 얻기")
    public void t2() {
        // System.out 에 대한 화면출력 금지 시작
        ByteArrayOutputStream output = TestUtil.setOutToByteArray();

        System.out.print("안녕");

        // 그 동안 출력되지 않던 내용들을 문자열로 반환
        String rs = output.toString();

        // System.out 에 대한 화면출력 금지 끝
        TestUtil.clearSetOutToByteArray(output);

        assertThat(rs).isEqualTo("안녕");

    }
}

//TestUtil.java

package com.ll;

import java.io.*;
import java.util.Scanner;

public class TestUtil {

    public static Scanner genScanner(String input) {
        InputStream in = new ByteArrayInputStream(input.getBytes());

        return new Scanner(in);
    }

    public static ByteArrayOutputStream setOutToByteArray() {
        final ByteArrayOutputStream output = new ByteArrayOutputStream();
        System.setOut(new PrintStream(output));

        return output;
    }

    public static void clearSetOutToByteArray(ByteArrayOutputStream output) {
        System.setOut(new PrintStream(new FileOutputStream(FileDescriptor.out)));
        try {
            output.close();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

---

2~4단계 : 등록할때 마다 명언번호 추가

//AppTestRunner.java

package com.ll;

import java.io.ByteArrayOutputStream;
import java.util.Scanner;

public class AppTestRunner {
    public static String run(String cmd) {
        cmd.stripIndent().trim();
        cmd += "\n종료";

        Scanner sc = TestUtil.genScanner(cmd);
        ByteArrayOutputStream output = TestUtil.setOutToByteArray();

        new App(sc).run();

        String rs = output.toString();
        TestUtil.clearSetOutToByteArray(output);

        return rs;
    }
}

		@Test
    @DisplayName("등록화면에서 명언과 작가를 입력받고, 명언을 생성한다.")
    public void t5() {
        String rs = AppTestRunner.run("""
                등록
                현재를 사랑하라.
                작자미상
                """);

        assertThat(rs)
                .contains("명언 : ")
                .contains("작가 : ")
                .contains("1번 명언이 등록되었습니다.");
    }

    @Test
    @DisplayName("명언이 등록될 때 마다 생성되는 명언의 번호가 1씩 증가한다.")
    public void t6() {
        String rs = AppTestRunner.run("""
                등록
                현재를 사랑하라.
                작자미상
                등록
                나의 죽음을 적들에게 알리지 마라.
                이순신
                등록
                왼손은 거들뿐
                강백호
                """);

        assertThat(rs)
                .contains("1번 명언이 등록되었습니다.")
                .contains("2번 명언이 등록되었습니다.")
                .contains("3번 명언이 등록되었습니다.")
                .doesNotContain("4번 명언이 등록되었습니다.");
    }

---

프론트 - 토스트 UI 에디터

---

에디터 생성

<!-- 토스트 UI 에디터 불러오기 시작 -->

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<!-- 토스트 UI 에디터 불러오기 끝 -->

<!-- 에디터 시작 -->
<h1>에디터 1</h1> 
<div id="editor-1"></div>

<h1>에디터 2</h1>
<div id = "editor-2"></div>

body {
	margin: 0;
}

#editor-1 .toastui-editor-defaultUI {
	border: 0;
}

//에디터 클래스를 사용하기 쉽도록 변경(여기서 쉽다는 뜻은 짧게 쓸 수 있다는 뜻)

const Editor = toastui.Editor;

const editor1 = new Editor({
	el: document.querySelector("#editor-1"),
	initialValue: "첫번째 에디터 기본값입니다!",
	height: "100vh",
	previewStyle: "vertical"
});

const editor2 = new Editor({
  el: document.querySelector('#editor-2'),
	initialValue: "두번째 에디터 기본값입니다!"
});

• 결과
  

---

뷰어 생성

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.min.css" />

<!-- 뷰어 시작 -->
<div id="viewer"></div>

const Viewer = toastui.Editor;

const viewer = new Viewer({
	el: document.querySelector("#viewer"),
	height: "600px",
	initialValue: "# 뷰어 생성"
});

• 결과