EJS router

- 초기  ejs 파일 세팅 -

package.json 만 가지고 있으면 npm install 명령어만 입력하면 자동으로 package.json 파일 안의 패키지들이 자동으로 불러와져서 다운로드 받아진다, 나중에 프로젝트를 진행할때 package.json 파일만 올려놓으면 모두 npm install 명령어를 사용해서 다운로드 받으면 된다

 

 

 

 

 

파일 세팅

 

js 파일과 ejs 파일 초기 세팅 후 서버 구동

 

서버 구동 및 접속

 

 

 

 

 

- middle ware -

특정 기능을 처리하는 역할을 하는 것

( 여기에서는 router 라는 middle ware 를 사용하여 경로의 기능을 위임한다 )

router 에게 루트 경로의 기능을 위임

 

라우터를 여러개 생성하여 사용할 수 있다 ( 라우터 별로 root 경로를 설정하여 사용 )

 

아직 DB 를 연동하지 않았으므로 DB 를 대신해서 데이터를 저장 할 memberDAO.js 를 프로젝트 파일에 생성

 

더미 데이터 생성

 

module.exports 를 사용해서 생성한 더미 데이터 변수를 밖으로 내보낸다

 

memberDAO 파일에서 밖으로 내보내진 내용을 require 을 통해 경로를 지정해서 변수로 가져온다

 

 

 

 

 


서버 별칭 설정 및 사용

package.json 파일 안에 scripts 를 설정한다, 위와 같이 설정하면 npm run start 또는 npm start 만으로 설정한 서버를 실행시킬 수 있다.

( 구동해야하는 서버가 변경되면 script 의 값으로 들어가있는 npx supervisor app.js 에서 app.js 를 실행시킬 서버 파일로 변경해주면 된다 )


 

 

 

 

 

Flow

Flow ( 흐름 ) - 라우터에서 각 기능별 컨트롤러(다수의 컨트롤러)로 들어오는 주소에 따라 구분해서 연결해준다

 

 

 

 

 

라우터를 파일로 분리시키기 위해 파일 세팅
app02.js 와 test_router.js 파일 세팅

 

라우터를 보내고 서버에서 router 라는 변수로 해당 라우터의 기능을 받아온다

 

localhost:3030/ 경로로 접속되면 외부 파일인 test_router.js 의 router 로 이동되어 경로가 분할된다

 

 

 

 

 

여기까지 라우터를 분리 완료...

 

 


 

 

이제부터는 컨트롤러를 분리...

컨트롤러를 분리하기 위해 파일 세팅

 

controller 파일에서 응답을 보내는 함수를 외부로 전송, 컨트롤러에서는 해당 기능을 받아 응답 부분에 해당 변수를 대입하여 사용

 

여러개의 응답을 내보낼 경우는 키와 값을 가지는 Object 형태로 키와 값으로 함수가 매칭되게 보내줘서 app 에서는 해당 Object 의 키 값을 불러와서 사용한다

 

서버 실행

 

 

 

 

 

여기까지 컨트롤러 분리 완료...

 

 


 

 

 

 

 

이제부터 service 를 분리...

 

 

 

 

 

service 를 분리하기 위해 파일 세팅

 

test_service 에서 더미데이터가 저장된 memberDAO 의 내용을 가져와서 index 라는 함수에서 해당 값을 return 되게끔 설정 후 이 index 기능을 exports 로 외부로 전송 후 controller 에서 이 값을 require 로 받아와서 매개변수로 {member} 를 넣어준다

 

index.ejs 에서 해당 member 데이터를 사용하여 웹에 출력한다

 

 

 

 

 

 

 

 

 

 

실습 예제 1-1

실습 예제 1-1

 

예제 풀이 1-1

디렉토리와 파일 구조 동일하게 맞춘 뒤 기존에 사용하던 package.json 파일 가져와서 npm install 하여 패키지 모두 설치

 

 

 

 

 

실습 예제 1-2

실습 예제 1-2

 

예제 풀이 1-2

예제 풀이 1-2

 

예제 풀이 1-2

 

 

 

 

 

실습 예제 1-3

실습 예제 1-3

 

예제 풀이 1-3

예제 풀이 1-3

예제 풀이 1-3

 

 

 

 

 

실습 예제 1-4

실습 예제 1-4

 

예제 풀이 1-4

흐름을 잘 파악하기!!!!

 

 

무조건 url 주소로 접근이 들어오면 일단 app 이 실행되며 app 에서 접속 주소 구분에 따라서 각 접속 주소에 맞는 controller 로 보내준다 > 이때 controller 는 렌더링될 ejs 페이지를 응답하게 되는데 경우에 따라서 검증해야 할 값이 있으면 검증 후에 응답을 보낸다 > 응답 받은 페이지에서 클라이언트가 버튼을 클릭하여 다른 페이지가 호출되었을 경우 다시 app 에서 접속 주소 구분에 따라서 각 접속 주소에 맞는 controller 로 보내준다

 

 

 

 

 

실습 예제 1-5

실습 예제 1-5

 

예제 풀이 1-5

예제 풀이 1-5

쿼리 값(이름)을 전달하여 쿼리 값으로 처리

728x90

+ Recent posts