📃 Front-End/React.js

📃 Front-End/React.js

React Query - 만들기

2022.10.25

코드 구조 ✔ App.js import { Posts } from "./Posts"; import "./App.css"; function App() { return ( // provide React Query client to App Blog Posts ); } export default App; ✔ Posts.js import { useState } from "react"; import { PostDetail } from "./PostDetail"; const maxPostPage = 10; async function fetchPosts() { const response = await fetch( "https://jsonplaceholder.typicode.com/posts?_limit=10&_page..

📃 Front-End/React.js

React Query ❓

2022.10.25

react 의 서버 상태를 관리하는 라이브러리 입니다. Client State vs Server State ❓ ✔ Client State 클라이언트 상태란, 웹 브라우저 세션과 관련된 모든 정보를 의미 합니다. 예를 들어 사용자는 가장 잘 아는 언어로 텍스트를 읽기 위해, 언어를 선택하거나 테마를 밝은 색이나, 어두운 색으로 변경 할 수 있는데 이런 것은 서버에서 일어나는 일과는 아무 관련이 없습니다. 단순히 사용자의 상태를 추적하는 것 입니다. ✔ Server State 서버 상태는, 서버에 저장되지만 클라이언트에 표시하는데 필요한 데이터 입니다. 예를 들어 데이터베이스에 저장되는 블로그 게시물 데이터가 이에 해당 합니다. 사용자의 게시물을 표시하기 위해 클라이언트에 데이터가 있어야 하지만, 데이터는 ..

📃 Front-End/React.js

Redux Toolkit

2022.10.25

redux-toolkit은 기존 redux의 여러 문제를 해결한 버전의 모듈이다. redux와 본질은 동일하고, 더 사용하기 편하게 개량한 버전 ✔ 설치 npm install @reduxjs/toolkit react-redux ✔ 사용법 1. store.js 준비 // store.js import { configureStore } from "@reduxjs/toolkit"; //redux store export const store = configureStore({ reducer: {}, }); reducer가 포함된 객체를 configureStore 에 전달하면 간단히 redux store가 만들어진다. 이것을 react 에 적용하기 위해 index.js 로 가서 import React from "re..

📃 Front-End/React.js

React - SVG 파일 사용법

2022.10.25

svg는 png와 다르게 아이콘의 색, 크기 등 요소를 디자인에 따라 바꿀 수 있는 파일 입니다. 또한 용량이 매우 작아서 프로젝트 관리가 용이 합니다. React.js 와 Next.js 방법은 차이가 존재 합니다. ✔ 사용 예시 React 파일 경로 : public/svg/icon.svg ( 예시 ) fill 과 stroke 가 current 로 되어있는데 아래에서 설명 하겠습니다. 1. img src import Icon from 'public/svg/icon.svg'; 2. svg 컴포넌트로 import { ReactComponent as icon } from 'public/svg/icon.svg'; ; ✔ svg 색, 크기 바꾸기 예시는 스타일 컴포넌트를 사용을 하였습니다. 아래 방법은 svg 코..

📃 Front-End/React.js

Styled-Components

2022.10.25

styled components 는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크입니다. 사용하는 이유 ✔ component 단위 스타일링 기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있습니다. ✔ 설치 // styled-components 설치하기 $ npm install --save styled-components // yarn을 사용한다면 $ yarn add styled-components ✔ 사용 예시 const StyledDiv = styled.div` background-color: black; width: 100px; height: 1..

📃 Front-End/React.js

프로젝트 배포 준비 및 빌드

2022.10.25

✔ 프로젝트 타이틀 변경 public 폴더 안의 index.html 기존 HTML 타이틀 변경과 동일하게 title 태그 수정 ✔ description 수정 content 수정 ✔ 언어 설정 한국어 : ko 영어 : en 페이지 마다 타이틀 변경하기 ✔ 리스트를 설명하는 페이지인 경우 // 타이틀 변경 useEffect(() => { const titleElement = document.querySelector('title'); titleElement.innerHTML = `감정 일기장 - ${id}번 일기`; }, []); ✔ 빌드 package.json 파일에 script 부분에 build 가 있습니다. 명령어를 입력하게 되면, 배포 할 수 있는 압축된 파일을 얻을 수 있습니다. 명령어를 입력해서 성..

📃 Front-End/React.js

React - img

2022.10.25

App 컴포넌트에 img 삽입 ✔ 현재 폴더 구조 ✔ App.js import './App.css'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from './pages/Home'; import New from './pages/New'; import Edit from './pages/Edit'; import Diary from './pages/Diary'; function App() { return ( App.js ); } export default App; process.env.PUBLIC_URL 은 어떤 위치에 있든 /public 을 가리킵니다. ✔ 참고 인프런

📃 Front-End/React.js

React - Router 응용

2022.10.24

Path Variable ❓ 경로의 변수를 사용 URL에 변수를 담아서 전달하는 방법 useParams 사용 ✔ 여러 가지의 게시물을 받게되는 경우 1번 게시물인지, 2번 게시물인지 ..... n번 게시물인지 App.js import './App.css'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import RouteTest from './components/RouteTest'; import Home from './pages/Home'; import New from './pages/New'; import Edit from './pages/Edit'; import Diary from './pages/Diary'; function ..

이전
1
2
3
4
5
6
다음

'📃 Front-End/React.js' 카테고리의 글 목록 (3 Page)

티스토리툴바