분류 전체보기101 [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. [SpringBoot] Httpsession HttpSession 객체를 사용하여 "user"라는 이름으로 유저 정보를 세션에 저장하는 예시 @Controller public class MyController { @RequestMapping(value = "login", method = RequestMethod.POST) public String login(HttpSession session, UserEntity user) { // 로그인 로직 수행 // ... // 로그인이 성공한 경우 세션에 "user" 속성으로 유저 정보 저장 session.setAttribute("user", user); return "redirect:/home"; } } 위의 예시에서 /login 경로로 POST 요청이 들어오면 로그인 로직을 수행하고, 로그인이 성공한 경.. 2023. 7. 6. [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. 이전 1 ··· 5 6 7 8 9 10 11 12 다음 728x90
