[백엔드 스터디] WIL 1주차_기본 개발환경 설정
Tools 동아리에서 진행하는 1학기 백엔드 스터디 기록입니다! Node.js를 이용해서 간단한 게시판을 만드는 스터디입니다!
0. 개발환경 설정
먼저 참고링크를 보면서 nodejs를 다운로드 해서 설치해준다.
node -v, npm -v으로 버전을 확인했을 때 위와 같이 잘 뜨면 성공이다!
npm i express express-generator -g
- npm(node package manager) i(install) express(웹 프레임워크) express-generator(express 프로젝트의 기본 형식을 만들어줌 명령어 모듈) -g(옵션, 전역설치)
- express를 설치하는 명령어
- 이때 express-generator는 전역설치로 해야 프로젝트를 생성하기 때문에 -g 옵션을 반드시 추가한다.
express tools-board
tools-board라는 이름을 가진 express 기본 프로젝트를 생성해준다. 그리고 cd tools-board 명령어로 tools-board 폴더로 들어간다!
💡 참고
package.json에 dependencies에서 패키지 설치 및 버전 확인 가능
npm uninstall jade
jade 템플릿 엔진 필요없으니까 삭제
npm install nodemon ejs mysql2
ejs, nodemon, mysql2 를 설치
💡 참고
- ejs : 기존 html을 그대로 사용하며 <%= %>, <%%> 등으로 변수 사용, 코드 제어를 가능하도록 해주는 템플릿 엔진, 확장자로 ejs 를 사용
- nodemon : 기존에 코드를 변경 할 때는 node 서버를 껏다 켜야 하지만,nodemon 을 사용함으로써 서버 구동 중에 파일의 변경이 확인되면 자동으로 재시작을 해줘서 편리하게 작업하도록
해주는 미들웨어
명령어 만들기
이 스크립트에 "test" : "nodemon ./bin/www"를 추가
💡 참고: npm i ejs nodemon --save
- i = install
- --save 옵션 : devDependencies가 아니라 dependencies에 패키지가 추가된다.즉, npm install react --save와 npm install react 는 npm5버전 이상에서는 같은 명령으로 인식된다.
참고출처
1. express 실행
<html>
<head>
</head>
<body>
Hello ejs!
<h1><%= title%></h1>
<hr> <!-- 하이라이트로 만들어 줌 -->
<%= test%>
<hr>
<% if(!test.length){ %>
이상하군
<%} else{ %>
잘 만들어졌군
<% } %>
</body>
</html>- ejs는 <%= 변수명 %>으로 웹상으로 값을 표출해낼 수 있고 <% for, switch case, if 등등 %> 웹 페이지 안에서 조건과 변수를 이용하여 많은 것을 할 수 있다.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World', test:"툴스 홈페이지를 만드는 그날까지.."});
});
module.exports = router;
이제 라우터를 설정해주기 위해 app.js로 이동해보자!
라우터 등록은 이렇게!
npm test
로 express를 실행시킨 후 localhos:3000 치면
완성이다!!!!!!
💡 참고
express는 /bin/www를 통해서 실행되는데 www 파일 안에는 node.js를 실행시킬 때 포트번호 혹은 module dependencies 등 여러 설정들을 조작할 수 있다.
문제발생
Error: Failed to lookup view "error" in views directory라는 에러가 떴다...
알고보니... index.ejs 파일에 test 변수를 안 만들어두고 실행해서 에러가 떴다..
쿠쿸... 바보 같군...
2. 깃허브에 업로드
git을 이용해서 형상 관리를 하게 되는데 필요없는 파일들 혹은 개인 정보가 들어가는 파일들까지 올라가는 걸 방지하기 위해 .gitignore 파일을 만들어줘야 한다.
.gitignore를 위한 사이트에 들어가서
Node라고 치고 생성한 gitignore 텍스트를 복사한 후
.gitignore 파일을 만들어준다!
그리고 깃허브에 올려라~~
3. MVC 모델 살짝 맛보기
mvc ( model view controller )
- mvc 모델은 다른인원들이랑 협업에 강점을 받기위해서 사용
- models = DB 관리
controller = 총체적인 접근, 예를 들어 게임패드 같은거
view = 프론트 엔지니어나 화면에 흩뿌려주는 그런 것들
controller 폴더를 만들고 index.js를 만들고 다음과 같이 코드를 작성한다.
async function getIndex(req, res){
try{
res.render('index', {title:'Express', 'test':'MVC 모델'}); // 변수추가
}catch(err){
return res.status(500).json(err);
}
}
module.exports={
index:getIndex // 모델 이름을 index로 한다!
}- node.js의 특징이 비동기
- async await = 함수에 await이 있으면 멈춰서 이걸먼저 db 연동하고 다음으로 넘어가라! 즉 이 await이 있는 함수를 먼저 끝낸 후에 다음 함수로 넘어간다!
- 모든 컨트롤러와 모델은 예외처리를 한다. error가 나면 서버가 멈춰서 try catch로 서버가 멈추지 않도록 방지한다.
그리고 router/index.js로 가서
var express = require('express'); // express를 받고
var router = express.Router(); // 라우터를 사용하겠어!
const indexRouter = require('../controller/index');
/* GET home page. */
/*router.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World', test:"툴스 홈페이지를 만드는 그날까지.."});
});*/
router.get('/', indexController.index);
module.exports = router;이렇게 라우터에 controller를 직접 등록해주면 된다!
참고자료
-
npm(Node Package Manager)
npm은 미들웨어 관리를 도와주는 명령어로, 명령어를 이용하여 미들웨어를 설치/삭제/업데이트 관리 등이 가능하다. 즉 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포한다.(비슷한 개념 python의 pip)
Author And Source
이 문제에 관하여([백엔드 스터디] WIL 1주차_기본 개발환경 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juijeong8324/backend1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
