'항해 중/5주차 리액트 심화반' 카테고리의 글 목록 (2 Page)
본문 바로가기

항해 중/5주차 리액트 심화반22

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.
3주차 - Debounce, Throttle 👉 우리가 감사합니다를 검색 할 때, ㄱ, ㅏ, ㅁ, ㅅ, ㅏ 하나하나 입력할 때마다 검색을 새로 하면 (=검색 api를 호출한다고 해봅시다!), 연관 검색어 같은 걸 빨리 바꿔줄 수 있어서 좋죠. 그런데 감사합니다를 빨리 검색한다고 생각해보세요. 1초도 안되는 시간에 이미 감사합까지 쳤다면, ㄱ,ㅏ,ㅁ,..., ㅎ,ㅏ,ㅂ까지 엄청나게 많이 검색을 해야해요. 😢 → 이럴 땐 특정 시간마다 1번씩, 혹은 키보드 입력을 멈췄을 때만 1번 해주는 게 검색 횟수를 줄일 수 있어요! 특히 api를 불러야 할 때는, 순식간에 엄청 많은 서버 요청이 날아가는 걸 막아줄 수 있어요! → 물론 연관검색어 부분의 엄청난 랜더링도 막아줄 수 있겠죠! 이벤트를 관리 할 수 있는 두가지 방법 1) debounce 더보기 👉 이.. 2021. 12. 1.
2주차 - 로그인 유지하기 / 로그아웃 구현하기 / 퀴즈 1. 로그인 유지하기 더보기 👉 이제 쿠키에 로그인 유무를 저장하지 않죠! 파이어베이스 auth를 통해 관리하고 있으니까요. 🙂 그럼, 페이지가 새로고침 되었을 때 로그인은 어떻게 유지하면 좋을까요? - 로그인 시, 세션에 로그인 상태를 기록 하도록 바꿔줍니다. ... import firebase from "firebase/app"; ... const loginFB = (id, pwd) => { return function (dispatch, getState, { history }) { auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => { auth .signInWithEmailAndPassword(id, pwd) .then.. 2021. 11. 30.
2주차 - 로그인하기 1. 헤더 분기하고 리덕스 설치하기 더보기 👉 클라이언트의 입장에서 로그인 하기는 사실 별 게 없어요. 우리 서버에 로그인 요청을 보내고, 응답을 받아서 토큰을 저장하면 끝입니다. - 로그인 하고 나면 뭐가 바뀔까?? : 로그인을 하면 가장 먼저 생각 나는 건 헤더 컴포넌트 바뀌는 겁니다. (헤더 컴포넌트 분기하기) import React from "react"; import {Grid, Text, Button} from "../elements"; const Header = (props) => { const [is_login, setIsLogin] = React.useState(false); if(is_login){ return ( 헬로 ); } return ( 헬로 ) } Header.defaultPr.. 2021. 11. 30.
2주차 - 웹 저장소(feat. 토큰) 더보기 Http는 1번 요청을 하고 응답을 받으면 연결이 해제됩니다! 즉, 우리가 access_token을 클라이언트 어딘가에 저장을 해두어야한단 이야기예요! 그럼 이 토큰을 어디에 저장하면 좋을 지, 클라이언트에서 쓸 수 있는 저장소를 알아봅시다. 😉 - 클라이언트 저장소 더보기 클라이언트 저장소 확인하기 개발자도구 → Application 탭 → 좌측 Storage 확인! - 쿠키 : 클라이언트 로컬에 저장되는 key:value 형태의 저장소입니다. 약 4KB 정도 저장 할 수 있습니다. 1) 쿠키 만들기 : 브라우저에서 개발자 도구를 열고 해볼껀데, 이 때 꼭, 어떤 사이트에 접속한 후에 쿠키를 사용 할 수 있습니다. // key는 MY_COOKIE, value는 here, document.cook.. 2021. 11. 30.
2주차 - 토큰 기반 인증(OAuth 2.0, JWT) 더보기 [옛날 이야기 - 세션 기반 인증] 예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었어요. 서버의 세션에 사용자 정보를 넣고 이 사람이 로그인을 했다 안했다를 전부 기록하고 기억했습니다. 이 세션은 서버의 메모리나 데이터베이스 등에 저장해두는데, 로그인한 사용자가 많아지면 서버에 부하가 많이 오겠죠? 그렇다고 서버를 여러개 놓자니 관리가 까다로워지고요. → 그래서 최근에는 오늘 배울 토큰 기반 인증 방법을 많이 사용해요! - OAuth 2.0 : 외부 서비스의 인증 및 권한 부여를 관리하는 프레임워크입니다. → Open Authentication, Open Authorization라고 해요. (인증과 허가를 포함해요!) 1) OAuth 동작 방식 (간단 ver) 클라이언트와 서버 사이에 인.. 2021. 11. 30.
728x90