로아

리액트는 수정시에 웹소켓으로 React Hot Reload로 웹페이지를 새로 리로드 시켜준다.

그러나 proxy 설정으로 해당 에러 발생시 React 설정

React webSocket connection to 'wss://주소:3000/ws' failed

#에러
React webSocket connection to 'wss://주소:3000/ws' failed

#구성

[사용자 브라우저]
   ⇅ HTTPS (443)
[Caddy 서버]
   ⇅ (localhost:3000 으로 프록시)
[SSH 터널링으로 연결된 3000포트]
   ⇅
[docker-compose codeserver에 React 3000]

#caddy 설정 
URL주소 {
    reverse_proxy localhost:3000
   tls mail@mail.com
    log {
        output discard
    }
}

#docker-compose 설정
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    restart: always
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Seoul
      - PASSWORD=
      - SUDO_PASSWORD=
      - PROXY_DOMAIN= URL 주소
      - DEFAULT_WORKSPACE=/config/workspace
    volumes:
      - D:\codeserver/config:/config
    ports:
      - 8085:8443
      - 3000:3000

#해결 .env 설정
React root에 .env 파일 생성


#WebSocket 설정
WDS_SOCKET_PORT=0        <-------------해당 설정만 넣으면 해결가능
#WDS_SOCKET_HOST=url 주소
#WDS_SOCKET_PORT=443
#WDS_SOCKET_PATH=/ws
#HTTPS=true

# 폴링 설정
CHOKIDAR_USEPOLLING=true
WATCHPACK_POLLING=true

나는 라즈베리파이로 낮은 성능이라 caddy로 proxy설정하였는데

proxynginx proxy manager로 proxy 설정시에도 동일할로 예상합니다.

# node 다운로드

https://nodejs.org/download/release/latest-v20.x/node-v20.11.1-win-x64.zip

# C:\dev 폴더생성

# node 

C:\dev\node-v20.11.1-win-x64 에 압축풀기

# yarn 설치

C:\dev\node-v20.11.1-win-x64\npm install yarn --global

아래 에러 발생시

C:\dev\Veltrix_React_v5.1.0\Admin>C:\dev\node-v20.11.1-win-x64\yarn install
yarn install v1.22.21
[1/4] Resolving packages...
warning Lockfile has incorrect entry for "moment@^2.29.4". Ignoring it.
error Error: certificate has expired
    at TLSSocket.onConnectSecure (node:_tls_wrap:1674:34)
    at TLSSocket.emit (node:events:518:28)
    at TLSSocket._finishInit (node:_tls_wrap:1085:8)
    at ssl.onhandshakedone (node:_tls_wrap:871:12)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

ssl/tls 인증서가 만료 https 경고 해제 후 다시 설치

npm config set strict-ssl false
npm install -save react-scripts
npm install -g react-scripts

npm install yarn --global

ssl/tls 인증서가 만료 https 경고 해제 후 다시 설치

yarn config set strict-ssl false

# React 테마 Veltrix_React_v5.1.0 (유료)

구매한 테마가 있어서 그냥 사용. 다른 테마 사용 등 선택사항

https://themeforest.net/item/veltrix-react-js-admin-dashboard-template/32471505

React 테마 Veltrix_React_v5.1.0 아래경로에 복사

C:\dev\Veltrix_React_v5.1.0

#React install

CMD로 cd C:\dev\Veltrix_React_v5.1.0\Admin 이동

C:\dev\Veltrix_React_v5.1.0\Admin>C:\dev\node-v20.11.1-win-x64\yarn install

#React start

C:\dev\Veltrix_React_v5.1.0\Admin>C:\dev\node-v20.11.1-win-x64\yarn start

#http://localhost:3000/

리액스 테마 샘플구동 까지 작성...

계속 업데이트 예정...

#vscode 설치

https://code.visualstudio.com/Download

설치파일이아닌 zip파일로 받음 (선택사항)

압축을 풀어준뒤 실행하면 된다.

#vscode spring-boot 플러그인 설치

Extension Pack for Java

Spring Boot extension pack

Lombok Annotations Support for VS Code

#자바 17버전 다운로드 및 설정

https://jdk.java.net/archive/

#자바 HOME 설정

file > Preferences > Settings

java:home > Edit in settings.json

#Spring Boot 프로젝트 생성

[Ctrl] + [Shift] + [P]

Spring Initializr  엔터

#vscode 테마변경

Ctrl + K, T

#vscode node 터미널 새창에서 실행이 아닌 기본창에서 실행 설정

#vscode 패키지 구조가 아닌 폴더구조로 보기 

(단축키: Ctrl + ,) Compact Folders 검색 >  Explorer: Compact Folders 해제

#vscode 폴더 아이콘 표시

파일 아이콘 테마 설정 

폴더별 아이콘이 직관적으로 표시 된다.

#rest api 호출을 위한 Thunder Client 설치 (postMan 대신)

#Database manager

#Open in browser (alt + b)

인터넷 검색중 한번 따라 해보고 싶은 강좌가 있어서 남긴다.

slack을 만드는걸 따라 해보는 코딩이다.

SLACK 2.0 REACT.JS Clone

https://www.youtube.com/watch?v=QiTq5WrWoJw