WEB/React10 [REACT] 16. Firebase [REACT] 16. Firebase Contents 01 Firebase란? 02 프로젝트 생성 03 Cloud Firestore 데이터 추가하기 어플리케이션 등록하기 KEY 저장하기 데이터베이스 연결 확인하기 전체 데이터 가져오기 - getDocs() 일부 데이터 가져오기 - doc() , getDocs() 조건 검색하기(1) - query() 조건 검색하기(2) - where() 데이터 추가하기 - setDoc() 데이터 수정하기 - updateDoc() 데이터 삭제하기(1) - deleteDoc() 데이터 삭제하기(2) - updateDoc(), deleteField() 01 Firebase란? ❖ Firebase • 구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다. • 백엔드 서버 기능을 클.. 2022. 12. 13. [REACT] 15. 네트워크 통신 [REACT] 15. 네트워크 통신 Contents 01 동기 vs 비동기 02 async와 await 03 fetch() 함수로데이터 가져오기 01 동기 vs 비동기 ❖ 동기 방식(synchronous) • 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있 는 방식 • 특징 : 설계가 간단하고 직관적 • 요청에 대한 응답을 받을 때까지 대기해야 하는 단점 ❖ 비동기 방식(Asynchronous) • 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행 하는 방식 • 특징 : 동기 방식보다 복잡함 • 요청에 대한 응답을 받기까지의 대기 시간에 다른 작업을 할 수 있음 👉 자원을 효율적으로 이용할 수 있다. 비동기 : 일해! 나는 다른 일(다른코드 실행중) 하고 있을게! + 기본적으로 fetch.. 2022. 12. 12. HOOKS 6가지정리 [ 1️⃣useState() 2️⃣ useRef() 3️⃣ useEffect() 4️⃣ useMemo() 5️⃣ useCallback() 6️⃣ useReducer() ] HOOKS 6가지정리 1️⃣ useState() - const [state, setState] = useState(초기값) - 값이 변경되면 재렌더링 2️⃣ useRef() const state = useRef(초기값) state => 객체 state.current => 값 저장 - 값이 변경되면 렌더링 x 3️⃣ useEffect() - useEffect(콜백함수, 의존성배열) - 의존성배열 : 옵션 - useEffect(()=>{ 하고 싶은 일 }) : 렌더링 될 때마다 콜백함수 실행 - useEffect(()=>{ 하고 싶은 일 }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행 - useEffect(()=>{ 하고 싶은 일 }, [value]) : value 값이 변경되었을 때 콜백.. 2022. 12. 12. React란, React특징, 컴퍼넌트 내 주요 키워드 1) React(리액트)란? - 페이스북사에서 만든 자바스크립트 라이브러리이다. - 페이스북에서 자체적으로 사용하기 위해 만들었고, 많은 웹 어플리케이션에 적용하고 있다. - 유저 인터페이스를 만드는 라이브러리이다. - React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(PC 어플리케이션) 2) 리액트의 특징 - 컴퍼넌트로 이루어진 UI 라이브러리 - 컴퍼넌트는 한 가지의 기능을 수행하는 UI 단위를 말한다. - 리액트 어플리케이션은 꼭 하나 이상의 컴퍼넌트로 이루어져 있다. - 최상위 컴퍼넌트는 Root 이다. - virtual DOM tree 를 가지고 있다. 3) 컴퍼넌트 내 주요 키워드 1. state - 데이터의 상태를 나타내는 객체 2. re.. 2022. 12. 9. 리액트 공부조각5. props 를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트의 props 라는 개념에 대해서 알아보겠습니다. props 는 properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다. props 의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면, 이렇게 코드를 작성하면 됩니다. 여러개의 props, 비구조화 할당 Hello 컴포넌트에 또 다른 props 를 전달해봅시다. color 라는 값을 설정해보세요. defaultProps 로 기본값 설정 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됩니다. prop.. 2022. 11. 27. 리액트 공부조각 4. JSX 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환을 해줍니다. 어떻게 변환되는지 한번 예시를 볼까요? 꼭 닫혀야 하는 태그 태그는 꼭 닫혀있어야 합니다. JSX 안에 자바스크립트 값 사용하기 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다. style 과 className JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다. 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다. 그리고, CSS class .. 2022. 11. 27. React 기초 3강 : 리액트에선 변수말고 state 만들어 쓰랬죠 (useState) https://www.youtube.com/watch?v=Qb8Oiy8i9IY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=4 데이터 저장에는 2가지 방법이 있다. 1. 변수에 넣거나 ( 위 사진의 방법 ) ↑ 2. state에 넣거나 ( 아래 사진들의 방법 ) ↓ 맨 윗줄, import React from 'react'; 👉 import React, {useState} from 'react'; //의미 : 리엑트에 있는 내장함수 하나를 쓰도록 하겠습니다. 로 고쳐서 타이핑 하여 리액트의 데이터 저장공간 state를 만든다. ㄴ이로써 useState() 라는 함수를 사용할 수 있다. (참고) ES6 destructuring 新문법 let [a,b] = useState.. 2022. 11. 26. React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) https://www.youtube.com/watch?v=FqnAFX9lQPQ React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) App.js - 일종의 자바스크립트 이기 때문에 자바스크립트 문법에 맞추어서 작성해야한다. 에러사항은 터미널에 나와있어서 바로바로 수정할 수 있다. 🟢App.js 작성중 메인페이지 작동원리 index.js가 : App.js 파일의 내용을 public 에 있는 index.html 안에 박아 넣어주세요~ 라고 index.js 파일에서 말해주고 있다. 정확히 말하면, id가 root인 div 태그에 왜 App.js 를 다 가져다 주세요~ 🟠index.js 그래서 실제로 렌더링되는 것은 HTML 파일들 인데 div 안에 있는 내용들이 html 파일에 꽂히.. 2022. 11. 26. React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) https://www.youtube.com/watch?v=nahwuaXmgt8 1.Node.js 검색 후 최신버전 설치하세요. ㄴ Q. 저는 Node.js 설치가 이미 되어 있는데요? ㄴ A. 100% 에러남 최신버전으로 재설치 ㄱㄱ 2. Visual Studio Code 에디터 설치 3. 코드짤 응큼한 폴더 만드셈 4. 에디터에서 작업폴더 Open Folder 하셈 5. 리액트 프로젝트 생성은 터미널을 열고 npx create-react-app 프로젝트명 입력 $ npx create-react-app blog // 의미 : blog란 이름의 리액트 프로젝트를 만들겠다는 의미. npx : 라이브러리 설치를 도와주는 명령어, (nodejs.. 2022. 11. 26. 이전 1 2 다음 728x90 반응형
