일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- vue mixin
- 고양이 사진 검색기
- intersection opserver
- 다른컴퓨터에서 git사용
- flex
- 프로그래머스 데브코스
- Spacer
- SCSS import
- git 같은계정 다른 컴퓨터
- vue 이벤트 수신
- 폼 입력 바인딩
- 이벤트 수식어
- 리액트
- postcss
- react next
- SCSS use
- netlify redirect
- 프로그래머스 프론트엔드 데브코스
- vuex map
- nextjs사용법
- 쌓임맥락
- vue 지역 컴포넌트
- SCSS forward
- Vue
- SCSS extend
- 프로그래머스 K_Digital Training
- KDT 프로그래머스 데브코스 프론트엔드
- 리스트 렌더링
- KDT 프로그래머스
- 프로그래머스 데브코스 프론트엔드
- Today
- Total
혼자 적어보는 노트
[Node.js] express 사용하기 본문
이전에 express를 사용해 본 적 있었는데
그 때는 클론코딩을 하느라 제대로 머리 속에 들어오지 않은 것 같아서😓
이번에 서버에 api를 만들면서 다시 정리하며 익혀보기로 했다 👊👊
express
express는 node에서 제공하는 http 모듈과 connect 컴포넌트를 기반으로 하는 웹 프레임워크이다.
즉 Node.js를 사용하여 서버를 쉽게 구성할 수 있게 만들어주는 장치이다.
packge.json 생성하기
npm init
폴더 안에 위 명령어로 package.json 파일을 생성한다.
express 설치
npm i express
express route 코드 작성
폴더 안에 app.js폴더를 생성하고 코드를 작성한다.
const express = require('express')'; // express 가져오기
const app = express(); // express 호출
const port = 8080; // port번호 지정
app.get('/', (req, res) => {
res.send('Hello world!')
})
app.listen(port, () => {
console.log("Server Start") // 서버 실행 시 콘솔에 나타난다.
});
res.send(): 응답을 전송하는 메소드. Html 태그를 사용할 수 있고 문자열만 입력할 경우
Content-Type을 text/html으로 설정하게된다.
listen(): 서버접속을 위한 메소드. 포트번호를 지정할 수 있고 두번째 인자로 함수를 넣어서
서버 접속을 알리는 console을 출력할 수 있다.
응답(res) 메소드는 여러가지가 있어서 나중에 따로 다뤄보아야겠다.
현재 예제에서는 get 메소드를 사용했지만
express의 라우트 메소드는 HTTP메소드로부터 파생된다.
🙌 get, post, put, delete, patch, options, head 등 사용 가능!
// GET method route
app.get('/', (req, res) => {
res.send('GET request');
});
// POST method route
app.post('/', (req, res)=> {
res.send('POST request');
});
서버 실행
터미널에 아래의 키워드 입력 시 서버가 실행된다.
node app.js
.js 생략 가능
터미널을 통해 서버의 연결이 확인되면 해당 포트번호(http://localhost:8080/)에 접속 시
브라우저에는 Hello World가 출력된다.
node app.js가 아닌 지정한 키워드로 입력하고 싶다면
package.json에서 아래와 같이 세팅해주면 된다!
"scripts": {
"start": "node app.js"
...
}
npm start 입력 시 서버가 실행된다.
'NextJS' 카테고리의 다른 글
[Next.js] Link와 href (0) | 2022.07.29 |
---|---|
[Node.js] 로그인 구현하기 / Express, MySQL (0) | 2022.03.19 |
[Node.js] nodemon 사용 해보기 / nodemon 안될 때 (0) | 2022.03.17 |
[Node.js] Route 분리하기 (0) | 2022.03.15 |
[Next.js] 세팅 / pages / Link / layout component (0) | 2022.03.01 |