'📃 Front-End' 카테고리의 글 목록 (4 Page)

React + TS + Style-Components

2022.11.15

포스팅 주 내용은 전역 스타일(Global), 테마(theme), 타입스크립트 적용에 포커스를 맞추겠습니다. react 를 사용해본적이 있거나, 스타일 컴포넌트를 사용해보신 적이 있으신 분들은 아래 코드 순서만 보고 충분히 감을 잡으실 수 있을 거라고 생각 합니다. ✔ 환경 세팅 // 스타일 컴포넌트 설치 yarn add styled-components // 타입스크립트 적용 yarn add --dev @types/styled-components ✔ styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { TitleFont : { fontSize : any; fontF..

📃 Front-End/React.js

React-Query 캐싱에 대하여

2022.11.12

stale 대하여 리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여깁니다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 됩니다. 새로운 query 인스턴스가 마운트될 때( useQuery가 처음 호출될 때 ) 브라우저 화면을 이탈했다가 다시 포커스할 때 네트워크가 다시 연결될 때 특별히 설정한 refetch interval에 의해서 (refetchInterval) refetchOnWindowFocus 옵션 등으로 기본 refetch 설정을 막을 수 있고 staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있습니다. query에 별다른 action이 없으면 inactive 상태로 ..

📃 Front-End/React.js

react-router-dom V6 공부

2022.11.11

설치 yarn add react-router-dom ✔ createBrowserRouter() const router = createBrowserRouter([각 경로의 배열]) App.js import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([]); export default function App() { return } 위와 같이 상위 컴포넌트에 세팅을 해줍니다. 컴포넌트 경로에 추가하기 import React from 'react'; import { createBrowserRouter, RouterProvider ..

📃 Front-End/Next.js

Dynamic Routes

2022.10.26

[slug] 값은 어떻게 활용할 것 인가? - pages/category/[slug].js slug 값에 따라서 우리가 원하는 페이지가 다르게 보여져야 합니다. 1. useRouter Next.js 에서 제공하고 있는 라이브러리 import { useRouter } from 'next/router' // 선언 const router = useRouter(); const { slug } = router.query; 1.1 category.js import { useRouter } from "next/router"; const CategorySlug = () => { const router = useRouter() const { slug } = router.query return ( Category {slu..

📃 Front-End/Next.js

Next.js - Assets, Meta data, CSS

2022.10.26

1. Assets 1.1 public 디렉토리 정적 데이터를 제공하는 경우 최상위 디렉토리의 public 를 이용하면 됩니다. 이미지 경로는 public 폴더가 / 로 매칭 됩니다. 1.2 최적화 되지 않은 이미지 그러나, 일반 HTML 의 img 를 사용하면 아래의 상황들을 수동으로 처리해야 합니다. 다양한 화면 크기에 이미지가 반응형으로 적용되는지 다른 툴 또는 라이브러리로 이미지 최적화 뷰포트에 들어갈 때만 이미지 로드 등 ... 하지만, Next.js 는 Image 를 처리하기 위해 즉시 사용 할 수 있는 구성 요소를 제공 합니다. 1.3 Image Component - 이미지 자동 최적화 Next.js 는 기본적으로 이미지 최적화도 지원 합니다. 이미지 크기 조정, 최적화와 최신 이미지 포멧 (..

📃 Front-End/Next.js

Next.js - Link

2022.10.26

Next.js 에서는 태그를 사용해서 페이지 이동하는 것을 반가워 하지 않습니다. 이유는, 앱 내에서 페이지를 이동 할 때 사용하는 특정 컴포넌트가 존재하기 때문 입니다. React 에서 React router link 를 사용하는 이유와 같습니다. 태그를 사용해서 페이지를 이동하게 되면 애플리케이션은 새로고침이 발생 합니다. Link 페이지간의 탐색을 CSR으로 진행 할 수 있습니다. Code Splitting이 페이지 별로 진행 되어 각 페이지에서 필요한 것만 로드할 수 있도록 합니다. 특정 페이지에서 오류가 발생하더라도 나머지 앱은 정상 작동 합니다. 라우팅 라이브러리가 필요하지 않습니다. next/link 가장 먼저 import 를 합니다. 별도의 설치는 필요하지 않습니다. import Link ..

📃 Front-End/Next.js

Next.js - Routing

2022.10.26

Next.js 의 Router 는 file-system 기반 file-system : 파일을 만들면 그 즉시 라우터로 인지되고 주소가 맵핑이 됩니다. pages/ src/pages/ 리액트에서는 별도의 Router 를 제공하지 않기 때문에 별도의 라이브러리를 사용해야 하지만, Next.js 는 기본적으로 제공을 합니다. pages/ OR src/pages 둘 중 우선순위는? 우선순위는 pages/ 가 우선 입니다. pages/index.js import Link from 'next/link' import { useEffect, useState } from 'react' export async function getStaticProps(){ console.log('server') return { props..

📃 Front-End/Next.js

Next.js - Pre Rendering

2022.10.26

1. React.js 의 방식 1.1 기존의 React 는 CSR 방식으로 화면을 렌더링 합니다. 클라이언트 측에서 화면을 직접 렌더링 합니다. 즉, 브라우저가 유저가 보는 UI 를 만듭니다. React 로 만들어진 화면의 모든 것은 HTML 소스코드 안에 들어있지 않습니다. React 로 만들어진 앱을 개발자 도구로 확인하면, 하나의 만을 가지고 있을 것 입니다. 브라우저가 HTML 을 가져올 때 비어있는 div 으로 가져옵니다. 그 후, 브라우저가 모든 자바스크립트를 요청해서 자바스크립트와 React.js 를 실행 시키고 그 다음 화면이 유저에게 보이게 됩니다. 1.2 만약 자바스크립트를 가져오는 속도가 느리다면? 사용자는 화면이 렌더링 되는 시간을 오래 동안 기다려야 할 것 입니다. 브라우저는 자바..

티스토리툴바