221206(화)

김민석·2022년 12월 6일

TIL

Today I Learned

목록 보기

12/30

오전

복습

redux 17v 참고 사이트
https://redux.js.org/introduction/getting-started

최근 본 상품 등록

문제] 최근 본 상품 보여주는 컴포넌트 만들기

React Query : 실시간 데이터 계속 갖고오는 라이브러리
D:\DouZone_th3\11_Angular_React\workspace\shopping-mall>
npm install react-query

https://raw.githubusercontent.com/ai-edu-pro/busan/main/userdata.json

참고> RTK Query

캐싱기능

성능 개선
호출 시점을 지연, 실제로 컴포넌트가 사용될 시점에 호출되게 한다.
const Detail = lazy(()=> import('./components/Detail.js'));
const Cart = lazy(()=> import('./components/Cart.js'));

<Suspense fallback={

로딩중임....

memo()
useMemo()

useTransition(),
useDeferredValue

17버전까지는 일관되지 않은 batching 처리 되었음
18버전에 추가된 기능

일관된 batching <--- ajax요청, setTimeout() : 상태변경 함수 실행시마다 재렌더링 시킴
<> flushSync() 함수는 반대개념 - 상태변경 함수 실행시마다 재렌더링 시킴

node로 서버 구축하기
D:\DouZone_th3\11_Angular_React\workspace\nodeServer>
npm install express

cmd> npm i -g nodemon

cmd> nodemon server.js 실행 안될때
cmd> 관리자 모드로 실행해서.....
pscmd> executonpolicy
pscmd> set-executonpolicy unrestricted

참고: https://blog.naver.com/vanstraat/221732533202

node server

index.html 띄우기

server.js

   app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

일단 메모

server.js

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended : true}))

오후

third project : 크림

server

server.js


app.get('/write', (req, res)=> {
    res.sendFile(__dirname +'/write.html')
})

// app.post() 요청
// app.post('/add', (req, res)=>{
//     res.send(`<span>${req.body.title}</span><p></p><span>${req.body.date}</span>`)
// })

write.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</head>
<body>
    <h3>Write Page 입니다.</h3>
    <h4 class="container mt-4"><strong>글 작성페이지</strong></h4>

    <div class="container mt-3">
      <form action="/add" method="POST">
        <div class="form-group">
          <label>오늘의 할일</label>
          <input type="text" class="form-control" name="title">
        </div>
        <div class="form-group">
          <label>날짜</label>
          <input type="text" class="form-control" name="date">
        </div><br />
        <button type="submit" class="btn btn-success">Submit</button>
      </form>
    </div> <br />

  
   <!-- <div class="tableview">
    <table class="tmenu">
        <thead class="tmenu">
            <th>Title</th>
            <th>Date</th>
        </thead>
        <tr class="tmenu">
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
   </div> -->
    
  </body>
</html>

sendFile의 또다른 사용법

app.get('/', (req, res)=> {
    res.sendFile(path.join(__dirname,'public.main.html'))
})

서버 리빌드

서버 작성
기존 서버 작성 참고

server.js

//server.js
const express = require('express')
const app = express();
const bodyParser = require('body-parser')
const http = require('http');
const url = require('url');
const querystring = require('querystring');
const path = require('path')

app.use(bodyParser.urlencoded({extended: true}))

//react-app
app.use('/',express.static(path.join(__dirname,'public')))
app.use('/react', express.static(path.join(__dirname,'react-app/build')))

//

//app.listen(포트번호, 할일)
app.listen(8080, function(){
    console.log('listening on 8080');
})

//app.get('/경로', 할일)
app.get('/dog', function(req, res){
    //res.send('데이터 전송입니다.')
    res.send('dog page')
})

// app.get() 요청
app.get('/', (req, res)=> {
    res.sendFile(path.join(__dirname,'/public/main.html'))
    // res.sendFile(__dirname+'/public/main.html')
})

app.get('/react', (req, res)=> {
    res.sendFile(path.join(__dirname,'react-app/build/index.html')) //리엑트의 시작페이지
})