React (23) 썸네일형 리스트형 [React] node router설정 기존코드 //server/index.js const express = require("express"); const app = express(); const bodyParser = require("body-parser"); const cookieParser = require("cookie-parser"); const config = require("./config/key"); const { auth } = require("./middleware/auth"); const { User } = require("./models/User"); //서버에서 가져온 데이터를 파싱해서 가져와준다. app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyPars.. [React] Mongo + Node + React 회원가입, 로그인 Mongo, NodeJs, React를 이용해서 회원가입 로그인을 만들어보쟈 최종 목표는 유튜브 클론코딩이다! 2020.10.15 - [React] - React와 Express연동하기 1 React와 Express연동하기 1 준비 과정 1. CRA npx create-react-app tistory(파일명) 2. npm start Express 설치 1. Express설치 npm install express --save --save는 안붙혀도 된다. --save의 뜻은 종속 항목 목록에 저장한다는 뜻이다. --.. coding-hyeok.tistory.com 2020.10.17 - [React] - React - Mysql 연동하기, 연결(데이터 저장) React - Mysql 연동하기, 연결(데이터 .. [TS] 타입스크립트로 간단한 블록체인 만들어보귀 음,,, 일단 이걸 하게된 과정은 1. 요새 코인에 관심이 간다 2. 그래서 블록체인에도 관심이 생겼다. 3. 자바스크립트를 주로 쓰는 와중에 타입스크립트가 요새 핫하단다. 그래서 두개 동시에 써보자는 생각으로 만들어따. 블록체인에 대해 간단하게 설명하자면 관리 대상 = 데이터 = 블록 (내생각) 이걸 p2p방식으로 체인형태의 연결고리 기반 분산 데이터 저장 환경에 저장하여 관리하는 것이다. 누구라도 임의로 수정할 수 없고 참여자들 누구나 변경의 결과를 열람할 수 있는 것이 특징이다. 즉, 블록체인이란 블록(데이터)들이 체인형태로 묶여있는 것 블록체인은 블록들로 이루어져 있단따. 그럼 블록은 뭐로 이루어져있을까?! 크게 헤더와 바디이다. 1. 헤더 헤더는(버전 + 이전 블록 해시 + 머클 루트 + 타임 .. [React] 로그인 시 사용자 정보 storage(저장소)에 넣기 (localstorage VS sessionstrorage) 로그인 했을 때 사용자 이메일을 storage에 넣어 보쟈 그전에 어떤 저장소에 넣으면 효과적일지 고민에 빠졌다. 아래는 local storage와 session storage의 차이점이다. Local Storage - 가볍게 사용 가능하다. 그러나 기능이 많지 않다. - 최대로 저장할 수 있는 용량이 크지 않다.(5mb) - 간단한 텍스트 데이터만 저장이 가능하다. - 만료 기한이 없다. - 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다. Session Storage - 브라우저를 끄면 지워진다. - 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다. 가장 큰 차이점으로는 세션은 끄면 없어지는 것이고 로컬은 안지워지는 것이다! 둘은 동일한 메소드와 프로퍼티를 제공한다. .. [React] 절대경로 설정하기 절대경로 설정 이유는 파일을 임포트할때 예를 들어 import Footer from "../../../../component/footer/" .... 요롷게 지저분해지는게 싫어서다. 설정 법은 매우 간단하니 해보도록 하쟈 1. 절대경로 기본값 폴더에 jsconfig.json을 만드삼 나는 client폴더에 만들엇삼 2. 아래 코드 추가하삼 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 3. 끝! 넘나 깔끔해졌따!!!! 하다보니 어떨땐 상대경로가 더 편한 상황도 있다. 여기서 의문점. 같이 써도 될까 ? 그래서 해봤는데 지금 당장 문제는 없다. 나중에 문제가 생기면 그때의 내가 잘할거라 믿는다 ^^ !! 화ㅅ팅!! 오늘도 열코 합시다 ~ .. [React] react router (v6) 올만에 리액트 하려는데 라우터가 버전이 변경돼있었다. 사용법이 조금 달라진듯 하다 1. React Router 설치 npm install react-router-dom@6 history@5 2. URL 연결 src/index.js 파일에 코드를 추가해주자. import React from "react"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { render } from "react-dom"; // 추가된 부분 import { BrowserRouter, Routes, Route } from "react-router-dom"; // 추가된 부분 // 앱에서 변경된.. [React] React -Socket을 이용한 채팅기능 socket이란 뭘까 ? 우리(Client)는 여태 서버(Server)의 데이터가 필요할때 서버에게 요청하고 통신하여 사용하였다. 2020/10/15 - [React] - React와 Express연동하기 1 2020/10/15 - [React] - React와 Express연동하기 2 위글처럼 말이다. 이것이 HTTP통신이다. 그러나, socket통신은 특정 포트를 통해 실시간으로 양방향 통신을 하는 방식이다. 둘의 아주 큰 차이는 요청할때만 켜지느냐(:HTTP) 항상 실시간으로 켜지느냐(:socket), client가 요청하고 server가 보내주는 단방향 통신(HTTP)냐, server와 client가 같이 서로 보내는 양방향 통신이냐(socket) 이다. socket은 매우 유용하다. 오늘 해본 .. React - mysql연동하기, 연결 (데이터불러오기) 저번에는 저장을 했다. 이번엔 불러와서 화면에 출력해보자 디비는 저번의 test테이블을 쓰겟다. 이러한 데이터가 있고 이거를 불러와서 화면에 출력해보자 먼저 server.js를 수정하자 const express = require("express"); const app = express(); const port = 3001; // react의 기본값은 3000이니까 3000이 아닌 아무 수 const cors = require("cors"); const bodyParser = require("body-parser"); const mysql = require("mysql"); // mysql 모듈 사용 var connection = mysql.createConnection({ host : "localhost.. 이전 1 2 3 다음
