SMU개발자

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

서버, 클라이언트 사이드 렌더링이란? 서버 사이드 렌더링은 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..

SPA란? Single Page Application 즉, 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. 전통적인 웹 페이지는 여러 페이지로 구성되어 있습니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다. 이렇게 사용자에게 보이는 화면은 서버측에서 준비 했습니다. 전통적인 웹은 보통 동적인 html을 생성해주는 템플릿 엔진을 많이 사용했죠. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 새로운 화면을 보여주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있습니다. 트래픽이 너무 많이 나올 수 있고, 사용자가 몰려서 높은 부하가 쉽게 걸릴 수도 있습니다..

useCallback useMemo와 상당히 비슷한 함수로, 주로 렌더링 성능을 최적화할 때 사용합니다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다. 보통의 방식으로 하게 되면 컴포넌트가 리렌더링될 때마다 함수들이 새로 생성됩니다. 대부분의 경우 이 방식이 문제를 일으키지 않으나, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화 해주는 것이 좋습니다. useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야합니다. onChange처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 단 한번..

Hooks 리액트 v16.3에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. useState 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. import React, { useState } from "react"; const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상..

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 랜더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다. 리액트로 플젝을 하다보면 처름으로 렌더링 할 때 어떤 작업을 하거나 컴포넌트 업데이트 전후로 어떤 작업을 처리할 수도 있고, 또 불필요한 렌더링을 방지해야할 때도 있습니다. 이때 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프 사이클 메서드는 클래스형 컴포넌트에섬나 사용가능 합니다. 라이프사이클 메서드의 이해 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, ..