[Toy Projects] 'Color, me' project (7)

이번에는 github pages를 통해 내 토이프로젝트를 배포해 보겠다.

 

(추가)

먼저 배포하기 전에 작은 문제를 발견해서 해결했다.

-> 저장된 색 조합을 수정할 때, 모든 색상을 삭제하고 추가를 하면 resave가 아니라 save가 되었다.

// 색상이 추가되면 저장 버튼을 추가
function plusColor(color_value, count) {
    hsl = RGBtoHSL(HEXtoRGB(color_value));
    colorArr.push({
        hex: color_value,
        h: hsl[0],
        s: hsl[1],
        l: hsl[2],
    });

    printColor(count);

    if (count === 1) {
        // 첫번째 리스트가 추가됐을 경우
        let color_input = document.getElementById("color-input");
        let span = document.createElement("span");
        span.textContent = "|";
        color_input.appendChild(span);
        let save_btn = document.createElement("button");
        if (savingUpdateNum === 0) {
            save_btn.setAttribute("onclick", "saveColor()");
        } else {
            save_btn.setAttribute("onclick", "resaveColor()");
        }
        save_btn.classList.add("btn");
        save_btn.textContent = "저장";
        color_input.appendChild(save_btn);
    }
}

count가 1 일 때, (즉, 색상이 처음 한 개가 추가됐을 때) savingUpdateNum 변수를 통해 resave 상태인지를 판단할 수 있도록 했다.

 

 

토이 프로젝트를 진행하면서 github에 push, merge를 진행한 상태였고, 배포할 상황이 와서 main branch에 push 했다.

 

이제 github pages로 배포를 할 것이다.

자세한 건 다른 글에서 다루도록 하고, 여기서는 과정만 간단하게 보여줄 예정이다.

1. 우선 setting 메뉴로 들어간다.

 

2. 왼쪽 카테고리에서 Pages를 클릭한다.

 

3. Branch 란에서 배포할 branch를 선택하고 Save 한다.

 

이렇게 간단하게 나의 첫 github pages를 완성시켰다.

 

https://rkddusen.github.io/Color-me/

 

이제 주위 사용자들에게 피드백을 받고 계속 수정해 나갈 생각이다.

또한, readme 파일을 작성할 예정이다.

 

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)