다른 사람이 github에 파일을 수정하고, 수정 한 파일을 가져오려면

git fetch를 한다. 그리고 내가 수정한 파일을 가져왔기 때문에 충돌이 난다.

그렇기 때문에 git merge를 사용해야한다.

 

git pull = git fetch + git merge

 

git을 컴퓨터에 처음 설치 했을 때 설정

// git commit에 사용될 username

git config --global user.name "이름지정"

// git commit에 사용될 email

git config --global user.email "메일@example.com"

//설정한 내용 확인

git config --list

 

 

원격 저장소 이름 지정

git remote add test url(https://github.....~~~)

기본값인 origin 대신 test라는 이름으로 지정!

 

 

원격 저장소의 이름 확인

git remote show 이름

 

전체 목록을 보고 싶을 때

git remote -v

 

원격 저장소 삭제 할 때

git remote rm origin

 

원격 저장소 이름 변경

git remote rename test1 test2

test1 -> test2 변경

 

원격 저장소(github) 연동하기

git remote add origin 깃허브repository(url)

 

작업 내역 보기

git log

q버튼 눌려서 빠져나옴

 

 

작업 내역 한 눈에 그래프로 보기

git log --graph --all --decorate

 

모든 브랜치 로그 보기

git log --branches --decorate

 

branch

git branch : branch 목록 확인

git branch+이름 :   새 이름의 branch 생성

git checkout 이름 : 커서 변경

 

 

 

생각 나면 다시 추가하기!

'github' 카테고리의 다른 글

[git] git clone(복제) 한 뒤 나의 github에 push 하기  (0) 2021.01.16
markdown 문법  (0) 2021.01.12
eclipse 프로젝트와 Github 연결  (0) 2020.12.19

색을 표현하는 방법

 

  • 색이름으로 표기
  • HEX값으로 표기
  • RGB값으로 표기

 

색이름

css가 지원하는 표준 색이름을 사용한다.

 

white :흰색

aqua : 아쿠아색

beige: 베이지색

red: 빨간색

green

yellow

...........

등등

 

HEX값

16진수 표기법으로 광원(빛의 3원색)인 red, green, blue 조합으로 표기한다.

  • #000000:  광원을 하나도 사용하지 않은 검정색으로 표시
  • #ff0000: 명도와 채도가 가장 높은 빨간색이 표시
  • #00ff00 : 명도와 채도가 가장 높은 초록색이 표시 
  • #0000ff: 명도와 채도가 가장 높은 파란색으로 표시
  • #ffffff: 광원 모두를 합한 색으로 흰색으로 표시

 

RGB값

 

RGB 각 광원당 256개의 숫자로 표기

  • rgb(255,0,0): 빨강
  • rgb(0,255,0): 초록
  • rgb(0,0,255) : 파랑

 

'CSS' 카테고리의 다른 글

[CSS ] 세로 가운데정렬 : align-self , align-items  (0) 2020.12.29
[CSS] display: grid - justify-self, justify-items  (0) 2020.12.29
display : inline , block, inline-block  (0) 2020.12.21
CSS - background 속성  (0) 2020.12.21
자손, 자식 결합자 , 속성 선택자  (0) 2020.12.08

display

HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나는 display 입니다.

 

display : inline

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 inline 입니다.

  1. <span>
  2. <a>
  3. <b>
  4. <i>
  5. <img>
  6. <button>

<i> 태그는 기본적으로 inline이기 때문에 앞, 뒤의 텍스트와 같은 줄에 머무르고 있고, 가로 길이는 필요한 만큼만 차지하고 있습니다.

 

 

ex) 

<style>
        body{
                    background-color: gray;
                }
        span{
            background-color: red;
        }
</style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

inline 속성인 span에 배경색을 주면

 

필요한 만큼 자기 크기 만큼만 공간을 차지한다.

 

※  inline 요소는 필요한 크기만큼 공간을 차지하기 때문에 가로, 세로의 길이 개념이 딱히 없다.

 span{
            background-color: red;
            height: 100px;
        }

세로 길이를 100px 지정 해주었다.

결과는 변함이 없다. 만약 block 요소 <p>에 길이를 설정해준다면??  밑에서 확인

display : block

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 block 입니다.

  1. <div>
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  3. <p>
  4. <nav>
  5. <ul>
  6. <li>

<div> 태그는 기본적으로 block이기 때문에 새로운 줄에 가버립니다. 그리고 가로 길이는 최대한 많이, 100%를 차지한다.

 

ex)

<style>
        span{
            background-color: red;
        }
        body{
            background-color: gray;
        }

        p{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

<p> 태그에 배경색을 지정했다.

자기 글자 크기 만큼 배경색을 입히는 게 아니라

최대한 많이 가져간다.

 

 

※ block 요소는 가로,세로 길이를 직접 설정 해 줄 수 있다.

 p{
            background-color: skyblue;
            height: 100px;
        }

 

세로 길이가 늘어났다.

display : inline-block

 

inline 속성 처럼 같은 줄에 있으려고 하고,

block 속성 처럼 가로 세로 길이를 가질 수 있는

즉 둘 다 가질 수 있는 속성이다.

 

먼저 inline 요소 <span> 를 block 요소로 바꿔보자

 

inline -> block

 

 span{
            background-color: red;
            height: 100px;
            display: block;
        }
        
        
        
        <p>html,css,javascript , <span>react</span> 공부하기</p>

결과는?

분명 <p> 태그 안에있었는데 block 요소로 인해 자기만의 새로운 줄을 만들었고

세로길이도 적용이 되어 길어졌다.

 

덕분에 "공부하기" 글자가 이탈되었다.

 

 

※여기서 inline 속성인 span을 inline-block으로 바꾼다면??

 

inline -> inline-block

 span{
            background-color: red;
            height: 100px;
            display: inline-block;
        }
        
        
        <p>html,css,javascript , <span>react</span> 공부하기</p>

결과는?

 

 

inline 속성처럼 같은 줄에 머무르면서도 block 요소처럼 가로,세로 길이를 설정 할 수 있다.

 

 

가운데 정렬

 

inline 또는 inline-block 요소 일 경우

 

text-align : center;를 해주면 된다.

 

block 요소 일 경우

margin-left : auto;

margin-right : auto; 를 해주면 된다.

 

 

 

'CSS' 카테고리의 다른 글

[CSS ] 세로 가운데정렬 : align-self , align-items  (0) 2020.12.29
[CSS] display: grid - justify-self, justify-items  (0) 2020.12.29
HTML, CSS 색 코드  (0) 2020.12.21
CSS - background 속성  (0) 2020.12.21
자손, 자식 결합자 , 속성 선택자  (0) 2020.12.08

background-image

 

background-image: url("경로");

 

 

background-repeat

 

/* 반복하지 않음 */
background-repeat: no-repeat;

/* 가로 방향으로만 반복 */
background-repeat: repeat-x;

/* 세로 방향으로만 반복 */
background-repeat: repeat-y;

/* 가로와 세로 모두 반복 */
background-repeat: repeat;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */
background-repeat: space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */
background-repeat: round;

 

 

background-size

/* 원래 이미지 사이즈대로 출력 */
background-size: auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;

/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;

/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;

 

 

background-position

 

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;

'CSS' 카테고리의 다른 글

[CSS ] 세로 가운데정렬 : align-self , align-items  (0) 2020.12.29
[CSS] display: grid - justify-self, justify-items  (0) 2020.12.29
HTML, CSS 색 코드  (0) 2020.12.21
display : inline , block, inline-block  (0) 2020.12.21
자손, 자식 결합자 , 속성 선택자  (0) 2020.12.08

eclipse 프로젝트

 

우클릭 -> Team -> Share Project

 

 

Use or create repository in parent folder of project 클릭

 

 

 

Create Repository 클릭  -> finish

 

 

프로젝트 옆에 글자가 생기고

폴더에 ?가 생김

 

 

다시 우클릭 -> Team을 클릭하면

 

많은 메뉴가 생긴 것을 알 수 있다.

 

 

 

Local Repository 저장

 

 

 

Add to index를 해서 

 

이때 까지 작업한 프로젝트 내용을  인덱스 공간으로 옮긴다.

 

 

그리고 Commit을 클릭하여

 

나의 local repository에 저장한다.

 

 

 

원격 저장소(Github)와 연동 후 저장

 

push Branch 'master'

 

 

 

github repository 복사

 

 

 

github repository 주소 입력

 

마지막에 push 클릭

 

 

 

github에 가면 commit 메세지 "hello world"가 보이며

 

로컬 저장소와 github 저장소가 동기화 된 것을 볼 수 있다.

'github' 카테고리의 다른 글

[git] git clone(복제) 한 뒤 나의 github에 push 하기  (0) 2021.01.16
markdown 문법  (0) 2021.01.12
자주쓰는 git 명령어  (0) 2020.12.22

CSS 파일

.module.css로 파일 저장

 

 

Exampe.module.css

.container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

.message {
  background-color: brown;
}

 

Example.js

import React from 'react';
import styles from './Example.module.css'

const Example = () => {

    console.log("styles:" ,styles);
    return (
        <div className={styles.container}>
            <h1 className={styles.message}>css 스타일 입히기</h1>
            <p>CSS Module</p>
        </div>
    );
};

export default Example;

 

css 파일을 불러오기 위해 import 해줌

 

import styles from './Example.module.css'

이 때 객체를 하나 전달받는데 CSS Module에서 사용한 클래스 이름과 해당이름을 

고유화한 값이 키-값 형태로 들어 있다.

 

-> [파일 이름]_[클래스 이름]_[해시 값]

console.log(styles)를 통해 알아보자

파일이름(Example)_클래스 이름(container)_해시 값(3696j)

 

이렇게 CSS를 불러와서 사용할 때 자동으로 만들어지는데

이는, 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하기 위함이다.

 

 

CSS 적용

 

클래스를 적용하기 싶은 JSX 엘리먼트에

 

classname={styles.클래스이름} 지정

<div className={styles.container}>
<h1 className={styles.message}>css 스타일 입히기</h1>
     <p>CSS Module</p>
</div>

 

전역적으로 사용하고 싶으면

 

:global .container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

앞에 :global 입력

 

<div className="container">
<h1 className={styles.message}>css 스타일 입히기</h1>
    <p>CSS Module</p>
 </div>

클래스 이름은 평상시 처럼 문자열로 입력

 

 

 

'react' 카테고리의 다른 글

useEffect  (0) 2020.12.12
styled-components 설치 (css 사용)  (0) 2020.12.09
JSX 문법  (0) 2020.12.08
e.target 활용하기  (0) 2020.12.07
리엑트의 이벤트(Event)  (0) 2020.12.07

 

 

npm i concurrently express -save

 

문제해결!

 

 

'프로젝트 > react-management' 카테고리의 다른 글

react- map (반복문)  (0) 2020.12.14
Create React App  (0) 2020.12.14

고객 데이터

const customers =[{
  'id' :1,
  'image' : 'https://placeimg.com/64/64/1',
  'name' : '이순신',
  'birthday' : '940926',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :2,
  'image' : 'https://placeimg.com/64/64/2',
  'name' : '홍길동',
  'birthday' : '951222',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :3,
  'image' : 'https://placeimg.com/64/64/3',
  'name' : '장보고',
  'birthday' : '961222',
  'gender' : '남자',
  'job' : '대학생'
}
]

App.js

class App extends Component {
  
  render(){
  return (
    <div>
    <Customer
      id={customers[0].id}
      image={customers[0].image}
      name={customers[0].name}
      birthday={customers[0].birthday}
      gender={customers[0].gender}
      job={customers[0].job}
      
    />

    <Customer
    id={customers[1].id}
    image={customers[1].image}
    name={customers[1].name}
    birthday={customers[1].birthday}
    gender={customers[1].gender}
    job={customers[1].job}
    
  />
  <Customer
  id={customers[2].id}
  image={customers[2].image}
  name={customers[2].name}
  birthday={customers[2].birthday}
  gender={customers[2].gender}
  job={customers[2].job}
  
  
/>
</div>
  );
}
}

Customer.js에게 데이터 전달

 

데이터가 많아지면 코드가 길어짐

 

반복문 사용하여 구현!!

 

react에서는 반복문으로 map 함수 사용

 

 

map

{
      customers.map( c => {

        return(
          <Customer
            id={c.id}
            image={c.image}
            name={c.name}
            birthday={c.birthday}
            gender={c.gender}
            job={c.job}
            />

        );
      }

      )

    }

 

'프로젝트 > react-management' 카테고리의 다른 글

'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.  (0) 2020.12.14
Create React App  (0) 2020.12.14

 

 

cmd -> 명령 프롬포트

 

cd C:\workspace\React

 

npm install -g create-react-app

 

 

create-react-app 이름

cd 이름

yarn start

 

 

 

 

'프로젝트 > react-management' 카테고리의 다른 글

'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.  (0) 2020.12.14
react- map (반복문)  (0) 2020.12.14 
import React, { useState } from 'react';

const Info = () => {

    const [name , setName] = useState("");
    const [nickname, setNickname] = useState("");

    const onChangeName = (e) =>
    setName(e.target.value)
     console.log("렌더링이 완료 되었습니다.");
    console.log({name}); 

    const onChangeNickName = (e) =>
    setNickname(e.target.value)
    return (
        <div>
            <h1>이름 :{name}</h1>
            <h1>닉네임 : {nickname}</h1>

            <input type="text" value={name} onChange={onChangeName} />
            <input type="text" value={nickname} onChange={onChangeNickName} />
        </div>
    );
};

export default Info;

onChange 이벤트

 

이름 칸에 입력을 하면 console에 값이 나오게 했다.

 

근데 닉네임 칸에 값을 입력했는데,

console에 값이 나온다..

 

왜?

 

화살표 함수 말고

function 으로 하니깐 다시 괜찮아짐

function onChangeName(e){
        
        setName(e.target.value)
        console.log("렌더링이 완료 되었습니다.");
    console.log({name}); 

    }

 

알고보니

 

 const onChangeName = (e) => 
    setName(e.target.value)
     console.log(" name 렌더링.");
    console.log({name}); 

------------------------------------------
const onChangeName = (e) => {
    setName(e.target.value)
     console.log(" name 렌더링.");
    console.log({name}); 

};

중괄호를 안했다.. 중괄호를 하면

렌더링할 때 name 칸에 입력한 것만 (자기 것만 렌더링 된다.)

 

그리고 이렇게 중괄호를 하면

 

렌더링 될 때 마다 특정 작업을 수행하지 않는다.

 

ㅇㅇ를 입력했는데,  아직 작업은 o 만하고 있다.

 

 

UseEffect

렌더링 될 때마다 특정 작업을 수행한다.

 

 useEffect(() => {
        console.log("렌더링 완료")
        console.log({name, nickname});
    });

 

 

 

 

마운트 될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링 될 때만 실행하고,

업데이트될 때는 실행하지 않으려면 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다.

 

useEffect(() => {
        console.log("렌더링 완료")
        console.log({name, nickname});
    } ,[]);

인풋을 수정해도 컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타나고,

그 이후에는 나타나지 않는다.

 

 

특정 값이 업데이트 될때만 실행하고 싶을 때

 

useEffect의 두번 째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어준다.

useEffect(() => {
        console.log("렌더링 완료")
        console.log({name, nickname});
    } ,[name]);

name 인풋을 수정 할 때 콘솔에 작업이 수행 된다.

'react' 카테고리의 다른 글

react 컴포넌트 스타일링- css Module  (0) 2020.12.15
styled-components 설치 (css 사용)  (0) 2020.12.09
JSX 문법  (0) 2020.12.08
e.target 활용하기  (0) 2020.12.07
리엑트의 이벤트(Event)  (0) 2020.12.07

+ Recent posts

티스토리툴바