본문 바로가기

Frontend/React7

Vite + React + tailwind css + firebase 초기세팅 // vite 프로젝트 생성 $ npm create vite@latest 명령어 입력시 선택항목 표시 이름:solyi(프로젝트명) -> 선택:react -> 선택:JavaScript // 프로젝트로 이동 $ cd solyi // 폴더 열기 $ code . -r // tailwind 설치 $ npm install -D tailwindcss // 테스트 실행 $ npm run dev // firebase 설치 $ npm i firebase // firebase-tools 설치 (node version 14.18.1) $ npm install -g firebase-tools@9.2.0 // login $ firebase login $ firebase init 명령어 입력시 선택항목 표시 -> firestore.. 2023. 5. 13.
[React] 컴포넌트간 통신 / Context API / provider / consumer / useContext 기존 구린 방법 1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경) 2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경) 각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다. 이문제를 해결하기 위해 useContext를 사용하기로 했다. 1. 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider 데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능 1) consumer import PersonContext from "../contexts/PersonContext"; export default function Example1() .. 2021. 11. 16.
[React] Basic Hooks / Additional Hooks / React Router Hooks Basic Hooks useState: state를 대체 할 수 있다. useEffect: 라이프 사이클 훅을 대체 할 수 있다 Additional Hooks useReducer : state를 변경하는 로직이 담겨있는 함수 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때 다음 state가 이전state에 의존적일때 Redux를 안다면 쉽게 이용 가능 useMemo useCallback createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다 useRef: (Uncontrolled-useRef) : 렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력 React-Router-Hooks useHistory 이전: props를 .. 2021. 11. 16.
[React] Component Styling / Style loader / React Shadow / Ant Design // 프로젝트 생성 $ npx create-react-app style-loaders-example // install $ npm i sass $ npm i classnames $ npm i styled-components 스타일로더 CSS 모듈, SASS 모듈 Styled Component 1,2 react shadow ant design 2021. 11. 16.
[React] router / react-router-dom / query-string / redirect 먼저 프로젝트 내에 Pages라는 폴더를 생성하고, Home , About , Profile, NotFound 등 jsx파일을 추가한다. // Home.jsx export default function Home() { return Home 페이지입니다.; } App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다. 또한 이동시킬 페이지들을 모두 import한다. import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom"; // App.js 의 App return 내부 (isLogin ? : )} /> 코드를 확인해보면 .. 2021. 11. 16.
[React] 기본 플러그인 개념 및 설정 방법 ESlint : 내부적으로 스타일을 규정하는 것 $ npm i eslint -D // 다운로드 $ npx eslint --init //설정파일 생성 $ npx eslint index.js // index.js파일의 코딩 스타일 검사 Prettier : 예쁜 코드 만들어주는 코드 포매터 $ npm i perttier -D//설치 $ npx prettier index.js//index.js 코드 예쁘게 /// -> console.log('hello')-> console.log("hello"); // 따옴표는 ' ' 만 사용하고 세미콜론은 false로 설정했다. $ npx prettier index.js --write // js파일이 바뀜 /// default format => prettier// settin.. 2021. 11. 3.
[React] React 프로젝트 생성 Create-React-App, CRA $ npm init -y CRA 사용해서 $ npx create-react-app [프로젝트이름] 개발모드 실행 $ npm start 프로덕션 모드 실행 $ npm run build $ npx sesrve -s build 테스트 모드 $ npm test eject : CRA 를 제거하는것, 되돌릴수 없음. CRA만으로 해결이 안될 때 제거 $ npm eject 2021. 11. 3.
반응형

티스토리툴바