🖥 dev-ruby

socket을 사용할 때마다 socket 객체를 전역에 선언해서 사용해야 할 지 컴포넌트 내에 선언해서 지역적으로 사용해야 할 지 항상 고민이였다.. 전역으로 사용하면 리액트에 앱에 접속 시, 바로 소켓에 커넥션되기 때문에 너무 불편했다 그렇다고 지역적으로 사용하려니까 커넥션이 렌더링될 때마다 생성되길래 렌더링이 자주 일어나는 서비스일 경우 부하가 심할 것이고, 실제로 WebRTC 화상 회의 구현을 하면서 엄청난 렉과 마주했다.. 아래는 내가 처음에 적용했던 소켓 코드다. function App() { const socket = io(env.SERVER_PATH + `namespace`); return ( // 어쩌고 ); } export default App; App 컴포넌트가 렌더링될 때마다 소켓 객..

🤔 리덕스란? 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구이다. 복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 유용하게 사용된다. 리덕스는 리액트 뿐만 아니라 jQuery, Angular 등을 사용하는 애플리케이션에서도 사용할 수 있다. 나는 리액트에서 사용하는 리덕스에 대해 알아볼 것이다 ! 리액트의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 된다. 부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트는 변화된 상태에 맞게 data나 ui를 변경한다. 즉, 리랜더링을 한다. 여기서! 컴포넌트는 다음과 같은 상황에서 리랜더링 된다. 1. 자신의 상태(state)..

리액트 파일구조 일단 내가 알고있는 / 사용하고 있는 구조는 이렇다. actions/ user/ 1.jsx 2.jsx friut/ 1.jsx coommon/ http.js components/ User/ 1.jsx Fruit/ 1.jsx 2.jsx services/ user/ 1.js 2.js fruit/ 1.js actions에는 아래처럼 services에서 불러온 함수로 서버과 직접 통신하는 부분이 되겠다. import UserService from '../services/userservice'; export const RegisterUser = async user => { try { const res = await UserService.register(user); console.log(res); r..

https://mui.com/styles/basics/ @mui/styles - MUI The legacy styling solution of MUI. mui.com meterial ui에서 제공해주는 styles api가 따로 있다. 먼저, 설치를 해준다. npm install @mui/styles react hook에서는 아래처럼 사용한다. import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%,..

최근 리액트 라우터가 v5 에서 v6로 업데이트 되면서 바뀐 것들을 정리해볼까 한다. 라우터 시작하기 설치 : 먼저 설치를 해준다. 뒤에 6은 버전을 나타낸다. npm install react-router-dom@6 URL 연결 먼저 앱을 브라우저의 URL에 연결한다. BrowserRouter을 전체 앱에 렌더링한다. index.js import { render } from "react-dom"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const rootElement = document.getElementById("root"); render( , rootElement ); Routes : 서로 다른 URL에서 ..

create-react-app으로 프로젝트 생성 Node.js 설치 리액트 프로젝트를 생성하기 위해서는 Node.js가 먼저 설치되어 있어야 한다. 다운링크 https://nodejs.org/ko/download/ 설치 후, 터미널에서 node -v or npm -v 명령어로 버전을 확인할 수 있다. create-react-app으로 프로젝트 생성 필요한 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구 npx npx는 npm의 5.2.0 버젼부터 새로 추가된 도구이다. npx가 존재하지 않았을 경우에는 npm을 통해 react app 을 생성했지만, > npm install -g create-react-app -g 를 통해 전역적으로 create-react-app 가 설치함으로서 여러 ..