본문 바로가기
  • 삽질하는 자의 블로그
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.
3. 쿼리 매개변수를 사용해, 아이템 정렬하기 [ useHistory, useLocation , URLSearchParams ] 버튼을 눌러 정렬을 시켜보자. 버튼을 누르면, "URL 을 이동(쿼리 매개변수만을 추가한)" 을 통해 [ useHistory ] 쿼리 매개변수를 불러오고 [ useLocation ] 불러온 매개변수를 가공하여 [ URLSearchParams ] 정렬 하려는 조건을 알아내고, 그것에 맞추어 정렬 하는 코드를 만들어보자 1. 쿼리 매개변수에 대하여 , [ useHistory ] 쿼리 매개변수는 URL ? 다음에 오는 키와 값들을 의미한다. https://localhost:3000/Items/Item-detial?type=post 바로 이부분! 화면을 전환시키지 않고, 새로운 값을 받을 수 있는유용한 기능이다. 간단하게 생각해서 URL 뒤에 ? 를 붙이고 키와 밸류를 넣으면 된다. 그렇다면 useHistory.. 2022. 12. 20.
2. React-Route의 기본 사용(2) v5 9. import { useRouteMatch } from "react-router-dom" [중첩 라우트 주소 간소화] 중첩된 라우트가 3개, 4개, 수십개 라고 생각해보자 중첩된 라우트의 최상위 path 를 변경하기 위해, 가장 앞의 "xxx" 를 "xxy" 로 고쳤다고 가정하자 자, 여기서 문제가 발생한다. 어떻게, 중첩된 라우트를 적는 것 까지는 그렇다 할 수 있다. 만약 바꾸려면? 하나하나 중첩된 모든 라우트를 찾아, 주소를 전부 변경해야한다. useRouteMatch 를 사용하여, "현재 코드의 라우트 위치" 를 파악할 수 있다. 파악한 위치로, 중첩된 주소를 변경한다. import { useRouteMatch } from "react-router-dom"; const Component = (.. 2022. 12. 20.
1. React-Route의 기본 사용(1) v5 이 글은, 최신버젼이 있지만, 그래도 상용화 되어있는 react-route 를 위하여, v5 에 대하여 정리해 본다. https://www.npmjs.com/package/react-router-dom 1. import { Route } from "react-router-dom" 기본적인 라우트 기능이다. path 가 맞을때, 렌더되며, 시작 path 가 동일한 모든, Route 에 대하여, 렌더한다. import { Route } from "react-router-dom" // path 를 지정하고 불러온다. 2. import { BrowserRouter } from "react-router-dom" 라우터 기능을 활성화 시키기 위한, 프로바이더 정도 생각한다. 앱을 감싸는 최상위 컴포넌트에 적용시키면.. 2022. 12. 20.

티스토리툴바