728x90 리액트67 리액트 상단 로고, 제목 바꾸는 방법 상단 리액트 마크 바꾸기이렇게 로고도 추가해주고, nff 라고 이름도 바꿔줌. 1) 로고 변경2) 사이트 이름 React App => nff 로고 추가해주기로고 추가여기서 보면 기존의 원래 리액트 생성 시에 있던 기존의 logo 이미지들을 다 지워주고,png 파일과 svg 파일을 새로 넣어줬다.이렇게 따로 이미지를 갖고와서public 폴더에 넣어주면 된다. 그 다음 index.html 파일을 열기index.html 파일을 열어서줄 쳐진 부분에 경로 수정을 해주면 된다. icon 부분은 svg 로애플 터치 아이콘은 png 로 넣어줌.apple-touch-icon은 iOS와 iPadOS 장치에서 웹사이트의 홈 화면에 추가할 때 사용되는 아이콘입니다. 사용자가 웹사이트를 홈 화면에 추가하면 이 아이콘이 사용.. 2024. 10. 12. [ JS/리액트 ] 유동적 페이지 생성 방법 이전에 정리한 페이지네이션 = 페이지 수 직접 지정[ JS/리액트 ] 페이지 생성 정리 (tistory.com) [ JS/리액트 ] 페이지 생성 정리참고할 글[JS/리액트 ] 헷갈리는 인수와 인자 (tistory.com) [JS/리액트 ] 헷갈리는 인수와 인자참고할 글 인수(arguments)와 인자(parameter) (tistory.com) 인수(arguments)와 인자(parameter)parameter argument 매개변jamongsoda.tistory.com전반적인 흐름상태와 데이터우리가 데이터를 받아오기 전에는 총 페이지 수를 모름. 그래서 기본값으로 1로 설정.데이터를 받아온 후, 그 데이터를 바탕으로 총 페이지 수를 계산해야 함.부모와 자식 컴포넌트**App.js**는 총 페이지 수를.. 2024. 10. 8. [리액트] Link와 useNavigate 비교 1. Link를 사용하는 경우:주로: 페이지 간 이동을 위한 하이퍼링크를 클릭할 때 사용합니다.장점: 매우 간단하고 HTML의 태그와 유사하게 작동합니다. 클릭 시 URL을 변경하며 해당 경로에 맞는 페이지를 렌더링합니다.사용 예: 단순히 사용자가 클릭해서 이동해야 할 때.for fingers언제 사용해야 하나:- 내비게이션이나 메뉴에서 사용자 클릭으로 페이지 이동을 할 때- 페이지 리로딩 없이 SPA(Single Page Application) 방식으로 쉽게 경로 변경을 하고 싶을 때.2. useNavigate를 사용하는 경우:주로: 코드 상에서 직접 페이지를 이동시키고 싶을 때 사용합니다. 특정 조건에 맞춰서 프로그래밍적으로 페이지를 이동해야 할 때 유용합니다.장점: 함수 형태로 사용할 수 있기 때.. 2024. 9. 27. [리액트] 페이지 함수 - 매개변수와 인수, Array.from() 해당 내용: Array.from()참고할 글[리액트] 페이지 함수 만들기 (tistory.com) [리액트] 페이지 함수 만들기페이지 함수 만들기- 화살표에 기능 넣기 Pages.js - Pages 컴포넌트import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";function Pages() { return ( {jamongsoda.tistory.comApp.jsimport React, { useState } from 'react';import Pagination from './Pagination'; // P.. 2024. 9. 11. [리액트] 페이지 함수 만들기 페이지 함수 만들기- 화살표에 기능 넣기 Pages.js - Pages 컴포넌트import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";function Pages() { return ( {" "} {/* class -> className */} {" "} {/* 태그 대신 FontAwesomeIcon 사용 */} 1 2 .. 2024. 9. 8. [리액트] Font Awesome 라이브러리 사용하기 Font Awesome 라이브러리 사용npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core해당 코드를 npm 에 입력해주기import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";리액트에서 사용할 아이콘을 import 해서 사용주의할 점import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { .. 2024. 9. 7. 이전 1 2 3 4 ··· 12 다음 728x90
