기초 - Git과 GitHub

git은 버전관리도구로서, 이용시 버전을 되둘리기 쉽게 하고, 협업을 용이하게 하고, 변경사항을 추적, 관리하기 쉽게한다.

1. git

git의 구조는 실제 프로젝트 파일이 위치하는 working directory와 git이 관리하는 가상공간인 stage, repository로 이루어진다.
사용자가 원하는 파일의 변경사항을 지정하여 저장(add)하는 곳이 stage고, 이 stage에 저장된 변경사항들을 저장(commit)하여 commit history를 형성하는 곳이 repository이다.
git bash(CLI)나 source tree(GUI)를 이용해 관리 할 수 있다.

git bash에서 사용되는 명령어들:

• git init : git 초기화
• git add <file> : stage에 변경사항 저장
• git commit -m "message" : 저장소에 commit
• git status : 커밋되지 않은 변경사항들의 상태 표시
• git log : commit history 표시
• git push <원격 repo이름> <branch이름> : 원격 레포지토리에 저장
• git pull : 원격 레포지토리의 commit들을 가져옴
• git clone <주소> : 원격레포지토리와 내용이 같고 연결된 로컬레포지토리 생성
• pwd : 현재 디렉토리 경로 표시
• ls : 현재 디렉토리 내 모든 파일/디렉토리 표시 (-al옵션 사용시 숨김파일까지, 리스트 형태로 출력)
• clear : 터미널 내역 지우기
• touch <파일명> : 빈 파일 만들기
• rm/rmdir : 파일/디렉토리 삭제
• cat <파일명> : 파일 내용 표시
• vi <파일명> : 편집기 실행. 파일 수정/생성

  a/i : 입력모드 진입
  u : undo
  esc : 입력모드 나가기
  :wq : 저장후 편집기 종료

2. git hub

깃헙은 원격 레포지토리를 제공하는 온라인 서비스이다. 자신의 로컬 레포지토리를 연결하여 인터넷에 올림으로서 프로젝트 배포하거나 같은 원격 레포지토리를 여럿이서 clone하여 공동 프로젝트를 진행하는데에 사용할 수 있다.

3. .gitignore

가상환경 패키지들이 설치된 폴더등이 존재할 때 gitignore를 이용해 무시할 수 있다. gitignore는 프로젝트 폴더내에 변경사항을 반영하지 않고 무시할 파일/디렉토리를 정하는 설정파일이다. root에 있어야하며 자체적인 문법을 가진다.

# .a 확장자 파일들을 모두 ignore
*.a

# .a를 무시하더라도 lib.a파일은 추적한다.
!lib.a

# 현재 디렉토리의 TODO파일들을 ignore(하위 디렉토리 미포함)
/TODO

# build/ 디렉토리아래의 모든 파일들 ignore
build/

# doc/ 디렉토리의 .txt파일들 ignore(하위 디렉토리 미포함)
doc/*.txt

# doc/ 디렉토리아래의 .pdf파일들 ignore(하위 디렉토리 포함)
doc/**/*.pdf

token을 이용한 협업

보안문제로 인해 git hub은 더이상 collaborator가 사용자 ID와 비밀번호로 권한이 있는 원격repo에 접근(push, pull)하지 못하게 한다.
따라서 repo소유자가 token을 발행하여 이것을 공유해야한다.

1. 프로필 눌러 settings 진입 후 developer settings 진입
2. generate new token(classic) 선택
3. token 이름 입력, 권한 설정 후 토큰 생성
4. 생성된 token을 복사하여 잘 보관해두고, collaborator들에게 알려준다.
   이후 collaborator가 내 레포지토리에 접근할 때 자신의 github id와 함께 pw로 사용된다.

기초-기타

1. 파일분리하기

html에서 style와 script안의 내용은 별도의 css, js파일로 분리할 수 있으며 다음과 같이 불러올 수 있다.

<link rel="stylesheet" href="/static/css/[css파일명]">
<script src="/static/js/[js파일명]"></script>

이때 js의 경우 head 태그안에 불러오는 내용을 작성할 하고, js파일을 다음과 같이 입력할 경우 오류가 발생할 수 있다.

var hw = document.getElementById('hw');
    hw.addEventListener('click', function(){
        alert('Hello world');
    })   

이는 html이 javascript를 먼저 실행하여 body에 존재하는 id를 인지하지 못하기 때문에 발생하는 문제이다.

해결방법:
1. html에 onclick등의 속성을 통해 함수를 호출하여 body이전에 실행되지 않게 한다.(배운 내용)
2. script 부분을 body 이후에 위치시킨다.(권장)
3. 페이지가 모두 load 된 이후에 실행하도록 작성한다.

window.onload = function(){
    //실행할 내용
}

2. 절대/상대 경로

위와같이 파일을 분리하거나 로컬저장소의 이미지 파일을 가져올 때, 입력된 로컬 상대주소를 제대로 인식하지 못해 불러오지 못하는 문제가 발생하는 경우가 있었다.
이를 해결 하기위해 절대주소(file:///로 시작)하는 주소를 사용해보기도 하였으나 당연히 해결되지 않았다.
알아본 결과, 서버에서 root는 서버가 실행되고있는 디렉토리를 의미하므로, 절대주소는 다음과 같이 적어야한다.

/static/js/[js파일명]

또한 서버의 파일 시스템 내 파일들에 접근할 때는 자신의 위치가 변할 수도 있는 점을 고려하여 절대경로를 이용하는 것이 좋다.

3. SSH(Secure Shell)

RSA알고리즘을 이용해 안전한 통신이 가능하게 해주는 프로토콜로, 공개키와 비밀키를 이용한 보안 방식이다. 깃헙에 공개키를, 내 PC에 비밀키를 등록하면 ID, PW, token 입력없이 간편하게 내 repo에 접근가능하다.

CSS

1. position 속성

html요소들의 위치를 자유자재로 바꾸거나, 스크롤과 상관없이 화면에 고정하여 위치시키고 싶다면 position 속성을 이용하여 요소의 위치를 지정하는 방식을 변경할 수 있다.

값	의미
static	기준 없음 (수동 배치 불가능 / 기본)
relative	자기 자신의 static 위치 기준으로 offset
absolute	가장 가까운 position이 satatic이 아닌 조상 요소 기준으로 배치
fixed	뷰포트(브라우저화면) 기준으로 배치한다
sticky	스크롤 영역 기준으로 배치한다

fixed를 사용하면 화면에 떠다니는 요소를 만들 수 있고, sticky는 스크롤 해도 화면 밖으로 벗어나지 않는 요소나 부모요소 안에서만 화면을 따라 움직이는 요소를 만들 수 있다.

이 속성과 함께 top/bottom/left/right 속성을 이용하면 된다.
단, 브라우저마다 위치의 기준점이 달라 서로 다른 모습을 띌 수 있다. 이때 웹 호환성을 충족하기 위해 -webkit-(크롬, 엣지 등),-ms-등으로 시작하는 각 브라우저에 호환하는 속성들을 사용할 수 있다.

2. transition 속성

:hover등 가상클래스의 지정을 통해 요소의 CSS속성이 전환되는 기능이 있을 때, 전환이 즉각 이루어지지 않고 서서히 변하도록 하고 싶을 때 사용한다.

transition-property:전환의 대상이 되는 속성 지정
transition-delay: 전환이 시작되기 전에 딜레이 지정
transition-duration: 전환속도(시간) 지정
transition-timing-function:전환되는 속도의 변화를 지정
전환의 정방향과 역방향에 서로 다른 지연/속도/timing function을 지정하고 싶다면 다음과 같이 지정한다.

.overlay {
    color: transparent;
    /*transition from hover to unhover*/
    transition:
    	/*속성 시간 지연 timing-function*/
        color .1s .3s cubic-bezier(0.00, 0.78, 0.28, 0.97);


}

.overlay:onhover {
    color: white;
    /*transition from unhover to hover*/
    transition:
        color .1s .15s cubic-bezier(.72, .03, 1, .22);
}

한번에 여러개의 속성을 전환하고 싶다면 다음과 같이 작성한다.

transition:
        color .1s .15s cubic-bezier(.72, .03, 1, .22),
        width .5s .2s ease;

3. white-space 속성

text 요소들의 공백 처리와 줄바꿈을 제어하는 속성이다.
|값 | 의미|
|:-:|:-|
| normal | 자동개행. collapse |
| nowrap | 개행 안함. collapse |
| pre | 개행문자와 \
에서 줄바꿈. 보존 |
| pre-wrap | 개행문자와 \
요소에서 줄바꿈+wrap. 보존 |
| pre-line | 개행문자와 \
요소에서 줄바꿈+wrap. collapse |
| break-spaces | pre-warp과 유사. 공백문자사이에서 줄바꿈 가능|

JS

1. jQuery로 CSS 속성 변경

JS로 동적으로 html을 편집하게 할 때, CSS 속성을 변화시키기 위해서는 다음과 같이 작성한다.

$('선택자').css("속성명","원하는 값")

2. 이벤트를 통한 동작

이벤트는 브라우저를 통해 열린 웹 페이지에서 클릭, 페이지 로드 등의 변화이다. 이를 감지하고 그에 따른 동작을 수행하는 것을 이벤트 핸들러라고 한다.
다음 3가지 방식을 통해 등록할 수 있다.

1. html 속성에 넣기:

<div onclick="func1()"></div>

2. DOM 요소:

DOM(문서객체 모델)은 js가 html요소에 접근할 수 있게하는 인터페이스를 제공한다. 예: window객체

window.onload(){
	//실행할내용//
}

위의 코드는 window라는 DOM 객체의 onload 속성을 이용하는 것이다. window.onload는 화면이 모두 로드 되었을 때 실행될 내용들을 담고있는 속성이다.

3. addEventListener() :

[타겟요소].addEventListener("이벤트타입", '실행할 것(event listener)', false);
//마지막 인수는 capturing 단계에서 실행할지 여부 결정. true면 여러 요소에서 함께 이벤트 발생시 먼저 발생

마지막 방법은 앞의 2 방법과 달리 html과 js가 분리되어 js내부적으로 이벤트리스너를 등록하는 방식이다.

3. setTimeout()

사용자가 버튼을 누를 시 잠시동안의 지연 후 코드를 실행시키고 싶다면, setTimeout()함수를 사용할 수 있다.
그러나 JS의 비동기 실행방식으로 인해 실행 순서가 뒤바뀔 수 있다.

입력:

console.log(1);
setTimeout(() => console.log(2), 3000);
console.log(3);

출력:

1
3
2

이러한 문제를 피하고 싶다면 다음과같이 직접 sleep함수를 작성하는 것이 좋다.

function sleep(milliSec) {
  const wakeup = Date.now() + milliSec;
  while (Date.now() < wakeup) {}
}

Python(Backend)

1. Jsonify 실패

프론트엔드로 DB데이터를 넘기면 종종 발생하는 문제였는데, 주로 _id 필드(mongoDB가 자체적으로 생성)의 자료형 문제로 인해 json화 시키지 못해서 발생하는 문제였다.
따라서 DB에서 데이터를 불러올때 아예 _id필드를 제외하고 불러오면 문제없이 작동한다.

[DB].find({},{'_id':False})

2. Certifi (SSl/TLS)

pymongo를 이용해 DB atlas에 접근하려하자, [SSL: CERTIFICATE_VERIFY_FAILED]라는 에러가 발생하는 경우가 있다. 이는 내가 만든 서버가 SSl/TLS 인증서가 없어 DB서버와 기밀성과 무결성이 보장된 https 통신을 할 수 없기 때문이다. 이를 해결하기 위해 Certifi라는 패키지를 설치한다. Certifi는 브라우저나, PC에 내장된 공인된 인증기관의 인증서를 이용해 통신을 가능케 하는 패키지다.
SSl 인증서에는 공개키가 포함되어있으며, 이것으로 클라이언트가 데이터를 암호화하면 서버는 가지고 있는 개인키로 이를 복호화한다. 이외에도 SSl/TLS는 hand-shake 프로토콜을 통해 인증, 기밀성, 무결성을 확보한다.

차주 목표

1. 새로운 python문법 익히기

반복문, 재귀함수등 이미 알고 있으며 어느정도 활용가능한 문법들을 더 능숙하게 사용하고, 객체지향적인 python을 더 잘 다룰 수 있는 새로운 문법들을 최대한 많이 배우자.

2. gitHub사용법 숙달하기

이번주에는 git을 활용한 기초적인 프로젝트 진행을 해보았다. 다음주에는 branch, issue, project등 더 다양한 기능을 숙지하고 익숙해져서 더 효율적으로 작업할 수 있는 역량을 얻자.

3. 백준 3문제 이상 풀기

알고리즘에 투자하는 시간이 너무 없었다. 코딩테스트 문제를 풀며 복기해나가자.

금주 반성

K-1. 적극적으로 프로젝트 참여

미니프로젝트에 있어서 나름 주도적으로 주어진 일을 해결하고 타 팀원을 도와주었다. 또한 모르는 것이 있으면 적극적으로 팀원들의 도움을 받으며 해결하였다. 이를 통해 팀 프로젝트에 대한 긍정적인 경험을 쌓아갈 수 있었다.

P-1. 기획 자체의 문제

프로젝트를 기획함에 있어 초반에 너무 제한적인 기능만 구현할 생각을 하여 최종적으로 시작하기 전 원했던 것에 못미치는 정도의 성과를 얻은 것 같다. 다음에는 기획을 더 세세하고 구체적으로, 그리고 역량상 할 수 있는 만큼의 최대한을 구상해놓고 시작하는 것이 좋을 것 같다.

P-2. git 사용 미숙

branch, merge, issue, project 등의 사용이 조금만더 능숙하였다면 더 빠르게 진행할 수 있었을 것 같다.