본문 바로가기
  • 삽질하는 자의 블로그
9. [리액트- 라우터 - 배포시 주의사항] SPA 의 장점을 잃어버리지 말 것 리액트는 결국 정적 앱이다. ** 리액트앱은 어쨌든 서버측 코드가 없는, "정적 앱" 이라는 것을 반드시 인지하자. ** Nextjs 나, Nodejs 처럼 "서버측 코드가 존재하는 앱이 아니다." React를 만들 때 "서버에 요청"만 할뿐, 우리가 직접 "서버가 되어, 그 요청을 응답" 하는 코드는 없었다. 반면, Nextjs 나, Nodejs 를 만들 때에는, (req,res) 를 통해서, 받은 응답을 검사하고, 응답하는 코드를 작성 할 수 있었다. 그게 REST API 의 핵심이자, "서버측 코드를 보유" 하고 있는 상태이다. 라우터가 있는 앱을 배포할 때 주의 할 것 클라이언트 사이드와 서버사이드에서의 인식 차이를 알아보자. [클라이언트측] 1) 리액트는 SPA 를 만들때 유용한 라이브러리 이다.. 2022. 12. 22.
8. [리액트- 라우터 배포준비- 최적화] LazyLoading 과 React.memo() 1. React.memo() https://dive-into-frontend.tistory.com/79 7. 리액트의 최적화 With React.memo(), useCallback(), useMemo() 서론. 리액트가 작동하는 방식 리액트는 오로지 "컴포넌트" 에만 초점이 맞추어져 있다. 1) 컴포넌트 끼리 props 를 넘긴다던가 [ props 전달 ] 2) 컴포넌트의 State 를 변화시킨다던가 [ internal-component S dive-into-frontend.tistory.com 2. LazyLoading 레이지 로딩이란, 필요할 때, 로딩을 하는 것을 말한다. 기본적인 SPA 의 배포 에서, 클라이언트는, 배포된 사이트를 들어갈때, 모든 자바스크립트를 포함한 코드를 전부 다운받고, 페이.. 2022. 12. 22.
7. V6 업그레이드 방법 기초(1) 0. App 을 감싸는 는 동일하다 1. Switch 대신 Routes, 2. Route의 자식으로, 컴포넌트가 아니라, element 안에 컴포넌트 [v5]=================== // 1. Switch 대신 Routes, // 2. "자식" 대신 "element" [v6]=================== // 1. Switch 대신 Routes, // 2. "자식" 대신 "element" ... 3. exact 의 삭제, 기본적으로 exact, "동시에 렌더되는 라우트를 실행하고 싶다면 (중첩 X ) * " [v5]=================== [v6]=================== // exact 의 제거, 기본적으로 exact 가 들어가있다. // * 을 추가하여, 앞의 경로.. 2022. 12. 22.
6. useHistory, 복잡한 쿼리매개변수와 path 를 가지고 있을 때, 사용방법 복잡한 로직(이라기엔 그냥 긴)으로, 쿼리매개변수가 바뀌고, path 가 많이 길어지면, 가독성이 너무 떨어진다. history.push( `/.../.../.../......... ? xxx= ${(isAscending ? yyy : zzz)}`) 위의 history를 가독성 있는 코드로 변경시키자. history.push({ pathname: "xxx/xxx/xxx/..." search : `?arrangeRule = ${(isAscending ? yyy : zzz)}` }) 마치, useLocation 의 프로퍼티를 보는 듯 하다. 같을 것이다. 두개 모두 "URL" 에 포커스가 맞춰져있는 훅이므로! 2022. 12. 22.
5. onFocus 리스너와 함께하는 Prompt 로 "정말 뒤로 갈건지 한번 딱 물어봐주기" 1. "정말로 이 페이지를 나가시겠습니까?" 가끔 길고 긴 회원가입 칸을 적어나가다, 실수로 "뒤로가기" 를 누를 때가 있다. 절망에 빠지지 않도록 Prompt 를 사용해서 한번 물어보도록 하자. 2. Prompt Prompt 는, 유저의 행동을 추적해, 페이지에서 벗어나려 하는지 확인한다. 그리고 벗어나려 한다면, 준비된 코드를 실행한다. import { Prompt } from "react-router-dom" Prompt : "렌더" 하는 요소로, 1) when : 언제 Prompt 를 실행시킬지(참이라면 실행) 2) message : 무슨 말을 할까 "정말로 나가시겠습니까?"} /> 3. onFocus 이벤트 리스너 onFocus 는 유저가 인풋을 클릭하고, 나면 true 를 반환한다. 4. 유저.. 2022. 12. 22.
4. 잘못된 URL 주소로 들어간다면, Not Found Page 돌려주기 1. 가끔 주소를 잘못 칠 때가 있다. 주소를 잘못 쳤는데, 전혀 이상한 페이지가 나오면, 기분이 상할 수 있다. 그래도, "너는 아직 우리 웹사이트에 있어!" 라고 말하기 위한 자체 제작 Not Found 페이지를 보여주자 2. 와일드 카드 페이지의 사용 와일드 카드 ( * ) 는 "모든 경로" 를 의미한다. Switch 를 통해, 모든 경로에 대해, 순차적으로 하나씩 대조하고 있는데 아무것도 맞는게 없다. 그렇다면 마지막에 "무조건 들어가지는 페이지" 의 path 로 * 을 준비해주도록 하자. import { Route, Switch } from "react-router-dom"; import AllQuotes from "./pages/quotes-all"; import QuotesDetail fro.. 2022. 12. 22.
15. 리액트 [인증] - 클라이언트 보호와 보호된 API 기능 사용 1. 클라이언트 보호 : 인증토큰이 없다면, 강제로 페이지에서 벗어나는 클라이언트 보호를 실현한다. 1) 들어가면 튀어나가게 만들기 import { useCookies } from "react-cookie"; import { useHistory } from "react-router-dom"; const ProfileForm = () => { const [cookies] = useCookies(["auth-cookie"]); // 쿠키 빼보고 const history = useHistory(); let isAuth = false; if (cookies["auth-cookie"] !== "undefined") { // 없으면 너 인증안됐다 isAuth = true; } if (!isAuth) { // 안됐으.. 2022. 12. 22.
14. 리액트 [인증] - 파이어 베이스 Auth편(3) 1. 로그인 상태를 유지해보자 with React-Cookie 리액트 쿠키 : https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: a year ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 539 other projects in the npm registry using react-cookie. www.npmjs.com 서버에서 받아온 인증서를, 어딘가에 저장해야한다. 선택지는 두가지, 1. 로컬스토리지 2. 브라우저의 쿠키 3.. 2022. 12. 22.
13. 리액트 [인증] 파이어 베이스 Auth편(2) 1. 여러가지 인증 방식 (구글, 네이버, 깃허브 등등..) 중에, 일반적인 Email 과 Password 를 사용한 인증을 해보겠다. https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-create-email-password Firebase 인증 REST API firebase.google.com 우측 사이드바에 보면, 인증에 관한 목록들이 쭉 나와있다. 1) You can create a new email and password user by issuing an HTTP POST request to the Auth signupNewUser endpoint. [POST 리퀘스트로 보내라] 2) https://iden.. 2022. 12. 22.
12. 리액트 [인증] - 인증의 기본 원리, 파이어 베이스 Auth편(1) [인증의 기본 원리] 인증은 크게, 서버사이드 인증 방식과 토큰 인증 방식을 가진다. 1. 서버사이드 인증 방식 서버측에 사용자들의 정보를 저장하고, 유저가 정보를 제출하면, 확인하고, 그에 따라 응답한다. 정보는 데이터베이스나, 디스크 등에 저장되어 관리된다. 사용자로부터 로그인 요청이 오면, 인증이 되었을 경우, 클라이어언트의 상태를 계속 유지하게 된다. (인증 상태, 즉 사용자 정보 유지) 이 경우를 Sateful(상태성) 이라고 한다. 로그인 사용자가 늘어 날 경우 세션을 유지하는 메모리와, CORS 오류 등으로 인해, 소규모에서만 적용이 가능하다. 또한, 백엔드와 프론트엔드 간의 커넥션이 긴밀하지 않을 경우, 언제든 해킹의 위험이 있다. 2. 토큰 기반의 인증 방식 서버측에 사용자들의 정보를 저.. 2022. 12. 22.
9. State 를 빼왔다면, 따로 변수에 저장해 사용하는 것이 좋아 보인다. 다이렉트로 const AllQuotesComponent = () => { const allQuotes = useSelector((state) => state.quotesSlice.allQuotes); const location = useLocation(); const [rearrange, setRearrange] = useState(false); const data = [...allQuotes];// 한번 빼고 사용하도록 하자 첫째로, State 의 조작이 일어 날 것 같은 것도 불안하거니와 둘째로, 실제로 오류를 마주한 적이 많다. 이상하게, 직접 사용하면, 전개가 안된다던가, 하는 문제가 가끔 생겼다. 2022. 12. 22.
11. 항상 [로딩 State] 을 신경쓰자! FETCH 등의 비동기 함수를 사용한다면, with Redux 비동기 함수를 사용한다면, 항상 대기중인 경우가 생긴다. 0.1초, 길게는 1초 동안의 그 시간동안, 멈춰있다면, 한국인의 유저경험에는 충족치 않을것이다...! 그 짧은 시간이라도, 항상 로딩 State 를 적용하여, 로딩 시간동안 무언가 행동을 보여주도록 하자 1. 로딩 스테이트 Slice 만들기 with redux-toolkit redux-toolkit 을 사용한다면, UI(ui를 띄우는) State 를 만들어서, 그에따라, 로딩, Modal 등의 알림창이 나오는 형태를 만들면 편하고 훌륭하다. // ui 전용 redux-toolkit 의 slice import { createSlice } from "@reduxjs/toolkit"; const initialState = { getFetchLoadin.. 2022. 12. 22.

티스토리툴바