시작이 반

11/09

어제로 react 수업을 마치고 오늘부터 프로젝트 생성전체 로직을 배울 예정이다 .

이정도의 기능을 배우고 여기서 로그인 한 사람이 자신의 게시글 정보를 수정할 권한을 갖는 등의 기능을 배울것이라고 하셨고,

개인 실력에 따라 하나의 crud 를 목표로 삼거나 여러테이블 을 crud 하거나 읽는것만 하는걸 목표로 하고 프로젝트를 진행 하라고 하셨다.

작업 순환구조 로 client는 react 로 작업하고 server는 spring boot, 그리고 db는 mariadb로 진행하게 된다.

# 첫번째로 intellij에서 react 프로젝트를 생성해준다

react를 선택한 후 생성할 프로젝트 이름을 작성 해주고 create버튼을 클릭 해준다.

프로젝트를 생성 해준 후 필요한 패키지들도 설치 해준다.

$ npm i axios
엑시오스 설치

$ npm i react-router-dom
리엑트 라우터 설치

$ npm i use-immer
이머 설치

$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
차크라 ui 설치

function App() {
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
==> 차크라 ui는 App 파일을 이렇게 감싸주어서 적용까지 해야한다.

$ npm i preitter 
프리티어 설치

$ npm i @chakra-ui/icons
차크라 ui 에서 제공하는 icon 설치

이렇게 설치 를 해준후 

필요 없는 파일들을 정리 해주면 된다.

Setting 에 들어가 prettier를 검색하고 빨간색 박스 2개를 체크한후 저장 해주면 된다.

react내 src 폴더에 App.js 와 index.js 이 둘만 남겨두고 지워주면 되고 

index.js 파일을 이상태로 만들어 주고

App.js 파일은 내부 텍스트 를 모두 지워주고

rsf

rsf 만 입력 하고 엔터를 쳐주면 초기 셋팅은 끝이 나게 된다. 

# 생성한 react 프로젝트를 git repository 에 적용 시키기

내 git Hub로 들어가  New repository를 해준다. 

repository의 이름을 작성해준 후 생성해준다.

빨간색으로 가린 부분의 주소를 복사하고

생성한 react의 프로젝트 git 의 master 에 우클릭을 한 후 push 를 눌러 준다.

push 버튼을 누르면 이런창이 뜨는데 Define remote 버튼을 클릭 해준다. 

그럼 여기 URL 칸에 아까 빨간 부분으로된 복사한 주소를 붙여 넣어준 후 ok 버튼을 누르고 push 버튼을 눌러 주면 된다.

그리고 난후 git Hub 창을 새로고침 하면 코드들이 잘 commit push 한 것을 볼  수 있다. 

이렇게 하면 프론트 셋팅은 완료 되었다.

# 게시물 create 

App.js 파일

App.js 의 제일 상단 App function 밖에 router 를 생성 해준다 

그리고 router에 path 는 경로,  element는 path 의 경로를 가게 되면 해당 component를 호출하는것 이다.

router 에 index 라고 쓰여진것은 상위 경로를 그래로 따라 간다는 것으로 상위 창이 띄어질때 만들어놓은 Board들을 조회 하게 하려
는 의도 이다.

11/07

# Immer를 활용한 문제 

어제 선생님께서 마지막에 내주신 문제 immer를 사용 하고 items배열에 find method를 사용 하여 해당 state를 변경 하는 것을 알려주셨다. 아직 객체의 깊은복사 얕은 복사 개념에 대해 이해하기도 어렵고 js 를 잘 배운것이 아니라 좀 힘든감이 있다. 

#Tree구조

자신의 상태가 아닌 다른 상태를 변경 할때에는 부모에 상태를 저장하고 props로 전달 받아야 한다. 

변경 대상은 message를 변경 시켜주는것은 setMessage를 

이런식으로 코드를 작성 하면 된다 

# prop drilling, state lift up

state를 사용 하려면 여러 부모를 거쳐 와야 한다. 

# Context

위에서 사용한 state lift-up 과 prop drilling은 해당 component에 적용하기까지 최상단 component에서 부터 여러 부모 componenet를 거쳐 와야 한다 하지만 Context를 사용 하면 최상단 Component 에서 해당 Component에 바로 전달 하고 사용 가능 하게 해준다. 

context 사용 방법

message state 를 CComp(state가 사용되는 comp)에 전달 하기 

1. context 만들기 : createContext( );
2. context 에 state 넣기 : <Context.Provider value={state이름}></Context.Provider>
3. tree 안에 context사용하기 이때 (변수는 state이름으로 하는게 통용되어있다.)
4.  state이름으로 받은 변수를 {변수명}중괄호 안에 넣어 사용하기

객체 타입의 데이터를 Context를 사용 하여 가볍게 drilling 한것 

# useEffect (부수적인 작용)  -> spring과 react 연결에 사용 

주로 Component밖의 시스템과 연결할때에 synchronize 할때에 사용 한다. 

Fetching data with Effects을 이용해 사용할 예정이다. 

• useEffect는 컴포넌트 외부시스템과 작업할 때
• 주로 ajax로 데이터 가져올 때 사용됨
• 첫번째 파라미터 : 실행할 함수
• 두번째 파라미터 : 첫번째 파라미터를 실행 시키는 값, 빈 배열이면 초기 렌더링 때만 실행 됨

// useEffect 의 구조
useEffect(() => {첫번째 함수}, [두번째함수]);

※ 그럼 이제 react와 spring 을 연결해 보자. 

1. 포트포워딩 설정

react에선 3000번 포트 spring boot 에서는 8080번 포트를 사용하니 이것을 연결 해줘야 한다 

-  react 의 package.json 파일에 프록시 경로를 설정해주고 저장 한다.

React의 App 파일에서 axios를 사용한다.

1. axios를 사용하면 경로를 get방식으로 받는다.
2. 성공하면 2번으로 넘어와 dom의 response의 data를 받는다.
3. 2번 성공후 3번 then으로 넘어와 responce의 data를 setMytate에 저장 한다.
4. 만일 중간에 1,2,3번이 잘못되면 catch인 4번 이 실행 된다.

라는 코드를 작성 해주고 

dom에 표시해줄 데이터인 myState를 return 하여 출력 해준다.

react 코드를 잘 작성한 후  Spring 코드로 넘어와 Controller에 React에서 작성했던 경로대로 잘 작성해주고 return해주고 react와 spring 을 실행 시켜준후 웹페이지에서 확인해보면  

spring에서 return한 값이 spring에서 잘 표현 된것을 볼 수 있다. 

오늘은 이렇게 배웠다 오랜만에 다시 spring으로 넘어가 dto, dao controller를 보게 되니 조금 어지러웠다 언제나 느끼지만 코딩은 배울것도 많지만 복습이 제일 중요한 거 같다. 

11/06

react에서는 상태가 같으면 변경 하지 않게 인식 시키는데 2번째 까지는 재실행 시키긴 한다.

useState 를 사용 하여 text 만 받아 보여주는 것이 아닌 내부에서 활용 하여 어떻한 상태가 변경되도록
할 수도 있다.

다음을 클릭 할때마다 message border의 테두리 색이 변경이 되게 할 수도 있다. 

# HOOK(use로 시작하는 함수)

react에서 use로 시작하는 method들을 HOOK이라고 한다 

HOOK은 어떻한 상태가 되면 react에 알리는 의미로 사용 하는것을 HOOK이라고 한다.

HOOK은 조건문 안, 반복문안, 다른 함수 안에서 호출하는 행위를 하지 말고 component 제일 상단에서
사용 되어야 한다. 

사용 조건을 어겨 if 내부에 HOOK을 사용 하면 error를 발생시킨다.

# 객체변경시와, value 변경시 react 의 반응 (객체지정시 변경 방법)

객체 변경을 누르면 바로 반영이 안되고 값 변경을 눌렀을 때에 비로소 객체 변경을 눌럿던것을 조회 시켜준다. 

react 는 앞서 말했듯 해당 값이 같은지 다른지에 따라 re-render를 한다. 

※ js 에서의 기본타입은 String Boolean Number는 기본 타입이고 나머지는 참조 타입이다.

(객체 주소는 1인가구다.)

그래서 객체를 복사하여 사용하면 된다. 

객체 복사 하기 방법 2가지 

# js의 배열 method (map 으로 저장 하여 index 모두를 불러오기)

js 에서 map 메소드는 java의 stream map 처럼 index를 순회 하여 호출 한다.

그리고 js map은 새로운 배열을 반환 한다. 

이런식으로 직접 호출하여 사용할 수도 있다. 

key 값을 부여 해줄 때에 index번호로 주기보단 table의 pk 값 을 넣어주도록 하자.

다시 여기서 깊은 복사 를 복습.

이렇게 순회 하면서 상태 변화를 인식 하는것 같다. 

좀더 이해를 위해 살펴볼 필요가 있다. 

1. - 우선 newItems라는 새 배열을 받을 변수 를 설정 해준다
   - 설정해준 변수에 기존 [...items] 배열을  복사한다
   - 그리고 newitems에 입력되는 값을 item매개 변수로 받아서 push해주고 
   - 작성하진 않았지만 setItems(newitems)  setItems에 newItems를 저장 시켜주어 items의 값의 state가 변하도록 해준다
2. - 2번도 1번처럼 newItems라는 새배열을 설정해주고 items라는 배열을 복사하는데 item매개변수를 받아 배열의 인덱스에 추가 시켜준다
   - 그리고 난후 setItems에 newItems를 저장시켜준다.
3. - 3번은 2번을 더욱 간소화 시킨것으로 변수 설정없이 바로 setItems에 items배열을 복사해 item매개변수를 각 인덱스별로 집어 넣어 저장시킨것을 바로 setItems에 저장 시킨것이다. 

# 배열 에서 저장한 것을 (index)번호를 찾아 지우기

# Immer (useImmer) -> useState 대신사용

파라미터 에서 받은 객체를 원래객체처럼 사용할 수 있게 해주는 것 인데 

잘 모르겠다;;;; 

11/03

오늘은 어제 차크라ui를 배우고 이후에 계속 react를 배우게 되었다.

# chakraUi 의 태그 내부 children props 

porps 를 구조 분해 할당 하여 받을때 children은 태그 내부에 내용을 전달 받게 된다.

recat에서 다음과 같이 사용 하면 

태그 내부의 값을 잘 출력된 것을 볼 수 있다.

# function(함수)를 props로 전달

작성한 함수도 props로 전달 받아 사용이 가능하다.

# PreventDefault 

기본으로 해야할 일을 막고싶을때에  사용

노란색의 원래 기능은 input창에 검색어를 넣으면 다음의 검색 내용 페이지로 이동 하지만 

preventDefault()를 사용 하여 작동 하지 않게 하고 콘솔창만 나오게 한 것이다.

윈래 기능은 a태그를 클릭 하였을때 다음 페이지로 이동 하는 거였지만 preventDefault로 

네이버 페이지로 이동하게 하였고 이때에 js 코드에 location.href를 사용 하였는데 error 가

발생하였다 이것을 해결 하기 위해 window를 앞에 붙여 사용 하였다.

#Event.stopPropagation

event bubbling 이벤트가 발생하면 감싸고 있는 것들까지 이벤트가 발생 하게 되는 현상이 생긴다.

이럴때에 안에 있는 버튼이 클릭되었을때에 밖에 감싸고 있는 태그들이 영향을 안받게 하고 싶을때
사용한다. 

# Componenet 의 re-render

component에서 re-render가 되려면 state(상태)가 변경이 되어야 re-render를 실행 한다.

state는 react가 관리하는 component의 값을 이야기 하고 state의 변경을 얻기 위해선
useState(); 를 사용 하면 변경 상황을 얻을 수 있다. 

useState() 는 배열을 리턴하고 배열의 0번 index는 현재의 state를 1번 index는 
state를 변경 할 수도 있는 메소드를 갖고 있다, 그리고 useState()의 괄호 안에는 초기값을 
넣어주면 된다.

# DOM

웹페이지에서 자바스크립트 또는 프로그래밍 언어들이사용 될수 있게 추상화 시키는것

document가 가장 상위에 있기 때문에 어디서든 불러와서 사용이 가능하다 

현제 document의 상태를 크롬의 개발자 도구에 element에서 볼 수 있다. 

11/01

오늘은 서로 다른 component간에 property를 주고 받는 것과 , 받은 property를 구조분해 할당 하여 사용하는것 그리고 
분해 할당한 것에 기본값 부여, 외부파일에 작성한 component를 export에서 사용할 component에서 import하여 사용 하는 방법, 중복된 named export 의 해결 방법, 보통의 css 파일 사용 하는법, css파일 사용시 동일한 className을 사용하였을때에(module)로 문제 해결, 그리고 module을 이용하여 여러 클래스 명을 할당 하는 방법을 배웠다. 

# property의 데이터 전달

component을 불러오는 태그에 각각의 property name과 value를 입력하면 호출되어지는 component 에서 props로 데이터를 받아 필요한 곳에 값을 할당 하여 사용 가능하다.

객체 타입으로 전달할때에는 {}중괄호를 2번 감싸서 보내주어야 한다.

# property의 데이터를 구조분해할당하여 수령

지난번 구조 분해 할당때처럼 component끼리 property를 구조분해 할당하여 받을 수 있다. 단 전달해주는 것의 name 과 동일 하게 받아주고 사용할때 받은 name 그대로 사용하면 된다.

# property의 데이터를 구조분해할당에 기본값 부여 (전달해주는것에 데이터가 없을 경우)

전달해 주는 component에서 propety의 값들이 전부 들어있으면 좋겠지만 없는 경우가 있을 수도 있기 때문에 없을경우 빈 데이터가 들어가 있는것이 싫다면 기본값을 주어 해결하면 된다.

그러면 없는 값은 기본값이 적용된 상태로 출력되게 된다. 

# 외부에 component import 하기  

이렇게 main component가 있는 상태에서 src/component위치에 있는 4개의 component를 호출 하려면 

component위치에 4개파일을 생성하여 만들어주고

각각의 파일을 export 설정 해준후 

main component위치에 import하여 사용 해주면 된다. 

# 한 파일에 작성한 여러개의 component,변수,객체를 export 하고 import 받아오기  

한번에 export 해 줄 때에는 각각 export 를 붙여주지 않고 따로 export 를 써주고 빼내고자 하는 것들의 name들을 객체화 시켜주어 export 시키고, 

import 받아 사용 해줄 수 있다.

10/31

기존까지 배웠던 방법 

앞으로 프로젝트에서 사용할 방법은 Client Side Rendering으로 할 예정이고,

그래서 오늘부터는 view를 작성하는 방법을 오늘부터 배운다고 한다.

react 를 사용하려면 node.js 를 설치해야한다. 

※ nodejs 를 설치하고 난후 recat 설치중 발생했던 오류가 있는데
C/Users/사용자이름/appData/Roaming 경로에 npm 폴더가 없어서 recat생성을 못한다는
error가 출력 되었다.
해결 방법으로는 해당 경로에 npm폴더를 생성해 줌으로 해결 했다.

※ 위와 같이 react를 설치해 주고 나면 자동 적으로 git init 을 하게 되어 모든 파일을 추적하게 된다.
이렇게 되면 올라가지 말아야 할 파일 들까지 git에 올라가는 일이 생길 수도 있으니 해당 Project파일
위치로 이동하여 .git 폴더를 제거 해주고 gitignore에 들어가지 말아야할 파일세팅과 불필요한 파일
들을 지워준후 git bash를 사용해 git init을 해주면 된다.

그러고 나면 위에서 지금과 같이 줄여서 초기 셋팅을 맞춰주면 된다.

생성하고 나면 public 은 건들 필요없고 src에서 작업 하면 된다 .

실행은 npm run start 로 실행 하면 된다. 

일부분의 div 에 id 를 할당하여 id위치만 비동기로 변경하려한다. (ajax axios 처럼 )

html을 감싸고 있는 js함수를 component 라고 한다

component를 만들면 다른 파일에서 불러다 사용이 가능하다. 

브라우저 기본 태그는 소문자로 시작 우리가 만들어서 사용하는 컴포넌트는 대문자로 시작 한다. 

이런식으로 컴포넌트를 생성 하여 자신이 원하는대로 맞춰 불러와 사용 가능하다. 

출력해보면 잘 나온 것을 볼 수 있다.

# JSX 에서 JS코드 사용 , JS에서 JSX코드 사용 

JSX 코드 내에있는 { }중괄호 안에서는 JS코드를 사용 가능하다. 

반대로 JS 안에서 JSX코드가 사용 될 수도 있다. 

# REACT에서 STYLE 적용하는 방법 

STYLE 은 JS 에서 object로 전달하여 적용할 수도 있고, JSX에서 style태그로 적용할 수도 있다.

1. 우선 jsx 에서 적용하는 방법을 보자면 

style 태그에 { }중괄호를 2번 달아줘서 style을 적용 시킨 다 이유는 js에서 object타입으로 전달 하는데 js 에서는 object를
중괄호에 넣어 저장하기 때문에 중괄호를 2번 사용 하게 되는것이다 .2번을 보면 알 것이다. 

2. js 에서 object 타입으로 전달하여 적용하는법 

예시와 같이 js 는 object를 {}중괄호에 넣어서 저장 하고 아래의 jsx에 전달하여 풀으면 중괄호를 2번 사용하는 느낌이
된다.

※ 그리고 react에서는 style 명령어에 -하이푼을 사용 안하고 lowerCamelCase를 사용 하여
표기한다 js에서 하이푼을 마이너스 연산하기 때문이다.

오늘은 react를 사용하기 위해 nodejs를 설치하고 git 으로 여러 branch를 내면서 작업을 하고 react를 
같이 배웠다 git 을 사용하여 수업을 진행하니 버젼 관리가 쉬워져서 좋긴한데 처음 git 으로 여러 branch
들을 따서 작업을 하다보니 잘 맞게 하고 있나 의문을 갖으면서 하게 되었다. 조금더 git과 친해질 필요가
있을꺼 같다. 

10/30

지난주 금요일에는 개인프로젝트할 때에 Git 관리를 알아봤다면 이번에는 팀 프로젝트를 할때의 Git 관리에 대해 배우고,
git alies를 이용하여 git 에서 단축어 지정하는것, git amend를 이용 하여 커밋 메세지를 수정 git reset 으로 커밋 위치 수정,
git rebase -i 를 이용하여 여러 커밋을 합치거나 merge하는방법 들을 배웠다. 

# 팀프로젝트 repositories 생성하기

new repository 로 프로젝트 생성

프로젝트명 입력후 생성

팀원 초대 후 팀원이 초대 수락하면 팀프로젝트화 된다.

그리고 팀장, 팀원 들이 각자의 local에서 작업을 한다.

작업을 할때는 master의 위치에서 각자의 새로운 branch를 생성 해주고 난후 작업을 하면 된다 .

마스터 위치에 있는것을 환인한후 

branch를 생성해 준다.

branch 위치를 바꿔주고 원하는 작업을 add, commit해준다.

commit 까지 마친후

새 브렌치에 commit 메세지까지 잘 올라간 것을 확인한후 git Hub에 push해준다.

최초 push 할때에는 branch생성도 해야 하니 -u origin까지 입력해야하고

이후 동일 branch의 push라면 git push만 입력하면 된다.

push를 안정적으로 했다면 gitHub에 위와같이 팝업이 뜨지만  팝업버튼을 클릭하지 않고 New pull request를 클릭하여 
request를 생성해주자.

create 버튼을 눌러주면 compare과 base 위치에 알맞은 branch를 넣어주고 create puu request 버튼을 눌러주자.

그리고 난후 팀장은 팀원이 요청한 request를 확인한후 괜찮으면 merge를 해준다.

merge를 한후 필요가 없어진 branch는 delete branch를 눌러 삭제해주자 (실수로 못했다면 나중에 close에서
찾아서 삭제해 줄 수도 있다.)

이렇게 git Hub에서 작업을 마쳤다면 다시 local에서 git fetch -p  로 최신화를 시켜주자 

fetch를 받은후 log 를 보면

remote에서 받은 master가 로컬의 master보다 위에 있는것을 볼 수 있다 이제 lacal master로 이동해 
remote master를 merge 해주고 필요없어진 local sw/feature1 branch를 제거해 주자.

깔끔하게 필요 없는 branch들이 삭제되고 최신화 된것을 볼 수 있다.

이런식으로 팀원들과 git 하는것을 배웠고 confliect 처리도 배웠다.

# git 에 관한 추가사항 정리

• git status, git log, git fetch는 몇번을 해도 괜찮으니 자주할 수로 좋다.
• git alias -> 짧은 명령어를 입력할 수 있게 단축어를 지정 시켜주는 것
• git amend -> 커밋 메세지를 수정 (단 push 되기 전까지의 commit 만 수정 가능하다 / 이유는 commit 수정을 하게
  되면 commit 의 번호를 재할당 하기 때문이다.)
• git reset -> 원래 있던 커밋 중 한곳으로 돌아가기 
  • hard - 3가지 다 바꾸는것 
• git rebase -i <HEAD~> -> 여러 커밋을 HEAD에 입력한 갯수에 따라 합치는것 (이것역시 push 하기 전까지만 가능)
• git rebase master -> rebase 의 기본적 기능은 합치는 것이지만 기존 개발자들이 3way merge가 되는 모습을 보기
  싫어 fast forword merge가 되게 merge를 사용 하지 않고 rebase 를 사용 하여 merge와 유사한 기능이 작동하게 
  표현 한 것이다.

10/27

내일은 즐거운 주말이다~~~ 오늘은 어제에 이어 git 을 이용해 local repository 를 관리하는 것과 추가로 github 를 사용해 remote repository를 관리하여 연동 하는 법을 배웠다.

10/27 배운 git 명령어

git branch 
-> branch 목록 보기

git merge --abort
-> merge 사용중 오류가 발생했을때 merge 전으로 돌리기

code . 
-> 편집기 열기

explorer .
-> 편집 경로 폴더 열기

git remote
-> 원격 리포지토리 보기

git remote -v 
-> 원격리포지토리 자세히 보기

git remote add origin <local주소>
-> 로컬에 원격 리포지 토리 추가 하기

git branch -v 
브렌치 자세히 보기

git push -u origin master/main
-> 로컬이 원격을 추척하게 해준다.

git push 
-> 추적이 완료된후에 가능한것/ github에 변경사항을 올린다.

git fetch 
-> 원격 리포의 내용을 로컬로 가져오기

git merge origin/master
-> 로컬마스터에 원격을 fast forword 머지

git fetch -p
git fetch --prune 
-> fetch 할때에 리모트에 삭제된 브랜치를 삭제하고 불러와라

git pull 
-> 원격에서 (fetch + merge ) 로컬로 바로 한다.


#pull request
 merge 해달라는 요청

# git 에 관하여 정리

• 사용을 완료 하여 지운 branch는 branch 명만 사라진것이고 commit 번호는 남아있게 된다 삭제했더라도 
  번호만 기억 하고 있다면 다시 branch 이름을 부여가 가능하다.
• git 에서 같은 파일의 같은 줄을 수정 한 서로 다른 브렌치를 merge하게 되면 comfilcts상태가 발생한다
  이때에 문제 되는 줄에 <<<< ,=====, >>>>> 사이에 있는 텍스트 들로 구분하고,
  이 블럭을 hunk라고 한다, comflicts상태를 해결하려면 [code .] 명령어로 편집기를 열어 수정한후 add ,
  commit 을 해주면 된다. 
  그리고 사용이 완료된 branch 는 제거해주자.
• 위와 같은 상황에서 파일 수정이 아닌 파일 제거 상태일 때에는 
  • 지운상태의 merge를 유지하려면
    -> 폴더에서 해당 파일을 다시 지워주고 commit 해주면 된다.
  • 안지운 상태의 merge를 유지하려면
    -> git add <대상 파일명> 한후 commit 하면 된다.
• commit한 내역 (history)들은 .git폴더 안에 들어있다.
• .git 폴더를 다른곳에 복사하면 그대로 관리가 가능하기 때문에 이걸 분산 관리 시스템이라 하고 
  -> 서로 다른 곳에서 반영한 일들은 연동되지 않는다.
• 서로 다른 곳에서 변경한것을 반영하기 위해 중계해주는 사이트가 바로 gitHub, gitLab등이 있다.
• 깃 허브 에서 만든 repository 를 Remote repository 라고 하고 컴퓨터 안에 있는것을 
  Local repository라고 한다 .
• local 과 remote릐 관계를 맺어주어야 하는데 local에 git remote add origin <local 주소>를 입력하여
  local 에 remote git Hub를 추가 시켜 관계를 맺어준다.
• 관계를 맺은 Repository는 로컬에서 원격Repository까지 추적하게 된다.
• remote에서 local로 clone 을 받는다면 셋팅이 완료된 상태로 받게 된다.
• git pull은 때때로 이상한 오류가 발생 할 수도 있기 때문에 fetch 와 merge를 이용 하도록 하자
• git Hub의 merge는 항상 3way merge가 이루어 진다, 그리고 deleted branch를 해주자.

10/26

오늘은 git의 기능관련 해서 배웠다.

# 리눅스 명령어 , git 명령어

pwd 
 -> 현재 디렉토리 출력

ls 
-> 현재 폴더의 파일 목록

ls -l
 -> 파일 목록 더 자세하게 보기

ls -A
 -> 숨긴 파일까지 보기

ls -a
 -> 현재폴더와 이전폴더를 보여주며 숨긴파일 까지 보기

ls -Al
 -> 숨긴파일까지 보고 자세하게 보기

ctrl+l
 -> 화면 정리

cd
 -> 폴더 변경

cd ..
 -> 상위 폴더로 이동

mkdir
 -> 폴더만들기

touch
 -> 새파일 만들기
(파일의 마지막 변경시간을 변경)

echo
 -> 콘솔에 출력

> 
-> 왼쪽의 출력을 오른쪽의 인풋으로 
기존에 있던것을 지운다.

cat (more, less)
 -> 파일 내용 보기

>>
 -> 왼쪽의 출력을 오른쪽에 인풋하고 기존에 있던 데이터에 추가로 입력

ctrl + c
 -> 실행 취소

cd -
 -> 이동전 폴더로 다시 이동

git init
 -> 현재폴더를 git이 관리하게 할 것이다
init 을 잘못했다면 그 해당 디렉토리에 가서 .git폴더를 지우자

git status
 -> 현재 리포의 상태보기

git add -A
 ->

git add
 -> 변경된 파일을 스테이지로

git commit
 -> 변경사항 생성

git log
 -> 변경사항 히스토리 보기

q 
-> 로그내용 보다 나가기 

git log --oneline 
-> 변경사항 한줄로 보기

git checkout 
-> 변경사항 옮기기

git log --all 
-> 모든 커밋보기

git log --all --oneline 
-> 모든 커밋 한줄보기

branch 
-> 커밋의 별칭

git branch <브랜치명> <커밋번호>
-> 커밋번호에 브랜치명 별칭을 생성

git branch -d <삭제할 브렌치명>
-> 별칭삭제

git switch <이동할 브렌치명>
-> checkout과 같은 브렌치 이동 명령어


git commit -m "커밋 메세지명"
-> 바로 커밋 하면서 커밋 명 넣기

git add -A 
->변경한 모든 파일을 올리겠다.

git add 
-> 변경사항을 stage에 올리기

git add .
-> 현재폴더와 하위폴더를 staged하기

git restore --staged <file이름>
-> staged된 것을 취소 시키는것

git restore <file이름>
->파일에 commit 된 것을 이전 commit 상태로 되돌리는것

.gitignore 
-> git이 track하지 못하게 할고 싶을때

git commit -am 
-> tracked파일 add,commit함께

git log --all --oneline --graph
-> 브랜치 를 그래프로 보여준다.

git merge <브렌치명>
->브렌치명의 변경사항을 현재 브렌치에 반영

git switch -c <브렌치 명>
-> 브렌치를 만들고 이동

# git 에 관하여 정리

• git 은 저장할때마다 저장한것을 추적한다 (마치 게임처럼 중간중간 저장 하고 불러오듯)
  이것을 git 에선 commit이라고 한다.
• commit 메세지는 자세하게 써야 나중에 기억하기 쉬워진다.
• commit log에서는 누가 저장 했는지, 고유한 번호, 날짜 등이 보여진다.

• git 에서 branch의 위치를 변경하려 하거든 clean한 상태여야 한다.

• git의 마지막 실행한 위치를 기준으로 HEAD 각 위치해 있고 HEAD는 나의 위치를 나타낸다.

• branch 명을 지우고 싶을때에는 HEAD의 위치가 해당 branch가 아닌 다른 branch에 있어야 지울 수 있다.
• 다른 commit의 위치로 이동하여 작업을 하고 싶을 때에는 해당 commit에 이동전 branch명을 부여하고
  해당 branch이름으로 이동하자 코드넘버로 이동하지 말자!!
  (코드로 입력하여 이동하면 detached HEAD 상태가 되어 원치않는 상황이 발생할 수도 있다.)
• commit 하기 전 add 하는 것이 있는데 이것은 잘못된 commit 을 하여 tracked 상태가 되는 것을 방지
  하고자 stage위치에 대기시켜놓는 명령어이다 (add 했을때에 tracked 상태이지만 stage 상태이기
  때문에 Untracted 상태로 변경이 가능하다.)
• commit 은 stage상태의 명령만 commit 가능하다

※ git 은 Untracked 상태와 Tracked 상태로 구분하고 Tracked 상태도 3가지로 구분된다

• 이미 tracked 한 파일은 .ignore에 추가 해도 계속 tracked상태를 유지한다
• 계속 untracked한 상태를 유지하고 싶다면 생성 단계에서부터 .ignore처리를 해줘야 한다.
  해당 파일을 지워도 commit 내역이 남아있기 때문에 조회가 가능하기 때문이다.
• commit 의 속성에는 부모( parents )속성이 있는데 이것은 바로 이전 commit의 코드번호를 가리킨다.
• 단 최초의 commit에는 부모 속성이 없다.
• branch는 commit 의 히스토리 방향을 가리 키고 있다
• HEAD 가 위치해 있는곳에서 branch 를 생성하려 할 때에는 해당 commit의 코드번호 없이
  branch 지정이 가능하다.
• branch 는 여러개를 생성 할 수 있는데 제일 주가 되고 정상으로 작동하는branch를 master,main으로 
  정하여 사용하는것을 권장한다.(해당 branch를 통합브렌치라고 부른다.)
• fast forward(머지) : 머지를 하면 앞서간 것을 따라 합치기 때문에 fast forward머지 라고 한다.
• merge를 완료한 후에는 필요가 없어진 branch를 제거해줘서 마무리해주자.
• 서로 달라진 branch를 merge하려면 master branch의 제일 마지막 위치에서 master branch에 
  merge할 branch를 합치면 된다.
  (서로 다른 branch를 머지 한 commit자기 자신과 2개의 부모commit이 묶여 있어 3 way merge
  라고 부른다.)