프로젝트5 4. 회원가입 페이지 (Client -> 프론트엔드) RegisterPage 폴더 안에 RegisterPage.js를 생성 후 만들었습니다. import React from 'react'; import {Formik} from 'formik'; import * as Yup from 'yup'; import {Form, Input, Button} from 'antd'; function RegisterPage(){ return( Sign up Submit ) } export default RegisterPage; Formik : React Native에서 컴포넌트들을 빌드하기 위한 React 구성 요소 및 Hook들의 작은 그룹 Yup: 스키마의 유효성 검증 라이브러리 Antd: 디자인 라이브러리 (여기에서는 Form, Input, Button 을 사용함) 2023. 2. 22. 3. Index.js (프론트엔드 시작지점) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); React-Dom : React의 순수 자바스크립트와 다른 문법으로 짜여진 코드를 Babel 를 통하여 변환한 후, HTML 문서와 연결하는 역할을 수행 렌더링 const root = ReactDOM.createRoot(document.getElementById('root')); div id = 'root' 인 index.html에 렌더링할 부분을 생성 r.. 2023. 2. 22. 2. App.js 설정 -> React-router-dom App.js가 가장 먼저 실행 될때, App.js를 다른 js파일들을 연결시키는 Router 개념으로 사용한다. npm install react-router-dom react-router-dom : 브라우저에서 사용되는 리엑트 라우터 BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다. Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다. Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다. Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사.. 2023. 2. 22. 1. React 생성하기 명령어: npx create-react-app 실행 결과: - node_modules - public - src - .gitignore - package-lock.json - package.json - README.md public -> index.html : react가 앞으로 실행시킬 html src -> 보통 실행시킬 파일을 js 형식으로 Client의 경우 프론트 엔드이며, 시작은 index.js에서 시작되고, App.js가 연결하는 포트 역할을 하게 된다. 2023. 2. 22. 이전 1 2 다음 728x90
