TIL - 미니 프로젝트 2일차

🐰 Git Bash

🥕 명령어를 입력할 수 있는 공간

👉🏻 명령어

🐾 pwd : 현재 경로 확인하기

• 절대경로(모든 경로), 상대경로(현재 경로)
• 현재경로는 .으로 나타낸다
• 상위경로는 ..으로 나타낸다.

🐾 ls : 현재 경로의 파일 및 폴더 조회하기

🐾 ls -a : 현재 경로의 숨김 파일 및 폴더까지 모두 목록으로 조회하기

• 숨김파일은 앞에 .이 붙어있다 ex) .vscode

🐾 ls -al 리스트 형태로 자세히 표현

🐾 clear : 코드 클리어

🐾 cd<경로> : <경로>로 이동하기

• cd .. 상위 디렉터리로 이동
• cd . 현재 디렉터리로 이동
• cd ~ 홈 디렉터리로 이동 (기본적으로 설정된 디렉터리)

🐾 touch <파일명> : <파일명> 이름으로 비어 있는 파일 생성하기

🐾 cat <파일명> : <파일명>의 내용 확인하기

🐾 vi <파일명> : <파일명> 편집하기

• vi 편집기를 열면 입력모드로 전환을 해서 입력가능
• a or i 입력
• 입력모드에서 빠져나오려면 ESC
• ESC로 나와서 :w 저장 :q 닫기 (write, quit)
• :wq 저장하고 닫아라

🐾 mv <파일명> : <파일명> 이름변경

🐾 rm <파일명> : <파일명> 삭제하기

🐾 mkdir <디렉터리 이름> : <디렉터리>(폴더) 생성

🐾 rmdir <디렉터리 이름> : 비어있는 <디렉터리 이름>의 삭제

🐾 rm -rf <디렉터리 이름> : 비어있지 않은 디렉터리 삭제

🐰 Git

🥕 버전(commit) 관리를 위한 도구

🐾 깃이 없는 세상 - 변경내역 확인이 어렵다, 작업을 되돌리기 어렵다, 협력하기 어렵다

🐾 버전 - 유의미한 변화(ex)새 기능 추가, 삭제, 수정)가 결과물로 나온 것
            - 프로그램 개발 == 유의미한 변화를 쌓아 프로그램을 만들어나가는 것

🐾 버전 관리(깃이 있다면) - 변경 내역들을 기역하며 필요하다면 작업을 되돌리며 여러 명의 코드를 쉽게나누고 합치며 개발하는 것

🐾 깃허브 - 원격 저장소 호스팅 서비스 (원격 깃으로 관리한 프로젝트 호스팅 서비스)

🐾 깃 - 버전을 관리하는 도구

• git config -l 내정보 확인
• git config --global user.name "이름" - Seo Jiin
• git config --global user.email 이메일

🐾 깃이 관리하는 세개의 공간 - (눈에보임) 작업 디렉터리(workistree), /스테이지(index), 저장소 -> 깃이 관리하는 (눈에 안보임)

🐾 작업 디렉터리 - 버전 관리의 대상이 위치하는 공간(.git이 있는 디렉터리)

🐾 스테이지 디렉터리 - 다음 버전이 될 후보가 올라가는 공간 (무의미한 변경은 올라가지 않음)

🐾 저장소 - 로컬 저장소 : 내 컴퓨터 속에만 존재
               - 원격 저장소 : (깃허브에서 관리되는 저장소처럼) 버전이 만들어지고 관리되는                  공간

🐾 스테이지에서 저장소로 버전으로 만드는 것이 커밋
(커밋)유의미한 변경사항이 , 버전을 만들다

🐾 버전 - 스테이지로 add 저장소로 commit

👉🏻 명령어

🐾 git init : 로컬 저장소 만들기

🐾 git status : 작업 디렉터리 상태 확인하기

🐾 git add

• git add <스테이지에 추가할 대상> : <스테이지에 추가할 대상> 스테이지에 올리기
• git add . : 모든 변경사항 그테이지에 올리기

🐾 git commit : 제목 (+ 본문)

• git commit : 자세한 커밋 메시지와 함께 커밋하기
• git commit --missage "<커밋 메시지>" : <커밋 메시지> 로써 커밋하기
• git commit -m <커밋 메시지> : <커밋 메시지> 로써 커밋하기

🐾 git log : 커밋 목록 조회하기

• git log --oneline : 커밋 목록 한 줄로 조회(간단히)
• git log --patch : 커밋별 변경사항 목록 조회하기
• git log -p : 커밋별 변경사항 목록 조회하기

🐾 git diff : 최근 커밋과 작업 디렉터리 비교하기

• git diff --staged : 최근 커밋과 스테이지 비교하기
• git diff <커밋><커밋> (git diff <이 커밋에 비해><이 커밋이 뭐가 달라?>) : <커밋> 끼리 비교 (순서 중요)

🐰 브랜치

🥕 버전의 분기 (여러개의 흐름으로 나타냄)

🐾 없다면?

• 서로의 작업과 전혀 관련 없는 부분. 같은 코드를 다르게 수정한 부분 혼재 = 충돌
• 일일이 수작업으로 합쳐야 함
• 때로는 서로의 코드를 합치다 실수가 생길 수도

🐾 브랜치로 버전의 분기를 관리하는 방법
1. 브랜치를 나눈다
2. 각자의 브랜치에서 작업한다
3. (필요하다면) 나눈 브랜치를 합친다

• 합치는 과정에서 같은 부분을 다르게 수정한 부분만 보면 된다.

🐾 브랜치의 이름 : 최초의 브랜치 master

• 가장 기본적인, 최초의 브랜치. 지금까지 여러분들이 만든 커밋들은 모두 기본적으로 master브랜치에 속해있다.
• master = main

🐾 브렌치의 이름 - master 브랜치는 커밋에 세 개 쌓여 있고. foo 브랜치에는 커밋이 다섯 개 쌓여 있다.

👉🏻 명령어

🐾 git branch : 브랜치 목록 조회하기

• git branch <브랜치> : <브랜치> 생성하기
• git branch -d <브랜치> : <브랜치> 삭제하기

🐾 git checkout <브랜치> : <브랜치> 로 체크아웃하기 ( 작업 환경 바꾸기 )

• git checkout -b <브랜치> : <브랜치> 생성하고 체크아웃하기

🐾 git merge <브랜치> : <브랜치> 병합하기

👉🏻 특정 브랜치에서 작업하기: HEAD와 체크아웃

🐾 HEAD

• 포인터
• 현재 작업 중인 브랜치의 커밋을 가리킨다
• 일반적으로 현재 작업 중인 브랜치의 최신 커밋을 가리킨다
• 한마디로 "내가 지금 어디에서 작업 중인가"를 가리킨다

🐾 브랜치를 합친다 == 브랜치를 병합(merge)한다

🐾 병합에는

• 새로운 커밋 만들지 않는 병합 : 받아들이기만 할뿐인 병합, 빨리감기 병합(faster-)
• 새로운 커밋이 만들어지는 병합 : 커밋 메세지 만들기창이 나온다.

ex ) git checkout -b bar
touch bar_a.txt
git add bar_a.txt
git commit -m "bar commit"
git checkout maseter

🐾 충돌이 발생했을 때 대처법
1. 충동을 해결한다 (어떤 브랜치의 내용을 반영할건지 직접 선별)
2. 다시 커밋한다 (add, commit)

🐾 충돌

• 예를 들어, 다른 개발자들이 같은 파일의 같은 부분을 변경한 후 합치려고 할 때, 겹치는 부분이 생길 겁니다.

• A 개발자 => a.txt 의 첫 번째 줄 변경
  B 개발자 => a.txt 의 첫 번째 줄 변경
  => 두 개발자 모두 같은 곳 변경함

• 그럼 A 개발자와 B 개발자가 작성한 것 중 누구의 코드를 사용해야해? 라고 git이 저희에게 물어보는 겁니다. (충돌)

🐰 느낀점

🥕 이미지 id 값을 받아서 그 id 값에 맞게 데이터를 내려주고 싶었는데.. 배운 내용에서 한참 벗어났을 뿐더러 script 부분이 너무 복잡했다. 🥹

🥕 이미지 'id'에 정신이 팔려있을 때 localStorage 라는 함수를 팀원분이 알려주셨다

🥕 여러 오류들을 발견했지만 그 중 많은 부분이 오타에 의해서 나타났다. 나머지는 수습하는게 급급해 놓쳐버렸다. 다음에는 이슈가 생길때마다 기록해놔야겠다.

🐾 'localStorage'에 'comment'키로 'id'값을 저장하고 'window.open'을 사용하여 'detail'페이지를 새 탭으로 여는 코드

function newTab(id){
alert(id);
localStorage.setItem('comment',id);
window.open('detail',"_blank");
}

🐾 app.py

# 게시글 내려주기
@app.route('/introduce/detail/new', methods=["GET"])
def get():
    all_users = list(db.luckey_users.find({},{'_id':False}))
    return jsonify({'result': all_users})

# 댓글 내려주기
@app.route('/introduce/comment', methods=["GET"])
def comment_get():
    all_users = list(db.luckey_comment.find({},{'_id':False}))
    return jsonify({'result': all_users})
    
# 팀원 내려주기
@app.route('/introduce/comment', methods=["GET"])
def users_get():
    all_users = list(db.luckey_comment.find({},{'_id':False}))
    return jsonify({'result': all_users})

🐾 detail.html (댓글)

$(document).ready(function () {
            show_comment();
            show_users();
        });
        // 댓글 받기
        function show_comment() {
            fetch('/introduce/comment').then((res) => res.json()).then((data) => {

                let rows = data['result']
                $('#comment-list').empty()

                rows.forEach((a) => {
                    let nickname = a['nickname']
                    let comment = a['comment']
                    console.log(a)

                    // 데이터 입력
                    let temp_html = `<div class="comment">
                                        <p style="font-size: 20px; font-weight: bold;">${nickname}</p>
                                        <p>${comment}</p>
                                    </div>`
                    $('#comment-list').append(temp_html)
                })

            })
        }