6월 2주차 기술 회고

토이 프로젝트 (모여봐) 회고

이번주에 프로젝트에서 어떤 것을 했는지 되돌아보자.

이번주에 한 것

• thymeleaf 로 프론트 페이지를 띄웠다.
• html form 을 이용해 기존에 작성해둔 REST API 와 통신하여 데이터의 추가 및 리스트 조회를 구현했다.

느낀것

• 간단하게라도 화면을 그리면 프로젝트 진행률이 착착 올라가는 느낌이다.
  • 이 앱에서 무엇을 할 수 있을지도 조금 더 구체화되는 느낌이다.
  • MVP (Minimum Viable Product) 에 대한 중요성을 느꼈다.
• HTML Form 이 구형이 된 느낌을 받았다.
  • 요즘 대세는 REST API 이다.
  • HTTP Form 의 기본 전송 Content-Type은 application/x-www-form-urlencoded 이다.
  • REST API 에서 자주 쓰는 Content-Type 은 application/json charset=utf-8 이다.
  • 폼에서 데이터를 입력받고 fetch() API 를 통해 네트워크를 구성하게 되었다.

폼의 데이터를 JSON 으로 만드는 방법

document.getElementById("studyGroupForm").onsubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const formProps = Object.fromEntries(formData);

    console.log(formData);
    console.log(formProps);
};

fetch() API 를 통해 HTML 엘리먼트 추가하기

/**
 * @author Jake Seo (n00nietzsche)
 * @returns string json 문자열
 *
 * Form 의 ID 를 집어서 해당 form 내부에 있는
 * 데이터를 JSON 문자열 형태로 반환한다.
 */
function getJson(formId) {
    return JSON.stringify(
        Object.fromEntries(new FormData(document.getElementById(formId)))
    );
}

/**
 * @author Jake Seo (n00nietzsche)
 * @returns Promise<Response>
 *
 * JSON body 를 통해 API 를 호출한다.
 * Response 가 들어있는 Promise 객체를 반환하며,
 * fetchAPI(...).then((response) => callback(response))
 * 위와 같은 형식으로 이용할 수 있다.
 * response.json() 을 통해 결과값 json 문자열을 얻을 수도 있는데,
 * 이도 Promise 객체로 제공되기 때문에
 * fetchAPI(...).then((response) => response.json()).then(json => console.log(json));
 * 위와 같은 형태로 사용해야 한다.
 *
 * @param path API 가 위치한 경로
 * @param method GET, POST, PATCH 등의 HTTP 메서드
 * @param body API 호출 시에 함께 전달할 HTTP Body ex) '{"name":"홍길동"}'
 */
function fetchAPI(path, method, body) {
    return fetch(path, {
        method,
        headers: {
            'Content-Type': 'application/json'
        },
        body
    });
}

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("submitStudyGroup").onclick = (e) => {
        e.preventDefault();
        fetchAPI('/study-groups', 'POST', getJson('studyGroupForm'))
            .then((response) => {
                console.log(response);
                return response.json();
            })
            .then((json) => console.log(json));
    }

    fetch('/study-groups')
        .then((response) => {
            if (response.ok) {
                return response.json();
            }

            throw `네트워크 상에 문제가 있습니다.`
        })
        .then((json) => {
            for (const studyGroup of json) {
                const {id, name, joinUsers, place} = studyGroup;

                append("studyGroupListWrapper", makeTextDiv(id));
                append("studyGroupListWrapper", makeTextDiv(name));
                append("studyGroupListWrapper", makeTextDiv(joinUsers));
                append("studyGroupListWrapper", makeTextDiv(place));
            }
        });
});

function append(id, element) {
    document.getElementById(id)
        .append(element);
}

function makeTextDiv(text) {
    const div = document.createElement("div");
    div.append(document.createTextNode(text));

    return div;
}

반성할 것

• thymeleaf 의 사용법을 아예 까먹었다.
  • 사실 이런 기본 사용법을 까먹는 건 다시 보면 되기에 크게 문제가 되지 않을 수 있는데, 개별지식만 정리하고, 실무형으로 어떻게 사용하는지에 대한 지식을 정리해놓지 않았다.
  • 실무형 지식을 따로 정리해놓자.
  • thymeleaf 의 기본 템플릿 파일 경로는 /resources/template/xxxx.html 이다.

다짐

• 이론적인 것이 아니라 어떻게 사용하는지에 초점을 맞춘 실무용 지식을 따로 잘 정리해놓자.
• MVP 모델링을 이용해 차근차근 진짜로 동작할 수 있는 상태의 앱을 만들자.
  • REST API 만 있는 앱은 동작하는 앱이긴 한데, 가시성이 떨어지긴 한다. 이 부분은 잘 타협해야 할 것 같다.

다음주에 해볼만한 것

• CRUD 를 완성하자.
• 스프링 부트의 active profile 설정법을 포스팅해보자.
• 프로젝트가 시작할 때 active profile 에 따라 더미 데이터를 넣어보자.
• 리스트 조회에서 페이징을 완성해보자.

노마드 코더 캐럿마켓 클론 회고

glob

캐럿마켓 프로젝트에서는 tailwind css 를 사용한다. tailwind css 를 사용하기 위해서는 tailwind.config.js 를 사용하는데, 여기서 glob 이라는 경로 표현 체계를 사용한다. 이에 대해 간단히 정리해보았다. Glob 이란 무엇일까?

PostCSS

이번에 처음 알게 되었는데, 기존 CSS 의 문제를 해결하는 도구이다. 이는 CSS 를 읽어 Abstract Syntax Tree 형태로 변환하여 관련된 API 를 제공한다. 개발자들은 이 API 를 이용해 관련된 플러그인을 만들 수 있는데, 대표적인 플러그인으로 Autoprefixer 가 있다.

Autoprefixer

Autoprefixer 는 벤더별로 다른 CSS 규칙을 한번에 적용해주는 효과가 있는 PostCSS 플러그인이다.

scss 의 @mixin 키워드

SCSS 의 @mixin 키워드는 CSS 를 그룹화하여 관리할 수 있게 해준다. @include 키워드를 통해 @mixin 으로 정의한 CSS 를 사용할 수 있으며, 조건문, 인자, CSS 추가 (@content) 등의 기능도 제공한다.

회사 업무 회고

빌드 및 배포 자동화

• 빌드 및 배포 자동화에 쓰이는 용어들을 정리해보았다.
  • 자바 웹 프로젝트 배포에 쓰이는 용어 및 개념 정리
  • 현재 빌드하고 커밋 내역에 있는 최신 파일을 꺼내오는 단계까지 완료해두었다.
• 로컬 파일에 대한 의존성을 maven 에서 추가하는 방법을 알아보았다.
  • maven 에 의존성을 추가한다고해서 반드시 maven 리포지토리에서 가져올 필요는 없다는 것을 깨달았다.
  • 로컬 파일 메이븐 의존성 추가하기
  • 메이븐 인코딩 에러 해결하기

엑셀 파일 생성 자동화

• 자바의 poi 라이브러리를 이용했다.
  • poi 라이브러리를 사용하면서 여러가지 이슈가 있었다.
    • Workbook 의 종류가 HSSFWorkbook, XSSFWorkbook, SXSSFWorkbook 이 있었다. 이는 엑셀 버전에 따라서 갈렸다. 65535 개 이상의 row 를 제공하려면, XSSFWorkbook 이후 버전을 사용하는 것이 좋다.
    • 2003 이후 버전의 엑셀 Workbook 을 이용하려면, 추가적인 의존성을 또 설치해주어야 했다. 이 부분이 조금 헷갈렸다.
      • poi-ooxml 의존성을 설치해야 했다.

Referrer 관련

• 보안정책에 따라 Referrer 는 넘어올 수도 있고 넘어오지 않을 수도 있다.
• 이렇게 불명확한 HTTP Referrer 정보에 따른 로직 구현은 권장되지 않는다. 이를 참고하는 것은 괜찮지만, 이에 의존해선 안된다.

웹과 연동되지 않는 스프링 앱 구성하기

• CommandLineRunner 라는 인터페이스를 구현하면 가능했다.
  • 정확히 어떻게 사용하는건지에 대해서 추후 포스팅해보자.