728x90 더 알아보기/기능84 Sentry [ Sentry란? ] 자체 호스팅 및 클라우드 기반 오류 모니터링을 제공하여 모든 소프트웨어 팀이 실시간으로 오류를 발견하고 심사하고 우선 순위를 정할 수 있도록 제공하는 관제 솔류션입니다. Exception이나 오류, 로그들을 그룹화 해서 빈도수를 체크하고 이벤트 그룹화 및 시각화 해서 볼 수 있다는 장점이 있습니다. [ Sentry의 장점 ] 실시간으로 프로그램 이슈를 트래킹 하거나 에러가 발생하면 설정에 따라 특정 사용자나 그룹에 알림을 보낼 수도 있습니다. 만약 Slack이나 카카오 워크 같은 팀내 현업 도구를 사용한다면 해당 채팅방으로 알림을 보내는 것도 가능하다. 카카오에서는 이러한 시스템들이 잘 구축되어 있어서 Sentry가 해당 관리 서비스의 DSN만 명시해주면, 알아서 카카오톡에서 알람.. 2022. 1. 24. WebSocket [ 서버가 유저와 데이터를 주고 받고 싶을 때는?? ] (옛날) 1) HTTP : http 요청은 문제 메세지랑 비슷하다. 하지만, 서버가 선톡은 절대 하지 않는다. (현재) 1) Server-Send Event (서버의 단방향 통신) : http 통신을 종료하지 않고도 계속 유지 할 수 있다. 정해진 시간마다 서버가 사용자에게 데이터를 전송한다. 단점으로는 서버만 일방적으로 데이터를 보낼 수 있다. (ex 라디오) 즉, 지속적인 데이터 수신만 가능 2) WebSocket (서버와 사용자의 양방향 통신) : WebSocket은 전화 하는 것과 똑같다. 사용자가 서버에게 "오늘부터 웹소켓 할래?"라고 물으면 서버는 동의나 비동의를 날려주고 동의를 할 경우 양방향 통신이 가능하다. [ 사용법 ] termin.. 2022. 1. 24. React-PWA-Install React 프로젝트에 PWA를 적용하던 중 Android나 웹에서는 PWA가 적용이 되지만 IOS에서는 적용이 안된다는 한계점이 있었고, 모바일로 봤을 때 설정을 들어가서 설치를 해야 한다는 번거로움이 있어 react-pwa-install 라이브러리를 사용해서 사용자가 설치 유무를 빠르고 쉽게 선택 할 수 있도록 적용 해보았다. react-pwa-install Install support for your PWA on several platforms www.npmjs.com [ React-Pwa-Install이란? ] PWA 설치(홈 화면에 추가라고도 함)는 브라우저마다 다르게 처리 되기 때문에 사용자에게 이 옵션을 편리하게 제공하기가 다소 어렵습니다. 현재 Chrome, Edge 및 Samsung 인터넷.. 2022. 1. 21. react-div-100vh 모바일 화면에 맞춰 높이를 100vh로 맞춰주는 라이브러리이다! https://www.npmjs.com/package/react-div-100vh react-div-100vh A workaround for the '100vh' issue in mobile browsers www.npmjs.com 2022. 1. 20. AWS Amplify로 CI/CD 적용하기 CI/CD로 AWS에 React 앱 배포 실망을 드려 죄송합니다. 오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오. aws.amazon.com [ AWS 가입하기 ] AWS Amplify 콘솔에 들어가기 위해서는 AWS 계정이 필요합니다. AWS Amplify를 사용하는 데 따르는 추가 요금은 없습니다. (AWS 사이트에 들어가서 가입 또는 로그인 후 다음 단계를 진행 할 수 있습니다.) 환경 설정 확인 터미널을 열고 아래 명령을 입력합니다. node -v; 이 명령이 v8.0 미만을 반환하면 노드를 버전 8보다 높은 버전으로 업그레이드 합ㄴ다. 이 명령이 노드를 찾지 못하면 nodejs.org/download에서 노드를 설치 하시면 됩니다.. 2022. 1. 19. React.js에서 쉽게 반응형 웹 페이지 만들기 → react-device-detect 실전 프로젝트 Zzz는 웹보다는 앱을 기반으로 하는 서비스이기 때문에 사용자가 모바일에서 접속 시 모바일 사이즈에 맞춰 화면을 보여줘야 하는 데(반응형으로) media query를 사용해서 반응형으로 제작 할 수도 있지만, 웹 사이트에서도 모바일 사이즈에 맞춰 화면을 보여주기 때문에 react-device-detect를 사용해서 웹과 모바일을 구분해서 사용자에게 화면을 보여줄 계획이다. 패키지 설치 npm install react-device-detect --save or yarn add react-device-detect 패키지 적용 import React from "react"; import "./App.css"; import { BrowserView, MobileView, isMobile } fro.. 2022. 1. 10. PWA(Progressive Web App)란? + 적용하는 방법 Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고 해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다. PWA(Progressive Web App)란? : 인터넷 웹사이트의 파일들(html, javascript, css, images같은..)을 컴퓨터에 잘~ 저장(캐싱)해 놨다가 다시 요청이 올 때 저장(캐싱)된 파일들을 먼저 보여주고 필요할 떄 웹서버에 있는 데이터를 받아서 보여주는 기술과 홈스크린에 바로가기 아이콘을 설치 할 수 있게 하는 기술, 그리고 서버의 소식을 클라이언트에 전하는 Push 기술 입니다. PWA를 통해서 사용자는 모바일 앱과 같은 사용.. 2022. 1. 8. Toggle Switch 기능 만들기 [2탄] - 패키지 설치 설치 할 패키지 없습니다 😊 - 기존 코드 https://www.geeksforgeeks.org/how-to-create-a-toggle-switch-in-react-as-a-reusable-component/ How to Create a Toggle Switch in React as a Reusable Component ? - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company.. 2022. 1. 3. Toggle Switch 기능 만들기 [1탄] - 패키지 설치 yarn add @mui/material @emotion/react @emotion/styled - 기본 설정 : 공식 문서에는 여러 개의 예제 코드가 나와 있어서 기본적인 toggle 예제만 사용해서 구현했다. // src/pages/pushNoticationPop.js // 푸시 알림 팝업 페이지 import React from "react"; import Modal from "react-modal"; import Switch from "@mui/material/Switch"; // 😀 import { useHistory } from "react-router-dom"; import { useDispatch } from "react-redux"; import { actionCreator.. 2021. 12. 27. 이전 1 ··· 5 6 7 8 9 10 다음 728x90
