전영호의 개발 블로그

자바스크립트 파일과 css 파일을 하나의 파일로 분리하여 관리

파일 업로드, 다운로드

npm 설치

form 태그 내에서 파일을 전송하는 경우

enctype="multipart/form-data"

위 코드를 적용해줘야 함

controller 에서 기존처럼 사용하지 않는 이유는 결국 controller 에 세부 경로가 많아질 수록 코드가 쌓이게 되는데 코드에서 문제가 생길 시 단순 출력 부분과 연산 부분 중 어느 부분이 문제가 생긴지 파악하고 쉽게 고칠 수 있기 때문... 또한 Object 로 묶어서 사용하는 이유는 exports 의 코드가 너무 길어지기 때문이므로 Object 를 exports 하여 router 에서 Object.key 형식으로 함수를 사용한다

특정 파일 형식만 사용하고 싶은 경우

다운로드 구현

res.download(경로) : 해당 경로를 다운로드

다운로드 기능 구현 완료

이미지 업로드 시 미리보기 기능 구현

onchange="readURL(this)" : 만약 파일이 선택되면 태그에 변경이 일어나기 때문에 readURL() 함수를 실행시킨다, 이때 매개변수로 자기 자신 태그가 가지고 있는 파일 정보를 전송한다.

readURL 함수에서는 이 파일의 정보를 input 변수로 넘겨 받아서 해당 변수의 files 라는 키 안에 들어있는 파일의 저장 경로를 file 함수로 담아준다

> 만약 파일 경로가 비어있지 않다면 ( 파일이 정상적으로 올라왔다면 ) 이 파일의 정보를 FileReader 를 사용하여 읽어서 변수 e 로 만든다.

> 이후에 이 변수의 target 이라는 키 안에 result 키에 담겨있는 이미지에 대한 경로를 가져와서 html 코드의 img 경로를 변경해준다

나중에 쇼핑몰같은 홈페이지의 경우 썸네일을 모두 원본으로 사용해버리면 용량이 너무 커지기 때문에 썸네일용으로 따로 파일을 처리해서 사용해야 한다 ( 구선생님께 노드 썸네일 생성 으로 검색하면 나옴 )

파일 삭제 구현

파일 수정

원본 파일을 삭제 후 저장

자바스크립트 파일과 css 파일을 하나의 파일로 분리하여 관리

get, post, put, delete

{
  "scripts": {
    "start": "npx supervisor app03.js"
  },
  "dependencies": {
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.19.2",
    "supervisor": "^0.12.0"
  }
}

package.json

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>

    let content;
    window.onload = () => {
        content = document.getElementById("content");
        const getM = document.getElementById("getMembers");
        getM.addEventListener("click", getMembers);
        const regView = document.getElementById("regView");
        regView.addEventListener("click", registerView);
    }
    const register = () => {
        const arr = $("#form").serializeArray();
        // form 태그 안의 내용을 jquery 가 배열로 만들어준다
        console.log("arr : ", arr);
        let data = {};
        arr.forEach( d => data[d.name] = d.value );
        console.log("data : ", data);
        fetch("/register",{
            method : "post",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify(data)
            // 보내는 데이터를 json 방식으로 변환하여 보낸다
        })
        .then( res => res.json() )
        .then( result => {
            console.log( result )
            if(result === 1){
                alert("회원가입 성공!!!");
                getMembers();
            }
        })
    }
    const registerView = () => {
        let msg = `<form id="form">
            <input type="text" name="id" id="id" placeholder="input id"><br>
            <input type="text" name="pwd" id="pwd" placeholder="input pwd"><br>
            <input type="text" name="name" id="name" placeholder="input name"><br>
            <input type="text" name="addr" id="addr" placeholder="input addr"><br>
            <input type="button" id="btn" value="저장">
            </form>`;
        
        content.innerHTML = msg;
    }
    const getMembers = () => {
        fetch("get_members", {method:"get"})
        .then(res => res.json())
        .then(m => {
        let msg = "<table border='1'>";
            msg += "<tr><th>아이디</th><th>이름</th><th>주소</th></tr>"
            m.forEach((mem) => {
                msg += "<tr>";
                msg += `<td>${mem.id}</td>
                        <td style="cursor:pointer;" onclick="info('${mem.id}')">${mem.name}</td>
                        <td>${mem.addr}</td>`;
                msg += "</tr>";
            })
            msg += "</table>"
            content.innerHTML = msg;
        })
    }
    const info = (id) => {
        console.log("id : ", id);
        fetch("/search/"+id, {method:"get"})
        .then(res => res.json())
        .then(data => {
            console.log("data : ", data);
            content.innerHTML = `id : ${data.id}<br>
                                pwd : ${data.pwd}<br>
                                name : ${data.name}<br>
                                addr : ${data.addr}<hr>
                                <span style=cursor:pointer;
                                onclick="getMembers()"">
                                목록으로 이동
                                </span>
                                &nbsp; / &nbsp;
                                <span style=cursor:pointer;
                                onclick="modify_form('${data.id}')">
                                수정
                                </span>
                                &nbsp; / &nbsp;
                                <span style=cursor:pointer;
                                onclick="deleteM('${data.id}')">
                                삭제
                                </span>`;
        })
    }
    const modify_form = async (id) => {
        registerView();
        $("#btn").click(modify)
        $("#btn").val("수정 완료")
        const res = await fetch("/search/"+id, {method:"get"});
        const data = await res.json();
        console.log("data : ", data);
        $("#id").val(data.id);
        $("#pwd").val(data.pwd);
        $("#name").val(data.name);
        $("#addr").val(data.addr);
    }
    const modify = () => {
        const arr = $("#form").serializeArray();
        let data = {};
        arr.forEach( d => data[d.name] = d.value );
        fetch("modify", {
            method : "put",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify( data )
        })
        .then(res => res.json())
        .then(result => {alert("수정 성공"); info(data.id);})
    }
    const deleteM = async (id) => {
        const res = await fetch("/delete", {
            method : "delete",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify({id : id})
        })
        const result = await res.json();
        if(result == 1){
            alert("삭제 완료!!!");
            getMembers();
        }
    }
</script>

<div id="content">

</div>
<hr>
<button type="button" id="getMembers">목록보기</button>
<button type="button" id="regView">회원가입</button>

index.ejs

const express = require("express");
const app = express();

app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

let members = [
    {id : "aaa", pwd : "aaa", name : "홍길동a", addr : "a산골짜기"},
    {id : "bbb", pwd : "bbb", name : "홍길동b", addr : "b산골짜기"},
    {id : "ccc", pwd : "ccc", name : "홍길동c", addr : "c산골짜기"},
]

app.get("/", (req, res) => {
    res.render("index");
})

app.get("/get_members", (req, res) => {
    res.json(members);
})

const bodyParser = require("body-parser");
app.use(bodyParser.json());
// post 로 받아오는 데이터를 json 형식으로 받아온다는 의미
app.post("/register", (req, res) => {
    console.log("req.body : ", req.body);
    members = members.concat(req.body);
    res.json(1);
    // 프론트한테 정상적으로 받았기 때문에 1 응답
})

app.get("/search/:id", (req, res) => {
    console.log(req.params);
    const result = members.filter(mem => mem.id === req.params.id)
    console.log("result : ", result);
    res.json(result[0]);
})

app.put("/modify", (req, res) => {
    members = members.filter(mem => mem.id !== req.body.id);
    members = members.concat(req.body);
    res.json(1);
})

app.delete("/delete", (req, res) => {
    members = members.filter(mem => mem.id !== req.body.id);
    res.json(1);
})

app.listen(3000, () => {console.log("3000server")})

app03.js

암호화

암호화 시

hash : 비동기적으로 작동 하므로 .then 이나 await 을 사용해줘야 함

hashSync : 동기적으로 작동하므로 따로 동기처리를 할 필요가 없다

DB 에 암호를 저장할때 암호화 과정을 진행한 값을 저장한다

fetch

fetch 를 사용하지 않고 자기 자신의 페이지로 가는 링크를 이동하면 웹페이지가 처음부터 끝까지 새로 갱신된다

( 즉, 웹을 처음부터 끝까지 다시 로딩한다 )

fetch : 서버로 요청을 하는 것은 a 태그, location.href 와 동일하나 fetch 는 서버로 연동은 되지만 페이지를 요청하는 것이 아닌 데이터만 주고 받는다

fetch 를 사용해서 받아온 데이터는 비동기적으로 작동하기 때문에 동기적으로 작동하게끔 처리해줘야 하며, 전달 받은 데이터는 json 형식으로 변환해야 확인 할 수 있기 때문에 json() 을 사용하여 json 형식으로 변환시켜서 사용하며 이 과정도 비동기적으로 작동하기 때문에 동기적으로 작동하게끔 처리해줘야 한다

get : 데이터를 얻어올 때 사용 ( 파라미터를 get 방식으로 서버와 주고 받음 )

post : 데이터를 추가할 때 사용 ( 파라미터를 post 방식으로 서버와 주고 받음 )

put : 데이터를 수정할 때 사용

delete : 데이터를 삭제할 때 사용

<script>

    let content;
    window.onload = () => {
        content = document.getElementById("content");
        const getM = document.getElementById("getMembers");
        getM.addEventListener("click", getMembers);
        const regView = document.getElementById("regView");
        regView.addEventListener("click", registerView);
    }
    const registerView = () => {
        let msg = `<form id="form">
    <input type="text" name="id" placeholder="input id"><br>
    <input type="text" name="pwd" placeholder="input pwd"><br>
    <input type="text" name="name" placeholder="input name"><br>
    <input type="text" name="addr" placeholder="input addr"><br>
    <input type="button" onclick="register()" value="저장">
</form>`;

        content.innerHTML = msg;
    }
    const getMembers = () => {
        fetch("get_members", {method:"get"})
        .then(res => res.json())
        .then(m => {

        let msg = "<table border='1'>";
            msg += "<tr><th>아이디</th><th>이름</th><th>주소</th></tr>"
            m.forEach((mem) => {
                msg += "<tr>";
                msg += `<td>${mem.id}</td>
                        <td>${mem.name}</td>
                        <td>${mem.addr}</td>`;
                msg += "</tr>";
            })
            msg += "</table>"
            content.innerHTML = msg;
        })
    }
</script>

<div id="content">

</div>
<hr>
<button type="button" id="getMembers">목록보기</button>
<button type="button" id="regView">회원가입</button>

index.ejs 파일 작성

(app03.js 에서 json 형식으로 보내주는 members 변수를 fetch 를 통해 get 방식으로 가져와서 사용중.... )

jquery 를 사용하여 프론트에서 백엔드로 데이터 넘겨주기

form 태그 안의 내용을 jquery 를 사용하여 배열로 만들어 arr 배열에 저장

> 해당 배열을 forEach 문을 사용해서 배열의 키를 우리가 사용할 키, 값으로 변경

> fetch 를 통해 /register 경로를 서버에 요청하면서 post 방식으로 json 형식의 데이터를 보내는데 이 데이터는 body 안에 담겨서 보내지며 JSON.stringify() 를 통해 전송할 자료를 json 형식의 자료로 변환하여 보낸다

> .then 을 사용하여 서버로부터 돌아오는 응답을 json() 을 사용하여 json 형식으로 받는다

> .then 을 이용하여 받아온 json 데이터를 result 라는 변수에 담아서 사용한다

app03.js (백) 는 /register 경로로 넘어온 프론트에서 넘어온 데이터를 post 형식으로 받는다

> 이때 body-parser 가 필요하며, app.use(bodyParser.json()) 을 선언하여 받는 데이터를 json 형태로 받는다고 설정한다

> 이후 데이터를 처리하는 코드를 작성하며 res.json() 을 사용하여 json 형태로 프론트에 응답한다

DB 연동

create table members(
id varchar2(20) primary key,
pwd varchar2(100),
name varchar2(20),
addr varchar2(100)
);
insert into members values('aaa','aaa','홍길동','산골짜기');
insert into members values('bbb','bbb','김개똥','개똥별');
insert into members values('ccc','ccc','고길똥','마포구');
commit;

DB 에 데이터 생성

npm 도 설치

이제는 router 경로를 최초 root 경로만 app.js 에서 설정한 뒤 세부 주소는 router.js 에서 나눠준다

이제 member_router 에서 controller 로 연동할 것

DAO 를 호출해서 사용하는 service 와 service를 호출해서 사용하는 controller 에도 async 와 await 을 걸어서 비동기로 작동하는 코드를 처리해줘야 promise 가 아닌 정상적인 연산을 끝낸 결과 값을 받을 수 있다

controller : service 와 연동하여 처리된 데이터를 ejs 와 스크립트 등에 전달하여 세부경로로 들어왔을때 클라이언트에게 보여줄 내용을 컨트롤한다

service : 기능을 담당하며 dao 에서 DB 에 접근해서 가져온 데이터를 가공해서 다시 controller 에 전송한다

dao : DB 에 접근하여 쿼리문을 처리한 뒤 DB 에서 돌아온 리턴 값을 그대로 service 에게 전달한다

sql 문에서 사용된 :id, :pwd, :name, :addr 은 키에 대한 값을 의미한다.

:id > id 키에 대한 값으로 변환

:pwd > pwd 키에 대한 값으로 변환

:name > name 키에 대한 값으로 변환

:addr > addr 키에 대한 값으로 변환

회원 수정 기능 구현

( 경로 오타 : /modify_form 으로 수정해야 함 )

네비게이션 bar 설정하기

( 모든 페이지에서 상단에 같은 ejs 파일을 적용하기 )

- 네비게이션 bar 로 설정할때 주의점 -

<%- include("네비게이션 bar 로 사용할 파일의 경로")%>

위 코드로 적용할때 경로는 상대경로로 적용하는 경우 현재 파일 위치를 기준으로 변경해줘야 한다

DB 연동(1)

module 다운로드

위 코드는 동기 방식 ( 순차적으로 코드를 읽는다 )

DB 를 연결하는 방식은 비동기 방식이다.

비동기 방식이므로 코드가 순차적으로 읽히지 않고 DB 에서 데이터를 읽어오지 못한 경우에도 DB 에서 가져온 데이터를 가지고 연산해야 하는 코드들이 실행되게 된다.... 이때 비동기 방식의 코드가 처리된 이후 코드를 실행하게 설정해 줄 필요가 있다.

비동기 방식의 함수인 connect 를 선언하고 해당 함수가 실행 된 뒤에 다른 코드를 실행하게끔 설정

1. 함수를 변수로 선언 [ con = connect(); 와 같이 ] 한 뒤 con.then 으로 con 함수가 실행되면 다음 함수를 실행하게끔 설정

2. 함수 내에 비동기 함수가 있음을 async 을 통해 선언 후 await 으로 비동기 함수가 동작한 뒤 다음 내용을 실행할 수 있도록 설정 

DB 를 연결 할때 비동기 방식을 처리한 뒤 연결하게끔 설정

비동기 처리 방식 2가지 ( .then / async - await 두 가지를 모두 사용해봄 )

세션

req.session.[ 세션키 ]

delete req.session.[세션 키] : 특정 키의 세션을 삭제

req.session.destroy() : 모든 세션을 삭제

body-parser : post 방식의 데이터를 가져올때 사용하는 방식

세션도 동일하게 만료시간을 설정해줄 수 있다

( session 의 default 자동 만료 시간은 30분 )

세션 만료시간 설정

body-parser 모듈 설치

body-parser : post 방식의 데이터를 가져올때 사용하는 방식

라우터에 post 방식으로 받아오기 때문에 router.post 를 사용한다

success 함수 부분에 if 문 안에 req.session.username 은 오타 => req.session.userName 으로 변경해야 함

( 시크릿 모드로 실행시키면 개발자 모드를 켜놓지 않고 /localhost:3000/session/success 로 직접 진입 시 alert 창이 출력되지 않고 바로 /localhost:3000/session/login 으로 리다이렉트 되는 현상이 발생.... 시크릿 모드 해제 또는 시크릿모드에서 개발자 모드 활성화 및 다른 브라우저로 작동시키면 정상 작동 확인 )

파일로 세션을 저장해서 관리하는 방법

( 개발할때 테스트가 필요한 경우 코드를 수정하면 세션이 초기화되기 때문에 파일로 저장해놓고 사용 )

npm install session-file-store

사용 방법은 구글링 해보기

실습 예제

cookie, session

쿠키와 세션을 사용하는 이유 : HTTP 통신은 비연결성 통신( 연결 시도 후 연결이 되면 끊기는 형식 - 예를 들어 클라이언트가 request 를 서버로 전송한 뒤 연결을 끊음, 그럼 서버는 클라이언트에게 response 를 보낸 후 연결을 끊음.... 그렇기 때문에 로그인 정보와 같은 것을 쿠키와 세션에 보관해서 인증한다 )

쿠키 : 클라이언트가 관리 ( 보안에 좋지 않기 때문에 쿠키는 로그인에는 잘 사용하지 않는다 )

세션 : 서버가 관리

쿠키를 생성하여 5초동안 팝업이 뜨지 않게 하기

쿠키를 암호화 하기, 쿠키를 config.js 파일로 분리하기

signed : true => 쿠키 암호화 ( 암호화 키 값은 cookieParser 를 미들웨어로 등록할때 괄호 안에 키 값을 입력해준다 )

장바구니 만들기

실습 예제

예제 풀이