react (4) 썸네일형 리스트형 렌더링 관점에서 바라본 SPA방식(React 와 jQuery비교) 나는 현재 jQuery 기반 프레임워크를 사용해 프론트엔드 개발을 하고 있다.팀과 프로젝트의 특성상 오랜 기간 이 방식에 익숙해져 있었고, 별다른 불편 없이 개발을 이어왔다.하지만 웹 프론트엔드의 흐름은 이미 SPA(Single Page Application) 중심으로 옮겨갔고, 그 중심에는 React가 있다. 개인적으로 토이 프로젝트를 하거나 새로운 UI를 시도할 때는 자연스럽게 React를 선택하게 된다.최근에는 Next.js를 공부하면서 React 생태계에 대한 이해도 점차 넓어지고 있다.그래서 이번 글에서는 SPA의 대표 예로 React를, MPA의 예로 jQuery를 비교해 보려 한다. React의 개념적인 장점들은 이제 익숙하다. 예를 들어, 가상 DOM을 통한 렌더링 효율 향상상태 관리를 기.. Push 서버 관리자 사이트 개발 Stack ReactJS, Mui, NodeJS, Pm2 Preview 앱을 사용하다보면 PUSH 알림을 자주 받게됩니다. 금융앱에서도 이체, 주식주문 등과 같은 이벤트가 발생 시 고객에게 PUSH 알림을 주곤합니다. PUSH 서버는 메시지를 받아 FCM(Firebase Cloud Messaging)으로 전송하기 위한 Bridge 성격의 서버로 구성했습니다. 자세한 내용은 아래 링크를 참고해 주세요. https://sieon-dev.tistory.com/69 [Node.js] PM2를 사용해 PUSH서버 구축하기 이번 포스팅에서는 증권사 내부 서버에서 고객의 MTS(Mobile Trading System)에 푸시 알림이 도착하기 까지의 과정을 코드와 함께 기록해두려 합니다. * 보안으로 인해 중요 정보는.. ReactJs에서 addEventListener 사용하기 INDEX Stack #ReactJs, #useEffect, #addEventListener Preview 보통 리액트에서는 토글 기능이나 Toast, window 와 같은 status가 'ON', 'OFF' 인 컴포넌트를 구현할 때 useState를 사용합니다. 만약 아래와 같은 상황에서 어떻게 구현해야 할까요? 위 이미지에서 왼쪽에 있는 버튼은 공지사항 내용이 있으면 빨간 동그라미가 있고 없으면 표시하지 않도록 구현을 하려 합니다. 노티 이미지를 클릭했을 때 위 이미지처럼 공지사항 내용이 보여져야(show) 하고 해당 공지사항 영역 외의 영역을 터치하거나 노티 이미지 영역을 다시 클릭하면 공지사항 영역이 다시 hide 되어야 합니다. Methodology 처음엔 단순하게 생각했습니다. "useStat.. OpenWeatherMap api by fetch and axios INDEX Preview https://openweathermap.org/api openweathermap.org 간단하게 날씨 정보를 OpenWeatherMap api를 호출해서 불러오려고 합니다. api를 호출하는 방법엔 fetch, axios, ajax 등이 있습니다. api key는 위 사이트에 접속해서 회원가입 후에 my api key 메뉴에 들어가면 있습니다. (하지만 몇 분 내지 몇십 분을 기다려야 해당 key를 사용할 수 도 있습니다) Fetch! 우선 class component 방식은 아래와 같습니다. api 정보 중 wind (바람)의 speed 값만 표현하려고 합니다. const weatherAPI = "317e6f3e4ae59c61e364c9c3d15a02b3"; const cit.. 이전 1 다음
