TIL 20231204

이번 주 목표

everycoach react

resmemory test server

오늘 목표

everycoach login 페이지

resmemory test server 조사

오늘 한 것

everycoach login 페이지

resmemory 모킹 서버 올리고 테스트 코드 구축

resmemory 로그 저장소 엘라스틱 서치로 이동

resmemory 게시글 수정 시 썸네일 수정

1. 리액트 페이지 이동

문제

리액트에서 페이지 이동을 어떻게 하는지 잘 모르겠다.

시도

html과 Dom을 2개씩 만든다. > 실패

해결

Router와 Navigate를 이용한다.

 

App.jsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import "./App.css";

import HomePage from "./pages/HomePage.jsx";
import LoginPage from "./pages/LoginPage.jsx";

function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

 

Nav.jsx

import React from "react";
import { useNavigate } from "react-router-dom";

import "./Nav.css";

function Nav() {
  const navigate = useNavigate();

  function clickLogin() {
    navigate("/login");
  }
  return (
    <div>
      <nav>
        <p id="logo">everycoach</p>
        <div className="navButtons">
          <button id="loginBtn" onClick={clickLogin}>
            로그인
          </button>
          <button id="signupBtn" onClick={clickLogin}>
            무료 회원 가입ㅤ➔{" "}
          </button>
        </div>
      </nav>
    </div>
  );
}
export default Nav;

 

알게된 것

 

리액트에서 페이지 이동을 할 때는 Router> Routes > Route 와 Navigate를 이용한다.

 

2. 로그인 페이지 및 반응형 완성

 

3. 모킹서버

1. __test__/intergration에 실행될 모킹 서버 모듈을 넣는다.

2. dataconnection method 실행 시 모킹 서버의 포트번호를 넣는다.

3. db는 테스트별로 초기화되므로 필요한 정보는 미리 넣는다. (userId)

 

4. 로그 저장소 elastic search

 

import winston from 'winston';
import mailSender from './mail';
import dotenv from 'dotenv';
import winstonElasticsearch from 'winston-elasticsearch';

dotenv.config();

const { combine, timestamp, printf } = winston.format;

let log;

const logFormat = printf((info) => {
  log = `${info.timestamp} ${info.level}: ${info.message}`;

  const slackParam = {
    toEmail: '이메일 주소',
    subject: '[응답하라 추억시대] 서버가 종료되었습니다.',
    text: log,
  };
  const emailParam = {
    toEmail: process.env.NODEMAILER_EMAIL,
    subject: '[응답하라 추억시대] 서버가 종료되었습니다.',
    text: log,
  };

  mailSender.sendGmail(slackParam);
  mailSender.sendGmail(emailParam);
  return log;
});

const esTransportOpts = {
  level: 'error',
  index: 'error',
  indexPrefix: 'logging-api',
  indexSuffixPattern: 'YYYY-MM-DD',
  clientOpts: {
    node: process.env.ES_ADDON_URI,
    maxRetries: 5,
    requestTimeout: 10000,
    sniffOnStart: false,
    auth: {
      username: process.env.ES_ADDON_USER,
      password: process.env.ES_ADDON_PASSWORD,
    },
  },
  source: process.env.LOG_SOURCE || 'api',
};

// 엘라스틱 서치 연결
const esTransport = new winstonElasticsearch.ElasticsearchTransport(esTransportOpts);

const logger = winston.createLogger({
  format: combine(timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), logFormat),
  transports: [
    new winston.transports.Console({
      level: 'error',
      json: true,
    }),
    esTransport,
  ],
});

export default logger;

 

- 엘라스틱 서치 REST API 데이터 조회

1. 데이터 저장시 index를 표기한다.

2. 엔드포인트/index/_search로 GET 요청.

이때, Authorization : Basic base64로_인코딩한_비밀번호(username:password 형식)

---

정리 

리액트에서 페이지 이동을 할 때는 Router> Routes > Route 와 Navigate를 이용한다.

 

모킹서버

1. __test__/intergration에 실행될 모킹 서버 모듈을 넣는다.

2. dataconnection method 실행 시 모킹 서버의 포트번호를 넣는다.

3. db는 테스트별로 초기화되므로 필요한 정보는 미리 넣는다. (userId)

 

- 엘라스틱 서치 REST API 데이터 조회

1. 데이터 저장시 index를 표기한다.

2. 엔드포인트/index/_search로 GET 요청.

이때, Authorization : Basic base64로_인코딩한_비밀번호(username:password 형식)

 

KPT

Keep

열심히 하려고 하는 것 

Problem

백엔드적인 고민을 하지 않고 회피하는 것

Try

어렵더라도 백엔드도 열심히 하기

소감

열심히 했다. 오늘에 만족한다.