본문 바로가기

분류 전체보기369

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

[React] 렌더링이 두 번 발생하는 이슈

이슈 현상 같은 컴포넌트가 렌더링이 두 번씩 실행됨. 그래서, UseEffect 훅으로 렌더링 때마다 호출하게 되어있는 API가 두 번씩 호출됨. 원인 npx-create-react-app 으로 생성하면 기본적으로 달려있는 설정인 때문임. // ./src/index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./static/index.css"; import App from "./components/App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 해결방법 // ./src/index.js import .. 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.

[Lean Startup]

구독일: 2022-06-24 ~ 2022-07-28 (목) 주의할 점 이 책에 취해서, 실무에서 뭔가 실천해보려고 하면 안 된다. 나는 단지 일개 코더이다. 단지, 내가 뭘 하고있는지 이해할 수 있을 뿐이다. 린스타트업 개발자 표준 실천 스플릿 테스트 지속적 배포 고객 테스트 실험 프로세스가 움직이는 속도대로 팀들이 일하고 혁신할 수 있도록 조직 문화와 시스템을 만들어야 한다. 책을 읽고, 내가 다니는 회사가 어떻게 하는지 삼자의 입장에서 지켜보는 일이 즐겁다. 내 질문 : 내가 개발한 기능이 실험이되었습니까? 새제춤이나 서비스를 이해나느 첫 단계는 그것이 근본적으로 가치 창조적인지, 가치 파괴적인지 알아내는 것이다. 자신의 가장 위험한 가정이 실제에 바탕을 두고 있는지, 고객한테 풀 만한 가치가 있는 .. 2022. 6. 25.

[Nuxtjs] 뒤로가기 기능 구현 방법

뒤로가기 방법 window.history.go(-1) 이 방법을 사용하면, 이전 페이지에 스크롤 위치로 돌아간다. 무한 스크롤을 적용하고 있는 목록이라면, 상세페이지 접근 -> 목록 페이지로 돌아왔을 때, 스크롤 위치를 보존할 수 있다. nuxt-link 컴포넌트를 사용 목록페이지로 이동만 해준다. 스크롤은 최상단으로 간다. 2022. 6. 23.

언카피어블 짐 매켈비

22년 6월 9일 목요일 ~ 독자들에게 확실한 지도를 쥐어주고 싶지만 원래 지도는 모험가를 위한 것이 아니라 관광객을 위한 것이다. 우리에게 미래를 가져다 주는 것은 정신 나간 기업가들과 그들의 완벽한 문제다. 가격은 제품이나 서비스를 만드는 기업이 통제하는 숫자다. 낮은 가격에 높은 품질을 제공해야 한다. 낮은 가격을 유지하면 여건에 따라 서비스를 계속 추가해야 한다. 완벽한 문제를 해결하거나 시장을 확장하려면 그 시장을 공부해야 하는 것 아닐까? 아니다. 고객을 보면 되니까. 좀 더 정확하게는 당신의 제품을 아직 알지 못하거나 서비스를 사용하지 못하는 잠재적 고객을 봐야 한다. 소설가 윌리엄 깁슨이 말했지. '미래는 이미 와있다. 단지 널리 펴져 있지 않은 것 뿐이다"라고, 이 미래를 전달하는 것이 .. 2022. 6. 9.

[Javascript ]new Date().getTime()

new Date().getTime() millisecond를 반환함. 시간 구하기 new Date().getTime() / 1000 = 초 new Date().getTime() / 1000 / 60 = 분 new Date().getTime() / 1000 / 60 / 60 = 시간 new Date().getTime() / 1000 / 60 / 60 / 24 = 일 2022. 6. 4.

사업을 한다는 것 _ 레이 크록

~ 22년 6월 8일 수요일 2022. 6. 2.

[Nuxt.js] 무한 스크롤 구현한 사례

개요 Nuxt.js에서 무한 스크롤을 구현한 방법을 소개한다. 무한 스크롤 구현에 사용한 기술은 Javascript에 new IntersectionObserver 이다. 이 객체는 html element를 지정할 수 있으며, viewport에 얼만큼 노출되느냐를 옵션으로 설정해서 사용자가 지정한 함수를 호출할 수 있게 해준다. 컴포넌트 구조 components +- List.vue 👈 목록 데이터를 패치해서 store에 저장함 +- ListItem.vue 👈 observe 객체가 있음. 함수가 첫 호출됨 pages +- index.vue 👈 첫 번째 페이지 목록 데이터를 패치받음 pages/index.vue 첫번째 페이지네이션 page=1페이지 목록 데이터를 받아온다. template script imp.. 2022. 6. 1.

[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요 무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다. 스크롤 위치를 보존하는 방법을 소개한다. 컴포넌트 구조 components +- List.vue 👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장 +- ListItem.vue pages +- index.vue 👈 저장된 스크롤 위치로 mounted 훅에서 이동 pages/index.vue index.vue가 렌더링된 후에 스크롤 위치 이동 export default { name: 'something', mounted() { setTimeout(() => { window.scrollT.. 2022. 6. 1.

티스토리툴바