nodejs14 [React] + express + mariadb /post insert 하기 inputComp.js 추가할 input 값 App.js 로 넘겨주기 import '../css/InputComp.css'; import { Component } from 'react'; class InputComp extends Component{ constructor(props){ super(props) this.state={ id:'', todo:'' } } addTodoList=()=>{ alert('추가(InputComp)') // const {id} = this.props+1 const {id} = this.props.id+1 // alert('추가할 id ' + this.props+1) alert('추가할 id ' + id) const{todo} = this.state this.props.a.. 2023. 7. 8. [React] + express + mariadb 데이터베이스 화면 띄우기 todo list 원래 App.js 상태값에 데이트베이스 대신 배열로 대신하여 화면에 띄웠었는데 이제 express 와 mariadb 를 연결하여 데이터베이스 내용을 화면에 띄울거다. 먼저 app.js 에 있던 배열을 지워준다. class App extends Component{ constructor(props){ super(props) this.state={ todolist:[] } } 이제 서버와 db 세팅을 해야한다. src 폴더밑에 server폴더를 만들어주고 server.js 파일을 생성해준다. const express = require('express'); const db = require('./config/db'); const bodyParser = require('body-parser') .. 2023. 7. 2. [NodeJS] 익스프레스 req, res 객체 익스프레스의 req, res 객체는 http모듈의 req, res객체를 확장한 것이다. 익스프레스가 많은 속성과 메서드를 추가했지만, 자주 쓰이는 것 위주로만 정리했다. req 객체 req.app : req 객체를 통해 app 객체에 접근할 수 있다. req.app.get('port') 와 같은 식으로 사용한다. req.body : body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체이다. req.cookies : cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체이다. req.ip : 요청의 ip 주소가 담겨 있다. req.params : 라우트 매개변수에 대한 정보가 담긴 객체이다. req.query : 쿼리스트링에 대한 정보가 담긴 객체이다. req.signedCook.. 2023. 7. 1. [NodeJS] Router 객체로 라우팅 분리 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다. routes 폴더를 만들고 index.js와 user.js 파일 생성하기 index.js const express = require('express'); const router = express.Router(); //GET / 라우터 router.get('/', (req, res) => { res.send('Hello, Express'); }); module.exports = router; user.js const express = require('express'); const router = express.Router(); //GET / 라우터 router.get('/', (req, res) => { res.send('Hello, User');.. 2023. 7. 1. [NodeJS] multer 파일업로드 multer : 이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어이다. form을 통해 업로드하는 파일은 body-parser로는 처리할 수 없고 직접 파싱하가도 어려우므로 multer를 사용한다. 1.multer 설치 npm i multer 2. 화면 만들어주기 multipart.html 업로드 app.js 작성하기 전에 multer 기본적인 설정 알아두기 const multer = require('multer'); const upload = multer({ storage: multer.diskStorage({ destination(req, file, done){ done(null, 'uploads/'); }, filename(req, file, done){.. 2023. 7. 1. [NodeJS] 실무에서 자주 사용하는 패키지 콘솔 $ npm i morgan cookie-parser express-session dotenv dotenv를 제외한 다른 패키지는 미들웨어이다. dotenv는 process.env를 관리하기 위해 설치했다. .env파일 생성 COOKIE_SECRET=cookiesecret dotenv패키지가 .env파일을 읽어서 process.env로 만들어준다. COOKIE_SECRET 에 cookiesecret 값이 할당. 키=값 비밀키들을 소스 코드에 그대로 적어두면 키도 같이 유출 되기 때문에 별도의 파일로 관리한다. app.js 수정 const express = require('express'); const path = require('path'); //추가 const morgan = require('mor.. 2023. 7. 1. [NodeJS] 익스프레스 자주 사용하는 미들웨어 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간에 위치하기 때문에 미들웨어라고 부른다. 미들웨어는 요청과 응답을 조작해 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다. 미들웨어는 app.use와 함께 사용된다. app.use(미들웨어) 꼴이다. 익스프레스 서버에 미들웨어 연결해보기 const express = require('express'); const path = require('path'); const app = express(); app.set('port', process.env.PORT || 3001); app.use((req, res, next) => { console.log('모든 요청에 다 실행됩니다. '); next(); }); app.get('/', (req, res, ne.. 2023. 7. 1. [NodeJS] 익스프레스 웹 서버 만들기 익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했다. 더 이상 if문으로 요청 메서드와 주소를 구별하지 않아도 된다. 익스프레스 프로젝트 시작하기 1. 폴더 생성 learn-express * 항상 package.json 을 제일 먼저 생성해야 한다. 콘솔에서 npm init 명령어 호출 package name : (폴더명) [프로젝트 이름 입력] version : (1.1.0) [프로젝트 버전 입력] description : [프로젝트 설명 입력] entry poion : index.js (app.js) 지금 프로젝트에서는 app.js 로 바꿈 test command : [엔터 키 클릭] git respository : [엔터 키 클릭] keywords : [엔터 키 클릭] autho.. 2023. 7. 1. [NodeJS] http - 요청과 응답 서버는 클라이언트가 있기에 동작한다. 클라이언트에서 서버로 요청(request)을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답(response)을 보낸다. 따라서 서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야 한다. 요청과 응답은 이벤트 방식이라고 생각하면 된다. 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해둬야 한다. 아래는 이벤트 리스너를 가진 노드 서버이다. const http = require('http'); http.createServer((req,res) => { //여기에 어떻게 응답할지 적어줍니다. }) http 서버가 있어야 웹 브라우저의 요청을 처리할 수 있으므로 http 모듈을 사용했다. http 모듈에는 creat.. 2023. 6. 30. 이전 1 2 다음 728x90
