[Node.js] 암호화, fetch, spa

 

 

 

 

암호화

파일 app01.js 생성 및 npm 설치

 

암호화를 담당해주는 bcrypt 모듈도 설치

 

기본 서버 코드 작성

 

암호화 시

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

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

 

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

 

암호화된 값을 비교할땐 compareSync(로그인 입력 비밀번호, DB에 저장된 비밀번호) 로 비교하여 결과 값이 true, false 로 나오는 것을 확인하여 사용한다.

 

 

 

 

 

 

 

 

 

 

fetch

fetch 를 사용하기 위해서 body-parser 모듈의 기능이 필요함

 

app02.js 파일 생성 후 코드 작성

 

보여질 폴더, 파일 추가

 

non_fetch.ejs 파일 작성

 

조회수 기능을 만들기 위해 count 함수 추가 후 전달

 

non_fetch.ejs 파일에 조회수 출력

 

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

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

 

fetch 를 사용할 경로인 localhost:3000/fetch01 생성

 

fetch01.ejs 파일 생성하여 fetch 를 사용해서 자기 자신 경로를 다시 서버로 요청

 

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

 

.then 을 통해 동기처리, async - await 을 통해 동기 처리

 

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

 

 

 

 

 

 

 

 

 

 

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

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

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

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

app02.js 작성

 

rest.ejs 파일 생성하여 작성

 

 

 

 

 

다시 기본 웹 구동 파일 생성

 

<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 방식으로 가져와서 사용중.... )

 

코드 실행, SPA ( Single Page Application ) - 한 페이지에서 여러 기능이 다 작동

 

 

 

 

 

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

jquery 를 require

 

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

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

arr : jquery 가 만들어준 데이터, data : jquery 가 만들어준 배열을 다시 생성

> 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 형태로 프론트에 응답한다