MVC패턴을 준수하며 최적화중이였음.이번에는 컨트롤러 분리할차례

*우선 컨트롤러가 어느 부분인지?

*

home.ctrl.js파일 만들기 - 컨트롤러 부분들을 home 과 login 으로 선언 - index.js에서 사용할 수 있도록

module.exports{ } 로 내보내기.

( 오브젝트{key:value}에서 key 하나만 입력해주면 자체적으로 key와 같은 value값이 들어간다.)   

*내보냈으니 이제 받아와야함

으로 수정

정리하자면 /에 접속하면-ctrl( ./home.ctrl 로 선언된)의 home객체에 접근하게됨, 이떄 모듈 밖으로 exports 해줘야함

전시간에는 뷰는 뷰끼리 묶어 정리해줬음,

이번에는 주소와 같은 라우터는 라우터끼리 묶는 라우팅 분리를 통해 더 간결하게 만들거임.

*아래와 같이 폴더,파일 만들고, 라우터들을 index.js파일에 넣는다.

*그리고 index.js파일에

line1[여기에도 express 쓰겠다.],

line2[app 대신에 router를 정의해주고 router를 사용하려면 express.Router()로 불러와 줘야함] 를

추가하고 app대신에 router로 수정

이렇게 하면 index.js 에서는 동작이 되는데 app.js와 연결이 안되있음.

*내보내기와 받아오기

index.js에서 module.exports = router; [라우터를 사용할 수있도록 외부로 내보내기] 를 추가하고

사진과 같이 코드 추가하여 받아오면됨

[ /경로에 들어오면, home으로 보내줄거 ]

[require("./routes/home) 하면 home안에 js파일을 불러옴]

(use 는 미들 웨어를 등록해주는 메서드. 나중에 더 알아보자)

(해석하기에는 line9 다음 line8 해석하기가 편해 line8,9위치를 서로 바꿔 썻더니 오류남)

여기까지 하면 라우팅 분리 끝.

잘 작동한다.

+@로 포트가 3000번으로 바로 명시되어있는데 이와 같은 표현보다 변수로 담아두는게 더 좋은 습관이라 하셨다.

app.js에서

전편에 말한것처럼 유지,보수가 힘들기 때문에 모듈화할거임

MVC패턴을 준수하여 (디자인 패턴에는 MVC,MVP,MVVM 이 있다. 나중에 더 알아보자)
로그인 뷰/라우팅/컨트롤러/ app.listen() 까지 총 4번의 모듈화를 통해 최적화할거.

*이제 필요없는 index.html을 삭제하고, 아래와같이 폴더,파일을 만들고 코드를 작성한다

app.set("views","./views"); [views를 세팅할건데, 필요한 파일이 저장될 곳은 ./views 폴더이다.]

app.set("view engine", "ejs") [views폴더안에 생성된 html 코드들을 ejs 라는 view engine으로 해석하겠다.] 

ejs는 html과 거의 비슷

 

*분리된 파일에 코드 넣고 res.render("경로") 로 연결해준다

이전다음

012

*그리고 node app.js 로 서버를 실행하면

그렇다, ejs를 설치해야한다

터미널에 npm install ejs -s  입력후 다시실행하면 잘 작동된다.

이렇게만 해도 보기 쉬워졌는데

라우팅 분리라는것을 통해 훨씬 더 간결하게 만들 수 있다.

다음 시간엔 라우팅 분리를 진행함.

이제 로그인 화면 만들거임

*index.html 파일 하나 새로 만들고 코드창에 ! 쓰고 엔터누르면 아래와 같은 기본 서식나옴

/경로에는 "메인페이지입니다"를,

/login 경로에는 input태그와 버튼을 만듦.

코드입력-저장-node app.js로 실행하면 아래와 같은 페이지 뜸

잼밌따!

사실 이렇게 코딩을 짜면 유지,보수하기에 너무 힘듦.

그래서 다음강의는 모듈화를 통해 리팩터링하는것을 다룸

express라는 웹 프레임워크를 사용해야 서버만들기 매우 편안. express 먼저 설치하자

*express 설치:터미널에서 npm install express - s  입력

app.js라는 파일 하나 만들고

*코드입력

*터미널에서:node app.js 입력하여 실행후 브라우저 주소창에 localhost:3000 입장- "Cannot GET/"문구가 뜨면 성공.

get/경로를 이제 만들자.

서버끄고(ctrl + c) 저장후 다시 node app.js 로 서버 실행 - localhost:3000 잘 작동함

*위처럼 /login도 하나 더 만들기

localhost:3000/login 들어가서 잘 작동되는지 확인

굿 b

express가 아닌 http로 서버 띄우기는 https://www.youtube.com/watch?v=7gF09WFGK4I 를 참고하자 

http로 서버 한번 띄워보니, express가 왜 소중한지 알게 됨

*설치

1.VS Code 설치
https://code.visualstudio.com/

2.node설치 (LTS 버전은 검증버전으로 node에서 최신버전 보다 권장함)

https://nodejs.org/ko/ 

3.git과 git bash설치

https://git-scm.com/ 

*제대로 설치 되었는지 확인 방법

git bash를 키고

1.node (나오는건 crtl+c 두번 누르기)or node --version 입력 

2.npm 입력

2.git or git --version 입력

*리눅스 기반 터미널 사용을 권장 ex)git bash

코딩 부트캠프인 항해99 7기를 시작하기 전에 할일

1.우리밋님의 Node.js 강좌를 참고하여 crud기능과 회원가입기능을 구현하기.

2.토이프로젝트

아자아자 화이팅