02/23 React환경설정하기-Yarn으로 관리

리액트와 서블릿 연동하기

 

-리액트와 서블릿 연동하기-chat221228(나의 경우 chat_banana | D:\workspace_java\chat_banana)

 

yarn 패키지 매니저를 사용함

설치시-g를 주면 전역에서 사용가능하게 설치(-D는 개발자 의존성 주입 : spring maven, gradle)
$ npm install -g yarn
패키지 매니저 버전 확인
yarn-version

리액트 프로젝트 생성하기

1. yarn으로 생성한다.
$ yarn create react-app template2023

단 현재 바라보는 폴더 아래에 template2023폴더가 생성이 된다는것을 기억하기.
VSCode로 프로젝트를 열때에도 위 경로에서 열어야 에러가 없다.

원하는 경로에서 열기!! 경로문제를 가볍게 생각하면 큰일난다.
항상 D:\workspace_java\chat_banana\src\main\react-front 여기에서 연다.

2. $ yarn init --force 엔터
엔터를 계속 치면 기본값으로 생성이 된다. 디폴트 값으로 package.json에 등록됨.
"description": "chat221128프로젝트와리액트프로젝트연동",
  "main": "index.js",
  "author": "dodoringring<dodohee1504@gmail.com>",
  "license": "MIT"

  실행하기
  $ yarn start 엔터치기
  http://localhost:3000/index.html실행됨->div id="root"

  사용자 정의 태그를 만들어서 사용
  ReactDOM.createRoot(rootElement).render(element(<Paint/> <Nice/>))

  document.querySelector("#root")
  render

  index.html->index.js->BrowserRouter로 App.jsx에서 Router통해 페이지 링크

3. react-router-dom을 설치한다. 웹 페이지 제작에 필수이다.
라우터가 하는 역할이 화면 전환이다. 이 역할에 링크도 포함 되어있다.
<React.StrictMode>
    <BrowserRouter>
    <App/>
    </BrowserRouter>
  </React.StrictMode>

4.CSS추가분
React-BootStrap
$ yarn add react-bootstrap

만일 React-BootStrap에 미지원 부분에 대해서는 bootStrap
설치하여 사용자 정의 CSS로 처리한다.

$ yarn add bootstrap
->CSS라이브러리 설치

CSS를 자바스크립트로 설치하는 style-components 설치
$yarn add styled-components

5.폰트어썸-무료 이모티콘사용하기
$ yarn add @fortawesome/fontawesome-free

6.axios를 설치한다.-비동기 처리를 도와준다.
Moesif CORS-true/flase-프록시 (나중에 한다...)
-톰캣서버의 서블릿을 요청 할 계획
제이쓴을 지원하는 API가 따로있다.
패치API보다는 리액트에서 많이 쓰는 엑시오스 쓸예정이다.
fetch API에서 지원안되는 json포맷 지원받음


import axios from 'axios';
import React from 'react'

export const dbLogic = () => {
  return new Promise((resolve, reject)=>{
    try {
      const response=axios({
        method:"get",
        url:process.env.React_APP_CHAT221228_IP+"dept/jasonDeptList.st1",
        params:params,
      })
      resolve(response)
    } catch (error) {
      reject(error);
    }
  });
}
/* rafce단축키 에로우펑션만들어줌 */

7. firebase설치-9.17.1
$ yarn add firebase

파이어베이스에서는...지원한다
로그인 인증시에 사용
회원가입
RealtimeDatabaseServer-채팅기능 활용-테스트버전 30일만 됨...
Strage-이미지 동영상-30일후에 갱신하자!!


.env파일사용
구글 키값을 다 정리해놓는다.
카카오 키값도  추가해줌
.git ignore에 등록해서 배제하기

 

리액트 프로젝트 만들기

()안은 내가 만들 프로젝트 이름이다.

 

yarn create react-app 이름

명령어로 설치해준다.

설치가 완료 됐다.

 

 

리액트 프로젝트 템플릿 작성하기

1. npm install -g yarn

2. yarn -version

3. yarn create react-app template2023

4. yarn init --force 엔터 한 후 질문지에 대해 모두 엔터 치면 자동 완성됨

 

지울거 지워준다.

yarn start해준다.

 

톰캣서버와 리액트 서버를 연동하자

 

Yarn은

 

Facebook에서 개발한 자바스크립트 패키지 매니저입니다. npm(Node Package Manager)과 유사하지만, 더욱 빠르고 안정적인 성능을 제공하며 보안적인 측면에서도 우수한 기능을 제공합니다.

Yarn은 프로젝트의 종속성(dependencies)을 관리하는 데 사용되며, 이를 통해 프로젝트 개발 및 배포를 보다 효율적으로 할 수 있습니다. Yarn은 npm과 호환되기 때문에 기존의 npm으로 설치한 패키지를 그대로 사용할 수 있으며, npm보다 더 나은 성능과 보안을 제공합니다.

Yarn은 다음과 같은 주요 기능을 제공합니다.

• 의존성 해결 알고리즘을 통해 의존성 설치 속도가 빠름
• 레지스트리 API 캐싱을 통해 네트워크 속도가 빠름
• 작업 병렬 처리를 통해 더 빠른 패키지 설치 가능
• 간단한 CLI(Command Line Interface)를 제공하여 사용이 쉬움
• lockfile 기능을 제공하여 의존성 버전 충돌을 방지하고, 빌드 환경을 일관성 있게 유지 가능

요약하면, Yarn은 자바스크립트 패키지 매니저로, 프로젝트의 종속성(dependencies)을 관리하며, npm보다 빠르고 안정적인 성능을 제공합니다.

 

rafc단축키===>arrow function export default

 

Promise는

자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트는 단일 쓰레드에서 동작하므로, 비동기 처리를 통해 블로킹(blocking)을 방지하고 프로그램의 성능을 개선할 수 있습니다. Promise는 이러한 비동기 처리를 보다 쉽게 구현할 수 있도록 제공되는 객체입니다.

Promise는 다음과 같은 세 가지 상태를 가집니다.

• 대기(pending): 이행 또는 거부되지 않은 초기 상태
• 이행(fulfilled): 연산이 성공적으로 완료되어 결과 값을 반환한 상태
• 거부(rejected): 연산이 실패하여 오류 값을 반환한 상태

Promise를 사용하면, 비동기 작업을 수행하는 함수에서 결과 값을 반환할 수 있으며, 이후에 해당 결과 값을 처리하는 코드를 작성할 수 있습니다. Promise를 사용하는 코드는 일반적으로 다음과 같은 형태를 가집니다.

위 코드에서 asyncFunction()은 Promise 객체를 반환하며, then() 메소드와 catch() 메소드를 통해 성공적인 결과 값과 오류 값을 처리할 수 있습니다. then() 메소드는 Promise가 이행됐을 때 호출되며, catch() 메소드는 Promise가 거부됐을 때 호출됩니다.

 

얀 이용해서 라우터 돔 설치해준다.

yarn add react-router dom