보다 나은 내일, 다이어리

인프런 강의https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

https://poiemaweb.com/

https://github.com/baeharam/Must-Know-About-Frontend

https://ko.javascript.info/ (코치님께서 추천하신 사이트!!)

https://google.github.io/styleguide/jsguide.html

sort()함수: 

리턴값이 0보다 크면  a와 b 순서를 a,b로

리턴값이 0보다 작으면 a와 b 순서를 b,a로

리턴값이 0이면 그대로

• string.charCodeAt(index)을 이용하면 문자열 내 index에 해당하는 문자의 유니 코드 값을 얻을 수 있습니다.

• string.repeat( count )

• Math.max.apply(null, arr)을 이용하면 배열의 최대값을 구할 수 있습니다

엘리스 수업떄 들었던 파일들을 하나하나 깃랩에 커밋했다. 그런데 js 폴더에서 .git을 해버려서 그전의 강의에서 했던 파일들도 깃랩에 업로드를 하고 싶었다. 그래서 push를 하려고 하니까 이런 오류가 계속 떴다

https://iambeginnerdeveloper.tistory.com/entry/github-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-error-failed-to-push-some-refs-to-warning-LF-will-be-replaced-by-CRLF-in-%EA%B0%95%EC%A0%9C-push-%ED%95%98%EC%A7%80%EB%A7%88%EC%84%B8%EC%9A%94%EC%A0%9C%EB%B0%9C

구글링하다가 위 사이트에게 도움을 많이 받았다...!

https://sosoeasy.tistory.com/406

위 사이트는 내가 난 오류가 왜 난 건지 그림으로 자세히 설명해주셨다!

일단 js 폴더에서 origin을 제거하고 .git 폴더를 삭제해줬다. 

그리고 web 폴더에서 깃랩의 http코드를 clone해주고, pull 해줬다. 

각종 블로그글을 찾아봤을 때 원격저장소에 있는 파일과 로컬저장소의 파일이 다를 때 저런 오류가 뜬다고 했다.

그래서 일단 web폴더의 파일을 원격저장소와 같게 만들어줬다. 그리고 add하고 commit을 해줬다.

그런데 이렇게 했는데도 git push가 되지 않았다. 

**해결책

git pull origin master --allow-unrelated-histories

pull만 하는 게 아니라 뒤에 옵션도 더 붙였어야 했다. (로컬저장소와 원격저장소의 병합을 허용한다는 의미, 강제로 pull하겠다!)

master -> FETCH_HEAD에서 오류가 났다는 메시지.

FETCH_HEAD가 뭔지 궁금해서 검색해 봤다.

FETCH_HEAD => 원격 저장소에서 가져온 내용을 추적하기 위한 단기 참조.

git pull은 git fetch와 git merge를 합친 동작이라고 배웠다. 

FETCH_HEAD는 원격저장소에서 가져온 분기의 끝을 가리킨다. 그 다음 git merge FETCH_HEAD를 호출해서 FETCH_HEAD를 현재 분기에 병합하는 방식으로 동작한다. 그래서 원격저장소의 마지막 commit을 로컬 저장소의 commit 로그 맨 앞으로 받아온다.

기본적으로 merge는 원격저장소와 로컬 저장소가 공통으로 가지고 있는 commit 지점이 존재해야 한다. 그 지점부터 병합을 시도하기 때문이다! 그런데 애초에 나는 공통되는 commit이 없기 때문에 pull 을 사용할 수 없는 것이다..

해결책: 공통된 커밋 포인트가 없기 때문에 pull 명령어에 옵션을 추가해 강제로 pull하는 방식

참고: https://jobc.tistory.com/177

이렇게 하고 add,commit하고 push를 하니 잘 작동이 되었다! 아싸

**git 병합 충돌해결 꽤 어렵...!

충돌난 파일이 있으면 다른 브랜치로 이동 불가

해당 브랜치에서 먼저 수정파일을 알맞게 수정후 커밋하기

elice 브랜치에서 충돌이 발생한 부분을 수정하고 커밋한다. 

git add crawling.py
git commit -m "충돌해결"

현재 elice 브랜치에 커밋한 내용은 master브랜치에 존재하지 않는다. 이제 git merge 명령어를 사용하여 두 브랜치를 합칠 수 있다.

먼저 현재 브랜치를 합치고자 하는 대상 브랜치로 전환해야 한다. 그 다음 git merge를 실행하여 현재 브랜치에 합치려는 브랜치명을 지정하면 된다. -> elice 브랜치의 변경 사항이 master브랜치에 합쳐졌다.

git checkout master
git merge elice

만약 elice 브랜치 (현재 브랜치)에서 master 브랜치 (대상 브랜치)로 merge를 시도하면 Already up-to-date라는 오류 메시지가 뜨니 주의하자!!!!!!! 

참고페이지: https://mylko72.gitbooks.io/git/content/branch/merge.html

elice 브랜치에서 git merge madhatter를 하면 elice 브랜치에서 madhatter 변경점을 반영하는 것이고,

madhatter 브랜치에서 git merge elice를 하면 madhatter 브랜치에서 elice 변경점을 반영하는 것이다.

충돌을 해결하는 것을 소스파일을 변경한 후에 elice 브랜치에서 git add, git commit를 한다. 그러면 elice 브런치응 충돌이 해결 됐는데 madhatter 브랜치에서는 아직 변경점을 반영하지 않아서 elice 브랜치를 merge 시켜야 하는 것이다!!!!!!

**git 원격 저장소!!

git clone 명령어로 현재 디렉토리에 원격저장소의 내용을 복제한다

1. git remote add origin (원격저장소의 주소 또는 원격저장소의 이름)으로 로컬저장소와 연결합니다

-> 이는 원격저장소의 단축이름을 origin으로 하겠다는 의미! (myproject가 단축이름으로 지정할 수도 있는것임)

기본적으로 만들어진 원격저장소의 이름은 origin이 default값 입니다. 때문에 clone으로 복사해온 저장소의 이름은 origin으로 통일되게 됩니다

git remote add origin https://github.com/group/project

git remote -v

-> 지정한 저장소의 이름과 주소를 한꺼번에 볼 수 있음!

2. git fetch 나 git pull을 이용하여 원격저장소의 내용을 동기화합니다.

pull은 로컬 저장소에 있는 master를 자동으로 원격저장소에 있는 내용과 합쳐주는 역할을 수행합니다.

git pull이 이루어지지 않는 경우는 보통 다른사람이 올린 commit의 내용과 내 컴퓨터에 존재하는 내용이 서로 충돌할 때입니다.

이러한 현상은 하나의 브랜치에서 여러 사람이 동시에 작업하면 발생할 확률이 높아지게 됩니다.

따라서 여러 개의 브랜치를 나누고 각자 브랜치에서 작업한 후에 웹호스팅 서비스에 존재하는 merge request로 하나씩 합쳐가는 방식을 사용하면 충돌이 일어나는 것을 막을 수 있고 매번 새롭게 merge해야하는 수고를 덜 수가 있습니다.

3. fetch를 실행한 경우 git merge origin/master로 병합을 완료해준다

** git fetch origin master : fetch를 통해서 origin(원격 저장소의 단축 이름)의 작업 내역을 master(로컬 저장소의 브랜치)로 불러온다

4. git push origin master를 이용하여 로컬 저장소에서 변경된 내용 -> 원격 저장소에 전달

** git push origin master : master(로컬 저장소의 브랜치)의 작업 내역을 origin(원격 저장소의 단축 이름)으로 push하겠다는 뜻!

git push origin master

다른 사람이 먼저 Push한 상태에서는 Push할 수 없다. 다른 사람이 작업한 것을 Merge부터 해야 한다!

01/15
영어단어 여러 번 보기 & 안보고도 말해보기 (아침루틴!)
매일 엘리스에서 공부한 것 블로그에 정리, 복습하기 
(새롭게 알게 된 내용, 중요한 내용 위주로.)
50개 단어 엑셀 정리 (저녁 루틴!)
코치님이 보내주신 자료들 공부하기
주차테스트 예습 학습하기

** 내용 gitlab 레포지토리 만들고 로컬에서 파일 변경 후 레포지토리에 업로드 및 기본적인 시나리오

https://chiseled-browser-c2e.notion.site/AI-4-Git-d92bad965e3344389c51f103abddb97a

** 깃을 게임으로 공부할 수 있는 사이트! -> https://learngitbranching.js.org/?locale=ko

깃을 각 파일을 스냅샷 형식으로 이동 가능 -> 쉬운 버전 관리가 가능해짐 (하나의 파일로 관리할 수 있다는 장점.)

깃의 특징

1. 가지치기와 병합

2. 가볍고 빠르다 (모든 작업이 서버와 통신 없이 로컬에서 통신한다)

3. 분산 작업 (복사된 프로그램에서 동시에 작업진행 가능, 통합관리자를 둬서 개발된 코드를 병합하는 데 집중)

4. 데이터 보장 (체크섬=커밋 아이디=16진수, 버전관리 용이)

5 준비영역(staging area) : git add 후 커밋하기 전에 선택되는 공간. 그리고 여기서 실제로 저장소에 커밋함 (커밋하는 것은 .git 저장소 내에 staging 파일을 저장하는 것!)

작업영역 -> 준비영역 -> 저장소!

6. 오픈 소스: 공개, 누구나

7. git 호스팅 서비싀 githug, gitlab, 등

git config --global user.name "elice"
git config --global user.email "rabbit@elice.io"

만약, git config user.name "elice" 이렇게 작성했을 떄

fatal: not in a git directory 라는 오류가 뜬다면 git 저장소를 시작하지 않은 상태에서 유저 설정을 했기 때문이다!

git init : git 저장소로 만들어줌

git add . : 준비영역으로 추가해줌

git status : 파일이 준비영역에 잘 추가되었는지를 확인

git commit -m "Initial commit" : 준비영역의 파일을 저장소에 저장, 반영한 내용을 간략하게 커밋메시지도 작성

git commit -amend (수정한 내용을 덮어쓰기할 수 있음)를 실행하면 텍스트 편집기가 실행되고 수정하면 그대로 반영됨

예) git commit --amend -m "커밋메시지 수정"

git log : 저장소 반영 내역을 모두 볼 수 있음! (커밋아이디와 커밋메시지)

예) git log -p -2

-p, --patch : 각 커밋의 수정 결과를 보여주는 diff와 같은 역할 수행

-n : 상위 n개의 커밋만 보여줌

--stat : 각 커밋의 통계를 볼 수 있음, 얼마나 많은 파일이 몇줄이나 추가, 삭제되었는지를 보여줌

--pretty=onelinr : 각 커밋을 한 줄로 출력

--graph : 커밋간의 연결관계를 아스키 그래프로 출력함 (브랜치가 생성되었다면 유용하게 사용할 수 있다!)

-S 특정텍스트 : 코드에서 추가되거나 제거된 내용 중에서 특정 텍스트가 포함되었는지를 검사

git diff : 커밋된 파일 중 두 개의 버전에서 변경된 사항을 비교할 수 있음

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   README.txt

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   crawling.py

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        rat.py

README.txt는 준비영역에 있다

crawling.py는 수정되었지만 준비영역에 없다

rat.py는 준비영역에 없다.

git reset README.txt : 준비영역에서 README.txt를 삭제한다 ( 준비영역에 있는 README.txt를 커밋하고 싶지 않을 때)

깃의 브랜치 : 각각이 독립적이다, 배포를 하려고 할 때 병합하기

**깃의 스냅샷 개념

파일을 하나씩 별도로 보면서 차이점만 따로 관리하지 않고 프로젝트 전체를 스냅샷 형태로 관리합니다.

마치 매 순간마다 프로젝트 전체를 사진으로 찍어서 관리하는 것과 같은데요.

Version 1에서 Version 2로 변경이 되면 깃은 Version 2의 스냅샷을 하나 만들어 놓고 그 스냅샷을 가르키는 레퍼런스를 저장합니다.

효율을 위해서 변경되지 않은 File B는 다시 새로 저장을 하는 것이 아니라 이미 저장되어 있는 파일에 링크만 걸어 줍니다.

버전이 변경되는 과정을 보면 마치 연속된 스냅 사진을 보는 것 같습니다.

출처: https://coding-lks.tistory.com/162

CSS3에 사용되는 속성들!

1. transform

: rotate(45deg) -> 평면적인 회전

: scale(2, 3)      -> 비율 조정

: skew(10deg, 20deg)   -> x축, y축 기준으로 각도만큼 비틂 (3차원적인 회전!)

:translate(100px, 200px)   -> 오브젝트의 위치를 x축, y축만큼 이동

prefix 접두사 -> 다른 버전의 부라우저에서 실행할 경우 (CSS3는 최신버전에 특화된 것이기 때문에 그 이전의 브라우저에서 사용할 경우 붙이기!) 브라우저의 하이버전으로 사용하고 싶을 경우 사용.

마지막에 작성된 transform만 적용이 됨, 뒤에 작성된 것으로 덮여씌워진 셈!

2. transition

갑자기 휙휙 바뀌는 것이 아니라 변화하는 과정을 보여주고자 할 때 사용

transition-property : width (변화하고자 하는 과정을 어디서 보여주고 싶은지

transition-duration: 변화하는 데 소요되는 시간

transition-timing-function : linear; (효과의 속도의 성격)

transition-delay: 1s; (클릭하고 색이 바로 바뀌는 게 아니라 1s후에 바뀌길 원할 때)

-> transition: 하나로 네 가지 한번에 작성 가능 (duration 먼저 delay 순서!)

: hover {width: 300px;} (css에서 미리 만들어 놓은 클래스에 마우스를 올렸을 때 라는 조건)

3. animation

예. 웹사이트에 들어가자마자 실행되는 

animation-name : changeWidth; (개발자가 임의로 작성가능)

animation-duration

animation-timing-function

animation-delay

animation-iteration-count: 6; (애니메이션 반복횟수) (infinite는 무한)

animation-direction: alternate(시작 -> 끝 -> 시작), normal(시작 -> 끝, 시작 -> 끝) , reverse (끝 -> 시작, 끝 -> 시작)

악어와 악어새처럼 따라오는 @keyframes (실제 동작되는 결과값)

@keyframes changeWidth {

  from { width: 300px; } to { width: 600px; }

}

prefix 접두사 사용 가능!

단, prefix 사용시 모든 코드에 붙여넣어야 한다!

.box1 {
        width: 300px;
        height: 300px;
        background-color: red;    
        
        -webkit-animation: rotation 1500ms linear infinite alternate;
    }
    
    @-webkit-keyframes rotation {
        from { -webkit-transform : rotate(-10deg); }
        to { -webkit-transform : rotate(10deg); }
    }

animation에 -webkit-을 달아줬으면 keyframes에도 쌍으로 달아줘야 한다!

transform도 CSS3에 등장한 신조어이기 때문에 transform에도 달아줘야 한다! keyframes에만이 아니라 각각으로도 따로 달아줘야 한다는 점!

**번외

margin: 0 auto; (명확한 크기를 갖고 있는 블록요소에서 사용가능한 방식) (x축으로 중앙정렬이 됨)

미디어쿼리!

미디어쿼리 안에서도 .media로 선택해서 지정하기

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
    .media{
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
}

미디어쿼리 내부의 CSS가 단지 추가되는 것이지, 외부의 CSS가 없어지는 건 아니다.

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받지 않고 실행하지 않으려면 속성값을 none으로 입력

(background-color: none;)

meta 코드는 반드시 들어가야 함! (미디어쿼리 사용시 태블릿이나 모바일에서 잘 작동될 수 있음)

모바일이나 태블릿은, 미리 설정되어 있는 viewport로 인해 미디어쿼리가 제대로 작동하지 않을 수 있기 때문!

<meta name="viewport" content="width=device-width, initial-scale=1.0">