[Node] 미들웨어, Mysql DB 연결(순수 쿼리문)

1. 미들웨어 미들웨어란? 미들웨어 함수는 req(요청) 객체, res(응답) 객체, 그리고 어플리케이션 요청-응답 사이클 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는다. 즉, 미들웨어란 클라이언트에서 요청을 받고 응답을 처리하기 전 중간에 목적에 맞게 처리를 하는 함수라고 생각하면 된다. 그래서 next()라는 함수가 꼭 필요하다. 미들웨어에서 처리를 하고 그 다음 실제 요청을 받는 함수로 넘어가기 위해서는 next() 함수를 사용해야 한다. 예를 들어, 요청이 들어오면 각 요청마다 필요한 로그 같은 것을 응답을 처리하기 전에 중복을 방지하기 위해 미들웨어로 출력한다.(passport, oauth) 미들웨어 예시 // 미들웨어 : 요청이 와서 응답을 하기 전에 들르는 곳 // logger로..

[Node] Sequelize 사용과 DB 연결, 회원가입 예시

1. Sequelize - 객체와 관계형 DB를 연결하는 ORM (Object Relational Mapping)의 한 종류 - SQL문을 사용하지 않아도 명령문만으로도 DB 관리가 가능 - 필요에 따라 Row Query(SQL 쿼리문)도 사용 가능 2. Sequelize 설치 및 DB 연결 사용 1. 설치 및 폴더 - 설치 : npm i mysql2 sequelize sequelize-cli - 기본 설정 : npx sequelize init - config : DB와 연결 설정 - models : 테이블 정의 및 스키마 구현 - migrations : 테이블, 스키마 수정 - seeders : 백업본 저장 - 설치 후 env를 사용하기 위해 config.json을 config.js로 바꾸고 modul..

[Node] Project - Header, Home

1. Header Component Client import { Image, Title, Subtitle, Button, Input } from "./Component" import MORE_ICON from '../images/more.png' import FACEBOOK_ICON from '../images/facebook-icon.png' import HOME_ICON from '../images/home.png' import YOUTUBE_ICON from '../images/youtube.png' import PEOPLE_ICON from '../images/people.png' import GAME_ICON from '../images/game.png' import MENU_ICON from ..

[Node] Project - Identify, DeleteUser

1. Identify Client import { Image, Title, Subtitle, Button, Input } from "./Component" import IMG_LOGO from "../images/facebook-logo.svg" import { useState } from "react" import axios from 'axios' export default function Identify(props) { const [email, setEmail] = useState(""); const onChangeEmail = (event) => { // console.log(event.target.value) setEmail(event.target.value) } const onClickCance..

[Node] Project - Login, Regist

1. Login Client import { useState } from "react"; import IMG_LOGO from "../images/facebook-logo.svg" // 반복되는 것을 외부에 컴포넌트를 만들어서 import를 해서 사용 import {Input, Image, Button, Linebar, Title} from "./Component.jsx" import axios from "axios" export default function Login(props) { const [userid, setUserid] = useState(""); const [password, setPassword] = useState(""); const onChangeUserid = (e) => { // ..

[Node] Project 구성

workspace 하위에 facebook 폴더를 생성 하위에 두개의 폴더를 더 생성한다. 1. facebook/frontend 2. facebook/backend frontend 폴더에서 react 프론트엔드 설치 프론트엔드 01. 리액트를 설치할 폴더로 이동 02. 리액트 설치 시작 03. 리액트 실행 04. 불필요한 파일 삭제 05. App.js 내용 삭제 06. 실행 확인 리액트를 설치할 폴더로 이동 cd d:/workspace/facebook/frontend 리액트 설치 시작 npx create-react-app ./ 불필요한 파일 삭제 logo192.png logo512.png App.test.js logo.svg reportWebVitals.js seviceWorker.js setupTests..

[Node] Express Router, Server에서 데이터/이미지 보내기(array)

1. Express Router - 들어오는 요청 경로를 라우터로 분리하는 역할 - 그렇게 함으로써 코드 복잡도를 낮출 수 있다. - 즉, 들어오는 요청을 분리하지 않으면 많은 요청을 한 파일에 쓰기 코드가 복잡해지므로 router로 최상위 경로를 기준 삼아 분리하는 역할이다. - express Router를 위한 파일을 따로 만들어 require를 해주고 app.use()를 이용해 사용하면 된다. - app.use 매개변수로 최상위 경로를 정해주고 경로에 따라 그 다음 매개변수인 파일로 보내준다. - router를 이용해 적혀있는 경로대로 찾아가 데이터를 전달 받고 데이터를 보내준다. Client axios.post("/api/login", {userid: userid, password:password..

[Node] callback, Promise, Async & Await

1. callback 함수 - callback 함수는 함수를 매개변수로 넘기고 그 안에서 함수를 호출하는 함수이다. - callback 함수가 많이 중첩되게 되면 가독성 뿐만 아니라 문법이 복잡하게 된다. 전통적인 콜백 방식(콜백 지옥) callback((a) => { var b = a + 1; callback((b) => { var c = b + 3; callback((c) => { var d = c + 5; } } } 콜백함수 예시 callback: () => { console.log("callback start!!!"); let count = 0; // start 이후 setTimeout()이 바로 실행은 되지만 log는 1초 후에 나오므로 // 먼저 end가 나온 후에 log들이 나온다. // c..

[Node] Node.js Client-Server 데이터 전달

HTTP(HyperText Transfer Protocol) - 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 프로토콜(통신규약) 1. Request Message 기본 구조 Start Line Get /test.html HTTP/1.1 - HTTP Method, target, version 등 HTTP 기본 정보 Headers Host: google.com : 보내는 주소 Accept: text/html : 미디어 타입 Accept-Encoding : 한글/일본어 등의 인코딩 정보 Authorization : 인증/인가(로그인) 권한 정보 - Host의 주소, 포트 및 미디어 타입 등 Request에 대한 추가 정보. Body ?search="test"&page=20&total=100 - Req..

[Node] Node.js 스프레드 연산자(Spread Operator)

1. 스프레드 연산자(Spread Operator) ES6에서는 "..." 와 같이 다소 특이한 형태의 문법이 추가됨 점 3개가 연달아 붙어있는 이 표시를 스프레드 연산자 혹은 전개 구문이라 함 배열, 함수, 객체 등에서 주로 사용되며, 편리한 기능을 제공한다. 배열, 함수, 객체 등의 연결, 복사 등의 용도로 꽤 활용도가 높은 편이다. 스프레드 연산자를 사용하는 것에 대표적으로 배열 병합, 배열 복사, 구조 분해 이 세가지가 있다. - 배열 병합(Array Concatenation) - 배열 복사(Copying Arrays) - 구조 분해(Destructing) 2. 기본 문법 // Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8] con..