JER

https://www.suika2048.com/ JS를 사용해서 뭔가를 만들어보고싶다는 생각이 항상 있었다.  유투브에서 수박게임을 접한 후 한번 따라 만들어보면 재밌겠다는 생각이 들었고,  뚝-딱 만들어서 배포까지 해보게되었다!  단계가 직관적으로 보이면 좋을 것 같아서 과일대신에 숫자로 표시되게 만들어 보았는데 이게 또 나름 재미가 있다..  빠른 환경설정을 위해 Next.js를 사용했고 게임은 matter-js를 사용해서 물리엔진을 구현했다.https://brm.io/matter-js/ 랭킹도 넣어서 경쟁하면 재있을 것 같아서 firebase를 사용해 넣어보았다.   작년 12월에 만들었는데 더 늦기 전에 이제라도 정리를 해놔야지...

Project 2024. 5. 24. 01:49

https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co *노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. **강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다. Get My Own Nweets https://firebase.google.com/docs/firestore/query-data/queries https://firebase.google.com/docs/firestore/query-data/order-limit-data 쿼리문을 작성하여 나의 Nweets를 가져옴 query 함수내 인자로 where함수를 사용..

Twitter Clone Coding 2022. 11. 9. 07:56

https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co *노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. **강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다. Preview Images Firebase 콘솔 ⇒ Storage ⇒ 시작하기 Bucket : 파일이 저장되는 곳 Rules에서 파일 읽기와 업로드 권한을 허용해주어야함 ⇒ 권한없을 시 에러 발생 FileReader API https://developer.mozilla.org/ko/docs/Web/API/FileReader 파일을 읽는 API // Home...

Twitter Clone Coding 2022. 11. 7. 07:52

https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co *노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. **강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다. Form and Database Setup Form 생성 nweet을 작성하기 위한 form 생성 // Home.js import React, { useState } from "react"; export default function Home() { const [nweet, setNweet] = useState(""); const onSubmitHandler..

Twitter Clone Coding 2022. 11. 5. 07:42

https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co *노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. **강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다. Using Firebase Auth https://firebase.google.com/docs/reference/js/v8/firebase.auth firebase.js ⇒ fb.js로 이름변경 // fb.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/aut..

Twitter Clone Coding 2022. 11. 3. 07:35

https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co *노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. **강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다. React + Firebase Setup 프로젝트 생성 npx create-react-app nwitter Firebase 콘솔 프로젝트 생성 프로젝트 종류 선택 (web) Firebase SDK 추가 강의에서는 firebase v8을 사용했지만 나는 v9사용 firebase.js 파일 생성 ⇒ config추가 import { initializeApp } f..

Twitter Clone Coding 2022. 11. 1. 06:31