728x90

개발/React 4

[React/Typescript] React와 socket.io 연결하기

목차 화면 구성 입력창에 text 입력 후 전송 버튼 클릭 입력된 text 하단에 추가 Socket.io 실시간 양방향 통신을 구현하기 위해 사용되는 JavaScript 라이브러리 .emit - 보내기 .on - 받기 리액트 타입스크립트 시작 npx create-react-app [프로젝트명] --template typescript 프로젝트를 만들고자 하는 폴더 내에서 명령어 실행 npm run start 생성 완료 후 프로젝트 폴더에서 npm run start 폴더 구성 프로젝트 > server > app.ts 생성 모듈 설치 npm i express socket.io socket.io-client 서버 코드 작성 server > app.ts const port = 3001; const http = r..

개발/React 2023.09.08

[React/Typescript] React와 Express 연동하기 (Get, Post)

목차 화면 구성 input에 text 입력 post 버튼 클릭 시 입력된 text 보냈다 가져오기 get 버튼 클릭 시 입력해둔 text 가져오기 리액트 타입스크립트 시작 npx create-react-app [프로젝트명] --template typescript 프로젝트를 만들고자 하는 폴더 내에서 명령어 실행 npm run start 생성 완료 후 프로젝트 폴더에서 npm run start Express 설치 Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령을 이용하여 애플 expressjs.com npm install exp..

개발/React 2023.09.01

[React] exceljs 사용법 정리 (예제 포함)

목차 exceljs 다운로드 npm install exceljs import ExcelJS from 'exceljs'; 셀 병합 // 셀 병합 ws.mergeCells('A1:D2'); 폰트 스타일 // 폰트 사이즈, 굵기, 색상 변경 ws.getCell('A1').font = { size: 18, bold: true, color: { argb: '000000' } }; 정렬 horizontal - left / center / right / fill / justify / centerContinuous / distributed vertical - top / middle / bottom / distributed / justify // 정렬 ws.getCell('A1').alignment = { horizon..

개발/React 2023.04.10
728x90