wonsolution.kr

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/*"] } } } 여기 다음의 내용이 참조하는 블러그마다 제각각이다. 일...

socket.io chat 예제를 nodejs 로 구현한 것은 이전 블러그에서 언급하였다. 그래서, nodejs 로 서버로 만들고 reactjs 로 클라이언트를 구현하는 예제를 하나 실행해 보았다. 동작하지 않는다.  그냥 locahost 에 3000 번 포트와 30005번 포트 이런식으로 만들어서 실행햇는데도 cors 이슈를 만나게 되었다. cors 이슈에 대해서는 구글에 cors 검색하면 무지하게 많이 나온다. 간단히 말하면 서버1의 내용을 서버2에서 호출하면 접속할수 없다고 하면서 발생하는 문제이다. 이번 예제로 동일한 이슈에 대한 내용이다. 아래 블러그에 내용을 그대로 실행 보았다. https://www.valentinog.com/blog/socket-react/ 아쉽게도 소스는 github 가 없었다.  그래서 해당 블러그에 있는 내용을 그대로 가져와서 실행해 보았다. 서버는 아래와 같이 만들었다. mkdir socket-io-server cd socket-io-server npm init -y npm i express socket.io 1. app.js 파일을 만들고 아래의 코드를 넣는다. 내용은 웹서버를 만들고 socket.io 를 만들어서 접속하면 시간정보를 내려주는 것이다. const express = require ( "express" ) ; const http = require ( "http" ) ; const socketIo = require ( "socket.io" ) ; const port = process . env . PORT || 4001 ; const index = require ( "./routes/index" ) ; const app = express ( ) ; app . use ( index ) ; const server = http . createServer ( app ) ; const 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 ...

socket.io 예제 따라하기 socket 통신을 nodejs로 구현한 내용이다. 한번 정리해보기로 한다. 1. 채팅 소스  공식 사이트에 있는 예제 소스이다. https://socket.io/get-started/chat 간단한 채팅 소스이다. git을 통해 예제를 받아 볼수 있다. git clone https://github.com/socketio/chat-example.git 딱 채팅만 동작하는 소스이다. 실행 방법은 1. git으로 당기고   git clone https://github.com/socketio/chat-example.git 2. 해당 폴더로 이동하고   cd chat-example/ 3. 초기화 하고  yarn 4. 실행한다. yarn start 5. 브라우저 2개를 열어서 위의 이미지와 같이 메시지를 입력하면 끝이다. 소스를 확인해 보겠다. 보아야 할 소스는 2개 밖에 없다. index.js 와 index.html 2개이다. 먼저 index.js 를 보면 const   app   =   require ( ' express ' )() ; const   http   =   require ( ' http ' ) . Server ( app ) ; const   io   =   require ( ' socket.io ' )( http ) ; const   port   =   process . env . PORT   ||   3000 ; console . log ( process . env . PORT ) app . get ( ' / ' ,   ( req ,   res )   =>   {    res . sendFile ( __dirname   +   ' /index.html ' ) ; } ) ; io ...