본문 바로가기
컴퓨터/웹 : JS

[Node.js](개인 프로젝트)부트스트랩 디자인 + 몽고DB 배열 건드려보기 + 동적으로 태그 생성

by 도도새 도 2023. 1. 27.

부트스트랩 시작

 

 

 

 개인 프로젝트를 하면서 정리를 하여야겠다고 생각하여 작성 진행중인 포스팅이다. 이 작성을 하다보니 장단점이 명확하다.

 

 장점은 정리를 함으로서 스스로 내가 한 것이 무엇인가, 해야할 것이 무엇인가에 대해 더욱 확실히 알게 된다는 것이다. 게다가 블로그 특성상 내가 알고 있는 것(혹은 그렇다고 생각하는 것)을 작성할 때도 검색을 해보며 교차검증을 하게 된다.

 

 만약 내가 틀리게 알고 있었다면 무척 쪽팔린 일이니까.

 

 단점은 명확하다. 시간이 많이 든다. 포스팅 하나 쓰는게 생각보다 긴 시간이 든다. 단순히 주어진 자료로 쓰기만 하다면 긴 시간이 걸리지 않겠지만, 프로젝트를 진행하는 중에도 시시때때로 막히는 부분이 생기는데, 그 부분을 모두 정리해야만 한다.

 

 아무튼 시작했기에 끝을 맺어야한다. 오늘은 간단하게 부트스트랩으로 디자인을 적용하여 CREATE와 READ 페이지를 조금 더 나은 모습으로 바꾸려는 시도를 하였다.

 

 또한 동적으로 태그를 생성한 뒤, 배열 형태로 데이터를 넘겨 몽고DB(정확히는 몽구스)를 통해 데이터를 저장하였다.

 

오늘의 목표

1. 카페 create기능에 메뉴를 여러 가지 추가할 수 있도록!

단, 이때 카페 메뉴 개수는 동적으로 추가 가능하도록 구현할 것

 

2. 카페를 Creat, Read하는 뷰 페이지를 그럴싸하게 만들기!(부트스트랩 사용)

 

* 본 게시글은 작성자가 기존 공부 내용을 복습하고 새로운 프로젝트를 진행하는 기록을 위함입니다. 오류 지적은 언제나 환영합니다. 감사합니다.

 

* 혹시나 제가 공부하는 과정을 따라서 실습해 볼 분은 제가 진행한 순서대로 따라오면 될 것 같습니다. 현재까지 아래의 순서를 따릅니다.

 

부트스트랩 시작하기

 

부트스트랩이란?

부트스트랩이란 웹사이트 개발에 도움이 되는 프레임워크이다. 반응형 웹페이지를 위한 무료 소프트웨어이며, 각종 HTML, CSS, JS 템플릿을 모아두었다.

 

이 덕분에 내가 직접 css를 건들여 요소를 꾸미는 수고를 들일 필요 없이 이미 부트스트랩상에 만들어놓은 각종 css를 가져다 쓸 수 있게 된다.

 

부트스트랩 장점

부트스트랩을 사용하면 빠른 시간 안에 개발을 할 수 있게 되어 높은 생산성을 가진다.

또한 앞서 말했듯 부트스트랩은 반응형 웹 제작을 도와준다. 따라서 웹 페이지 크기가 어떻게 변하든 만족스러운 환경을 만들 수 있게 된다. 즉, 모바일 기기처럼 작은 화면에서도 의도한대로 동작하는 페이지를 만들 수 있다.

부트스트랩 단점

 

단점으로는 개성이 떨어진다는 점이 있다. 부트스트랩을 쓴 웹사이트는 티가 난다. 비슷비슷하다. 물론 부트스트랩의 css를 약간씩 고쳐서 사용한다면 그런 느낌이 덜하겠지만 말이다.

.

 

 

https://getbootstrap.com/docs/5.3/getting-started/introduction/

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

 

위 링크의 내용에 따라 link태그와 script태그를 html(나같은 경우 ejs) 페이지에 삽입한다. 이제 부트스트랩을 사용 할 수 있게 된다. 사용 방법은 class명에 특정 이름을 주는 것이다. 미리 부트스트랩에서 해당 클래스의 css를 구현해놓았다.

 

https://getbootstrap.com/docs/5.3/getting-started/introduction/

위의 Doc을 읽으면 금새 사용법을 알 수 있게 된다. 복사 붙여넣기도 쉽게 해놔서 간편하다.

 

부트스트랩 사용(Show페이지)

 

이제 클래스명을 이용하여 부트스트랩의 디자인을 그대로 가져올 수 있다. 원하는 형식(모습?)을 도큐먼트에서 찾아서 처리한다. 나 같은 경우 우선 레이아웃을 container로 지정하고 card를 적용하는 편이다.

(개인적으로 레이아웃을 먼저 설정하고 세부적으로 설정하는 것이 더 편하다)

 

부트스트랩 사이트: Doc -> Card

Card를 사용하여 내 사이트를 꾸며줄 것이다.  카드뷰는 아래 그림처럼 생겼다.

카드뷰

아래 내용을 복사해서 붙여넣었다.

더보기

 

<div class ="card"style ="width: 18rem;">

   <img src ="..."class ="card-img-top"alt ="...">

   <div class ="card-body">

    <h5 class ="card-title">Card title </h5 >

    <p class ="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p >

   </div >

   <ul class ="list-group list-group-flush">

    <li class ="list-group-item">An item </li >

    <li class ="list-group-item">A second item </li >

    <li class ="list-group-item">A third item </li >

   </ul >

   <div class ="card-body">

    <a href ="#"class ="card-link">Card link </a >

    <a href ="#"class ="card-link">Another link </a >

   </div >

  </div >

 

위의 카드 형식을 사용한다. 도큐먼트에서 복사해서 붙여넣기 하였다.

 

나는 카드에 메뉴들을 띄우고자 한다. 단 메뉴가 너무 많으므로 우선 메뉴중 저장된 순으로 최대 3개만 보이도록 하고자 한다. 게다가 메뉴 앞에 숫자가 붙으면 조금 더 깔끔하지 않을까.

 

views/cafe.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>카페를 보여주는 페이지</title>
</head>
<body>
    <div class="container ">
        <% for(let cafe of cafes) { %>
            <div class="card mb-3">
                <div class="row g-0">
                  <div class="col-md-4">
                    <img src="https://cdn.pixabay.com/photo/2023/01/12/05/32/duck-7713310_640.jpg" class="img-fluid rounded-start" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title"><%= cafe.name %></h5>
                      <p class="card-text">위치 : <%= cafe.location %> </p>
                      <% let cnt = 0 %>
                      <% for(let menu of cafe.menu.slice(0, 3)) {%>
                        <% cnt++ %>
                        <p class="card-text">메뉴 <%= cnt %> : <%= menu %></p>
                      <% }  %>
                    </div>
                  </div>
                </div>
              </div>
        <% } %>
        </div>
        <form action="/cafe?_method=DELETE" method="post">
            <button>전부 삭제</button>
        </form>
<script
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous">
</script>
                   
</body>
</html>

 

이 ejs파일은 app.js의 get함수로부터 데이터 정보를 받았다.

 

app.js의 get

app .get ('/cafe', async (req , res )=>{

   const cafes = await Cafe .find ({}); //데이터베이스 모든 정보를 받아서 cafes에 저장

   res .render ('cafe', {cafes }); //넘겨준다.

})

 

 

이미지는 우선 아무 이미지가 넣은 상태이다.

show 페이지

 

부트스트랩 사용2(Create페이지)

 

이제 create페이지를 생성할 차례이다.

역시 card를 이용해 만들 예정이다. 다만 이번에는 메뉴를 몇 개 등록할지 모르니 동적으로 등록 가능한 공간(Input 태그)이 할당되었으면 좋겠다.

처음 구현을 떠올릴 때 이를 위해 React를 활용할까 생각했다.(실제로 잠깐 공부하기도 했다.)

 

다만, 내가 원하는 것에 비해 해야할 규모가 너무 커질 것이라 생각하여 바닐라 js로 작성을 하고자 한다.

 

다행히 옛날에 동적으로 태그를 생성하는 코드를 정리 한 적이 있었다.

https://doompa.tistory.com/179

 

ejs파일 내에 자바스크립트 코드를 넣어 완성하였다.

 

views/createCafe.ejs

더보기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>카페 만들기</title>
</head>
<body>

 

    <div class="container ">
        <div class="row justify-content-md-center text-center">
            <h1 class="my-3"> 카페 생성 페이지</h1>
            <div class="card" style="width: 25rem;">
                <form action="/cafe" method="POST">
                <div class="card-body">

 

                <h5 class="card-title">카페 항목 생성</h5>
                <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <label for="cafeName">카페 이름</label>
                    <input id="cafeName" type="text" name="name"> <!-- name속성 : 서버로 전달되는 이름-->
                </li>
                <li class="list-group-item">
                    <label for="cafeLocation">카페 위치</label>
                    <input id="cafeLocation" type="text" name="location">
                </li>
                <li class="list-group-item">
                    <div id ="menus" class="d-flex flex-column mb-3">
                        <label for="menuName mx-2" class="mb-2">메뉴 이름</label>
                        <input id="menuName" class="mb-3" type="text" name="menu">
                    </div>
                    <div class="row justify-content-md-center">
                        <button id="addMenuBtn"class ="btn btn-success mt-1" style="width: 8em; text-align: center;">메뉴 추가</button>
                     </div>  
                </li>

 

                </ul>
                <div class="card-body">
                    <button class="btn btn-primary btn-sm mx-3">확인</button>
                    <a href="/" class="btn btn-secondary btn-sm mx-3">취소</a>
                </div>
                </form>
            </div>
        </div>
    </div>

 

    <script
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous">
</script>
</body>
</html>

 

<script>
    const addMenuBtn = document.querySelector('#addMenuBtn')
    const menus = document.querySelector('#menus')
    addMenuBtn.addEventListener('click', e=>{
        e.preventDefault();
        const newInput = document.createElement('input');
        newInput.setAttribute('id', 'menuName')
        newInput.setAttribute('name', 'menu')
        newInput.setAttribute('class', 'mb-3')

 

        menus.append( newInput)
        console.log("클릭")
    })
</script>

 

그 중 자바스크립트 코드를 살펴보자면 아래와 같다.

<script>
    const addMenuBtn = document.querySelector('#addMenuBtn')
    const menus = document.querySelector('#menus')
    addMenuBtn.addEventListener('click', e=>{
        e.preventDefault();
        const newInput = document.createElement('input');
        newInput.setAttribute('id', 'menuName')
        newInput.setAttribute('name', 'menu')
        newInput.setAttribute('class', 'mb-3')

 

        menus.append( newInput)
        console.log("클릭")
    })
</script>

document.querySelector(이름) : 이름값으로 태그를 선택한다. #로 시작하면 id를, .로 시작하면 class를 선택할 수 있다. 위 같은 경우 menus라는 id를가진 태그를 선택했다.

document.createElement(태그명) : 태그를 생성한다.

.setAttribute('속성명', '값') : 해당 태그의 속성을 설정한다. 속성명에 name을 넣으면 name속성이, id를 넣으면 id속성이 설정이 값으로 설정 된다.

newInput.setAttrbute('class', 'mb-3') :클래스를 설정하여 부트스트랩 코드를 적용하였다. mb는 margin-bottom의 약어이다.

 

결과

 

create page
show page

 

의도한대로 작동하는 것을 볼 수 있다.

 

아직 디자인이 깔끔하진 않지만, 기능이 작동하므로 뭐... 괜찮다고 생각한다.

 

기능이 모두 구현된 후 기능에 지장을 주지 않는 선에서 디자인을 최대한 괜찮게 고치도록 하겠다.

 

+) 메뉴 3가지를 카드뷰에서 순서대로 보여주는 것이 아니라 카페를 만들 때 메뉴에 대표 메뉴를 3가지 선택할 수 있는 체크박스가 있다면 더 괜찮을 것 같다.

 

체크박스로 선택하면 해당 항목을 DB 도큐먼트의 새 항목에 넣고 보여주면 더 좋을 듯 싶다.

 

또한 메뉴의 종류가 다양해지면, 항목별 분류를 위해 메뉴 데이터베이스를 따로 만드는 것도 고려할 법하나 아직은 그렇게 메뉴를 세분화 할 필요가 있을지 모르겠다.

저작자표시 비영리 변경금지

'컴퓨터 > 웹 : JS' 카테고리의 다른 글

[에러 해결]Refused to apply style from 'http://localhost:3000/OOO.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.  (0) 2023.02.17
[Node.js](개인 프로젝트) 검색 기능 + 가격 및 편의성 추가 + 모델 수정  (1) 2023.02.17
[JS]객체 배열에서 특정 요소 찾기(find, findIndex, filter 함수)//객체 배열 처리  (0) 2023.01.11
[Node.js] express + mongoDB 데이터 연동//CRUD작업  (0) 2023.01.07
[Node.js] express 시작하기 (node.js 다운로드, npm, express)  (0) 2023.01.06

관련글

댓글

티스토리툴바