728x90 > 메모/React27 리액트 상단 로고, 제목 바꾸는 방법 상단 리액트 마크 바꾸기이렇게 로고도 추가해주고, 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. [ JS/리액트 ] 페이지 생성 정리 참고할 글[JS/리액트 ] 헷갈리는 인수와 인자 (tistory.com) [JS/리액트 ] 헷갈리는 인수와 인자참고할 글 인수(arguments)와 인자(parameter) (tistory.com) 인수(arguments)와 인자(parameter)parameter argument 매개변수 전달 인자 변수 값 인자 인수 커뮤니티를 보면 위와 같은 용어들을 혼용해서 사용하는jamongsoda.tistory.com[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (9) (tistory.com)[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (10) (tistory.com)[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (11) (tistory.com)자바스크립트 배열의 slic.. 2024. 10. 4. [ JS/리액트 ] axios 써서 데이터 넣는 방법 1. 새 터미널에 npm install axios 입력해서 설치해줌.2. 상단에 import 해주기import axios from 'axios'3. useEffect 사용. = 컴포넌트가 처음 딱 장착이 됐을 때 , 업데이트 될 때 실행= return 문 밖에, 컴포넌트 안에( return 문 위에 써줌) useEffect(() => { console.log(1); });로 잘 되는 지 확인. useEffect(() => { axios .get("https://kku-git.github.io/nff_product/product.json") .then((response) => { console.log(response.data); }) .ca.. 2024. 10. 3. [JS/리액트 ] 헷갈리는 인수와 인자 참고할 글 인수(arguments)와 인자(parameter) (tistory.com) 인수(arguments)와 인자(parameter)parameter argument 매개변수 전달 인자 변수 값 인자 인수 커뮤니티를 보면 위와 같은 용어들을 혼용해서 사용하는 경우를 종종 볼 수 있습니다. 심지어 블로그 글에서도 잘못 쓰인 경우도 본 적이bang-jh.tistory.com 인자 = 파라미터 = 매개변수 function add(a,b) { return a+b;}// 매개변수 a, b함수를 선언할 때 사용되는 변수특정한 값으로 정해진 것이 아니라함수가 호출하면서 건네준 인수가 변수(variable)에 담기게 된다. 인수 // 함수에서 1,2에 해당합니다add(1,2);= 함수를 호출할 때 값을 전달호.. 2024. 10. 2. [리액트] Link와 useNavigate 비교 1. Link를 사용하는 경우:주로: 페이지 간 이동을 위한 하이퍼링크를 클릭할 때 사용합니다.장점: 매우 간단하고 HTML의 태그와 유사하게 작동합니다. 클릭 시 URL을 변경하며 해당 경로에 맞는 페이지를 렌더링합니다.사용 예: 단순히 사용자가 클릭해서 이동해야 할 때.for fingers언제 사용해야 하나:- 내비게이션이나 메뉴에서 사용자 클릭으로 페이지 이동을 할 때- 페이지 리로딩 없이 SPA(Single Page Application) 방식으로 쉽게 경로 변경을 하고 싶을 때.2. useNavigate를 사용하는 경우:주로: 코드 상에서 직접 페이지를 이동시키고 싶을 때 사용합니다. 특정 조건에 맞춰서 프로그래밍적으로 페이지를 이동해야 할 때 유용합니다.장점: 함수 형태로 사용할 수 있기 때.. 2024. 9. 27. 이전 1 2 3 4 5 다음 728x90
