항해 중267 5주차 - 프로젝트 호스팅 하기 👉 파이어베이스 호스팅 설정 방법! 파이어베이스 콘솔 → Hosting에서 시작하기를 누르면, firebase CLI 설치부터, 프로젝트 초기화까지 가이드 참고! - firebase Hosting으로 호스팅 하기 1) 파이어베이스 콘솔에서 호스팅 시작하기 2) 파이어베이스 CLI 설치하기 yarn global firebase-tools 3) firebase 로그인 후 init 실행하기 #웹브라우저가 열리고 내 구글 계정을 물어볼거예요. 로그인해줍니다. yarn firebase login #로그인 후 init! yarn firebase init 4) 호스팅을 선택 해줍니다. + 여기에서 프로젝트에서 사용하는 서버스를 전부 선택 해줍니다. firebase, firestore, storage, hosting).. 2021. 12. 4. 추가 - 삭제 기능 1. 게시물만 삭제하는 기능 // Post.js import React from "react"; import { Grid, Image, Text, Button } from "../elements"; import { history } from "../redux/configureStore"; import styled from "styled-components"; import Permit from "../shared/Permit"; import { useSelector, useDispatch } from "react-redux"; import { actionCreators as likeActions } from "../redux/modules/like"; import { actionCreators as pos.. 2021. 12. 3. [TIL] 28일차 오늘은 댓글 알림 뱃지 만들기와 좋아요 기능을 만들었다. 분명 오래 걸리지 않을꺼라고 생각 했는 데 반나절이 갔다. 벌써 6시 50분이다. 밥도 못먹었는 데 7시에 팀 과제 해야 한다. 내일은 5주차 강의 듣고 배포하고, 기능들 추가 할 것 있는 지 보고 코딩 애플 강의 듣고 그동안 못봤던 javascript.info 문서 봐야 겠다. 추가로 삭제 기능 만들었는 데 아직 완성은 아니라서 내일 완성하면 될 듯 하다. 끝 2021. 12. 3. 추가 - 좋아요 기능 1. firebase database -> post collection -> like_cnt, like_list(해당 게시물의 좋아요를 누른 사람 목록) 추가 2. 좋아요 뷰 만들기 post_list에서 좋아요를 눌렀을 때 색상 변하는 방법을 설명하기 전에 좋아요 기능을 넣기 전의 코드에서는 PostList.js에서 Post 컴포넌트에 onClick을 사용해서 /postDetail로 보냈는 데 (즉, 게시물 목록에서 게시물을 누를 경우 상세 페이지로 이동 시켰는 데) 그럴 경우 좋아요를 누를 수 없어서 게시물 목록(PostList.js)에 있는 onClick을 Post.js에서 contents와 image에만 적용 되도록 바꿨다. 방법 1) - state에 좋아요 유무를 boolean 값을 넣는다. - .. 2021. 12. 3. 4주차 - 엔터 키로 입력하기 엔터 키로 입력하기 더보기 👉 엔터 키를 입력하면 댓글이 입력되도록 해봅시다 🙂 onKeyPress 이벤트를 이용해서 엔터 키를 감지하고, 엔터 키가 눌리면 댓글을 저장하도록 해줄거예요. //components/CommentWrite.js import React from "react"; import { Grid, Input, Button } from "../elements"; import { useDispatch } from "react-redux"; import { actionCreators as commentActions } from "../redux/modules/comment"; const CommentWrite = (props) => { const dispatch = useDispatch(); .. 2021. 12. 3. 4주차 - 댓글 알림 뱃지 만들기 댓글 알람은 언제 와야 할까?? (1) 내가 쓴 게시글에 (2) 내가 아닌 사람이 (3) 댓글을 쓰면 알려준다. 댓글 알람에는 뭐가 필요할까?? : 알람을 읽었는 지 안읽었는 지 구분자가 필요합니다! 1. 파이어베이스의 실시간 데이터베이스를 만들기(realtime database) : 구분자로는 특정 할 수 있는 값을 사용하면 됩니다. (예를 들어서 아이디, 핸드폰 번호 등등) https://console.firebase.google.com/project/imagecommunity-aabf8/database/imagecommunity-aabf8-default-rtdb/data 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google... 2021. 12. 3. 4주차 - 댓글 작성하기 1. 댓글 작성하기 - 고치기 더보기 👉 댓글을 작성기능을 만들 때 어떤 순서로 만들면 될까요? → 댓글 작성하는 뷰를 만들고, 댓글 텍스트를 리덕스에 넣는 게 첫번째! 그 다음으로는 파이어스토어에 저장하는 기능을 만들어서 진짜 저장까지 해주면 됩니다. 그런데, 우리 데이터를 보면 게시글 정보에도 댓글 갯수가 저장되고 있죠! 앗, 그럼 댓글을 작성하면 게시글 정보에 있는 댓글 갯수도 +1 해줘야겠네요! 댓글을 작성하면서 게시글 정보도 같이 수정하도록 해봅시다! - 고치기 (firestore 데이터를 리덕스에 넣어 두도록) 1) post.js에서 게시글 하나 정보 가져오는 함수 만들기 ... const getOnePostFB = (id) => { return function(dispatch, getStat.. 2021. 12. 2. 4주차 - 상세 페이지 연결하기 + fireStore 복합 쿼리 1. 페이지 링크 연결하기 - 목록 페이지에서 _onClick 넘겨주기 // PostList.js import React from "react"; import {useSelector, useDispatch} from "react-redux"; import Post from "../components/Post"; import {actionCreators as postActions} from "../redux/modules/post"; import InfinityScroll from "../shared/InfinityScroll"; import {Grid} from "../elements"; const PostList = (props) => { const dispatch = useDispatch(); con.. 2021. 12. 2. 4주차 - 무한 스크롤 1. 무한 스크롤 동작 원리 👉 게시글을 한번에 여러개 가져오면? → 페이지 로드 속도가 엄청 나빠집니다 😢 서버에서 주는 속도도 느려지겠지만, 클라이언트에서 엄청나게 많은 컴포넌트를 그려 느려지기도 해요. 무한 스크롤은 자주 쓰는 트릭! 사실 한 화면에 담기는 게시글은 그렇게 많지 않아요. 우리가 만드는 이미지 커뮤니티의 경우에도 10개도 못들어가죠! → 화면에 담기지 않는 게시글은 불러오지 않고 있다가, 스크롤이 아래로 내려가서 '이제쯤 다음 걸 불러와야겠다' 싶을 때 (보통 마지막이나 마지막 1개 전 게시글에 스크롤이 닿았을 때!) 다음 게시글을 불러오면 사용자가 귀찮게 더보기나 다음 페이지 버튼을 누르지 않고도 쭉쭉 읽을 수 있겠죠! (공식 문서) https://firebase.google.com.. 2021. 12. 2. 이전 1 ··· 11 12 13 14 15 16 17 ··· 30 다음 728x90
