((기업협업1)) 혼돈의 기업 협업 첫!출!근! nodejs? express?

기업협업 스타트

이번주부터는 기업협업 기간으로, 한달간 위코드가 아닌 회사로 출근한다. 내가 참가하게 된 회사는 Node.js와 express를 사용한다. 위코드에서 배운 Python과 Django를 못쓰는건 아쉽지만 새로운 기술을 접하는 걸 개발자가 두려워할쏘냐!!

감사하게도 회사측에서 공부할 수 있도록 일주일이라는 시간을 주셨다.

javascript 몰라요 node는 들어봤는데 express는 또 뭔가요..?. 허허 첫 미팅때부터 모르는 개념들 투성이였다. 여기다가 로우쿼리? 미들웨어?  모르는게 많으니 배울 것도 많아서 신난다 ^__^

원래 스타일대로라면 자바스크립트 언어부터 공부하면서 하나 둘 파고 들어갔을텐데 이번엔 그러지 않았다. 위코드에서 프로젝트를 2번 진행하면서 깨달은 바는, 때로는 무작정 해보고 써보면서 배우는 게 더 빠르다는 점이다. 지금 아무것도 모르는 상태에서 모든 개념을 인지하려면 1주일로는 부족하고, 또 그런 접근방법은 애초에 불가능하다고 생각한다.

그렇게 바로 노드와 익스프레스 세상으로 레고했다지 

 

TIL

오늘은 (아래 첨부)이렇게 공부했다. 

• 생활코딩 express강의 전체 한바퀴 시청
• express 공식문서 읽기
• 회사 주임님께서 보내준 블로그 보며 따라치기
• express CRUD 블로그 따라해보기

위 루틴을 끝내고 나서 알게된 내용들을 블로그에 정리하고 넘어가자.

 

가상환경

쓰고 보니 4가지 밖에 없지만.. 저렇게 4가지만 하는 데도 시간을 많이 잡아먹었다. 일단 '가상환경'에서 막혔다. 지금 내 맥북은 갑작스런 스크린 깨짐현상으로 수리센터에 가있다. 그래서 지인에게 빌린 윈도우 노트북을 쓰고 있는데 가상환경 설치하는 걸 까먹... 습관이 무섭다고 찾아보지도 않고 그냥 miniconda를 설치했는데 최종 설치 화면에서 python이라고 되어 있는거 아닌가? 미니콘다는 파이썬 가상환경 관리 툴이였다. 그렇게 구글링해서 nvm(node version manager)를 설치했다.

그래서 node랑 express가 뭐야

• nodejs는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(프로그램)이다. 즉 서버에서도 javascript가 실행될 수 있도록 구동시켜주는 프로그램이다. 
• express는 python의 django처럼 nodejs를 위한 빠르고 개방적이고 간결한 웹 프레임워크 중 하나다. nodejs를 사용해서 서버단을 편리하게 구현할 수 있도록 도와주는 프레임워크로 express말고 Koa, Hapi등이 있다.

아래의 두 코드를 실제로 작성해봤는데, 왜 express를 써야 하는지 몸소 와 닿는 계기가 되었다. http모듈을 사용해서 필요한 기능들을 하나하나 다 쓰고 있자니 코드가 너무 길어져.....

// express없이 서버 가동시킬 때

const http = require('http') 

const server = http.createServer((req, res) => { 
  console.log('request received')

  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({ message: "server without express!" }))
});

server.listen(3000, "127.0.0.1", () => {
  console.log('server is running on PORT 3000!')
})

// 라우팅 여기에 없음

// express로 서버 가동시킬 때
const express = require('express');

const app = express();
const port = 3000;

// 편리한 라우팅
app.get('/', (req, res) => {
    res.send('hello, express!');
})

app.listen(port, () => {
    console.log('server is on');
})

express 서버 구동시키기

1. nvm을 설치한다. 설명 잘 되어있는 블로그 첨부

2. 그다음 nvm명령어로 프로젝트를 진행할 버전의 node를 설치하고 use명령어로 선택한다.

3. 프로젝트를 진행할 폴더로 이동한다.

4. express-generator를 사용해서 express 객체를 생성한다.

(express-generator는 express 프레임워크에 필요한 기본 틀을 쉽게 생성할 수 있도록 도와주는.. 아이)

$ npm install -g express-generator
$ express <디렉토리이름:node_test2>

5. 종속 항목 설치하기(dependencies)

먼저 디렉토리(사진에서는 node_test2)로 들어간다.

$ cd node_test2

npm 패키지를 설치한다.

$ npm install

그러면 node_modules와 package-lock.json이 생성된 걸 확인할 수 있다.

아래 명령어로 앱을 실행시키면

(윈도우)

set DEBUG=node_test2:* & npm start

 (맥)

$ DEBUG=myapp:* npm start

서버도 잘 켜지고 사이트도 잘나온다 💛

폴더 구조 파악하기

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

• bin : 뭔지 모르겠음
• public : 정적인 파일들을 위한 폴더(뭔지 아직 모름)
• routes : 해당 url로 들어올 때 처리해야하는 로직을 구현함.(장고에서 view같은 애인듯)
• views : 보여지는 화면단(장고 뷰와 다름 주의)
• app.js : 서버 접속을 위한 포트와 접속 url에 따른 해당 routes 연결하는 걸 보니 중요한 애인듯

 

 

일단 오늘은 여기까지!

 

* 참고자료

https://ooeunz.tistory.com/19

[Node.js] npm이란?

http://expressjs.com/

Express - Node.js web application framework

https://opentutorials.org/course/3370

Node.js - Express - 생활코딩

https://youngjinmo.github.io/2021/08/express-crud-rest-api/

Express로 만드는 CRUD Rest Api

https://development-crow.tistory.com/14?category=940512 

[Backend] Nodejs 웹 서버 만들기

https://berkbach.com/express-js%EC%9D%98-%EC%9B%B9-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EA%B5%AC%EC%A1%B0-ac7eb4905b68

Express.js의 웹 디렉토리 구조