1. 채널(채팅방) 생성 파이어베이스 데이터베이스 -서버를 구축하지 않고 파이어베이스의 데이터베이스 활용. -파이어베이스에서 제공하는 파이어스토어는 NoSQL 문서 중심 데이터베이스로써, SQL 데이터베이스와 달리 테이블이나 행이 없고 컬렉션(collections), 문서(document), 필드(field)로 구성됨. -컬렉션과 문서는 항상 유일한 ID를 가지고 있어야함. 이번 프로젝트에서는 channels라는 ID를 가진 하나의 컬렉션을 만들고 생성되는 채팅방을 channels 컬렉션에 문서로 저장 예정. 파이어베이스 데이터베이스 규칙 수정 ChannelCreation.js KeyboardAwareScrollView 컴포넌트 : Input 컴포넌트를 사용할 때 자동으로 스크롤 위치를 이동하여 키보드가..

🤍Context API란 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능 🤍전역 상태 관리 일반적인 리액트 네이티브(React-Native) 애플리케이션의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됨. 예를 들어, 어떤 데이터를 App 컴포넌트에서 관리할 경우, App 컴포넌트로부터 데이터를 필요로 하는 컴포넌트까지 props를 통해 값을 전달해 사용함. -> 하지만 props를 사용하는 방법은 번거로움. (관리하는 상태가 추가, 변경될 경우 과정에 속한 모든 컴포넌트를 찾아 수정해야함.) 이때, Context API를 생성하면 중간 과정에 있는 컴포넌트들을 거치지 않고 한 번에 원하는 데이터를 바로 받아와서 사용할 수 있다. 🤍Context API 실습 expo init react-nat..

🤍리액트 네이티브 훅(React Native Hooks)이란? 리액트 16.8 버전에서 새롭게 추가된 기능 이전에는 컴포넌트 상태 관리, 생명 주기에 따른 특정 작업 시 클래스형 컴포넌트를 사용해야 했음. Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수 Hooks 목적 useState 상태 유지, 변경 useEffect 이벤트 처리 useContext 정보 공유 useReducer 상태 유지 및 변경(Redux) useCallback 콜백 함수 캐시 useMemo 데이터, 값 캐시 useRef 특정 컴포넌트 선택 🤍리액트 네이티브 훅(React Native Hooks) 실습 expo init react-native-ho..

🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 exop init react-native-todo //프로젝트 생성 cd react-native-todo npm install styled-components prop-types //프로젝트에서 사용할 라이브러리 설치 프로젝트에서 사용할 색상 정의 - theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', } 1.타이틀 만들기 import React f..

✅일반 변수의 선언 방식 let num = 1; num = 2; ✅useState 선언 방식 let [num, setNum] = useState(1); setNum(2); ✅useState 사용 시 주의할 점 상단에 정의할 것 바로 실행하지 말 것 반복문 안에 정의하지 말 것 if문 안에 정의하지 말 것 🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때 아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나 console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다. 이때 useState()를 활용할 수 있다. 실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다. useState를 사용하면 -> setNum이라는 함수를 사용했을 때..

🤍React.js 구조 build : 빌드 시 생성되는 디렉토리 node_modules : 리액트 실행에 필요한 모듈 디렉토리 public : 정적 파일 디렉토리 src : 프로젝트 source 디렉토리 🤍React.js 변수 적용 기존 자바스크립트에서 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다. 하지만 리액트에서 변수를 적용할 때에는 이렇게 {변수명} 간단한 방법으로 변수를 적용할 수 있다. let name = 'hancoding'; {name} 실제 크롬에서 확인해 봐도 태그 안에 hancoding이 들어간 것을 확인할 수 있다.

이번에도 한코딩님의 유튜브 강의를 들으며 도움받았습니다! 스프링부트와 리액트를 같이 공부하고 싶었는데 좋은 강의 감사합니다,,,🥰 ✅React.js 란? 자바스크립트 라이브러리 SPA(Single Page Application) 한 페이지에서 모든 요소를 불러와서 동작->페이지 이동X 🤍인텔리제이(IntelliJ) 스프링부트 환경에서 리액트 설치하기 1. 프로젝트 생성 2. 의존성은 일단 Spring Web, Lombok, MySQL Driver 3가지만 추가해 준다. 3. 프로젝트 생성 후 ExamApplication을 실행하면 당연히 만들어놓은 페이지가 없기 때문에 아래와 같은 페이지가 뜸. 4. 이제 리액트를 설치해 준다. cd src/main//main 디렉토리로 이동 npx create-reac..

위와 같이 페이지 중에서는 아무나 진입 가능한 페이지, 로그인한 회원만 진이 가능한 페이지, 로그인한 회원은 진입하지 못하는 페이지가 있다. 또는 관리자만 진입 가능한 Admin Page도 있다. 이렇게 인증이 이루어져야만 하는 페이지, 혹은 댓글 작성,파일 전송, 파일 업로드 등 인증이 필요한 작업들이 있는데 이러한 인증은 어떻게 할 수 있을까? => higher-order component function을 사용하면 된다. 🔍Auth (HOC) higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다. 서버에 응답받은 유저의 상태 정보(로그인 여부, 관리자인지 회원인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지..