왓누씨의 개발일기
close
프로필 배경
프로필 로고

왓누씨의 개발일기

  • 분류 전체보기 (60)
    • DEVELOPMENT (58)
      • HTML & CSS (1)
      • JavaScript (18)
      • React.js (14)
      • Typescript (11)
      • Next.js (2)
      • Node.js (1)
      • PROJECT NOTES (9)
      • PROJECTS (2)
    • 일상 (0)
      • 생각나누기 (0)
    • ...기타 (2)
      • BOOK CLIP (0)
      • REVIEW (2)
  • 홈
  • 태그
  • 방명록
🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법

🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법

01🔥 파이어베이스 (Firebase)란?Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다. 기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다. 특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.02Firebase 프로젝트 생성하기Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합..

  • format_list_bulleted PROJECT NOTES
  • · 2025. 3. 8.
  • textsms
API와의 첫 데이트, 너무 떨지 마!

API와의 첫 데이트, 너무 떨지 마!

✅❌📌👉01API (Application Programming Interface) 란API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말로, API는 애플리케이션 간에 데이터를 주고받을 수 있도록 돕는 "언어"라고 할 수 있습니다. 예를 들어, 날씨 앱을 켤 때, 앱은 날씨 정보를 제공하는 API에 "오늘 날씨가 어때요?"라고 묻고, API는 날씨 정보를 반환합니다. 이렇게 서버와 클라이언트 간에 데이터를 교환할 때 API가 중요한 역할을 하죠. 1. API 역할API는 클라이언트와 서버 간에 데이터를 주고받는 중요한 역할을 합니다.예를 들어, 우리가 웹사이트에서 정보를 요청할 때, 서버에서 데이터를 받아오는 방식을 API가 처리한다고 생각하..

  • format_list_bulleted PROJECT NOTES
  • · 2025. 2. 19.
  • textsms
Vercel 배포, 누르기 전에 딱 5분만 확인!

Vercel 배포, 누르기 전에 딱 5분만 확인!

React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다.  하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";..

  • format_list_bulleted PROJECT NOTES
  • · 2025. 2. 17.
  • textsms
잔소리는 많지만 유익한 친구들 ESLint와 Prettier

잔소리는 많지만 유익한 친구들 ESLint와 Prettier

프론트엔드 개발을 하다 보면 코드가 엉켜 보이고, 팀원 간 스타일이 달라져서 혼란스러울 때가 많습니다. 이럴 때 필요한 게 바로 ESLint와 Prettier입니다. 이 글에서는 두 도구의 역할과 설정 방법을 간단하고 명확하게 소개합니다.01ESLintESLint는 자바스크립트 코드의 오류를 빠르게 찾아주는 도구입니다. 코드에서 발생할 수 있는 버그나 잘못된 문법을 자동으로 감지하고 알려줍니다.1. ESLint의 장점사소한 실수나 버그를 사전에 예방합니다.코드 품질을 일정하게 유지할 수 있습니다.협업 시 코드 리뷰 시간을 줄여줍니다.2. 설치 및 기본 설정npx eslint --init을 입력하면 몇 가지 질문에 답하면 됩니다(단 package.json 파일이 미리 생성되어 있어야 합니다.)npm ins..

  • format_list_bulleted PROJECT NOTES
  • · 2025. 2. 3.
  • textsms
Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..

  • format_list_bulleted PROJECT NOTES
  • · 2024. 12. 31.
  • textsms
유저 상태를 Provider로 비비고, Context로 비비자!

유저 상태를 Provider로 비비고, Context로 비비자!

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..

  • format_list_bulleted PROJECT NOTES
  • · 2024. 12. 26.
  • textsms
GitHub 로그인 구현? 생각보다 너무 쉽다! (진짜 쉽다…)

GitHub 로그인 구현? 생각보다 너무 쉽다! (진짜 쉽다…)

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모든 정보를 입..

  • format_list_bulleted PROJECT NOTES
  • · 2024. 12. 19.
  • textsms
네 구글 로그인이 안전한 이유, 사실은 OAuth 덕분이지

네 구글 로그인이 안전한 이유, 사실은 OAuth 덕분이지

구글이나 소셜 계정으로 로그인하는 건 정말 편리하죠! 그런데 문득 궁금해졌습니다."내 비밀번호를 외부 사이트에 알려주지 않아도 로그인이 되는 이유는 뭘까?"찾아보니, 그 답은 바로 OAuth라는 기술이었습니다.이번 글에서는 OAuth가 어떻게 작동하는지, 그 원리를 제가 보기 편하게 정리해 보겠습니다." 인증과 인가 "인증(Authentication): 인증은 사용자가 누구인지 확인하는 과정입니다.예를 들어, 로그인 화면에서 ID와 비밀번호를 입력해 본인임을 증명하는 것이죠.인증이 성공하면, 서비스는 "이 사람은 OOO다"라고 신원을 확인합니다.인가(Authorization): 인가란 인증된 사용자가 어떤 권한을 가지는지 결정하는 과정입니다.예를 들어, "OOO 사용자가 특정 파일에 접근하거나 데이터를 ..

  • format_list_bulleted PROJECT NOTES
  • · 2024. 12. 15.
  • textsms
  • navigate_before
  • 1
  • 2
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (60)
    • DEVELOPMENT (58)
      • HTML & CSS (1)
      • JavaScript (18)
      • React.js (14)
      • Typescript (11)
      • Next.js (2)
      • Node.js (1)
      • PROJECT NOTES (9)
      • PROJECTS (2)
    • 일상 (0)
      • 생각나누기 (0)
    • ...기타 (2)
      • BOOK CLIP (0)
      • REVIEW (2)
최근 글
인기 글
최근 댓글
태그
  • #JavaScript
  • #TypeScript
  • #실습예제
  • #html
  • #page router
  • #모던자바스크립트 deep dive
  • #한입챌린지
  • #css
  • #Promise
  • #React
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.