개발/React.js (7) 썸네일형 리스트형 [Firebase 호스팅] 시키는대로만 하면 된다. npm install -g firebase-tools 위 명령어를 입력하면 무엇인가 설치가 된다. firebase login 파이어베이스 로그인을 한다. firebase init 프로젝트를 초기화 한다. npm run build 프로젝트 파일을 빌드한다. 아마 vue나 react를 사용한다면 dist 폴더에 빌드파일이 생성될텐데 그 파일들을 복사해서 public 폴더에 덮어 씌운다. 꼭 덮어씌워줘야 한다. 안 그럼 이런 화면이 뜨고 절망에 빠질 것이다. 아무튼 잘 따라왔다면 firebase deploy 그리고 나서 요렇게 명령어만 치면 url을 뱉어낼 것이다. [Firebase 호스팅] Welcome만 뜰 때 호스팅 시도해보려고 npm run build까지 했는데 이렇게 뜨는 사람 있을 거임 그럴 때에는 dist로 저장된 빌드 파일들을 public으로 옮긴 다음 firebase deploy 다시 실행하면 됨. [useRef] vue의 ref와는 다르다.. 아냐 비슷한가..? import {useRef} from 'react' const myRef = useRef(); 이런 식으로 작성할 경우 myRef.current 이 식을 사용하면 해당 myRef DOM에 접근 할 수 있다. 변경 가능한 값이면서 + 재렌더링 할 필요가 없는 data라면 useRef를 사용해도 된다. 그렇다면 의문이 들 것이다. 아니 그럼 그냥 일반 변수 선언해서 쓰는 거랑 다를 게 없지 않음? 다르다, 재렌더링이 되면 일반 변수는 초기화 된다. useRef를 활용하면 재렌더링 되어도 초기화되지 않는다. [useState] 리액트 탐험.. useState... useState로 설정한 data를 공유하려면 부모 컴포넌트로 부터 props로 받아와야 한다. 모든 Child 컴포넌트가 같은 count 값을 공유하길 원한다면, count 상태를 Child 컴포넌트가 아닌 Parent 컴포넌트에서 관리해야 한다. 그리고 이 count와 setCount를 Child 컴포넌트에 props로 전달한다. function Parent() { const [count, setCount] = useState(0); return ; } function Child({ count, setCount }) { return ( You clicked {count} times setCount(count + 1)}> Click me ); } 같은 컴포넌트 내에서 button을 만들어 count +.. [Firebase 9] React 앱 세팅 파이어베이스 구버전과 9버전은 차이가 크다. 공식문서에서도 알 수 있듯이 구버전과 신버전은 문법부터 차이가 크다. 일단 npm으로 firebase를 설치한다. npm install firebase 리액트 src 폴더에 firebase.ts 파일을 추가한다. import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore } from "firebase/firestore" const firebaseConfig = { ~~~~~~~~~~~~~~~ }; const firebase = initializeApp(firebaseConfig); const analytics.. [React-Router] 리액트 라우터 npm install react-router-dom 설치는 위 커맨드로 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom' function App() { return ( ) } 위와 같은 형태로 변화하는 몸체를 만든다. BrowserRouter로 감싼 후 Routes 부분이 변화하는 부분인데 Route 태그에 path를 넣어 경로를 표현하고, element를 이용해 컴포넌트를 설정한다. import { Link } from 'react-router-dom' const Header = () => { return ( Animall Board Training Shop Trip Me ) } 라우트 링크는 위와 같이 Link를 이용해 설정한다... [React] 리액트 설치 방법 npm create-react-app app-name 가장 기본적인 설치 방법이다. 정말 기본적인 리액트 앱만 설치된다. vue는 vite를 이용해서 typescript라든지 pinia라든지 router까지 한 번에 설치할 수 있었는데...하면서 vite로 리액트 설치를 해봤다. npm create vite@latest 상태관리, 라우터는 몰라도 typescript까지는 같이 세팅이 가능하다. 이전 1 다음
