react9 [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. [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. [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. [React] 문자열로 HTML 구조 데이터 다룰 때 DOMPurify 안전하게 사용하기 📌 HTML 구조 문자열 사용하기export const TestPage = () => { const testData = 'Tistory 테스트'; return( STRONG 테스트 {testData} )} ✅ testData에 입력된 html 태그는 그냥 문자열로 렌더링이 되어 태그를 그대로 확인할 수 있어요.이유는 React는 기본적으로 모든 출력값을 이스케이프(escape)하여 처리하는데 XSS(크로스사이트스크립팅) 공격을 방지하기 위한 기본 보안 기능이라고 합니다!{ } 를 사용하여 변수나 표현식을 렌더링할 때 항상 일반 텍스트로 취급하여 HTML, 스크립트로 해석하지 않습니다. 📍 React HTML로 렌더링 하기 dangerouslySetInnerHTM.. 2025. 4. 9. [React - Swiper.js] 옵션 정리 📌 Swiper.js 설정 옵션 가이드 🔗Swiperjs - api📍 Swiper 옵션 정보📗 많이 사용하는 기본 옵션옵션타입기본값 initialSlidenumber0초기 활성화될 슬라이드 인덱스direction"horizontal" / "vertical"horizontal슬라이드 방향loopbooleanfalse슬라이드 무한 루프speednumber300슬라이드 전환 속도slidesPerViewnumber / "auto"1한 번에 보여줄 슬라이드 개수spaceBetweennumber0슬라이드 간 간격(px)centeredSlidesbooleanfalse현재 슬라이드를 가운데 정렬slidesPerGroupnumber1그룹당 표시할 슬라이드 개수loopFillGroupWithBlankboolean.. 2025. 3. 19. [React Swiper.js] 설치 및 사용법 알아보기 📌 Swiper.js- 캐러셀 UI를 만들기 위해 사용되는 인기 있는 라이브러리 - 이미지 슬라이드 또는 콘텐츠 이동을 구현할 때 사용 - 웹과 앱에서 터치 및 반응형 최적화 - 간단한 사용법, 다양한 옵션 제공, 다양한 환경에서 커스터마이징 가능 🔗 Swiper 공식 문서 📍 기존 React 프로젝트에 Swiper 설치npm install swiper // 📍 SwiperTest.tsx// Import Swiper React componentsimport { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swiper/css';export const SwiperTest = () => { .. 2025. 3. 19. [React] 기존 React 프로젝트 TypeScript 적용 📌 TypeScript- TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어로, 정적 타입을 지원하고 확장자로 .ts를 사용하며 작성한 코드는 컴파일을 거쳐 JavaScript로 변환됩니다. - 가장 큰 특징은 정적 타입을 명시할 수 있다는 점. 이를 통해 개발 도구(IDE)와 컴파일러가 코드 자동 완성 타입 오류 감지 등의 피드백을 제공하여 생산성을 높이고 버그를 줄이며 유지보수를 쉽게 만듭니다. 👍즉, TypeScript는 실행 전에 타입 오류를 미리 잡아주는 역할을 하는 언어 ! 📍 기존 React 프로젝트에 TypeScript 설치npm i typescript @types/node @types/react @types/react-dom @typ.. 2025. 3. 12. [React forwardRef useImperativeHandle] 자식 컴포넌트 접근 ❌ React 19에서는 더 이상 사용하지 않는다고 하고 ref 대신 prop로 전달하는 방법으로 안내하고 있습니다. 📌 forwardRef - React에서 forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있도록 도와주는 기능. 🔗 react/forwardRef 📍 필요한 이유- 부모 컴포넌트가 자식 컴포넌트의 내부 DOM 요소에 직접 접근할 수 없지만 ref를 사용하면 DOM 요소에 접근할 수 있고, forwardRef를 활용하면 컴포넌트 간에 전달이 가능합니다! ✅ 사용 예- focus() : 부모 컴포넌트에서 자식 컴포넌트의 input 요소에 포커스 이- clear() : 입력 값을 지우는 메서드를 정의하여 부모에서 제어 가능하게 할.. 2025. 3. 11. [React Storybook] chromatic 으로 배포하기, 배포 후 빈 화면 400 (Bad Request) 에러 해결 chromatic 📌chromatic 사용해서 Storybook 배포하여 공유하기📍 chromatic - 컴포넌트의 비주얼 테스트(Visual Regression Testing)와 자동 배포를 쉽게 할 수 있는 도구.- Storybook을 배포하여 팀원들과 공유할 수 있다. 🔗 Storybook 참고 내용 - 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 사용하겠습니다. 🔗 Chromatic 📍Chromatic 가입 및 github 연동✅ GitHub로 회원 가입! ✅ Choose from GihHub 선택 - 레포지토리와 동기화- github > storybook이 설치된 레포지토리 선택 npm install --save-dev chromaticnpx chromatic --.. 2025. 2. 20. 이전 1 다음 반응형
