코딩 발걸음 - 한발두발개발

1. Material-UI 인스톨하기 npm install @material-ui/core npm install @material-ui/icons 위 코드 외에도 Material-UI에서 제공하는 Component나 Template 필요한것들 마찬가지로 install 해줘야 한다. 우리가 붙일 SignUp 템플릿또한 core외에도 icons라는 것이 필요하기 때문에 인스톨을 해준다. 2. 컴포넌트 붙여넣기 먼저 네비게이션 탭을 붙인다.(안붙여도 상관 없다.) https://material-ui.com/components/tabs/ 나 적당한 Component를 찾고 붙여준다. Component를 관리할 폴더에 Menu라는js를 따로 만들어서 임포트를 해주었다. import './App.css'; impo..

Material-UI 전적으로 CSS로 만들어져 있어서 자바스크립트에 의존하지 않음 머티리얼 디자인 시스템이 포함되어있음. 최근 사용자가 많은 만큼 레퍼런스가 많다. 레퍼런스가 많지만 부트스트랩에 비해서 출시된지 4~5년밖에 안된 만큼 에러에 대한 답이 적음 애니메이션을 많이 제공한다. Bootstrap 모바일 친화성,자바스크립트 요소가 많이 들어가 있음. 제공하는 컴포넌트가 많지만 무난한 디자인들이다. 거대한 커뮤니티 그외 : 사용할 UI라이브러리 Material-UI 선택에 가장 큰 이유 : 디자인 특징을 자세하게 비교 참조 : https://codersera.com/blog/bootstrap-vs-material-ui-which-is-best-for-next-web-app/ Bootstrap Vs ..

import "./styles.css"; import React from "react"; import { useState } from "react"; export default function App() { return ( ); } //숫자를 증가시키는 컴포넌트의 문법 차이 //Class형 Component //클래스 사용의 어려움과 재사용, 조립이 어렵다. 코드가 길다. //오류파악을 직관적으로 할 수 있음 class Origin extends React.Component { constructor(props) { super(props); this.state = { Count: 0 }; } increase = () => { this.setState({ Count: this.state.Count + 1 }..

클라이언트 서버가 아닌 먼저 Database에 접근할 백엔드 서버를 구축한다. const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = 3001; const mysql = require('mysql'); const db = mysql.createPool({ host : '127.0.0.1', user : 'root', password : 'root', database : 'react_db' }); app.get('/', (req, res) => { res.send('연결 되었습니다.') }); app.get('/api/userList', (req, res) ..

1. Express설치 리액트와 다른 포트사용 1-1. express 설치 1-2. nodemon 설치 1-3. mysql설치 2. concurrently를 이용한 두개의 서버를 동시에 실행하기 concurrently를 이용하지않는다면 클라이언트와 express서버에서 따로 서버를 실행 시켜줘야한다. 하지만 concurrenttly를 이용 하면 두개의 명령을 동시에 실행시킬수 있도록 도와준다. //설치 npm install concurrently 설정 후 터미널에서 npm run client와 npm run server를 입력하여 정상 실행하는 지 꼭 확인해본다. 정상작동이 된다면 npm run dev로 concurrently를 실행시킨다.

MPA와 SPA MPA (Multi Page Application) 말그대로 여러개의 페이지로 만들어진 어플리케이션을 의미한다. 이용자는 서버에 데이터를 요청하고 서버는 사용자에게 맞는 페이지를 구성하고 요청한 페이지 자체를 제공해준다. SPA (Single Page Application) 하나의 페이지로 구성된 어플리케이션을 의미한다. React는 SPA를 기반으로 하며 client가 HTML을 다운로드 받을 때 모든화면을 구성 하는 javascript를 다운로드 받고 그 javascript를 이용하여 서버에 데이터만 요청하고 사용자의 화면을 변화시킨다. 단점으로는 최초 HTML을 다운로드할 때 웹사이트의 모든 화면을 구성하는 스크립트들을 다운받아와야하는데 이때의 로딩속도가 길다. CSR과 SSR 2-..

리액트에서 Router를 나누기 위해 react router dom 이라는 것을 사용한다. 1.설치 npm install react-router-dom을 이용해서 설치를 해준다. index.js를 열고 아래 코드처럼 추가할 부분을 추가해준다 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; //추가할 부분 ReactDOM.render( {/* 추가할 부분 */} , document.getE..

React의 특징 3가지 1.Component UI를 구성하는 개별적인 뷰 단위이다. 전체 앱은 Component들이 결합해서 만들어 지게 됨 무엇보다 Component는 다른 부분, 혹은 다른 앱에서도 쉽게 재활용이 가능함. 2.JSX 자바스크립트 확장 문법으로 보통 ES6를 이용하여 작성한다. 3.Virtual DOM 리액트의 가장 큰 특징. 뷰에 변화가 생길때 실제DOM에 적용되기전 가상의 DOM에 먼저 적용을 시킨뒤 최종적인 결과를 DOM으로 전달해줌 https://velopert.com/3236 2.기초 세팅 1. node 다운로드 2. vs code 다운로드 3. npx create-react-app [프로젝트 명] [추후 더 깊히 찾아볼 예정] *잠깐 npm과 npx의 간단한 차이를 보자면 ..