생각을 개발하자, 박진형

[node.js] 프로젝트 개발 일지 - 댓글 CRUD + ajax 본문

Javascript/node.js

[node.js] 프로젝트 개발 일지 - 댓글 CRUD + ajax

imjinbro imjinbro 2017.08.11 22:21
[지금까지]
- 설명에 대한 댓글쓰기, 보기(C / R) 기능은 구현되어져있음
- Update / Delete 기능 구현하기 : C, R과 마찬가지로 ajax 서버콜


[조건]
- 작성한 유저와 현재 유저가 같을 때 : user_id(유저를 구별할 수 있는 고유값)로 비교한 후
=> comment 테이블 레코드마다 user_id를 가지고 있음
=> 업데이트, 삭제 쿼리를 날릴 때 WHERE 2개 조건 : AND 조건(유저가 맞고, 삭제하려는 코멘트의 id가 맞아야함)


[구현하기]
1) 댓글 레이아웃 수정 : 이름 / 내용 / 버튼 2개(수정하기 토글, 삭제 버튼)
2) 수정하기 토글 : 클릭하면 댓글 내용 수정할 수 있도록 DOM 교체 : /comment 컨트롤러 내 함수 만들기
=> 토글 클릭 : 댓글 작성한 유저와 현재 접속한 유저가 맞는지 확인 - mysql 쿼리 날려서 확인
=> 맞으면 수정하기 패널 보여주고, 수정이 완료되면(엔터키 입력하면) mysql 서버 디비 테이블 접속
=> 수정 쿼리 날리기 : 'UPDATE comment SET content ="' + content + '"WHERE id =' + id
=> 수정 쿼리 결과에 따라 처리 : 성공했을 경우와 실패했을 경우 - json으로 전송 - 자바스크립트 코드(ajax 리스너 메서드)에서 파싱 

3) 삭제하기 : 삭제 버튼을 누르면 ajax 콜해서 express 서버에서 삭제 작업 후(mysql 접속 -> 삭제)  결과를 받아 dom api로 바로 눈에 보이는 코드 없애기
=> 마찬가지로 comment 컨트롤러에 delete(http method) 생성
=> ajax 콜할 때 id값을 받아서 mysql에 접속해서 해당 id값을 삭제하는 쿼리 : 'DELETE FROM comment WHERE id = ‘ + id
=> 삭제 여부에 따라 ajax 리스너에서 처리하면 됨


[역시 db설계와 뷰 설계 및 제작]
- 제목 그대로 설계가 제대로되고, 뷰를 먼저 제작한 후 기능을 다는 것이 좋음
- 기능은 모듈 별로 만들어둔 뒤에 뷰와 바인딩


[현재까지 개발 결과]
http://www.politics-watch.com/ (ie css 지원하지않음 : 다깨짐)
- 해커톤까지 딱 1주일 남았다

- 파이어베이스 다음에 또 사용한다면 서버쪽에서 사용하도록 개발해야겠음 
- 바닐라js로 ajax 결과를 만들었다!!!!!!! -  살짝 위험에 빠질뻔....
- 관리 페이지, 아카이빙 기능 만들자~~~~~!!