SMU개발자

웹 어플리케이션에서 사용자에게 푸시 알림을 보내는 기능을 구현하는 방법을 정리해보겠습니다.개요Firebase Cloud Messaging(FCM)은 웹, IOS, Android 앱에서 푸시 알림을 보낼 수 있을 크로스 플랫폼 메시징 솔루션 입니다.Firebase 프로젝트 설정Firebase Console 에 접속새 프로젝트 생성 또는 기존 프로젝트 선택앱 웹 추가 ( 아이콘 클릭)SDK 설정 정보 및 VAPID KEY 발급저는 간단하게 memos 라는 프로젝트에 push라는 이름으로 라는 플랫폼으로 생성했습니다. 좌측상단에 톱니바퀴 > 프로젝트 설정그러면 가이드대로 npm으로 firebase 설치해주고 firebaseConfig는 저장해줍니다. 그리고 위로 올려서 "클라우드 메시징" 탭에서 VAPID ..

개발을 하다보면 내가 원하는 key와 value를 가지고 JSON 형태의 데이터를 만들고 싶을 때가 있다. 구글링하다보면 결국 나오는 정보지만 막상 필요할 땐 바로 서치가 안되서 이를위해 아래의 예제를 남기려한다. const stockArr = ["apple 80", "google 50"]; let eachStockArr = []; for(let i=0; i

무한 스크롤에서 사용되는, 스크롤이 맨 아래로 왔을 때 moreData를 호출하는 로직 $(document).ready(function(){ //window는 "#searchPopup"등 으로 스크롤 주체로 변경가능 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var innerHeight = $(this).innerHeight(); var scrollHeight = $(this).prop('scrollHeight'); if(scrollTop + innerHeight >= scrollHeight) { moreData(); } }); }); 스크롤 주체가 어떤 영역인지 모를땐, 스크롤을 내리면서 $('#searchPopup').scro..

로그인이 필요한 서비스에 접근 시 비로그인일 경우 로그인 페이지로 이동이 될 것이다. 그리고 사용자 편의를 위해 로그인 후 이전 페이지로 돌아와 원래 하려던 작업을 할 수 있도록 소스 구현이 필요한데 아래와 같은 소스가 자주 사용된다. location.href = "/login?returnUrl="+location.href; 이렇게 사용할 경우 손쉽게 처리가 가능하지만 한 가지 문제를 직면할 수 있다. 만약 location.href의 값이 "/event/view?mbrId=abc&addr=korea&gender=M" 위와같이 되어 있고 위 정보들이 모두 필요하다면 서버에서 returnUrl은 mbrId=abc까지만 받아지고 그 뒤에 주소와 성별은 짤리게 되는 현상이다. 이는 뒤의 값을 다른 파라미터로 인..

앱에서 에 붙여넣기 시 텍스트 카운트가 안되는 현상이 있습니다. 이와 같은 이유로는 보통 PC환경에서는 keyup이나 blur 이벤트로 실시간 텍스트 카운트 처리를 하게 되는데 모바일 환경에서도 같은 소스를 적용시키기 때문입니다. keyup이기때문에 아무래도 모바일의 키패드가 나와서 눌러줘야 keyup이벤트가 발생하는것으로 보이며 이와 관련해서는 다른 처리가 필요합니다. 그것은 keyup 이벤트를 미리 구현해 놓고 bind 함수를 통해서 keyup 이벤트를 트리거하여 처리가 가능합니다. $("#inputTextarea").on('keyup', function(e) { e.preventDefault(); var content = $(this).val(); $(".inputWrap .count").text(..

서버, 클라이언트 사이드 렌더링이란? 서버 사이드 렌더링은 UI를 서버에서 렌더링 하는 것을 의미합니다. 서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문 했을 때 서버쪽에서 초기 렌더링을 대신 해주는 것 입니다. 그리고 사용자가 html을 전달 받았을 때 그 내부에 렌더링된 결과물이 보입니다. 반대로 클라이언트 사이드 렌더링은 브라우저에서 모두 처리하는 것이죠. 즉, 자바스크립트를 실행해야 우리가 만든 화면이 사용자에게 보입니다. 처음에는 빈 페이지로 시작하여 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 화면이 보이는 것입니다. 서버 사이드 렌더링의 장점 일단 구글, 네이버, 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 ..

리액트 앱은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트가 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. 만약 C 컴포넌트가 전역 상태를 업데이트 시키는 기능을 담당한다면 App에서는 const [value, setValue] = useState('hello'); 생성하여 App > A > B > C 순으로 전달해야 합니다. 이렇게 여러 번에 거쳐서 전달하게 될 경우 유지 보수성이 낮아질 가능성이 높기 때문에 Context API를 사용하여 Context에 만들어서 단 한 번에 원하는 값을 받아와 사용할 수 있습니다. import { createContext } from "react"; const ColorContext = create..

Route 사용하기 실습할 프로젝트를 생성하고 해당 프로젝트 안에서 react-router-dom을 설치하자. yarn add react-router-dom 그리고 라우터를 적용할 때는 src/index.js 파일에서 BrowserRouter 컴포넌트로 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWor..