Archive

013 화살표 함수 사용하기 화살표 함수 function 대신 =>을 사용하며 retrun 문자열을 생략할 수 있음 ES6에서 등장함 콜백 함수에서 this를 bind 해야 하는 문제도 발생하지 않음 콜백함수 : 다른 코드의 인수로서 넘겨주는 실행 가능한 코드 this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자 this는 함수가 호출되는 방식에 따라 동적으로 결정됨 this 바인딩 : this를 고정시키는 것 참고 문서 https://kamang-it.tistory.com/entry/JavaScript07this-this바인드편bindcallapply import React, { Component } from "react"; class R013_ArrowFunction..

009 템플릿 문자열 사용하기 ES (ECMA Script) 는 표준화된 스크립트 언어이고, 그 뒤에 붙는 숫자는 버전을 의미한다 2011년부터 ES5가 웹 표준처럼 사용되고 있고, 2015년 발행된 ES6는 자바스크립트가 따르는 기술 규격이다 React도 ES6의 모든 기능을 사용할 수 있다 `hello ${변수명} world` 문자열과 함수 합치기 위해서 백틱과 ${ }를 사용한다 startsWith() 변수 앞에서부터 일치하는 문자열이 있는지 찾는다 endsWith() 변수 뒤에서부터 일치하는 문자열이 있는지 찾는다 includes() 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단한다 return 값 자료형 = Boolean 010 var, let, const 사용하기 var : (ES5..

06 getDerivedStateFromProps(props, state) 컴퍼넌트가 새로운 props를 받게 되었을 때 state를 변경해줌 constructor( ) 함수 다음으로 실행된다 App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값 가져옴 보다시피 constructor > getDerived > render 순으로 실행되었다. 07 componentDidMount( ) 생명주기 함수들 중에서 가장 마지막에 실행됨 render( ) 함수가 코드를 화면에 그려준 후 실행됨 화면 그려지는 것이 끝난 후의 이벤트 처리, 초기화 등 가장 많이 활용되는 함수임 08 shouldComponentUpdate() 생명주기 과정 중 component의 변경(prop..

003 component: 특정 코드 뭉치를 다른 부분에 이식하거나 재 사용하기 위해 사용하는 코드 블록 단위 004 생명주기: component의 생성, 변경, 소멸 과정을 뜻함 component 생성 함수 render() constructor() getDerivedStateFromProps() componentDidMount() 005 contructor 함수가 헷갈려 검색해봤다 참고 문서 https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-컴포넌트-생명주기 https://www.javatpoint.com/react-constructor contructor(props) 컴포넌트가 실행될 때 가장 먼저 호출되는 함수 생명주기 함수 중 가장 먼저 실행됨 처음..

참고 영상: https://youtu.be/dalXCXCIPHM 1. VS Code Setting 먼저 아래와 같이 package.json 파일의 scripts에 "export": "next export",를 추가한다 그리고 npm run build를 터미널에 입력한다 나는 npm run build 입력했더니 오류 발생하여 https://plming.tistory.com/211 를 참고하여 오류를 해결하였다 그리고 next.config.js의 nextConfig에 다음의 코드를 추가해준다 images: { loader: "akamai", path: "", } 그리고 npm run build와 npm run export를 터미널에 입력한다 npm run export를 입력한 뒤에는 아래처럼 out 폴더가 ..

Fetching Data Redirection next.config.js의 nextConfig에 아래의 코드를 추가한다 async redirects() { return [ { source: "/contact", // user가 source로 이동한다면 destination: "/form", // 유저를 destination으로 보낸다 permanent: false, // ㄴ redirection이 영구적인지 아닌지에 따라서 // 브라우저나 검색엔진이 이 정보를 기억하는지의 여부가 결정된다 } ] } 그리고 next.config.js를 수정하였기 때문에 터미널에 npm run dev를 다시 입력해준다 그러면 localhost:3000/contact에 접속하였을 때 localhost:3000/form 주소로..

(1) Layout Pattern Layout pattern은 많은 사람들이 NextJS를 이용할 때 따르는 아주 흔한 패턴이다. 이는 custom app component를 사용할 때 쓰이는 패턴으로 _app.js 파일이 커지도록 하는 것을 방지하기 위해 레이아웃 파일을 따로 만들어 _app.js에 넣는 것이다 사용법 먼저 Layout.js라는 react component를 만들고 children prop을 넣어준다 children이란 react.js가 제공하는 prop으로 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다 그리고 _app.js 를 을 으로 감싸준다. ./components/Layout.js import Layout from "../components/La..

(1) CSS Module CSS module 사용법 1. 파일명.module.css 파일을 만든다 NavBar.module.css .nav { display: flex; justify-content: center; background-color: tomato; } 2. 생성한 module을 css를 사용하고자 하는 파일 상단에 import 하고 다음과 같이 사용한다 NavBar.js import styles from "./NavBar.module.css" export default function NavBar() { const router = useRouter() return ( Home About ) } CSS Module의 장점 css.module 형식은 클래스 이름을 추가할 때 클래스 이름을 텍스..

1. cmd에 cd 경로명을 입력하여 프로젝트 생성을 원하는 공간을 지정한 후 npx create-next-app@latest을 입력하여 프로젝트를 생성한다 2. code 프로젝트명을 입력하여 vsc에서 프로젝트를 연다 3. npm run dev를 vsc 터미널에 입력하여 문제가 없는지 확인한다 4. url에 접속하였을 때 아래와 같이 뜨면 정상적으로 작동 중인 것이다 5. pages 폴더에서 index.js를 제외한 모든 파일들은 지운다 6. index.js를 페이지를 나타내는 필수적인 코드인 다음의 코드로 수정한다 index.js export default function Home() { return () } 6. next.js에서의 pages 폴더 안의 파일은 그 파일명의 url 페이지를 생성한다 ..

로그인 방법 Firebase Project에 들어가 로그인 방법을 설정한다 Manage Users https://firebase.google.com/docs/auth/web/start?hl=ko 이 문서를 바탕으로 사용자를 관리한다 State Persistence 문서: https://firebase.google.com/docs/auth/web/auth-state-persistence State Persistence는 사용자들을 어떻게 기억할 수 있는지 선택할 수 있게 한다 session은 탭이 열려있는 동안에는 사용자 정보를 기억하는 것을 의미한다 local은 탭을 닫더라도 사용자 정보를 기억하는 것을 의미한다 (기본값) none은 사용자 정보를 기억하지 않는 것이다 On Auth State Chang..

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...