BaaS (Backend as a Service)서버 없이도 빠르게 어플리케이션을 출시할 수 있게도와주는 구글에서 만든 플랫폼firebase기능1. 앱 개발을 쉽게 (백엔드)강력한 가입 인증 (Auth)실시간 데이터베이스 2. 앱 기능 향상실시간 충돌 데이터 확인앱 퍼포먼스 모니터링기기별 테스트 지원 3. 앱 성장분석 및 원격클라우드 메시지 (푸시)다이나믹 링크 (딥 링크)인앱 메시지 (채팅x 쪽지o) 장점다양한 서비스와 폭넓은 연동 지원적용이 매우 쉽고 문서화가 잘 되어있음커뮤니티가 매우 성숙함앱/웹에서 단순하게 사용 가능한 NoSQL 기반 단점오픈소스가 아님복잡한 쿼리 불가능사용자가 많아지면 비용이 많이 듦앱 개발에는 월등히 좋지만, 웹 개발에 최적은 아님 supabase 장점오픈소스 프로젝트 (자체..

예를 들어 Redis 를 다운받을 경우 공식 문서의 명령어를 그대로 실행하면 에러가 발생함 wget 이 없기 때문에 먼저 wget 을 다운로드 받은 후에 redis 를 받아야 함 wget http://download.redis.io/releases/redis-6.0.4.tar.gz tar xzf redis-6.0.4.tar.gz cd redis-6.0.4 make 이렇게 특정 프로그램을 다운로드 할 때 부수적인 것들도 함께 다운로드 받아야 하기 때문에 설치 과정이 복잡해지고 에러 발생 가능성이 높아짐 docker run -it redis 도커를 이용해 Redis 를 다운받는 경우 설치 과정이 간단해지고 예상치 못한 에러를 방지할 수 있음 Docker 컨테이너를 사용하여 응용 프로그램을 더 쉽게 제작/배포..

SWR 데이터를 가져오기 위한 React Hooks 요청을 하는 동안 캐시되어 있는 데이터를 먼저 보여줌 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}! } useSWR hook 은 key, fetcher 함수, options 를 전달받고 data, error 를 반환함 key: 데이터의 고유한 식별자 (일반적으로 API URL) fetcher: 데이터를 반환하는 비동기 함수 options: S..

react-query / devtools 설치 npm install @tanstack/react-query @tanstack/react-query-devtools QueryClientProvier / devtools 추가 import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // client 생성 const queryClient = new QueryClient(); export default function App() { return ( // 앱에 client 제공 // devtools ) } useQuery import ..

NextJS React 의 SSR을 쉽게 구현할 수 있도록 도와주는 프레임워크 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 HTML을 가져옴 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지 전달 가능 CSR (Client Side Rendering) 클라이언트에서 빈 html 파일에 자바스크립트 파일을 해석하여 페이지를 렌더링함 자바스크립트가 로드 되지 않은 페이지는 검색엔진 최적화(SEO)에 문제가 됨 SSR (Server Side Rendering) 서버에서 자바스크립트를 미리 로딩하여 페이지를 렌더링함 클라이언트에서의 자바스크립트 로딩 시간이 줄어듦 서버에서 자바스크립트, html, css를 만들기 때문에 검색엔진 최적화(SEO)에 좋음 패키지 설치 npx create-ne..

HTTP 는 상태 비저장 프로포콜 서버가 여러 요청 기간동안 각 사용자에 대한 정보/상태를 유지할 필요가 없음 각 요청에 대한 연결을 재설정하는 데 소요되는 시간을 최소화하기 위해서임 Token 1. 클라이언트에서 서버로 첫 요청을 보냄 2. 서버에서 사용자 정보를 포함하는 token 을 생성함 3. 서버에서 클라이언트로 token 을 보냄 4. 클라이언트에서 token 을 받아 저장함 5. 클라이언트에서 token 과 함께 서버로 요청을 보냄 6. 서버는 token 을 복호화하여 사용자 정보를 알 수 있음 JWT (JSON Web Token) 당사자간에 정보를 JSON 객체로 안전하게 전송하기 위한 컴팩트하고 독립적인 방식의 표준 디지털 서명이 되어있기 때문에 신뢰 가능 Header 토큰에 대한 메타 ..