서론
-lightgrey){kind=icon}
우선 어제도 글을 안썼다.😅 그래서 오늘 2개를 쓸 예정이다.
저번에 firebase 연동을 시도하다가 울화통 터져서 안했는데 node.js 지식이 부족한 것 같아서 울화통이 터진 것 같다.
그래서 node.js 에 대해서 좀 더 공부하고 연동하기로 마음 먹었다. 때마침 회사에서 클라우드 앱 개발을 진행해야 하는 시기가 되었는데 아직까진 정해진 방식은 없는데 spring-boot 와 node.js 두 가지 방식을 이용해서 진행할 수 있다.
차장님과 얘기를 나눠본 결과 node.js 로 가지 않을까 싶다. 따라서 일석이조의 효과를 누릴 수 있지 않을까 싶다. (클라우드 앱 view는 React .....)
공부한 자료는 node.js 디렉토리 구조 , express-generator , express 기본 구조 설계를 참고해서 공부를 진행한 결과 어느 정도 node.js에 대한 지식은 잡힌 것 같다. 아직 잘 모르겠는 사람들에게는 한 번씩 정독 하는 것을 추천한다.
본론
이번에 node.js 를 공부하면서 느낀 것이 공식 문서는 항상 꼼꼼히 읽어보자다. 공식 문서에 다 나와있는데 성급하게 빨리 진도를 빼고 싶은 욕심에 한 줄을 덜 읽었는데 그 후폭풍이 node.js 기본 공부 하는데에 시간을 쓰이게 된 것이다.
항상 node.js 공부하면서 디렉토리 구조는 어떻게 가져가는걸까 궁금했는데 막상 찾아보면 제대로 설명해주는 블로그나 글들이 없었다. 근데 알고보니까 express-generator 를 이용해서 express.js 프로젝트를 생성하면 기본적으로 틀을 잡아주는 것이었다. 해당 내용은 express.js 공식 홈페이지에 나와있다. (위의 링크와 동일)
express 프로젝트 생성하기
따라서 다시 처음으로 돌아가서 express.js 프로젝트를 생성하는 것부터 시작한다. 생성하는 방식은 다음과 같다.
npm을 이용해서express-generator모듈을 다운받는다.
npm install -g express-generatorexpress-generator모듈을 이용해서 프로젝트를 생성한다.
express --view=ejs expressApp
view는 자기가 사용하는view로 적으면 되고, 그 다음에는 해당 프로젝트의 이름을 적어주면 된다.
이렇게 2가지를 실행하면 express 프로젝트의 기틀이 마련된다. 이렇게해서 생성된 디렉토리 구조가 나는 너무 알고 싶었다. 물론 사람들이 일일히 디렉토리를 생성해서 구조를 잡는 경우도 있겠지만 spring-boot 처럼 직접 만들어 줄 법 한데 아무도 혼자서 할라니 울화통 터지기 직전이었다. 근데 공식 문서에 떡하니 있는걸 보고 반성을 많이 했다.
아무튼 각설하고 디렉토리 구조에 대한 설명은 위에도 있지만 해당 링크를 참고해서 살펴보면 될 것 같다.
bin/www 파일 설명
우리는 이제 bin/www 파일에 대해서 내가 알고 있는 부분에 대해서 간략하게 살펴보도록 하자.
/*
* app.js 파일을 사용하기 위해서 모듈을 가져온다.
* require로 커스텀모듈을 사용하기 위해서는 해당 파일에 다음을 선언해주어야 한다.
* module.exports = 사용하고자 하는 모듈
*/
var app = require('../app');
/*
* port를 3000으로 설정한다.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
// localhost:3000으로 접속할 때 app.js가 처음으로 실행되도록 한다.
var server = http.createServer(app);이정도로 살펴보면 bin/www 폴더에 대해서는 대애충은 아는 정도라고 생각된다. 여기서 나같은 초보자는 처음으로 실행될 파일 혹은 포트 정도 변경해주면 될 것 같다.
app.js 파일 설명
그리고 다음으로 살펴볼 파일은 app.js 파일이다. express-generator 로 생성된 다음 들어가보면 뭐가 되게 주저리주저리 써져있는데 내가 선정한 핵심 포인트만 짚고 넘어갈 예정이다. (그 다음은 공부하다가 필요한 부분을 찾아서 공부하면 될 것 같다.)
/*
*view engine setup
* ejs view 파일들이 어느 위치에 있는지 path도 잡아준다.
* ejs 파일에 대해서 접근할 때는 views 밑의 경로부터 적어주면 된다.
* ex) res.render('index');
*/
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// static 폴더의 경로를 잡는 부분인데 static 폴더에는 js, css, image 파일이 들어간다.
app.use(express.static(path.join(__dirname, 'public')));
// indexRouter 변수에 index.js 파일 모듈을 추가해준다.
var indexRouter = require('./routes/index');
// localhost:3000이 실행되면 index.js가 실행되도록 설정한 부분
app.use('/', indexRouter);app.js 에서 나름의 핵심을 짚어보았다. 나머지 부분들은 좀 더 잘해진 다음에 차근차근 살펴보도록 한다. 그리고 package.json 과 package-lock.json 파일은 npm 으로 다운 받은 모듈의 dependency 를 관리해주는 설정 파일들로 package.json 만 있어도 모듈을 다운로드 할 수 있다. 하지만 package-lock.json 파일이 없을 경우 프로젝트를 생성한 개발자가 의도한 버전으로 정확하게 다운로드 받을 수가 없다.
따라서 github에 커밋하게 될 때 package-lock.json 파일 또한 같이 올려주자.
.gitignore 파일 설명
그리고 더 말하면 내용이 길어질 것 같아서 딱 한가지만 더 짚고 넘어가면 github 에 커밋할 때 중요한 설정파일이나 node_modules 파일 같은 불필요한 파일들은 제거하고 파일을 올릴 수 있는데 .gitignore 파일을 이용하는 것이다.
따라서 루트 경로에 .gitignore 파일을 하나 생성한다. 그리고 제거하고 싶은 파일을 적어주면 되는데 나는 이렇게 작성하였다.
// except node modules folder
node_modules/현재까지는 중요 설정 파일은 따로 없어서 제외할 파일이 node_modules 폴더 밖에 없다. 위와 같이 적으면 node_modules 의 하위 폴더들은 github 커밋시 반영되지 않는다. (github bash 에서 골라서 add 할 필요가 없다 ❗❗) 자세한 내용은 해당 링크를 참고하면 좋을 것 같다.
따라서 github 커밋한 레파지토리 주소는 다음과 같다.
https://github.com/junsugi/ejs-nodejs-firebase
필요한 경우 다운로드 받아서 사용해도 좋을 것 같다.
결론
다음 포스팅은 화면을 만들고 input 태그에 입력한 값을 서버로 가져와서 console 에 찍어보는 과정을 올릴 예정이다. 아마 2~3시간뒤에 바로 올리지 않을까 싶다.
따라서 form 에 입력한 데이터를 서버로 가져와서 자신이 사용하는 데이터베이스에 저장까지만 성공한다면 내가 봤을때 반 이상은 했다고 해도 될 것 같다. 지금은 화면을 html 베이스로 작성하고 있는데 얼른 React 를 공부해서 화면을 좀 더 화려하게 만들어 볼 예정이고, 앱 개발로 하루 빨리 넘어가야 겠다.
