본문 바로가기

전체 글32

[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.
[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.
[JavaScript] 전체 글자, 첫글자 대소문자 변경 📌 텍스트 대 소문자 변경📍 텍스트 전체 대문자- toUpperCase() 메서드를 사용하여 문자열 전체를 대문자로 변경// toUpperCase - 대문자const text = 'tistory blog';console.log(text.toUpperCase()); // TISTORY BLOG  📍텍스트 전체 소문자- toLowerCase() 메서드를 사용하여 문자열 전체를 소문자로 변경// toLowerCase - 소문자const text = 'TISTORY BLOG';console.log(text.toLowerCase()); // tistory blog  📍 텍스트 첫글자만 대문자const text = 'tistory blog';console.log(text.charAt(0)) // tconso.. 2025. 4. 2.
[JavaScript] forEach, map, flatMap, filter, find, findIndex, reduce, reduceRight, some, every 배열 메서드 📌 JavaScript 배열 메서드- 배열을 순회하고 처리하는 데 유용한 다양한 메서드들 소📍 forEach- 배열의 각 요소를 반복 실행- 반환값은 없으며 반복문처럼 요소를 처리할 때 주로 사용// 배열 값과 순서(index)const arr = ['a', 'b', 'c', 'd'];arr.forEach((val,idx) => { console.log(val) // 'a', 'b', 'c', 'd' console.log(idx) // 0, 1, 2, 3});// 배열 값 누적const number = [1,2,3,4];let sum = 0;number.forEach(num => sum += num);console.log(sum); // 10 📍map - 배열의 각 요소를 특정 함수로 변환하여 .. 2025. 3. 26.
반응형