본문 바로가기

라이브러리 도구22

[firebase storage] javascript 사용법(최신버전)

storage에 파일 업로드방법 업로드 컴포넌트 export default function MakeTweet() { const [preview, setPreview] = useState(null); const [file, setFile] = useState(null); function uploadFile({target: {files}}) { if(!file) return; const [file] = files; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = ({ target: {result}}) => { // result : '' setPreview(result); } } return ( ) } 업로드 fir.. 2022. 7. 13.

[fireStore] 최신 버전편. document field 업데이트하기. React 적용

firebase 최신 문법으로 적용함. Javascript + React 웹 애플리케이션 document에 속한 field 값 수정하기 문서: https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document Cloud Firestore에 데이터 추가 | Firebase Documentation 의견 보내기 Cloud Firestore에 데이터 추가 다음과 같은 몇 가지 방법으로 Cloud Firestore에 데이터를 쓸 수 있습니다. 문서 식별자를 명시적으로 지정하여 컬렉션 내의 문서 데이터를 설정합니다. 컬 firebase.google.com 적용 코드 import { getFirestore, collection, setDoc.. 2022. 7. 6.

[vue-advance-cropper] cropper를 이미지 전체로 적용하기

개요 요구사항으로 이미지 전체를 cropper로 덮고 시작하자는 개선사항이 들어왔다. *cropper 참고 https://norserium.github.io/vue-advanced-cropper/components/cropper.html#props 개선 전 cropper가 이미지 부분만 잡고있다. 해결 방법 결과 cropper가 이미지 전체를 잡게 되었다. 2022. 7. 5.

[npm 만들기]

npm 가입 npm에 패키지를 만들어 배포하기 위해서는 계정이 있어야 합니다. 팀 내에서만 사용 가능하게 설정 깃헙에 레포지토리 생성 vue.js 컴포넌트 만들기 npm package 만들기 package.json 설정하기 { "name": "vue-cropper", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14" }, "devDependencies": { "@babel/core": ".. 2022. 6. 28.

[firebase-firestore] 실시간 컬렉션 데이터 불러오기

https://firebase.google.com/docs/firestore/query-data/listen Cloud Firestore로 실시간 업데이트 가져오기 | Firebase Documentation 의견 보내기 Cloud Firestore로 실시간 업데이트 가져오기 onSnapshot() 메서드로 문서를 수신 대기할 수 있습니다. 사용자가 제공하는 콜백이 최초로 호출될 때 단일 문서의 현재 콘텐츠로 문서 스냅샷 firebase.google.com Firestore document 삭제 여기서 document는 tweet이라는 document임 문서 삭제 관련 문서: https://firebase.google.com/docs/firestore/manage-data/delete-data#delet.. 2022. 6. 28.

[firebase] 로그인 인증 구현 + React

로그인 확인 isLogedin api https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#onauthstatechanged Auth | JavaScript SDK | Firebase Reference for Auth firebase.google.com getAuth().onAuthStateChanged() 유저의 로그인 상태 변화 실시간 체크 API import {getAuth} from "firebase/auth" function App () { const auth = getAuth(); const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { auth.onAuth.. 2022. 6. 27.

[VSCODE] Github에 코드 올리는 방법

1. 빨간 칸 클릭 2. git add . 명령어를 GUI방식으로 실행 3. commit 메시지 작성 4. git commit -m '- hour 및 minute input 추가 - recoil atom 생성' 명령어를 GUI 방식으로 실행 5. git push origin/master 6. 깃허브페이지 확인 끗 2021. 12. 26.

[chart.js in vue.js] data label 없애는 설정 방법

개요 chart.js + vue.js로 개발하고 있습니다. chart를 생성했을 때, 아래 그림처럼 차트 포인터 위에 데이터 라벨이 표시되고 있었습니다. 제품의 요구사항이 아니였어서 없애야 했습니다. chart.js line chart 어노테이션이 표시되는 설정 없애는 방법 plugins.datalabels.display: false 👇 사용 코드 makeChartDataForm: (aData, aIndex) => { const ctx = document.getElementById(`chart-${aIndex}`).getContext('2d'); gChart = new Chart(ctx, { type: 'line', data: aData, options: { responsive: true, maintai.. 2021. 11. 11.

[chartjs] tooltip 설정 방법

개요 안녕하세요. 일단, 제품 쪽 차트 작업하면서 문제가 있었습니다. 저희 제품은 vue.js 2.x + javascript + chartjs 라이브러리를 사용하고 있습니다. 아래의 그림이 문제 현상입니다. 문제 문제는 차트에 마우스를 올려대면, tooltip이 등장하는데, x축 선상에 있는 point가 아니라, 각 차트의 첫 번째 인덱스를 point하고 있습니다. 저희 제품 요구사항은 x축 선상에 있는 차트의 데이터만 tooltip에 표시하는 것이었습니다. 원인 파악 코드에서 chartjs tooltip 설정을 확인했습니다. 다음과 같았습니다. options: { type: 'line', data: //... // ... plugins: { tootip: { enabled: true, // true |.. 2021. 11. 8.

tailwindcss 사용법 알아보기

css framework입니다. html 요소에 간단한 word로 요소에 스타일을 줄 수 있게해 줍니다. 깡 css로만 프로젝트 하나를 완성시켜 봐서 알지만 추천할 만한 방법이 아닙니다. UI-component나 tailwindcss같은 css framework를 사용하는 것을 추천합니다. 생산성과 유지보수를 위해서! tailwindcss의 사용법입니다. 설치 tailwindcss 설치 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 CRACO(Create React App Configuration Override) babel, postcss, lint 커스텀 설정을 craco.config.js파일.. 2021. 11. 6.

티스토리툴바