시작하기에 앞서..
지금까지 배웠던 방법으로 express generator 이용하여 프로젝트를 생성해줍니다.
오늘의 목표
오늘의 목표는 todolist로 CRUD를 Mysql과 연동까지 하여 구현하는 것 입니다.
레포지토리 클론 후 단계별로 소스코드를 적용하고 싶을 경우엔..
git reset --hard 커밋코드 를 입력하시면 됩니다.
REST API 구성하기
git reset --hard 9ba0b775c0b7e78791a27975634a4f61777154d2
깃허브에서 보기
지금까지 해왔던 방법으로 rest api를 구성합니다.
express generator 생성된 router들중 users를 복제하여
todolist라는 라우터를 만들어 줍니다.
app.js 파일도 변경해 주도록 합니다.
정상적으로 넘어오는지 확인해 줍시다.
ejs, css, javascript 작성하기
git reset --hard e5a939be53509d37162ecabb990b6c10299ab57c
깃허브에서 보기
--->views/index.ejs
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel='stylesheet' href='/stylesheets/style.css' />
<title>Hello, world!</title>
</head>
<body>
<div id="wrap">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title text-center">TodoList</h5>
<input type="text" class="form-control" id="userInput">
<div class="card mt-3" style="width: 100%;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio <span class="delete">❌</span></li>
<li class="list-group-item">Cras justo odio<span class="delete">❌</span></li>
<li class="list-group-item completed">Cras justo odio<span class="delete">❌</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script>
</script>
<script src='/javascripts/script.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>---> public/stylesheets/style.css
*{
margin: 0;
padding: 0;
}
#wrap{
width: 600px;
margin: 100px auto;
}
.delete{
float: right;
border: none;
background: none;
}
.hide{
display: none;
}---> public/javascripts/script.js
// 엔터키 눌렀을 때 이벤트 발생
document.getElementById('userInput').addEventListener('keypress', (e)=>{
if(e.key === 'Enter'){
// li태그 생성
const li = document.createElement('li');
// 지우기 버튼 생성
const btnDelete = document.createElement('button');
// 텍스트 영역 생성
const text = document.createElement('span');
// 수정하기 input 생성
const ipEdit = document.createElement('input');
// 사용자 입력값 받아오기
const userInput = document.getElementById('userInput').value;
// li 태그에 bootstrap 디자인 적용하기
li.className = 'list-group-item';
// span 태그안에 텍스트 넣기
text.appendChild(document.createTextNode(userInput));
// 리스트 클릭했을 때 이벤트 달아주기
li.addEventListener('click', ()=>{
ipEdit.classList.remove('hide');
text.classList.add('hide');
ipEdit.value = text.innerText;
})
// 수정하기 bootstrap 디자인 적용하기
ipEdit.style = 'width: 90%'
ipEdit.type = 'text';
ipEdit.classList.add('form-control', 'form-control-sm', 'hide');
// 수정하기 엔터 눌렀을 때
ipEdit.addEventListener('keypress', (e)=>{
if(e.key === 'Enter'){
text.innerText = ipEdit.value;
ipEdit.classList.add('hide');
text.classList.remove('hide');
}
})
// 지우기 버튼 class 달아주기
btnDelete.className = 'delete';
// 지우기 버튼 글자 삽입
btnDelete.appendChild(document.createTextNode("❌"));
// 클릭하면 상위요소(li태그) 제거하기
btnDelete.addEventListener('click',function() {
this.parentElement.remove();
});
// li태그에 지우기 버튼 달기
li.appendChild(text);
li.appendChild(btnDelete);
li.appendChild(ipEdit);
// input 박스가 비어있을 경우
if (userInput==='') alert("비어있습니다.");
else document.getElementsByClassName('list-group')[0].appendChild(li);
// 모든 과정이 끝나면 비우기
document.getElementById('userInput').value = "";
}
})로컬에서 정상적으로 동작하는 Todolist를 만들어 준 후에 서버와 하나씩 연동시켜주도록 합니다.
데이터 임의로 만들고 READ 구현하기
git reset --hard 3d0320c446ec9c68234c5ce3af82c95611a08aab
깃허브에서 보기
처음 브라우저가 로드될 때 작동될 onload.js 파일을 생성해줍니다.
onload.js는 서버에서 read해온 정보들로 todolist를 만들어줍니다.
데이터 정상적으로 넘어오는지 확인하기
git reset --hard d595567fd8775ef5240403ac85038497460672ab
깃허브에서 보기
axios cdn을 추가하고 서버에서 배열을 넘겨주고 클라이언트쪽에서 정상적으로 넘어오는지 확인해 봅시다.
axios를 이용해서 정상적으로 read
git reset --hard 698e957870e0ab20becbfce24ccbe551bd949de3
깃허브에서 보기
확인이 끝났으면 foreach문을 이용해 read를 구현해 봅니다.
Update와 Delete 구현
git reset --hard f15b7eacfefc9ec3d04d6793c82247b8450666d4
깃허브에서 보기
db에서의 index의 autoincrement가 로컬에서도 적용되게 하기 위해서 topIndex를 변수를 만들어주어 update와 delete를 구현해줍니다.
put과 delete 통신 구현
git reset --hard c11a33914ee36221641fc604c53d2871b24fac2d
깃허브에서 보기
axios로 서버와 통신하는 코드를 작성해주어 값이 정상적으로 넘어오는지 확인합니다.
post 구현
git reset --hard f01b2025225155b28c7d7fa42c7c53274413ed4c
깃허브에서 보기
마지막으로 새로운 todo를 작성했을때 서버로 전송할 post를 구현해줍니다.
db 모듈 구현
git reset --hard 4df16884805d7f5d903597285be4c30aeae35672
깃허브에서 보기
Node.js 서버와 Mysql 서버를 연동하기 위한 db.js 모듈을 구현해봅니다.
read 잘 읽어오는지 확인
git reset --hard b4573524280d75321ac8ac038430be33df74fb2e
깃허브에서 보기
query문을 작성해 정상적으로 레코드들이 넘어오는지 확인합니다.
create, update 구현
git reset --hard 00a608713f09c4ae2461d53d2786604d357403b0
깃허브에서 보기
client 부분과 server 부분의 create와 update를 완벽히 구현해줍니다.
delete 구현
git reset --hard 610169d28c0e52722f88bb2f76147f7faf828da2
깃허브에서 보기
마지막으로 delete 기능의 구현을 완료합니다.
toast 메세지 달기
git reset --hard 939ee33e2bef0dd35bef86ec4adb145afaea836a
깃허브에서 보기
client에서 todolist를 다룰 때 정상적으로 서버와 통신이 되고 있는지를 확인하기 위해 서버에서 정상적으로 값이 넘어올때 toast 메세지를 띄워주도록 합니다.
모두 적용하여 완성
git reset --hard 251ff3d0ce25bb2f9490ea226355b43a54088dc9
깃허브에서 보기
나머지들도 모두 적용하여 완성시켜주도록 합니다.
