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 install express --save npm install ejs --save npm install oracledb@^5.5.0 --save npm install supervisor --save npm install body-parser --save
npm 도 설치
app.js 기본 설정
이제는 router 경로를 최초 root 경로만 app.js 에서 설정한 뒤 세부 주소는 router.js 에서 나눠준다
router.js 에서는 app.js 에서 전달받은 app 을 사용한 뒤 return 으로 라우터를 반환하고 바로 module.exports 를 시켜버린다, index.ejs 작성
회원정보 클릭시 이동되는 /member/list 경로를 member_router.js 에 작성, router.js 에서는 경로가 /member 로 오면 member_router.js 가 경로를 관리하게끔 설정 - app.use("/member", [require 를 통해 받아온 member_router 의 이름] )
이제 member_router 에서 controller 로 연동할 것
/member/list 경로로 들어오면 컨트롤러에서 처리하도록 함 ( 좌 : member_router.js , 우 : member_ctrl.js )
db_config.js 에 db 에 접속하기 위한 기본 정보를 작성 후 exports
member_controller 에서 db 를 호출.... 하지만 DB 는 비동기적으로 연결되기 때문에 DB 에 연결되기 전에 console.log 구문이 먼저 실행되기 때문에 con 의 결과 값을 promise 로 가져온다
비동기적으로 돌아가는 함수 앞에 await 을 붙이고 이 전체 함수엔 비동기 함수가 들어있다는 것을 표현하는 async 을 넣은 뒤 코드를 실행하니 정상적으로 DB 에서 값을 가져오며 Object 자료형으로 가져오는 것을 확인
DB 에 접근해서 데이터를 가져오는 기능은 controller 에서 하지 않으므로 member_service 쪽으로 해당 기능을 옮긴다
service 에서는 DB 에 직접 접근하지 않으니 해당 기능을 또 DAO 로 넘겨준다
member_dao 에서 DB 에 접근
DAO 를 호출해서 사용하는 service 와 service를 호출해서 사용하는 controller 에도 async 와 await 을 걸어서 비동기로 작동하는 코드를 처리해줘야 promise 가 아닌 정상적인 연산을 끝낸 결과 값을 받을 수 있다
controller, service, dao
controller : service 와 연동하여 처리된 데이터를 ejs 와 스크립트 등에 전달하여 세부경로로 들어왔을때 클라이언트에게 보여줄 내용을 컨트롤한다
service : 기능을 담당하며 dao 에서 DB 에 접근해서 가져온 데이터를 가공해서 다시 controller 에 전송한다
dao : DB 에 접근하여 쿼리문을 처리한 뒤 DB 에서 돌아온 리턴 값을 그대로 service 에게 전달한다
member_index.ejs 에서 전달받은 데이터를 출력
데이터 추가 기능을 만들 것임
router 와 controller 에 register 경로로 들어올 때 기능 추가
연결될 register_form.ejs 생성 및 작성
정상적으로 연동, 회원가입을 누르면 /member/register 로 값들을 전달
회원가입 버튼 누르면 post 방식으로 들어오는 데이터를 처리할 /member/register 를 작성
controller 에서 post 방식으로 받은 데이터를 req.body 를 사용하여 출력해봄 - 정상 출력
service 에 insert 기능을 추가해서 거기에 입력 값을 전달
service 에서는 DAO 에 입력 값을 다시 전달하여 반환 값을 받고 반환 값에 따라 메세지가 출력되는 부분을 다시 리턴해준다
DAO 에서는 데이터를 전달 받아서 쿼리문을 실행시키고 쿼리문이 정상적으로 동작하면 result 에 객체 값이 전달되어 리턴된다, 만약 쿼리문 사용에 오류가 생기면 catch 로 코드가 진행되고 종료되기 때문에 result 는 0 으로 반환된다
sql 문에서 사용된 :id, :pwd, :name, :addr 은 키에 대한 값을 의미한다.
:id > id 키에 대한 값으로 변환
:pwd > pwd 키에 대한 값으로 변환
:name > name 키에 대한 값으로 변환
:addr > addr 키에 대한 값으로 변환
코드 실행 ( id 값이 db 에서는 primary key 로 설정되어 있으므로 동일한 zzz 아이디를 두 개 생성할 수 없어 문제 발생 )
member_index 를 볼때 이름에 a 태그로 회원 정보를 보는 기능을 추가 ( 하나는 경로로 아이디 값을 보여줌, 하나는 아이디 값으로 아이디를 보이지 않고 전달함 )
member_router 에 기능 추가
controller 에 기능 추가
service 는 controller 로 부터 전달 받은 id 정보를 DAO 에 전달
DAO 에서는 sql query 문 실행 후 리턴 값을 service 에 전달 ( sql 문을 작성할때 위 코드에서 DB 에 있는 id 열과 매개변수의 이름을 동일하게 id 로 맞춰줘야 한다 ), 위 코드에서 :id > mId.Id 를 의미
service 에서는 전달 받은 값의 rows 키 안에 들어있는 내용의 0번째 index 에 데이터가 들어있기 때문에 해당 값을 리턴
controller 에서는 해당 값을 member 라는 변수로 받아서 member_view.ejs 를 출력할때 값을 전달
member_view.ejs 생성 후 전달 받은 값으로 내용을 작성
회원 삭제 버튼을 누를 시 /member/delete 경로로 이동될 때 처리될 내용을 router 와 controller 에 작성
서비스에서도 전달 받은 아이디 값으로 DAO 에 전달하여 리턴을 받아 사용
DAO 에서는 해당 값을 전달 받고 쿼리문을 실행한 뒤 반환
삭제 기능 구현 완료
회원 수정 기능 구현 router 에 회원 수정 기능 경로 설정
( 경로 오타 : /modify_form 으로 수정해야 함 )
controller 에서 우선적으로 기존에 사용하던 멤버 보는 기능을 구현했던 service 의 함수를 재활용 하여 출력할 것임
modify_form.ejs 작성 후 수정 버튼 누르면 modify로 가기 때문에 modify 기능 추가
router 와 controller 작성
service 작성
DAO 작성, 쿼리문 결과 값 return
회원 수정 기능 구현 완료
네비게이션 bar 설정하기
( 모든 페이지에서 상단에 같은 ejs 파일을 적용하기 )
test.ejs 생성 및 네비게이션 bar 로 설정 및 적용
localhost:3000/ 으로 접속 시 나오는 페이지 상단에 test.ejs 파일의 내용이 출력되는 모습
- 네비게이션 bar 로 설정할때 주의점 -
<%- include("네비게이션 bar 로 사용할 파일의 경로")%>
위 코드로 적용할때 경로는 상대경로로 적용하는 경우 현재 파일 위치를 기준으로 변경해줘야 한다
