Archive

Firebase Auth Firebase Auth를 사용하려면 먼저 import를 해야 한다 /src/fbase.js import "firebase/auth"; /components/App.js import firebase from "../fbase" Absolute Imports 절대적인 경로로 import하려면 jsconfig.json 파일을 생성하여 아래의 형식 같이 코드를 작성하면 된다 참고: https://create-react-app.dev/docs/importing-a-component jsconfig.json ( 파일 경로가 src로부터 시작되게 설정하는 코드 ) { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그리고 상대적..

1. /src에 components와 routes 폴더를 생성한다 2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다 /src/index.js import App from './components/App'; 3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다 Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다 /src/routes/Auth.js import React from "react" const Auth = () => Auth; export default Auth; 4. npm i rea..

1. https://console.firebase.google.com/u/0/?hl=ko로 이동하여 프로젝트를 만든다 2. 생성한 프로젝트에 들어가 웹 App을 생성한다 3. npm i firebase@9.6.1를 입력하여 Firebase를 설치한다 4. 아래 표시한 부분을 복사한다 5. src 폴더에 fbase.js를 생성하여 아래와 같이 입력한다 import * as firebase from "firebase/app" // 복사한 코드 붙여넣기 export default firebase.initializeApp(firebaseConfig) 6. npm run start를 했을 때 문제가 없으면 된다 7. 그리고 index.js 파일에 firebase를 import한다 import firebase fr..

1. Repository를 생성한 후 vs 명령창에 git remote add origin https://github.com/gaeunnlee/ReactJS-Twitter-App.git을 입력한다 2. git branch -M gh-pages을 입력하여 gh-pages가 main branch가 되도록 설정한다 3. git add ., git commit -m "MESSAGE"로 변경 사항을 gh-pages branch에 commit한다 4. git push -u origin gh-pages를 입력하여 깃헙에 push한다 5. package.json 파일 밑에 깃헙 페이지 주소를 아래와 같이 추가한다 "homepage": "https://gaeunnlee.github.io/ReactJS-Twitter-Ap..

Coin Tracker App 만들기 Coin Tracker App을 만들기 위해서는 API를 사용해야 한다 const [coins, setCoins] = useState([]); // api로 받은 코인들을 나타내기 useEffect (() => { fetch("https://api.coinpaprika.com/v1/tickers") .then(response => response.json()) // response로부터 json 추출 .then((json) => { setCoins(json) // json 값을 coins 배열에 담는다 }); }, []) useEffect()를 통해 API를 처음 한 번만 가져오게 하고 fetch()를 통해 api를 호출한다 response로 받은 json을 추출하여..

ReactJS로 To Do List 만들기 리스트에 item 추가하기 ...array명은 array의 모든 item들을 가리킨다 이를 이용하여 리스트에 item을 다음과 같이 추가할 수 있다 const food = [apple, banana] const new_food = [orange, ...food] // new_food = [orange, apple, banana] map() map()은 array 각각의 원소들에 대해 함수를 실행하게 하고 그 결과를 array로 return한다 map 함수의 첫번째 argument를 통해 현재의 item을 가져올 수 있다 const array = ['hello','who','are','you'] array.map(() => "mapped!") // return [..

Create React App 1. useState() 사용법 create react app에서 useState()은 아래의 코드를 통해 import해야 사용 가능하다 import { useState } from "react"; 이전에 React JS에서 useState를 사용할 때 React.useState()로 사용했던 것과 달리 create react app은 useState()만 작성해도 된다 Count Click Button 예제 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () =>setValue((prev) => prev + 1) return (..

Creat-React-App prop-types VS Code 터미널에 npm i prop-types를 입력하여 설치한다 prop-types가 적용되어야 할 component의 파일에 아래와 같은 방식으로 코드를 작성한다 Button.js import propTypes from "prop-types"; // import propTypes function Button({text}) { return {text} } Button.propTypes = { text: propTypes.string.isRequired, } export default Button; CSS 한 개의 css 파일인 style.css를 만들어 index.js에 import한다. import "./style.css" > CSS Module..

Create React App 일반적인 리액트 어플리케이션은 스크립트를 직접 import해야 한다 그러나 create-react-app을 사용한다면, 위 과정 없이 ReactJS 어플리케이션을 쉽게 만들 수 있다 create-react-app은 개발 서버 접근, 자동으로 새로고침, 즉각적으로 CSS를 포함시키는 유용한 기능들을 포함한다 1. Node.js 설치 https://nodejs.org/ko/download/ Node.js로 작업한다면 component를 import 할 수 있게 하여 파일들을 각각 분리시키고 조직적으로 구성 가능하게 한다 먼저 Node.js 를 설치 후 cmd 를 열어 아래 명령어를 입력한다 # 설치 확인을 위해 아래 두 줄 각각 입력 node -v npx 그리고 위와 같이 뜬다..

PropTypes PropType은 어떤 타입의 prop을 받고 있는지 체크해준다 타입 검사 먼저 PropTypes 패키지를 사용하기 위해 위 script 소스를 추가해준다 Btn.propTypes = { // props 값의 타입 제시 text: PropTypes.string, fontSize: PropTypes.number } function App() { return( ) } 위와 같이 타입을 제시해주면 타입을 벗어난 경우 아래와 같은 경고 문구를 콘솔창에 띄운다 isRequired 그리고 prop 값이 필수적인 경우 .isRequired를 덧붙이면 된다. Btn.propTypes = { text: PropTypes.string.isRequired, fontSize: PropTypes.number...