express를 사용해서 MVC패턴으로 서버를 쉽게 만들고 구현시켜봤다.
회원가입이나 CRUD 는 아니고 간단하게 add-product페이지에서 product를 추가하면 shop페이지에 보이게 했다
어떻게 구현했는지 (흐름)
MVC패턴이다 보니 3부분으로만 나눌 줄 알았는데 ㅋㅋㅋ 너무 무지했다..
0.전체적인 흐름
app.js에서 서버를 만들고 각각의 url을 입력하면 라우터로 각각의 페이지로 이동할 수 있게 된다.
1.controllers
뷰를 보여주기 위해 화면을 렌더링 해야하는데 모델 과 뷰를 이어주는 역할이다!
router.get('/', productsController.getProducts);productsController.getProducts 이 부분이 컨트롤러에 있는 객체이고
ejs방식으로 뷰로 렌더링 하고 페이지를 보여준다!
- views
(뷰를 동적으로 활용할 수 있게 하기 위한 녀석)템플릿을 ejs로 선택해서 뷰는 ejs방식으로 작성되어있다!
<% %> 이게 기본 틀이다 if, for 그리고 각 변수를 불러올 수도 있다!!
- models
데이터를 저장하고 controllers로 내보내는 역할을 한다!
데이터는 현재 fs를 사용해서 Data라는 폴더 안에 products.json에 저장되어있다!
몰랐던 부분 & 그래서 이해한 내용
- 서버만 있다해서 화면에 동적으로 데이터를 전달 할 수 있지는 않다!!
템플릿을 사용해 뷰에 데이터를 동적으로 보여질 수 있게 처리하는거다! ->
ejs,pug,handlebars등이 있다
- 경로를 적기 위해서는 path가 필수!!
const p = path.join(
path.dirname(process.mainModule.filename),
'data', 'products.json'
)
app.use(express.static(path.join(__dirname, 'public')알맞은 예시가 아닐 수도 있지만 경로를 작성할 때 path를 적극 사용하자!!
express.static의 경우 css나 js가 모여있는 파일있는곳을 나타낼때 사용한다!
이러면 계속 정적 내용을 주기 때문이다!!!
- Callback!!!!!!
마지막 콜백을 제외하고 다 이해했는데 마지막 부분 콜백을 이해하는데 애썼다ㅜ
지금도 블로그들 찾아보면서 이해 중이어서 ㅋㅋ 이거는 나중에 추가로 적겠다
피드백
express 예시들을 유튜브에서 많이 찾아보고 적고 깃허브에 남기자!!
이해하기위해서는 많이 적어보고 깨지는 수 밖에 없다!
