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

Next.js - Data Fetching

2022.10.26

데이터 가져오기, 화면에 무엇인가를 그리려면 어디선가 데이터를 가져와야 합니다. 1. SSR (Server Side Render) 페이지에 대한 요청이 있을 때마다 서버에서 페이지를 만들어 반환 합니다. 서버에서 매번 연산을 해야하며 캐시를 사용하는 것이 상대적으로 어렵기 때문에 SSG에 비해 느립니다. 하지만 항상 최신의 정보를 보여주어야하는 경우, SSR를 사용하는 것이 좋습니다. (프론트)서버에서 HTML 파일을 만들어서 보내기 때문에 CSR에 비해 사용자가 더 빠르게 화면을 인식할 수 있습니다. 하지만 이벤트 등 페이지의 동작을 위해서는 hydrate라는 과정을 통해서 JS 코드가 실행되어야 합니다. 서버 가 그립니다. 그린다 : 데이터를 가져와서 나타낸다. 즉, 서버가 데이터를 가져와서 그린다...

📃 Front-End/Next.js

React의 문제점과 NextJS의 도입

2022.10.26

React의 번거로운 부분 리액트는 애플리케이션을 처음부터 빌드하려면 신경 써야하는 세부사항이 많습니다. Webpack으로 번들링 & Babel 컴파일러로 JSX → JS 로 변환 최적화 (Code Splitting 등)를 해야함 Static Pre-Rendering (성능과 SEO를 위해) / SSR 또는 CSR 를 해야함 리액트 앱과 데이터 저장소를 연결하기 위한 서버 측 코드 작성 NextJS: React 프레임워크 NextJS는 React 의 번거로운 점을 간편하게 해결 했습니다. 직관적인 페이지 기반 라우팅 (Dynamic routes 도 지원함) Pre-rendering, static generation (SSG), server-side rendering (SSR) 이 페이지 단위로 제공됨 자..

📃 Front-End/Next.js

Next.js 정의

2022.10.26

Next.js 는 따로 설정을 해주지 않고도 SSR, SEO부터 TypeScript까지 생산에 필요한 많은 기능들을 제공하는 아주 강력한 React 프레임워크 입니다. 2. 어디서 만들었나 Next.js는 Vercel이라는 Frontend Team에서 만들었습니다. 3. 사용해야 하는 이유 3.1 SSR Next.js 를 사용하는 가장 큰 이유 입니다. 이해하기 좋게 먼저 반대 개념인 SPA 와 CSR 에 대해 먼저 정리 하겠습니다. 3.1.1 SPA (Single Page Application) 전통적인 웹 페이지 만드는 방식은 client 에서 server 로 최초의 요청을 보내고 server 는 요청을 받아 client 에게 응답을 보낸 후, client에서 화면이 보입니다. 이후 client 에서..

📃 Front-End/React.js

React + TypeScript(state)

2022.10.26

기존의 useState 사용 방식 const [count, setCount] = useState(초기 값); useState 를 사용하면 value 를 얻게 됩니다. 첫 번째 값은 state 의 value 입니다. 두 번째 값은 value 의 상태 변화 함수 입니다. useState 에 초기 값을 넣으면 ❓ const [count, setCount] = useState(1); count 에 숫자 값이 들어온다고 TypeScript 가 초기 값을 가지고 추론을 한 것 입니다. 또한 const [count, setCount] = useState(1); setCount(2); 아무 일도 생기지 않습니다. 작성해야 하는 대로 작성을 했기 때문에 하지만 만약 string 타입을 보내게 되면, 에러가 있다고 말해줍..

📃 Front-End/React.js

React + TypeScript(Optional Props)

2022.10.26

default props App.tsx import Circle from "./Circle"; function App() { return ( ); } export default App; Circle.tsx import React from "react"; import styled from "styled-components" interface ContainerProps { bgColor : string; } const Container = styled.div` width : 200px; height : 200px; background-color : ${(props) => props.bgColor}; `; interface CircleProps { // TypeScript 에게 bgColor 는 문자열이라고 ..

📃 Front-End/React.js

React + TypeScript(interface)

2022.10.26

기본적인 타입 스크립트에 대한 설명은 별도의 포스팅을 통해 정리를 했습니다. 여기서는 리액트에서 타입 스크립트를 어떻게 적용 할 수 있는지 공부하고 정리 합니다! + 스타일 컴포넌트 적용 설치 ❓ 1. 처음부터 CRA + 타입 스크립트를 할 때 npx create-react-app my-app --template typescript or yarn create react-app my-app --template typescript 2. 프로젝트 중간에 설치하는 방법 npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add typescript @types/node @types/react @type..

📃 Front-End/React.js

useInfiniteQuery 호출

2022.10.26

✔ useInfiniteQuery 가져오기 import InfiniteScroll from "react-infinite-scroller"; import { Person } from "./Person"; // 이 부분 import { useInfiniteQuery } from "react-query"; const initialUrl = "https://swapi.dev/api/people/"; const fetchUrl = async (url) => { const response = await fetch(url); return response.json(); }; export function InfinitePeople() { // 컴포넌트에서 호출 const {data, fetchNextPage, hasNe..

📃 Front-End/React.js

React Query - 무한 스크롤(Infinite Scroll)

2022.10.26

사용자가 페이지의 특정 지점을 누르거나 버튼을 클릭하면 더 많은 데이터가 로딩됩니다. React Query 는 데이터와 페이지 번호를 추적하게 됩니다. 무한 스크롤 이란 ❓ 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것 입니다. 모든 데이터를 한 번에 가져오는 것보다 훨씬 효율적 입니다. 사용하는 지점 사용자가 버튼을 클릭하여 새로운 데이터를 요청하거나 페이지의 특정 지점을 스크롤 했을 때 새 데이터를 가져오게 하거나 ( 페이지의 하단 등 ) ✔ useInfiniteQuery 의 특징 반환 객체에서 반환된 데이터 프로퍼티의 형태가 다릅니다. useQuery : 단순히 쿼리 함수에서 반환되는 데이터 useInfiniteQuery : 두 개의 프로퍼티를 가지고 있습니다. 하나는 데이터 페이지 객체 ..

티스토리툴바