7일차 | git 연결 , props, counter, inputs

Git
버전관리 시스템의 종류
버전관리: 여러 파일을 하나의 전으로 묶어 관리하는 것

버전 관리 시스템의 종류
1. 클라이언트 - 서버 모델
 - 하나의 중앙 서버 여러 클라이언트들이 각자 필요한 데이터만 가져와서 작업을 하고, 다시 중앙 서버로 보내서 통합하는 방식
 - CVS, SVN

2. 분산 모델
 하나의 중앙 서버가 존재하지만 여러 클라언트들은 각자의 컴퓨터 저장소에 전체 사본을 가지고 작업하는방식
 - Git
 
 Git의 장점
 - 동시에 작업하는 사람들과 소스코드를 주고 받을 필요가 없음
 - 같은 파일을 여러명이 동시에 병렬 개발이 가능
 - 변동 과정에 체계적으로 관리할 수 있고, 언제든지 지나 시점의 버전으로 되돌릴 수 있음
 - 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 서버의 데이터가 유실되어도 다시 복구할 수 있음

1. 구글에서 'git설치' 검색
2. 좌측 메뉴 'download' 클릭
3. 자신의 운영체제에 맞는 프로그램을 다운로드
4. git이 설치되어 있는지 학인
  - cmder에서 git 명령어로 확인

5. 기본설정으로 설치

터미널 기본 명령어
컨트롤 + L :화면 클리어
pwd: 현재 디렉토리 경로를 표시
ls: 현재 디렉토리에 존재하는 디렉토리와 파일을 표시
cd: 다른 디렉토리로 이동
    cd.. : 상위 디렉토리로 이동
    cd 디렉토리명: 해당 디렉토리로 이동

6. git 로컬 저장소 생성
   git init
   ls -al
   숨긴 디렉토리까지 확인

7. git에 버전 관리 파일들을 생성
  README.me , index.html 등등

8. 버전관리 파일 선택
  git add index.html
  스테이지에 올림

9. 버전관리 파일 커밋 
   git commit -m "index.html 버전관리"
   git log

[오류발생시 해결방법]
git config --global user.email "깃허브에 사용할 이메일 주소"
git config --global user.name "이름"

10.  로그 확인
      git log 

11. 여러 파일을 함께 선택
     git add .
     스테이지에 현재 디렉토리에 있는 모든 파일을 올림

12. 여러 파일 커밋
     git commit -m "현재 디렉토리에 있는 모든 파일 등록1" 


13. 로컬 저장소에 github 저장소 주소 설정
    git remote add origin https://github.com/gomaci/test1.git
 
14. 만든 커밋 github 푸시
     git push -u origin master




원격 저장소(github)의 자료를 내 컴퓨터로 가져오기
1. 새로운 디렉토리로 이동

2. 원격 저장소에서 자료를 복사해서 가져오기
  git clone https://github.com/gomaci/test1.git (폴더생성)
  git clone https://github.com/gomaci/test1.git . (파일만생성)


GitHub pages
  - 정적 웹 사이트 호스팅을 해주는 깃허브 페이지를 이용하여 웹 페이지를 서비스
  - 깃허브 페이지는 깃허브에서 제공하는 적정 사이트 호스팅 서비스로 HTML 컨텐츠를 지원하는 것 외체도 여러가지 적정 사이트 생성기인 Jeky11을 지원

 

정리.txt

axios 모듈  GET, PUT, POST, DELETE 등의 메소드로 API 요청을 합니다.  yarn add axios

App.js

import React from 'react';
import Hello from './components/hello';
import Hello02 from './components/hello02';
import Counter from './counter';
import Input from './input';
import Input_m from './input_m';


function App() {
  // const name01 = "홍길동"
  return (
      <div>
          <Hello name ='react' aaa='30' color = 'red'/>
          <Hello02 name ='react' color = 'red'  isSpecial = {true}/>
          <hr/>
          <Counter/>
          <hr/>
          <Input/>
          <hr/>
          <Input_m/>
          <hr/>
      </div>
  );
}

export default App;

hello.jsx

import React from "react";

function Hello({name_02}){
    return (
    <>
    {/* <div style={{color: props.color}}>안녕하세요 {props.name}</div>
    <div>안녕하세요 {props.aaa}</div> */}
    <div>안녕하세요 {name_02}</div>
    </>
    )
}
//기본 속성값을 선언
Hello.defaultProps = {
    name_02: '이름없음'
}

export default Hello;

hello2.jsx

import React from "react";

function Hello02({color, name, isSpecial}){
    return (
    <>
    <div style={{color}}>
        {isSpecial ? <b>*</b>: null}
        {isSpecial && <b>+++</b>}
        안녕하세요 {name}
        </div>
   </>
    )
}
//기본 속성값을 선언
Hello02.defaultProps = {
    name_02: '이름없음'
}

counter.js

import React, {useState} from 'react';
//hooks 함수


function Counter(){
  //자바스크립트
  const [number, setNumber] = useState(0);//숫자형
  // const [number, setNumber] = useState('');//문자형
  // const [number, setNumber] = useState(true);//상태
  const fplus = () => {
    setNumber(number + 1);
  }
  const fminus = () => {
    setNumber(number - 1);
  }

  return(
    <div>
          <h1>{number}</h1>
          <button onClick={fplus}>+1</button>
          <button onClick={fminus}>-1</button>
    </div>
  );
}

export default Counter;

input.js

import React, {useState} from 'react';
//hooks 함수


function Input(){
  const [text, setText] = useState('');
  const onChange = (e) => {
    setText(e.target.value)
  }

  const onReset = () =>{
    setText('')
  }
  return(
    <div>
          <input type = 'text' onChange={onChange} value={text} />
          <button onClick={onReset}>초기화</button>
    </div>
  );
}

export default Input;

input_m.js

import React, {useState} from 'react';
//hooks 함수

function Input_m(){
  const [inputs, setInputs] = useState({
    name: '',
    nickname:''
  });

  const { name, nickname } = inputs; //비구조 할당을 통해 값 추출

  const onChange = (e) => {
    const {value, name} = e.target //e.target name과 value
    setInputs({
      ...inputs,//기존의 input태그 
      [name] : value //해당 네임을 가진 input에 value 값을 설정하는 것
    })
  }

  const onReset = () =>{
    setInputs({
      name:'',
      nickname:''
    })
  }
  return(
    <div>
          <input name = 'name' onChange={onChange} value={name} placeholder='이름' />
          <input  name = 'nickname'  onChange={onChange} value={nickname} placeholder='닉네임' />
          <button onClick={onReset}>초기화</button>
    </div>
  );
}

export default Input_m;