JavaScript (46) 썸네일형 리스트형 NextJS - 비인증일 때 로그인 페이지로 리디렉션 이 글은 비인증 사용자가 보안 요소가 포함된 페이지를 방문했을 때, client-side에서 로그인 페이지 등의 다른 페이지로 리디렉션 해주는 방법을 소개합니다. RouteGuard 컴포넌트 RouteGuard 컴포넌트에는 NextJS의 client-side 인증 로직이 있으며, App 컴포넌트에서 사용됩니다. client-side 인증은 authCheck() 함수에 포함되어 있으며, 앱 로드 및 경로가 변경될 때마다 실행됩니다. 만약 로그인 없이 보안 요소가 포함된 페이지에 접근하려고 하면 그 페이지의 내용이 표시되지 않고 로그인 페이지로 자동 이동됩니다. returnUrl은 리디렉션 쿼리 파라미터 중 하나이며, 로그인이 성공했을 때 요청했던 페이지로 이동시켜줄 때 사용됩니다. authorized 상태.. NextJS - 경로 alias 설정하기(typescript) 파일 트리의 깊이가 깊어졌을 때 파일을 import 하기가 번거롭습니다. import Button '../../../../../../components/Button'; 여기에 별칭을 설정하면 좀 더 간편하게 경로를 사용할 수 있습니다. 아래와 같이 tsconfig.json 파일의 컴파일 옵션에 baseUrl과 paths를 아래와 같이 추가/수정해주면 됩니다. /* tsconfig.json */ { "compilerOptions": { ..., "baseUrl": ".", "paths": { "@/styles/*": ["styles/*"], "@/components/*": ["components/*"] } }, ... } 이제 아래와 같이 사용할 수 있습니다. import Button from '@/com.. React Query를 사용하는 방법과 이유 이 글은 아래 링크를 번역한 글입니다. https://blog.bitsrc.io/how-to-start-using-react-query-4869e3d5680d ---- 리액트 애플리케이션을 만들 때 직면하는 과제 중 하나는 서버로부터 데이터를 가져오는 패턴을 결정하는 것입니다. 리액트에서 데이터를 가져오는 패턴 중 가장 일반적인 방법은, fetch 명령의 현재 상태를 알기 위해서 상태(State)를 사용하는 것입니다. 아래는 Star Wars API로부터 데이터를 가져오는 예제입니다. import React, {useState, useEffect} from 'react'; import axios from 'axios'; // regular fetch with axios function App() { co.. React.FC를 사용하지 말아야 하는 이유 이 글은 아래 링크의 글을 번역해서 작성했습니다. https://medium.com/raccoons-group/why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13 ---- 이 글은 미세한 차이가 있지만, 읽어보면 React.FC를 사용하는 것에 대한 의견이 바뀔 수도 있을 겁니다. 이 글은 개인적인 의견임을 알아주세요. 만약 React.FC를 사용하는 것을 좋아하고 잘 동작한다면, 계속 사용하세요! 😄 하지만, 더 보기를 원한다면 계속 읽어주세요. 함수 컴포넌트 수많은 코드베이스에서, 이것과 비슷한 컴포넌트를 찾을 수 있을 겁니다. const MyComponent: React.FC = ({ message, }).. 상태 관리를 위해 Redux 대신 Recoil을 사용하기 이 글은 아래 링크의 글을 번역해 작성했습니다. https://blog.openreplay.com/using-recoil-instead-of-redux-for-state-management-in-react-applications ---- React 앱에서 사용되는 모든 상태 관리 라이브러리들 중, Redux는 React의 Context API에 앞서 가장 인기가 많습니다. React 앱에서 사용되는 또 다른 훌륭한 라이브러리들이 있는데, 그 중 하나가 Recoil입니다. Recoil은 Redux와는 달리 구축하기가 매우 쉽고, 심지어 새로운 Redux 툴킷 라이브러리 보다 더 쉽습니다. 이 글에선, React 앱에 Redux 대신 Recoil을 사용해 상태를 관리하는 방법에 대해 알아보겠습니다. Reco.. WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed; 1. 개발 환경 MacOS Rocky Linux 8.6(Docker) NginX, 80->3000으로 리버스 프록시 사용 중 NextJS v12.1.6 2. 이슈 개발 서버를 올렸을 때, 브라우저 콘솔 창에 아래와 같은 에러가 계속 발생함 WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed; 3. 원인 NextJS가 WebSocket을 사용해 서버 상태를 유지하려는데, WebSocket에 대한 NginX 설정이 되어 있지 않아서 오류가 발생 4. 해결 NginX config 파일 중 location 항목에 3가지 속성을 추가 $ sudo vi /etc/nginx/nginx.config location / { ...(생략) proxy_se.. NextJS - 사용해보기 1. NextJS? React 프레임워크 SEO 최적화를 위한 SSR 구현 가능 React 만을 사용해서 SSR을 구현할 수 있지만, 이미 잘 갖춰진 프레임워크가 있는 상황에서 새로 구현하기엔 불필요한 비용이 발생 이외에도 React 앱의 성능 향상을 위한 기능 제공 https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs 2. 프로젝트 생성 Next 프로젝트를 생성하는 데에는 두 가지 방법이 있습니다. 첫 번째로, 패키지를 직접 설치해서 세팅하는 방법입니다. $ mkdir next-start && cd next-start $ npm i react react-dom next 패키지를 설치하고 package.json의 script 항목을 수정합니다.. GraphQL 사용해보기 1. REST API의 한계 REST API는 URL과 HTTP Method(get, post, ...)를 조합해 사용하기 때문에 다양한 Endpoint가 존재합니다.(복잡성 증가) Over-Fetching으로 인해 필요하지 않은 데이터까지 모두 받게 되어 낭비가 되는 상황이 발생합니다. Under-Fetching으로 인해 한 번의 요청으로 필요한 데이터를 받지 못해 여러 번 요청을 해야 하는 상황이 발생합니다. 2. GraphQL? 위와 같은 REST API의 한계를 보완하기 위해 만들어진 API입니다. Graph Query Language는 Facebook에서 개발한 API로써, 서버 런타임이며 SQL과 같은 쿼리 언어입니다. SQL은 데이터베이스에서 데이터를 효율적으로 가져오기 위한 질의 언어이지만.. 이전 1 2 3 4 5 6 다음
