til46 [react] Intersection Observer API 스크롤에 도달했을 때 이미지 로딩하기 lazy load 이번 프로젝트는 유튜브 api를 사용하여 추천 영상을 등록하고, 검색하는 프로젝트를 진행하였다. 한 페이지에 이미지가 많이 배치될 예정이라 이미지 렌더링을 한 번에 하지 않는 방법을 찾던 중 IntersectionObserver 를 알게 되었다. 먼저 useState와 useRef를 추가한다. 렌더링 될 이미지가 여러 개이기 때문에 배열로 useRef에 담는다. const [visibleIndices, setVisibleIndices] = useState([]); const imageRefs = useRef([]); useEffect로 data가 변경될 때마다 실행시킨다. data : supabase에서 검색해 온 데이터 IntersectionObserver(callback[, options]) : 대상.. 2024. 2. 27. supabase database 정책 설정 이번 팀프로젝트에서 우리 팀은 supabase를 사용하기로 했다. 테스트를 위해 아래와 같이 설정 후 코드를 작성하였다. supabase url 과 key는 settings -> API에서 가져와서 env 파일에 넣었다. import React, { useEffect, useState } from 'react'; import { createClient } from '@supabase/supabase-js'; function Search() { const [data, setData] = useState(); const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_KEY); useEffect.. 2024. 2. 23. [Glitch / vercel] json-server 배포하기 json-server 레포 생성 먼저 깃헙에서 json-server를 배포할 레포지토리를 생성한다. 이름은 auth-json-server라고 지었다. 그러고 레포를 vscode로 열고 아래와 같이 셋팅을 시작한다. json-server 셋팅 nodejs 프로젝트로 만들어지고, package.json 파일이 생성된다. npm init -y 루트 경로에 server.js 파일을 생성한 후 아래의 내용을 넣는다. // server.js const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("db.json"); const middlewares = jsonServer... 2024. 2. 22. SyntaxError: Unexpected token e in JSON at position 0 에러 상황 게시물 내용을 수정하는 patch 요청을 날렸는데, 계속 리듀서 슬라이스까지 가지 못하고 thunk 부분에서 에러가 났다. SyntaxError: Unexpected token e in JSON at position 0 작성했던 코드 export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => { try { const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, payload.content); return thunkAPI.fulfillWithValue(response... 2024. 2. 21. react-query useQuery / useMutation react-qeury란 React에서 데이터를 관리하기 위한 라이브러리이다. 주로 백엔드와 데이터 통신을 담당한다. 서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다. 설치 yarn add react-query 적용 최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다. import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ); }; expo.. 2024. 2. 19. react-router outlet Outlet Outlet은 해당 자식 라우트 컴포넌트를 렌더링 한다. 중첩 라우트 컴포넌트를 통해 상위 컴포넌트를 레이아웃화 할 수 있고, {children}을 사용하는 것처럼 레이아웃화 할 수 있다. 기존에는 children으로 받아서 레이아웃을 구성했다. 아래 코드는 outlet을 활용한 방법이다. 코드 예제 App.jsx import "./App.css"; import Router from "./shared/Router"; function App() { return ( ); } export default App; app 컴포넌트에 router를 연결했다. Router.js import React from "react"; import { BrowserRouter, Route, Routes } from.. 2024. 2. 7. styled-component 이번에 개인 프로젝트를 진행하면서 styled-component 를 제대로 써보게 되었다. 설치 npm install styled-component npm 또는 yarn으로 설치 가능한데 나는 npm 으로 설치하였다. 설치하면 package.json 에 버전 등의 정보가 추가된다. 문법 기본적인 문법은 다음과 같다. styled-components 를 import 하고 아래에 ``(템플릿 리터럴)을 사용하여 스타일을 작성한다. //기본 문법 export const 컴포넌트명 = styled.태그명` //css 작성 ` [예시] import styled from "styled-components"; export const FormContainer = styled.form` margin: 20px auto;.. 2024. 1. 30. react 설치 및 기초 react 설치 처음 설치 할 때는 아래 명령어를 사용하여 설치한다. npx create-react-app 프로젝트명 설치 후 해당 경로에서 npm start를 하면 위 이미지와 같이 실행된다. app.js에서 수정 후 저장하면 바로 적용이 된다. react에서 css 사용하기 1. 인라인 스타일 css 인라인 스타일의 css를 사용하기 위해서는 객체 형태로 사용해야 한다. 안녕 또한 대시 - 대신 카멜 케이스로 작성해야 한다. 하지만, 인라인 스타일 css는 많이 사용되지 않는다고 한다. 2. 전역 css 전체에 적용되는 css로 사용하는 방법이 있는데, 이 방법은 클래스명이 같을 경우 스타일이 덮어 쓰인다. (기존에 사용하던 방식이라고 생각하면 된다.) css 스타일이 head 태그 안에 style .. 2024. 1. 21. 이전 1 2 3 4 5 6 다음 반응형
