javascript - 북마크 아이템 추가하기

북마크리스트표시

이번에는 저번에 이어 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하는 기능까지 개발해보겠습니다. 

 

먼저 html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고,

그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어주겠습니다.

<div class="bookmark-bar" id="bookmark-bar">
        <!-- 북마크 바 -->
        <div class="bookmark-item-add-btn" id="bookmark-item-add-btn">
            + 북마크 추가
        </div>
        <!-- 새로운 북마크 작성폼 -->
        <div class="bookmark-item-input-form" id="bookmark-item-input-form">
            <div class="bookmark-input">
                <div class="new-bookmark-url-name">
                    <div class="label">이름</div>
                    <input id="new-bookmark-url-name-input" />
                </div>
                <div class="new-bookmark-url">
                    <div class="label">주소</div>
                    <input id="new-bookmark-url-input" />
                </div>
            </div>
            <div class="bookmark-item-input-btn">
                <div class="cancel-btn" id="cancel-btn">취소</div>
                <div class="add-btn" id="add-btn">추가</div>
            </div>
        </div>
    </div>

 

그 다음, bookmark.js 파일을 만들어서 방금만든 최상위 div를 id를 통해 불러오겠습니다.

이 북마크도 마찬가지로, 한 번 추가한 북마크는 다음에 접속했을 때 추가된 상태여야 하기 때문에

로컬스토리지에 저장해야합니다. 

 

배열을 하나 만들고, 만약 로컬스토리지에 이 배열의 값이 있으면 로컬스토리지에 배열에 저장되어 있는 값을 넣어주고,

그렇지 않다면 로컬스토리지에 빈 배열을 setItem으로 넣어주겠습니다.

const newBookmarkForm = document.getElementById("bookmark-item-input-form");

let bookmarkList=[];
if(localStorage.getItem("bookmarkList")){
    bookmarkList=JSON.parse(localStorage.getItem("bookmarkList"));
}
else{
    localStorage.setItem("bookmarkList",JSON.stringify(bookmarkList));
}

 

그리고 아래의 사진에서 처럼

북마크 추가버튼을 눌렀을때 입력폼들을 나타내주고 다시 클릭하였을때 안보이게 해주어야 합니다. 

따라서 isAddBtnClick이라는 변수를 false로 초기화 해주고 newBookmarkForm요소를 display none으로 해주겠습니다.

그 다음 함수를 생성해 isAddBtnClick값을 Not연산자로 바꿔주고 만약 변수가 true라면 북마크 입력폼을 display block 해주고, false 라면 none해주겠습니다.

 

추가로 bookmark-item-add-btn(+북마크추가)를 눌렀을때 함수가 실행되어야 하므로, 이벤트리스너를 추가해주겠습니다.

let isAddButtonClick = false;
newBookmarkForm.style.display="none";

const newBookmarkToggle = () =>{
    isAddButtonClick=!isAddButtonClick;
    isAddButtonClick ? (newBookmarkForm.style.display="block") : (newBookmarkForm.style.display="none");
}

document.getElementById("bookmark-item-add-btn").addEventListener("click", newBookmarkToggle);

이렇게 작성하고 화면에서 북마크추가버튼을 눌러보면, 한번눌렀을때 입력폼들이 나오고, 다시 클릭하면 입력폼이 사라지게 됩니다. 

 

---

추가

이제 이 북마크 아이템을 실제로 추가해보겠습니다.

addBookmarkItem함수를 만들고 bookmarkList변수를 빈 배열로 초기화해준 다음, 만약 로컬스토리지에 bookmarkList가 있다면, bookmarkList 변수에 로컬스토리지에 있는 데이터를 넣어주겠습니다. 

 

name변수에는 이름 input의 value를

url에는 주소 input의 value를 넣어주고 

createAt변수에는 Date 객체의 now 메서드를 사용해 넣어주겠습니다.(1970년1월1일0시0분0초부터 현재까지 경과된 밀리초를 나타내는 숫자값 얻음)

 

그다음 bookmarkList에 push 메서드로 name에는 name을, url에는 url을 createAt에는 createAt변수를 객체형태로 넣어주고 이 값을 setItem을 사용해 저장합니다. 

 

마지막으로 입력폼의 value를 빈 문자열로 초기화해주고 newBookmarkToggle함수를 실행해 입력폼을 닫아주고 추가버튼을 눌렀을때 방금만든함수를 실행시켜주겠습니다. 그리고 취소 버튼을 눌렀을 때에는 다시 북마크 정보를 입력하는 폼을 닫아주겠습니다.

const addBookmarkItem = () => {
    let bookmarkList =[];
    if(localStorage.getItem("bookmarkList")){
        bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
    }
    let name = document.getElementById("new-bookmark-name-input").value;
    let url = document.getElementById("new-bookmark-url-input").value;
    let createAt = Date.now();
    bookmarkList.push({ name: name, url: url, createAt: createAt });
    localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
    document.getElementById("new-bookmark-name-input").value = "";
    document.getElementById("new-bookmark-url-input").value = "";
    newBookmarkToggle();
};

document.getElementById("bookmark-item-add-btn").addEventListener("click", newBookmarkToggle);
document.getElementById("add-btn").addEventListener("click", addBookmarkItem);
document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle);

페이지에서 이름에는 네이버를 링크에는 www.naver.com 을 작성해 추가 버튼을 누르면 key값이 bookmarkList인 데이터가 저장되어있는 것을 볼 수 있습니다. 그리고 구글도 추가해보면 두개의 북마크 아이템이 저장되어 있습니다. 

 

 

위의 localstorage의 값들을 콘솔창으로 불러와보겠습니다. 

html파일에서 class이름이 bookmark-bar인 div의 가장 아래에 class이름과 id값이 bookmark-list인 요소를 추가해주겠습니다.

<div class="bookmark-bar" id="bookmark-bar">
        <!-- 북마크 바 -->
        <div class="bookmark-item-add-btn" id="bookmark-item-add-btn">
            + 북마크 추가
        </div>
        <!-- 새로운 북마크 작성폼 -->
        <div class="bookmark-item-input-form" id="bookmark-item-input-form">
            ...
        </div>
        <!-- 북마크 리스트 -->
        <div class="bookmark-list" id="bookmark-list"></div>
</div>

그리고 js파일에서 방금 만든 요소를 id를 통해 가져와주겠습니다.

const bookmarkItemList = document.getElementById("bookmark-list");

그리고 newBookmarkToggle함수 아래에 로컬 스토리지에 저장된 북마크 아이템들을 꺼내서 나타내주는 setBookmarkList함수를 만들어주고 전역변수로 선언된 bookmarkList배열의 요소들을, 배열 내장함수인 forEach를 사용해 하나씩 꺼내주겠습니다. 

이 꺼내준 요소들을 북마크바에 나타내는 함수가 필요합니다.

setBookmarkList함수위에 setBookmarkItem이라는 함수를 생성해주겠습니다. setBookmarkItem 함수에서는 매개변수로 item을 받아 출력해주고, setBookmarkList함수에서는 인수로 item을 전달해주겠습니다. 

 

setBookmarkList함수는 로컬스토리지에 있는 북마크 아이템 리스트를 꺼내온 다음, 북마크 바에 나타내는 기능을 하는 함수이기 때문에 북마크 아이템이 추가될 때 마다, 그리고 웹 페이지에 접속할 때 호출되어야 하므로,

addBookmarkItem함수안에는 setBookmarkItem함수를, js파일 제일 아래쪽에 setBookmarkList함수를 호출해주겠습니다. 

 

const newBookmarkForm = document.getElementById("bookmark-item-input-form");
const bookmarkItemList = document.getElementById("bookmark-list");

// <--북마크 리스트 초기 설정-->
let bookmarkList = [];
localStorage.getItem("bookmarkList")
    ? (bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")))
    : localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));

// <--북마크 아이템 추가 버튼 초기 설정-->
let isAddBtnClick = false;
newBookmarkForm.style.display = "none";

// <--북마크 아이템 추가 버튼 Toggle-->
const newBookmarkToggle = () => {
    isAddBtnClick = !isAddBtnClick;
    isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none");
};

//<--북마크 아이템 나타내기-->
const setBookmarkItem = (item) => {
   console.log(item);
};

// <--북마크 리스트 요소 꺼내기-->
const setBookmarkList = () => {
    bookmarkList.forEach((item) => {
        setBookmarkItem(item);
    });
};

// <--북마크 아이템 추가-->
const addBookmarkItem = () => {
    let bookmarkList =[];
    if(localStorage.getItem("bookmarkList")){
        bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
    }
    let name = document.getElementById("new-bookmark-name-input").value;
    let url = document.getElementById("new-bookmark-url-input").value;
    let createAt = Date.now();
    bookmarkList.push({ name: name, url: url, createAt: createAt });
    localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
    document.getElementById("new-bookmark-name-input").value = "";
    document.getElementById("new-bookmark-url-input").value = "";
		setBookmarkItem({ name: name, url: url, createAt: createAt });
    newBookmarkToggle();
};

setBookmarkList();
document.getElementById("bookmark-item-add-btn").addEventListener("click", newBookmarkToggle);
document.getElementById("add-btn").addEventListener("click", addBookmarkItem);
document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle);

사이트에서 콘솔창을 통해 확인해보면 값들이 잘 불러와집니다.

 

---

요소표시

이제 이 출력된 item 들을 setBookmarkItem함수에서 웹 페이지에 나타내주도록 하겠습니다. 

 

북마크 아이템 요소는 크게 bookmark-item, bookmark-info, del-btn으로 이루어져있습니다. 

 

bookmark-Item : bookmark-info, del-btn

bookmark-info : bookmarkUrl(북마크의 주소를 나타내는)

bookmarkURL  : urlIcon(북마크 아이템 이름앞에 표시될 아이콘), nameElement(북마크 아이템의 이름이 적힐 곳) 

urlIcon : urlIconImg(아이콘의 이미지표시)

const setBookmarkItem=(item)=>{
    const bookmarkItem = document.createElement("div");
    bookmarkItem.classList.add("bookmark-item");
    bookmarkItem.id=`bookmark-item-${item.createAt}`;

    //bookmarkInfo 안에는 북마크 아이콘과, 이름
    const bookmarkInfo = document.createElement("div");
    bookmarkInfo.classList.add("bookmarkInfo");
    
    //북마크의 주소를 나타내는 
    const bookmarkUrl = document.createElement("a");
    bookmarkUrl.classList.add("bookmark-url");
    
    //북마크 아이템의 이름 앞에 표시될 아이콘
    const urlIcon = document.createElement("div");
    urlIcon.classList.add("url-icon");
    
    
    const urlIconimg=document.createElement("img");
    
    //북마크 아이템의 이름이 적힐곳
    const nameElement=document.createElement("div");
    nameElement.classList.add("url-name");

    //bookmark-item은 info와 삭제버튼으로 이루어짐
    const bookmarkDelBtn = document.createElement("div");
    bookmarkDelBtn.classList.add("del-btn");
    bookmarkDelBtn.textContent = "삭제";

    bookmarkUrl.href=item.url;
    urlIconimg.src = `https://www.google.com/s2/favicons?domain_url=${item.url}`;
    nameElement.textContent=item.name;

    bookmarkItem.appendChild(bookmarkInfo);
    bookmarkItem.appendChild(bookmarkDelBtn);
    bookmarkInfo.appendChild(bookmarkUrl);
    bookmarkUrl.appendChild(urlIcon);
    bookmarkUrl.appendChild(urlIconimg);

    bookmarkItemList.appendChild(bookmarkItem);

};

결과를 보시면 북마크 아이템 요소들이 아이콘, 링크, 이름, 삭제 버튼으로 알맞게 출력되는 것을 확인 할 수 있습니다. 

 

요소 삭제버튼

이제 이 삭제 버튼을 누르면 삭제가 되게 개발해주겠습니다.

 

삭제버튼 -> 해당 북마크 아이템 요소가 북마크바와 로컬스토리지에서 삭제 

 

먼저 로컬스토리지에서 해당 아이템을 삭제해보겠습니다.

deleteBookmarkItem이라는 함수를 생성해주고, 함수의 내부에 isDelete변수를 생성해 window.confirm을 사용해 

"정말 삭제하시겠습니까"라는 문구를 띄워주고 true(확인)이라면 정말 삭제하겠다는 것이기에, 특정 북마크 아이템을 삭제해주겠습니다. 

 

if문 안에 bookmarkList변수에 로컬 스토리지에 있는 북마크 아이템들을 가져오고, nowBookmarkList라는 변수에는, bookmarkList에서 특정 북마크 아이템을 삭제한 북마크 리스트를 담아주겠습니다.

배열의 내장함수인 filter 를 사용해 특정 값을 제외한 나머지 리스트들을 담아줄 수 있습니다. 

출처 : https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95

 

deleteBookmarkItem함수(지금작성하고있는)에서는, ms 단위로 고유할 수 밖에 없는 값인 createAt 정보를 id라는 매개변수로 받고, filter의 콜백함수에서는 이 요소들 중 createAt 값이 id 값과 동일하지 않는 요소들만 모아서, nowBookmarkList변수에 새로운 배열로 담아주겠습니다. 

 

그 다음, 이 nowBookmarkList 변수에 담긴 값을, 다시 로컬 스토리지에 bookmarkList값으로 저장해주고, 

이 아이템값을 북마크바에서 지워주겠습니다. 

 

북마크 아이템 요소의 id값은 setBookmarkItem함수에서 bookmark-item-${item.createAt}으로 설정해주었기 때문에, 

getElementById를 통해 id 값이 bookmark-item-id인 요소를 찾고, remove메소드를 사용해 해당 요소를 지워주겠습니다.

const deleteBookmarkItem = (id) => {
    const isDelete = window.confirm("정말 삭제하시겠습니까?");
    if (isDelete) {
        let bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
        let nowBookmarkList = bookmarkList.filter((elm) => elm.createAt !== id);
        localStorage.setItem("bookmarkList", JSON.stringify(nowBookmarkList));
        document.getElementById(`bookmark-item-${id}`).remove();
        return;
    }
};

그리고 이 함수는 bookmarkDelBtn 요소가 클릭되면 실행되어야하기 때문에, 

bookmarkDelBtn에 addEventListener의 매개변수로 전달해주고, deleteBookmarkItem함수의 인수로는 고유한 값인, item객체의 createAt을 전달해주겠습니다 .

 

호이스팅을 방지하기 위해 setBookmarkItem 함수보다 위쪽으로 옮겨주겠습니다.

const newBookmarkForm = document.getElementById("bookmark-item-input-form");
const bookmarkItemList = document.getElementById("bookmark-list");

// <--북마크 리스트 초기 설정-->
let bookmarkList = [];
localStorage.getItem("bookmarkList")
    ? (bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")))
    : localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));

// <--북마크 아이템 추가 버튼 초기 설정-->
let isAddBtnClick = false;
newBookmarkForm.style.display = "none";

// <--북마크 아이템 추가 버튼 Toggle-->
const newBookmarkToggle = () => {
    isAddBtnClick = !isAddBtnClick;
    isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none");
};

// <--북마크 아이템 삭제-->
const deleteBookmarkItem = (id) => {
    const isDelete = window.confirm("정말 삭제하시겠습니까?");
    if (isDelete) {
        let bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
        let nowBookmarkList = bookmarkList.filter((elm) => elm.createAt !== id);
        localStorage.setItem("bookmarkList", JSON.stringify(nowBookmarkList));
        document.getElementById(`bookmark-item-${id}`).remove();
        return;
    }
};

//<--북마크 아이템 나타내기-->
const setBookmarkItem = (item) => {
    const bookmarkItem = document.createElement("div");
    bookmarkItem.classList.add("bookmark-item");
    bookmarkItem.id = `bookmark-item-${item.createAt}`;

    const bookmarkInfo = document.createElement("div");
    bookmarkInfo.classList.add("bookmark-info");

    const bookmarkUrl = document.createElement("a");
    bookmarkUrl.classList.add("bookmark-url");

    const urlIcon = document.createElement("div");
    urlIcon.classList.add("url-icon");

    const urlIconImg = document.createElement("img");

    const nameElement = document.createElement("div");
    nameElement.classList.add("url-name");

    const bookmarkDelBtn = document.createElement("div");
    bookmarkDelBtn.classList.add("del-btn");
    bookmarkDelBtn.textContent = "삭제";
    bookmarkDelBtn.addEventListener("click", () => {
        deleteBookmarkItem(item.createAt);
    });

    bookmarkUrl.href = item.url;
    urlIconImg.src = `https://www.google.com/s2/favicons?domain_url=${item.url}`;
    nameElement.textContent = item.name;

    bookmarkItem.appendChild(bookmarkInfo);
    bookmarkItem.appendChild(bookmarkDelBtn);
    bookmarkInfo.appendChild(bookmarkUrl);
    bookmarkUrl.appendChild(urlIcon);
    bookmarkUrl.appendChild(nameElement);
    urlIcon.appendChild(urlIconImg);

    bookmarkItemList.appendChild(bookmarkItem);
};

// <--북마크 리스트 요소 꺼내기-->
const setBookmarkList = () => {
    bookmarkList.forEach((item) => {
        setBookmarkItem(item);
    });
};

// <--북마크 아이템 추가-->
const addBookmarkItem = () => {
    let bookmarkList =[];
    if(localStorage.getItem("bookmarkList")){
        bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
    }
    let name = document.getElementById("new-bookmark-name-input").value;
    let url = document.getElementById("new-bookmark-url-input").value;
    let createAt = Date.now();
    bookmarkList.push({ name: name, url: url, createAt: createAt });
    localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
    document.getElementById("new-bookmark-name-input").value = "";
    document.getElementById("new-bookmark-url-input").value = "";
    setBookmarkItem({ name: name, url: url, createAt: createAt });
    newBookmarkToggle();
};


setBookmarkList();
document.getElementById("bookmark-item-add-btn").addEventListener("click", newBookmarkToggle);
document.getElementById("add-btn").addEventListener("click", addBookmarkItem);
document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle);

코드를 실행해 보면 삭제가 되는 것을 볼 수 있습니다.

 

---

css

먼저 북마크 추가 버튼의 스타일 먼저 수정해주겠습니다. 

 

수정전

.bookmark-item-add-btn{
    padding:10px;
    font-size:var(--small);
    cursor:pointer;
    display:flex;
    justify-content: center;
    border-radius:5px;
    background-color: rgba(255,255,255,0.1);
    border:rgba(241,241,241,0.2) 0.5px solid;
    margin-bottom:35px;
    margin-top:10px;
}

 

 

다음으로는 북마크 추가버튼을 눌렀을 때 나오는 북마크 아이템 정보를 입력하는 폼의 스타일을 수정해보겠습니다.

.bookmark-item-input-form .bookmark-input.lable{
    margin-bottom:3px;
    font-size:var(--xsmall);
}

.bookmark-item-input-form .bookmark-input input{
    width:200px;
    height:20px;
    border-radius: 5px;
    padding:5px;
}

.bookmark-item-input-form .bookmark-item-input-btn{
    display:flex;
    justify-content: center;
    font-size:var(--xsmall);
    margin-top:5px;
}

.bookmark-item-input-btn div{
    padding:5px 35px;
    border-radius:5px;
    border:rgba(241,241,241,0.2) 0.5px solid;
    cursor:pointer;
}

.bookmark-item-input-btn div:hover{
    background-color: rgba(255,255,255,0.1);
}

 

북마크 리스트의 a태그와 icon의 스타일입니다.

 

.bookmark-list .url-icon{
    margin-right: 8px;
}

.url-icon img{
    vertical-align: middle;
}

 

마지막으로 북마크 아이템 요소들입니다.

.bookmark-list .bookmark-item{
    background-color: rgba(255,255,255,0.1);
    border:rgba(241,241,241,0.2) 0.5px solid;
    font-size:var(--small);
    border-radius:5px;
    padding:15px;
    margin-bottom:20px;
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.bookmark-item .del-btn{
    font-size:var(--xxsmall);
    color:lightgray;
    vertical-align: middle;
    cursor:pointer;
}

 

---

결과화면