Diary 구현하기 📝(1)

heeezni·2025년 5월 19일

JavaScript 실전 예제 아카이브

목록 보기

3/4

달력을 만들었으나..디자인이 처참했던 지난 과거..
boxSizing="border-box"로 해결!

1. 기본 구조 설계 (HTML + CSS)

#wrapper{
    width: 700px;
    height: 750px;
    margin: auto;
}
#info{
    width: 100%;
    height: 60px;
    background-color: rgb(52, 66, 30);
}
#header{
    width: 100%;
    height: 50px;
    background-color: green;
    text-align: center;
    line-height: 50px;
}
#header h2{
    display: inline-block;
    margin: 0px 5px;
}
#header a{text-decoration: none;}
#days{
    width: 100%;
    height: 40px;
    background-color: rgb(200, 243, 137);
    float: left;
}
#content{
    width: 100%;
    height: 600px;
    background-color: rgb(246, 255, 231);
    float: left;
    position: relative;
}
#dialog{
    width: 220px;
    height: 240px;
    border-radius: 10px;
    background-color: pink;
    position: absolute;
    /* content div의 다른 셀들과 공존해야 하므로 */
    z-index: 50;
    /* z-index는 어떤 요소가 화면에서 
    다른 요소들보다 "위에 보이게" 할지를 결정하는 숫자
    z축 값이 클수록 위로 올라옴 */
    display: none;
    text-align: center;
}
#dialog input, textarea {
    border: 1px solid #ccc;
    margin: 1px;
}
#dialog input{
    width: 96%;
    height: 27px;
}
#dialog textarea{
    width: 96%;
    height: 163px;
}

<body>
    <div id="wrapper">
        <div id="info"></div>
        <div id="header">
            <a href="javascript:prev()">이전</a>
            <h2></h2>
            <a href="javascript:next()">다음</a>
        </div>
        <div id="days"></div>
        <div id="content">
            <div id="dialog">
                <div>
                    <input type="text" placeholder="제목 입력" id="t_title">
                </div>
                <div>
                    <textarea placeholder="내용 입력" id="t_detail"></textarea>
                </div>
                <div>
                    <button id="bt_regist">등록</button>
                    <button id="bt_close">닫기</button>
                </div>
            </div>
        </div>
    </div>
</body>

2. JavaScript 로직

전체 흐름

[ 페이지 로드 ]
↓
[ getCurrentTime() → 현재 연/월 저장 ]
↓
[ createCell() → 42개 셀 만들기 ]
↓
[ printNum() → 날짜 출력 ]
↓
[ 이전 / 다음 클릭 시 ]
→ getCurrentTime()
→ printTitle()
→ clearCell()
→ printNum()
↓
[ 셀 클릭 ] → openDialog(obj)
↓
[ '닫기' 또는 esc ] → closeDialog()
↓
[ 제목/내용 입력 후 '등록' ] → regist()
↓
[ 셀에 제목/아이콘 표시 + diaryArray에 저장 ]

    let cellArray=Array.from({length:6},()=> Array(7).fill(0)); // 6행 7열 셀 배열
    let currentYear;     // 현재 연도
    let currentMonth;    // 현재 월
    let currentCell;     // 선택된 셀 객체 (모든게 다 들어 있음)
    let diaryArray=[]; // 등록된 다이어리 객체들 저장 (DB 대신 배열)

    function printTitle(){
        document.querySelector("#header h2").innerText = `${currentYear}년 ${currentMonth +1}월`;
    }

    function getStartday(year, month){
        let d = new Date(year, month, 1);
        return d.getDay(); // 1일의 요일
    }

    function getLastdate(year, month){
        let d = new Date(year, month + 1, 0);
        return d.getDate(); // 마지막 날짜
    }

    function printNum(){
        let index = 0; //셀의 순번
        let date = 1; //출력될 실제 날짜

        for (let i = 0; i < 6; i++){
            for (let j = 0; j < 7; j++) {
              	//⭐이번 달 1일 요일(index)부터 날짜를 하나씩 찍고, 마지막 날짜까지만 찍자
                if (index >= getStartday(currentYear, currentMonth) &&
                    date <= getLastdate(currentYear, currentMonth)){
                    cellArray[i][j].setDate(currentYear, currentMonth, date);
                  	date++;
                }
                index++;
            }
        }
    }

    /*---------------------------------------------
    로드 시점 뿐만 아니라, 다음버튼, 이전버튼에 의해서도 
    currentYear, currentMonth 구해야 하므로
    코드가 중복되기 때문에 함수로 빼놓자!
     ------------------------------------------------*/
    function getCurrentTime(year, month){
      	/*전달받은 month가 범위를 벗어나면 (예: -1, 12) 
        Date가 자동으로 연도 계산해줌*/
        let d = new Date(year, month);
        currentYear = d.getFullYear();
        currentMonth = d.getMonth();
    }

    function createCell(){
        for (let i = 0; i < 6; i++){
            for (let j = 0; j < 7; j++){
                cellArray[i][j] = new Cell(
                    document.getElementById("content"),
                    100 * j, 100 * i, 100, 100,
                    "rgb(246, 255, 231)", "lightgreen", 0);
            }
        }
    }

    function clearCell(){
        for (let i = 0; i < 6; i++){
            for (let j = 0; j < 7; j++){
                cellArray[i][j].numDiv.innerText = "";
                cellArray[i][j].titleDiv.innerText = "";
                // 아이콘 제거는 필요 시 구현
            }
        }
    }

    function prev(){
        getCurrentTime(currentYear, currentMonth - 1);
        printTitle();
        clearCell();
        printNum();
    }

    function next(){
        getCurrentTime(currentYear, currentMonth + 1);
        printTitle();
        clearCell();
        printNum();
    }

    /*---------------------------------------------
    숨겨져 있던 대화창을 띄우되, 
    그 위치는 지금 클릭한 바로 그 셀의 x,y를 따라가야함
    ------------------------------------------------*/
    function openDialog(obj){ // 클릭된 Cell 인스턴스를 매개변수로 전달받음
      	//현재 셀에 대한 전역변수인 currentCell에 
      	//obj를 보관해놓자
        currentCell = obj;
        let dialog = document.getElementById("dialog");
        dialog.style.display = "block"; // ↔ none
        dialog.style.position = "absolute"; //클릭한 셀 위치에 맞춰 정확히 띄우기 위해
        dialog.style.left = obj.x + "px";
        dialog.style.top = obj.y + "px";
    }

    function closeDialog(){
        document.getElementById("dialog").style.display = "none";
        document.getElementById("t_title").value = "";
        document.getElementById("t_detail").value = "";
    }

    function regist(){
        let diary ={ //다이어리 한 건의 데이터를 ⭐객체 리터럴⭐로 구성
            year: currentYear,
            month: currentMonth,
            date: currentCell.date,
            title: document.getElementById("t_title").value, //제목 입력값
            icon: "./images/diarystar.png",
            detail: document.getElementById("t_detail").value //내용 입력값
        };

        currentCell.titleDiv.innerText = diary.title;
        currentCell.renderIcon(diary.icon, 25);
        diaryArray.push(diary);
        closeDialog();
    }

    addEventListener("load", ()=>{
        let d = new Date();
        getCurrentTime(d.getFullYear(), d.getMonth());
        printTitle();
        createCell();
        printNum();

       	//등록 이벤트 구현
        document.getElementById("bt_regist").addEventListener("click", ()=>{
            regist();
        });

  		//새 창 닫기 이벤트 구현
      	document.getElementById("bt_close").addEventListener("click", ()=>{
            closeDialog();
        });

        document.body.addEventListener("keyup", function (e){
            if(e.keyCode == 27) closeDialog(); //esc눌렀을 때 창 닫기
        });
    });

선언형 프로그래밍

0으로 채운 6행 7열의 2차원 배열을 만들어보자

"반복문을 내가 돌려?"
이 때 사용하는게 선언형 프로그래밍

✅ 선언형

“무엇을 할 것인지”를 선언적으로 적은 방식

let cellArray = Array.from({ length: 6 }, ()=> Array(7).fill(0));

Array.from({ length: 6 }, ...)
길이 6의 배열을 만들고 → 행(row) 6개
()=> Array(7).fill(0)
각 행마다 길이 7의 배열을 만들어서 0으로 채움 → 열(column) 7개

✅ 명령형

“어떻게 할 것인지”를 절차적으로 명령하는 방식

let cellArray = [];
for (let i = 0; i < 6; i++) {
    let row = [];
    for (let j = 0; j < 7; j++) {
        row.push(0);
    }
    cellArray.push(row);
}

3. Cell클래스

목적: 캘린더 셀 1칸을 구성하는 객체

class Cell{
    constructor(container,x,y,width,height,bg,borderColor,date){
        //[다이어리 관련 내용]
        this.year;
        this.month;
        this.date=date;
        this.icon;

        //[UI 관련 내용]
        this.container=container;
        this.div=document.createElement("div"); //셀 자체박스
        this.numDiv=document.createElement("div"); //달력 날짜 출력할 영역
        this.titleDiv=document.createElement("div"); //일정제목
        this.iconDiv=document.createElement("div"); //아이콘이 위치할 영역
        this.x=x;
        this.y=y;
        this.width=width;
        this.height=height;
        this.bg=bg;
        this.borderColor=borderColor;
        
        //셀 div style
        this.div.style.position="absolute";
        this.div.style.left=this.x+"px";
        this.div.style.top=this.y+"px";
        this.div.style.width=this.width+"px";
        this.div.style.height=this.height+"px";
        this.div.style.background=this.bg;
        this.div.style.border="1px solid "+this.borderColor;
        this.div.style.borderRadius=5+"px";
        this.div.style.boxSizing="border-box"; //border, margin, padding에 의한 박스의 크기가
                                                // outside쪽으로 커지지 않고 inside쪽으로 적용되어 
                                                // 너비에 영향을 주지 않음
        
        //날짜 출력 div style
        this.numDiv.style.width=100+"%";
        this.numDiv.style.height=25+"px";
        this.numDiv.style.textAlign="right";
        this.numDiv.style.padding="0px 5px 0px 0px"; // (top-right-bottom-left) 오른쪽에 5px패딩
        this.numDiv.style.boxSizing="border-box";

        //다이어리 제목 div style
        this.titleDiv.style.width=100+"%";
        this.titleDiv.style.height=25+"px";
      
        //아이콘 영역 div style
        this.iconDiv.style.width=100+"%";
        this.iconDiv.style.height=50+"px";

        //셀에 3층 div 각각 부착
        this.div.appendChild(this.numDiv);
        this.div.appendChild(this.titleDiv);
        this.div.appendChild(this.iconDiv);

        this.container.appendChild(this.div);

        //셀 클릭시 팝업띄우기
        this.div.addEventListener("click", ()=>{ //화살표 함수는 this를 가질 수 없음
            openDialog(this); //이 this는 상위스코프의 this(=현재 셀 인스턴스)
        });
    }
    //셀에 보여질 날짜를 수시로 변경해야 하므로, 메서드의 대상이 될 수 있음
    setDate(year, month, date){
        this.year=year;
        this.month=month;
        this.date=date;

        //렌더링 처리
        this.numDiv.innerText=date;
    }
    //셀이 자신이 보유한 아이콘을 그리기
    renderIcon(src, width){ //어떤 이미지를 원하는지는 호출자가 결정
        this.icon=document.createElement("img");
        this.icon.src=src;
        this.icon.style.width=width+"px"; //이미지의 크기 조정
        this.iconDiv.appendChild(this.icon);
    }
}

heeezni

아이들의 가능성을 믿었던 마음 그대로, 이제는 나의 가능성을 믿고 나아가는 중입니다.🌱