won-solution.com

npm install and n install ( ubuntu linux) 1. sudo apt install npm 2. sudo npm install - g n 3. sudo n stable yarn install curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt - get update sudo apt - get install yarn pm2 install sudo npm install pm2 -g

mysql server 를 구축하면 만나는 2가지 문제 1. 한국어 설정 2. time_zone 설정 1. 한국어 설정은 workbench 에서 직접하면 된다. 2. time_zone 설정은 블러그를 보고 따라 했는데 안타깝게도 control+c control+v 가 동작하지 않아서 작성한다. 확인하는 방법 mysql> select @@global.time_zone, @@session.time_zone; 적용하기 2가지 방법이 있다고 했는데 한가지만 소개한다. mysql>SET GLOBAL time_zone = 'Asia/Seoul' mysql>SET time_zone='Asia/Seoul' 다시 확인하시면 변경되어 있는 것을 확인할수 있다.

 aws ec2 로 서버를 하나 만들고  그 내용을 그대로 사용하기 위해 다시 이미지를 만들었다. 그리고, 만든 이미지로 또 다른 ec2 서버를 생성하였다. 발생하는 문제는 mysql workbench 로 ssh 를 이용해서 접속을 시도하니 public xxx 형태의 접속 문제가 발생하였다. 환경은 window10 이다. 처음 확인한 것은 복사한 이미지 이기 때문에  서버에 있는  /home/ubuntu/.ssh/authorized_keys 이다. 당연히 동일하다 ( 이미지를 복사하여 생성하였기 때문에 당연하다) 그럼 문제는 어디에 있는가?  윈도우에서 찾았다. 사용자에서 .ssh 폴더가 존재한다. 이 mysql workbench 가 이 폴더에 있는 known_hosts 를 사용한다. 그래서 한 조치는 ec 형태로 시작하는 모든 라인을 삭제한 것이다. 그럼 다시 접속일 시도하면 신규로 하나 생성하기 때문에 문제가 발생하지 않는다.

Craco 란? Craco (Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다 이게 뭔말인가???  읽어도 모르겠다. 무슨 뜻인지. ==> 이걸 사용하기 위해 만들어진 내용이다. reactjs 에서 component 와 같은 것을 import 할때 아래와 같이 한다. import Abc from './componet/Abc'   이 내용을 다음과 같이 사용하기 위해 설정한다. import Abc from '@component/Abc'   절대 경로를 지정해 놓고 사용하기 위해 포함 시키는 module 이다. 설치하는 방법 yarn add @craco/craco yarn add craco-alias -D package.json 을 수정 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, base 경로에  jsconfig.paths.json 생성한다. ( 나는 javascript 로 개발하기 때문에 jsconfig.paths.json 이다. 만약 typescript 로 한다면 tsconfig.paths.json 일 것이다. ) { "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["src/components/*"] } } } 여기 다음의 내용이 참조하는 블러그마다 제각각이다. 일...

전면 개정 안내 (2026-07-24) 2021년의 Create React App과 Socket.IO 3.x 예제를 Vite, React, Socket.IO 4.x 기준으로 다시 작성했습니다. CORS 설정뿐 아니라 이벤트 리스너 중복, React Strict Mode, 재연결 상태까지 함께 다룹니다. React 개발 서버와 Socket.IO 서버를 서로 다른 포트로 실행하면 브라우저 기준으로 출처(origin)가 달라집니다. text React: http://localhost:5173 Socket.IO: http://localhost:4001 출처는 프로토콜, 호스트, 포트의 조합입니다. 포트 하나만 달라도 교차 출처 요청이므로 Socket.IO 서버가 React 개발 서버를 명시적으로 허용해야 합니다. 하지만 CORS만 고친다고 React 연동이 완성되는 것은 아닙니다. 컴포넌트가 다시 마운트될 때 리스너를 중복 등록하지 않도록 정리하고, 연결 끊김과 재연결을 UI에 표시해야 합니다. 이번 글에서는 1초마다 서버 시간을 보내는 작은 예제로 이 전체 흐름을 구현합니다. 완성 구조 text react-socketio-example/ ├─ server/ │ ├─ package.json │ └─ server.js └─ client/ ├─ .env.development └─ src/ ├─ App.jsx ├─ App.css └─ socket.js 구성 요소 역할 Socket.IO 서버 연결마다 타이머 생성, clock:tick 전송 CORS 허용 목록 React 개발 서버의 정확한 origin만 허용 socket.js Socket.IO 클라이언트 인스턴스를 한곳에서 생성 App.jsx 연결 상태와 이벤트를 React 상태로 반영 useEffect 정리 함수 등록한 리스너 제거와 연결 종료 1. Socket.IO 서버 만들기 먼저...

https://socket.io/get-started/chat#Getting-this-example  의 숙제하기  위 사이트에 맨 마지막 부분에 아래와 같은 내용이 있어 하나씩 해 보기로 한다. Homework   Here are some ideas to improve the application: Broadcast a message to connected users when someone connects or disconnects. Add support for nicknames. Don’t send the same message to the user that sent it. Instead, append the message directly as soon as he/she presses enter. Add “{user} is typing” functionality. Show who’s online. Add private messaging. Share your improvements! 1. 누군가 접속을 하거나 나갔을때 알려 주기 원본 소스에 추가하는 형태로 하겠다. const   app   =   require ( ' express ' )() ; const   http   =   require ( ' http ' ) . Server ( app ) ; const   io   =   require ( ' socket.io ' )( http ) ; const   port   =   process . env . PORT   ||   3000 ; app . get ( ' / ' ,   ( req ,   res )   =>   {    res . sendFile ( __dirname   +   ' /index.html ' ) ; } ) ; io ...