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

[Node] Node 내장 객체, console, timer 객체

Node 내장 객체 : 노드에서 자주 사용되는 객체로 미리 만들어져 있는 객체를 말함 1. 기본적인 객체 global - global은 브라우저의 window와 같은 전역 객체이다. - 따라서 모든 파일에서 접근 가능한 객체이고, global은 생략가능하다. - require, cosnole도 모두 global이 생략된 것이다. __filename - 현재 실행 중인 파일의 경로를 알려준다. - console.log(__filename) __dirname - 현재 실행 중인 폴더 경로를 알려준다. - console.log(__dirname) path - path 모듈은 파일 명을 얻거나 운영체제별 경로 구분자가 달라 생기는 문제를 쉽게 해결하기 위해 만들어졌다. - Windows: c:\Users\ano..

[Node] 모듈(module)

1. 모듈(module) - 연관된 코드들을 하나의 단위로 그룹화하여 관리하기 위한 개발 방법 - Javascript 객체 생성과 방법이 비슷하지만 객체는 내부에서 그대로 쓰는 것이 목적이라면 모듈은 그룹화를 시켜서 외부에서 재사용하는 것이 목적이라는 것에 차이점이 있다. 모듈 생성 // module.exports를 exp 변수에 넣는다. // 변수에 따로 넣는 이유는 밑에 처럼 새로운 값들을 추가하기 위해서 한다. // 하지만 상대적으로 한번에 그룹화하는 경우가 많다. const exp = module.exports = { add: function(a, b) { return a + b; }, sub: (a, b) => a - b } exp.mul = function(a, b) { return a * b..

[Node] RestAPI, URI 고려사항, 응답 상태 코드

1. RestAPI - Rest는 Represetational State Transfer이라는 용어의 약자로 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 발표 - 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미하며 자원의 표현과 상태(정보) 전달을 하는 것 - URI를 통해 자원을 명시하고, HTTP Method(GET, POST, DELETE, PUT...)를 통해 자원에 대한 행위(CRUD Operation)를 적용하고 자원을 JSON, XML, TEXT ... 들 여러 형태의 표현으로 나타내어 데이터를 주고 받는다 GET 해당 리소스를 조회(데이터를 가져오는 요청) POST 리소스를 조회하고 자세한 정보를 가져온다.(데이터 전달) PUT 해당 리소스를 ..

[Node] FrontEnd & BackEnd 연동

- FrontEnd는 React.js - BackEnd는 Node.js 먼저, 둘을 연동하기 위해서는 데이터를 주고 받기 위한 통신 라이브러리인 axios를 설치해야 한다. - npm install axios 그리고 FrontEnd(React.js) 쪽에 있는 package.json에 proxy를 추가해 줘야 한다. 이 proxy는 Front 쪽에서 axios로 요청하는 모든 것은 proxy에 적혀 있는 포트로 연결해서 요청하고 데이터를 가져온다. "proxy" : "http://localhost:8080" 이처럼 적혀 있다면 Front에서 3000포트로 연결하더라고 Back의 8080 포트에 접속하는 것이다. axios.get("주소").then(res => {}).catch(error => {}); ..