토이프로젝트_(4단계 프론트 만들기)

백엔드단의 준비 (서버세팅, db 연결, api)가 끝났으니 이제 클라이언트 사이드 화면을 만들어 준다.

ejs는 nodes에서 html에 데이터를 입력시킬수 있게 도움을 주는 템플릿 엔진이다. 앞서 main.js 파일에 ejs template engine 세팅을 했다.
우리가 만들어둔 uploades 폴더는 퍼블릭한 폴더가 아니기때문에 웹브라우저가 접근할수 없다. 그래서 이 폴더를 static 으로 바꿔줘야 웹브라우저에서 이미지가 디스플레이 된다.

//set template engine
const express = require('express');
app.set('view engine', 'ejs');
// uploads 폴더를 static 으로 바꿔주서 웹브라우저가 요청하면 접근할수 있게 해준다
var path = require('path')
app.use(express.static(path.join(__dirname,'uploads')));

포토앨범 페이지의 뼈대 코드는 html로 만들어 놨고, views 폴더안에 index.ejs 파일로 붙여 넣기 했다. 프론트 단 보여지는 코드는 index.ejs 파일에다 입력한다.

1. 파일 업로딩을 위한 multipart/form-data 만들기

만들어둔 인풋박스를 multippart/form-data를 form 으로 감싼다.

• form action = "/" 로컬호스트 5000에서 실행
• method="post" POST api 형식으로 데이터를 저장
• enctype="multipart/form-data" 파일업로드 기능을 제공한다
• type="file" choose file 버튼을 누르면 파일 찾기 기능이 실행된다
• acept="image/jpeg, image/png, image/jpg" 첨부가능한 파일은 이미지 형태 png, jpg, jpeg으로 한정한다.
• name = “username, image, comment” 인풋의 이름을 지정해준다, GET으로 데이터를 ejs로 불러올때 사용한다

//파일 업로드 기능을 제공하는 form 뼈대 
<form action="/" method="post" id="add-form" enctype="multipart/form-data">
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input type="text" name="username" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" required/>

        </div>
        <div class="mb-3">
            <label for="formFileMultiple" class="form-label"></label>
            <input class="form-control" type="file" name="image" id="upload-file" accept = "image/jpeg, image/png" >
        </div>
        <div class="mb-3">
            <label for="comment" class="form-label"> 자랑하기 </label>
            <textarea class="form-control" name="comment" id="comment" rows="3"></textarea>
        </div>
        <div class="mybutton">
            <div class="d-grid gap-2 d-md-block">
                <input type="submit" name="submit" value="자랑하기"class="btn btn-dark"/>
            </div>
        </div>
</form>

2. ejs 사용해서 username, image, comment 데이터를 포토앨범 html 코드에 붙여서 이미지카드 디스플레이 하기

• db에 인풋박스에 입력한 데이터가 성공적으로 저장되면, 성공 메세지 알럿을 보내기
• db 안에 파일이 있으면 username, image, comment에 맞는 데이터를 찾아서 html에 붙여주기
• db 안에 파일을 찾아서 업로드된 파일이 없으면 알럿 보내기

if 문을 사용해서 시나리오에 맞는 코드를 실행시킨다.

//db에 등록된 file이 없으면 ejs로 지정한 html 코드에 알럿 메세지를 보여준다
<script src="ejs.js"></script>
    <div class="photo-display">
        <% if(message) { %> 
            <div class="alert alert-dismissable fade show alert- <%= message.type %>"
                role="alert">
                <button class="btn-close" type="button" data-bs-dismiss="alert"
                aria-label="close"></button>
                <strong> <%= message.message%></strong>
            </div>
        <% } %> 

//db안에 등록된 file 있으면, loop를 사용해서 저장된 파일을 찾아서, 
<%= row.name%> 으로 데이터를 html 코드에 붙여서 화면에 보여준다
 
 <div class="row row-cols-1 row-cols-md-3 g-4">
        <% if(files !='') { %> 
            <% files.forEach((row, index) => { %>

                <div class="col">
                    <div class="card">
                            <img src="<%= row.image %>" width="300" class="card-img-top"/>
                            <div class="card-body">
                              <h5 class="card-title"> <%= row.username %></h5>
                              <p class="card-text"> <%= row.comment %></p>
                            </div>
                    </div>
                    </div>
        <% }) %>
    </div>

        <% } else { %> 
            <h2 class="text-center text-secondary mt- 5"> no files found in the database</h2>
        <% } %>
    </div>
    </div>
    </script>