반응형 항해 중/5주차 리액트 심화반22 5주차 - 렌더링 횟수 줄이기 👉 부모가 바뀔 때 자식은 왜 꼭 렌더링 되어야만 할까? 🤔 부모 컴포넌트가 바뀔 때마다 바뀔 게 없는 컴포넌트까지 다시 렌더링하는 걸 막아주는 방법이 있으면 참 좋을 것 같죠? → 사실 있습니다! 컴포넌트를 렌더링하고, 결과를 메모리제이션해두는 거예요! React.memo를 사용해서 할 수 있어요! - React.memo() : useMemo가 렌더링 때마다 연산하지 않도록, 연산된 값을 재 사용하는 훅이라면 memo는 컴포넌트의 리렌더링을 방지하는 함수예요! // components/Post.js import React from "react"; import { Grid, Image, Text, Button } from "../elements"; import {history} from "../redux.. 2021. 12. 4. 5주차 - 성능 지표 보기 👉 CRA를 통해 프로젝트를 만들면 기본적으로 설치되는 것들이 있죠! 그 중 하나가 webVitals입니다! CRA 4 버전부터 새로 추가되었어요. 추가된 김에 이 webVitals를 써봅시다.😉 - webVitals 써보기 1) report를 콘솔에 찍어서 확인 해보기! //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './shared/App'; import reportWebVitals from './reportWebVitals'; import store from "./redux/configureStore"; import { Provider } from ".. 2021. 12. 4. 5주차 - Meta tag 메타태그는 웹페이즈의 제목이나, 이미지, 간단한 설명을 검색 엔진에 알려주는 역할을 합니다! - react-helmet 설치하기 yarn add react-helmet - helmat으로 메타 태크 바꾸기 //One.js import React from "react"; import {Helmet} from "react-helmet"; const One = (props) => { return ( page one Hi, there :) ! page one { props.history.push("/"); }} > page one { props.history.push("/two"); }} > page two ); } export default One; - 확인하기 : 빌드 먼저 하고, post man에서 확인 .. 2021. 12. 4. 5주차 - Pre-rendering - Pre-rendering이란? : 빌드 할 때 미리 특정 페이지를 렌더링 해서 html 파일을 만들어 둡니다. 검색 엔진이 크롤링 하러 사이트에 들어왔을 때, 빈 껍데기 html 파일 대신 내용물을 가져 갈 수 있도록! 이번에는 react-snap을 사용 해보겠습니다. https://github.com/stereobooster/react-snap GitHub - stereobooster/react-snap: 👻 Zero-configuration framework-agnostic static prerendering for SPAs 👻 Zero-configuration framework-agnostic static prerendering for SPAs - GitHub - stereobooster/rea.. 2021. 12. 4. 5주차 - SEO란(검색 엔진 최적화)? - SEO(Search Engin Optimization : 검색 엔진 최적화)란? : 네이버나 구글 같은 검색 엔진에 뭔가를 검색 했을 때, 내가 만든 사이트가 검색 결과에 더 잘보이게 해주는 과정입니다. - 검색 엔진 최적화를 한다는 건, 검색을 하면 검색 엔진이 내 사이트 내용물(메타 태그, html 내용 ...)을 한 번 훑어가고(크롤링 한다고 합니다.) 내용물에 특정한 인덱스 같은 걸 만듭니다. 그리고 이 인덱스 같은 걸 검색 결과에 보여줍니다. 검색 엔진 최적화는 검색 엔진이 내 사이트를 크롤링 할 때 정보를 더 잘 가져 갈 수 있도록 도와주는 과정입니다. - React에서 SEO가 될까?? : React는 HTML 파일이 딱 1개 뿐이고, 렌더링이 되기 전까지(자바스크립트를 실행하기 전까지).. 2021. 12. 4. 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. 추가 - 좋아요 기능 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. 이전 1 2 3 다음 반응형
