반응형 React4 [해결] Socket.io 웹뷰 접속지연 재직중인 회사에서 개발중인 프로젝트에 Socket.io를 도입하기로 했다. 서버개발자와 협업하여 크게 어려움 없이 개발하며 Socket.io를 활용한 실시간채팅을 구현해냈다. 그런데 이게 왠걸 Local환경에서 잘만되던게 웹뷰 (하이브리드앱)에서만 접속이 지연되는 것이 아닌가... 원인을 파악해보자. 접속순서는 이렇다. connect -> connection -> joinRoom 먼저 connect는 소켓 서버와 연결을 요청한다. connection은 서버에서 room을 줄 준비가 되었음을 의미한다. connection을 수신하면 joinRoom요청으로 입장과 동시에 메시지, 상대방, 나의정보를 받는다. 발견사항 1 매번 접속지연이 발생하는 것이 아니라 약 3회에 1번꼴로 종종 발생한다. 이것은 사용자에.. 2023. 5. 16. Library React Swiper 응용하기 (module, props...) 기본편 보러가기 Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm 3pdev.tistory.com 기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다. 먼저 모듈부터 살펴보자. Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다. import SwiperCore, { Navigation } from 'swiper'; import 'swiper/css/.. 2023. 3. 29. React-redux를 사용하는 이유와 사용하는 방법 with Example 취업 후 열심히 배우고 일하느라 오랜만에 글을 쓴다. 회사생활이 너무 재미있어서 시간을 녹여버리고 있다. 어쨋든 Redux의 사용 이유 오늘은 React와 찰떡궁합 React-redux를 알아보자. 기존의 props를 과다 사용해서 프로젝트를 만들다보면 여러 컴포넌트가 쌓이고 쌓일수록 굉장히 복잡해지게 된다. 예를들어서 아래와 같이 export default function App() { const [number, setNumber] = useState(0); return ( App number : {number} { setNumber(number + 1); }} /> ); } function Calculator1(props) { return ( Calculator1 ); } function Calcul.. 2023. 1. 28. CRA로 React App 만들기 React를 처음 시작할때 CRA없이 시작한다면 시간을 지체할 수 밖에 없다. 또, 이미 React를 활용하고 있는 사람에게도 새로운 Project를 시작할때 CRA는 정말 효율적이다. CRA란 Create-React-App의 약자로 React 공식웹에서 제공한다. 먼저 React Website에 접속해보자. https://ko.reactjs.org/ 접속하면 위와 같은 Web으로 접속되는데 붉은색으로 표시해놓은 '시작하기'를 눌러보자. 시작하기에 잘 접속이 되었다면 우측에 표시해놓은 '새로운 React 앱 만들기'를 눌러보자 이제 다 한것이나 다름없다. 하단에 추천 툴체인의 'Create React App' Link가 보이는데 누르게 되면 바로 아래쪽 Create React App 으로 이동하게 된다... 2023. 1. 23. 이전 1 다음 반응형
