react5 [React+Firebase] Set up, Auth 원하는 디렉터리에 > npx create-react-app 내플젝이름 > code 내플젝이름 이렇게 명령어 입력해서 VScode 편집기로 내 플젝 열기 VScode 터미널에서 firebase를 install 해준다. npm i firebase@9.6.1 src 폴더에 firebase.js 파일 만들어주고 내가 firebase 사이트에서 만든 앱 정보 넣어주기 import firebase from 'firebase/app'; const firebaseConfig = { ... }; export default firebase.initializeApp(firebaseConfig); index.js에서 import해주고 console.log 찍어보기 (실행은 VScode 터미널에서 npm run start) o.. 2022. 1. 4. [React] 마지막 정리 immutable 불변. 구현을 단순하게 유지하기 위함. 너무 높은 변경가능성을 방지하기 위한 노력이다. 객체를 immutable하게 다루기위한 여러 라이브러리들이 있다. 대표적: immutable.js - 배열, 객체의 대체제로 사용가능 - 모든 연산을 원본을 변경하지 않고 복제된 것을 return - react와 단짝 router 우리의 웹 어플리케이션은 하나의 url로 모든 페이지를 다루고 있음 페이지 전환을 할 때 마다 네트워크 로딩을 하지않음 url 만으로 페이지를 찾아올 수 없다는 단점이 있다. url에 따라서 다른 UI가 나오게 할 수 있는데 이것을 도와줄 도구가 있다. 대표적: React Router - url에 따라서 적당한 컴포넌트를 실행시킬 수 있다. - url로 접근하는 사용자에게는.. 2021. 10. 16. [React] 이벤트, state 파고들기 이벤트를 사용해봤는데, 우리의 태그에 이벤트를 만들어서 그 태그, 컴포넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 해본 적은 없다. 이벤트의 생산자가 되어볼 차례! 라는 코드는 원래 subject.js 안에 있던 코드이다. 지금은 subject.js 파일을 주석처리하고 내용을 바깥쪽으로 옮겨놓은 상태이다. 이제 이 코드를 비활성화하고 subject 컴포넌트 주석을 풀었다. subject라는 컴포넌트를 사용할 때, 사용자가 링크를 클릭했을 때의 이벤트를 설치하고 싶을 때 onChangePage라고 하는 이벤트를 쓰세요, 하고 거기에 함수를 설치해놓는다. 사용설명서에는a태그 클릭되었을 때 설치한 함수를 실행해드릴게요 라고 적어놓는다. 정리) 우리가 만드려는 subject 컴포넌트는 onchan.. 2021. 10. 7. [React] event에서 state 변경 (feat. bind, setState) state를 세팅해놓은 작업과 event를 설치한 작업을 연결시킬 것이다. 하려고 하는 것! WEB이라는 글씨를 누르면 App이라는 컴포넌트의 값을 mode로 바꾸고 싶다. e.prevenDefault 아래에 this.state.mode= 'welcome' 을 쓰면 오류가 나는데 여기에는 두 가지 에러를 포함하고 있다. 1. event가 호출됐을 때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가르키는 것이 아니라, 아무 값도 셋팅되어있지 않다. => 해결방법: 함수가 끝나는 직후에 .bind(this) 를 추가해서 함수 안에서 this는 우리의 컴포넌트가 될 수 있도록 한다. 2. 하지만 코드를 작성하고 WEB을 눌러도 welcome 모드로 바뀌지 않는데 => 이유는 리액트는 state.. 2021. 10. 7. 이전 1 2 다음
