[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..

[React] prettier와 eslint

1. prettier - code formatter (탭, 간격, 띄어쓰기, 줄바꿈, 세미콜론, 따옴표... 자동으로) file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정하는 파일 .prettierrc 내 로컬 환경 vscode의 extension을 활용하여 내가 마음대로 커스텀한 코드 포메터를 사용 2. eslint - lintter의 일종 (화살표함수, 일반함수, console.log를 허용할 것인지, 사용되지 않는 변수가 있다면 error 정의되지 않음 함수가 있다면...) - 여러분들의 코드 문법을 통일화 file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정..

[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..