01🔥 파이어베이스 (Firebase)란?Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다. 기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다. 특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.02Firebase 프로젝트 생성하기Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합..
✅❌📌👉01API (Application Programming Interface) 란API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말로, API는 애플리케이션 간에 데이터를 주고받을 수 있도록 돕는 "언어"라고 할 수 있습니다. 예를 들어, 날씨 앱을 켤 때, 앱은 날씨 정보를 제공하는 API에 "오늘 날씨가 어때요?"라고 묻고, API는 날씨 정보를 반환합니다. 이렇게 서버와 클라이언트 간에 데이터를 교환할 때 API가 중요한 역할을 하죠. 1. API 역할API는 클라이언트와 서버 간에 데이터를 주고받는 중요한 역할을 합니다.예를 들어, 우리가 웹사이트에서 정보를 요청할 때, 서버에서 데이터를 받아오는 방식을 API가 처리한다고 생각하..
React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다. 하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";..
프론트엔드 개발을 하다 보면 코드가 엉켜 보이고, 팀원 간 스타일이 달라져서 혼란스러울 때가 많습니다. 이럴 때 필요한 게 바로 ESLint와 Prettier입니다. 이 글에서는 두 도구의 역할과 설정 방법을 간단하고 명확하게 소개합니다.01ESLintESLint는 자바스크립트 코드의 오류를 빠르게 찾아주는 도구입니다. 코드에서 발생할 수 있는 버그나 잘못된 문법을 자동으로 감지하고 알려줍니다.1. ESLint의 장점사소한 실수나 버그를 사전에 예방합니다.코드 품질을 일정하게 유지할 수 있습니다.협업 시 코드 리뷰 시간을 줄여줍니다.2. 설치 및 기본 설정npx eslint --init을 입력하면 몇 가지 질문에 답하면 됩니다(단 package.json 파일이 미리 생성되어 있어야 합니다.)npm ins..
지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..
React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다! 01Context와 ProviderReact의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.1. Context 란?Context는 데이터를 저장하는 "저장소" 역할을 합니다.React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.import { createContext, useContext } from "react";// Context 생성export const AuthContext = crea..
GitHub OAuth를 이용하면 소셜 로그인을 쉽게 구현할 수 있습니다.이 글에서는 GitHub OAuth App을 등록하는 방법부터 로그인 흐름, 구현까지 간단히 정리해 보겠습니다.01Github OAuth App 등록하기1. 설정 메뉴로 이동하기먼저 GitHub에 로그인한 후, Settings > Developer settings > OAuth Apps로 이동합니다. 2. 앱 정보 입력하기필요한 정보를 입력해 앱을 등록합니다.Application name: 웹사이트 이름HomePage URL: 내 웹사이트 주소Application description: 사이트 설명 (선택 사항)Authorization callback URL: 인증 완료 후 GitHub 인증 서버가 코드를 보낼 URL모든 정보를 입..
구글이나 소셜 계정으로 로그인하는 건 정말 편리하죠! 그런데 문득 궁금해졌습니다."내 비밀번호를 외부 사이트에 알려주지 않아도 로그인이 되는 이유는 뭘까?"찾아보니, 그 답은 바로 OAuth라는 기술이었습니다.이번 글에서는 OAuth가 어떻게 작동하는지, 그 원리를 제가 보기 편하게 정리해 보겠습니다." 인증과 인가 "인증(Authentication): 인증은 사용자가 누구인지 확인하는 과정입니다.예를 들어, 로그인 화면에서 ID와 비밀번호를 입력해 본인임을 증명하는 것이죠.인증이 성공하면, 서비스는 "이 사람은 OOO다"라고 신원을 확인합니다.인가(Authorization): 인가란 인증된 사용자가 어떤 권한을 가지는지 결정하는 과정입니다.예를 들어, "OOO 사용자가 특정 파일에 접근하거나 데이터를 ..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.