전체 글35 [Firebase Authentication] React - 회원가입, 로그인, 로그아웃, 구글 계정 로그인 📌 Firebase Authentication이란?- Firebase에서 제공하는 사용자 인증 서비스- 이메일/비밀번호, Google, Facebook, GitHub, Apple 등 다양한 로그인 제공 - 인증된 사용자에게 UID 제공 → 보안 기반 서비스 구현 가능 📍Authentication 시작하기 🔗 firebase console ✅ 빌드 > Authentication > 시작하 ✅ 이메일/비밀번호로 로그인 방법을 추가!이후에 추가 제공 업체에서 google 또는 github 등 추가로 로그인을 진행할 수 있도록 추가 ✅ 사용 설정 완료 후 프로젝트 내 firebas.ts 수정 📍firebase.ts getAuth 추가// firebaseimport { initializeApp } .. 2025. 6. 25. [Firebase] React - 조회, 추가, 수정, 삭제 📌 Friebase 📍프로젝트 생성 - 참고 [Firebase] 파이어베이스 프로젝트 생성 및 연동📌 Firebase란?파이어베이스(Firebase)는 2011년 파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 웹/모바일 앱 개발의 여러 측면을 간소화해주는 Google의 플랫폼 🔗 Firebase Firebase | Google'sth91.tistory.com※ Firebase Console 접속 ➡️ 새 프로젝트 생성 ➡️ 웹 앱 등록 후 아래와 같이 진행. 📍 React - firebase 설치npm install firebase 📍 firebase.ts / .env 생성✅ firebase.ts - 개인 Firebase SDK 설정 정보 앱 등록 시 SDK.. 2025. 6. 18. [React Icons] React 아이콘 라이브러리 사용 및 v5.5.0, TypeScript 문제 해결 📌React Icons란?- 인기 있는 아이콘 라이브러리들을 쉽게 사용할 수 있게 해주는 라이브러리- Font Awesome, Material Design Icons, Bootstrap Icons, Feather 등 다양한 아이콘 세트를 통합하여 일관된 방식으로 제공. - ES6 가져오기를 활용해서 프로젝트에서 사용 중인 아이콘만 포함할 수 있습니다. 📍React Icons 설치npm install react-icons 📍 사용하기확인용으로 react 검색 후 react 아이콘에 대한 정보를 확인! 🔍 검색을 통해 원하는 아이콘을 보다 쉽게 찾을 수 있어서 사용하기 편하고여러 종류의 아이콘을 미리보기로 확인할 수 있는 점에서 원하는 아이콘을 쉽고 빠르게 찾아서 사용할 수 있어요! // r.. 2025. 5. 29. [Firebase] 파이어베이스 프로젝트 생성 및 연동 📌 Firebase란?파이어베이스(Firebase)는 2011년 파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 웹/모바일 앱 개발의 여러 측면을 간소화해주는 Google의 플랫폼 🔗 Firebase Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com - 서버 구축 없이 바로 백엔드 기능 사용 가능- 실시간 데이터 베이스 (Firestore Database)- 인증 시스템 (Google, Email, GitHub 등)- 클라우드 스토리지 (.. 2025. 5. 21. [React highlight.js] 사용, 라인 번호, 복사 기능 📌highlight.js 사용 - highlight.js는 코드 구문 강조를 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리 📍설치// 🔽 저는 기본 highlight.js 진행npm install highlight.js// ✅ 아래와 같은 방법으로 위와 다르게 설치 후 편하게 사용할 수 있습니다.// 1npm install react-highlight// 2 👍npm install react-syntax-highlighter// import import hljs from 'highlight.js';// css 테마import 'highlight.js/styles/default.css'; 📍테마 변경하기테마 리스트테마 Demo 미리보기 ✅ import 'highlight.js/s.. 2025. 5. 12. [highlight.js] 구문 강조, 번호 추가, navigator.clipboard 복사 📌 highlight.js란? - highlight.js는 코드 구문 강조를 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리- 코드 블록을 감지해서 언어에 맞게 색상과 스타일을 자동으로 적용- 다양한 테마를 활용하여 디자인에 맞게 코드 스타일 적용 가능 🔗 highlight.js.org highlight.jsUsage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module .. 2025. 5. 7. [CSS] input 자동완성 시 생기는 배경 컬러 수정 📌 input 자동완성 배경 컬러 강제 지정✅ 브라우저에서 input 사용 시 text, email, password 등에 자동완성을 적용하면 배경색이 푸른색으로 강제 적용 되는 문제! - 브라우저 내부적으로 input:-webkit-autofill 스타일이 강제로 적용📍 해결 방법// CSSinput:autofill,input:autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; border:1px solid #dbdbdb; transition: none;}✔️ box-shadow: input 내부에 아주.. 2025. 4. 11. [JavaScript] moment.js로 쉽게 날짜, 시간 사용 및 기간 설정 📌 Moment.js란?- JavaScript 날짜 및 시간을 쉽게 다룰 수 있게 해주는 라이브러리- 기존의 Date 객체와 다르게 간결하고 다양한 포맷 지원, 날짜 계산까지 쉽게 해결할 수 있습니다📍moment CDN, 설치(React, Vue)// CDN// React, Vuenpm install moment 📍 moment 기능 📂 분류 🧩 기능 💻 예시 코드 📌 설명 기본현재 날짜/시간moment()현재 시각을 Moment 객체로 가져옴특정 날짜 생성moment('2025-05-15')지정된 날짜를 Moment 객체로 생성포맷팅기본 포맷moment().format('YYYY-MM-DD')'YYYY-MM-DD' 형식으로 날짜 출력시간 포함 포맷moment().format('YYYY.. 2025. 4. 10. [Vue] 기존 github Repositories & Vue 설치 📌 Vue + github📍 github 생성된 Repositories clone ✅ Repositories clone 복사 후 원하는 경로에서 아래와 같이 git clone !git clone [복사한 url] ✅ clone한 저장소 확인하기 - git remote -v 명령어를 통해 로컬 저장소에 연결된 원격 저장소의 목록과 url을 확인// 명령어 실행git remote -v 🔽 아래와 같이 확인할 수 있어요origin https://github.com/github이름/repository이름.git (fetch)origin https://github.com/github이름/repository이름.git (push)✅ pull, push를 통해 확인 체크 📍 Vue 설치 및 확인- 🔗 V.. 2025. 4. 9. 이전 1 2 3 4 다음 반응형
