팀 프로젝트 (2) GitHub과의 사투 | 공유 여행 기록장 만들기

1편 - 기획 및 코딩 공부 (0-3일차)

https://coolchris.tistory.com/17?category=1010143 

팀 프로젝트 | 공유 여행 기록장 만들기 (1) 기획 및 코딩 공부

---

4일차. 튜터님 첫 코칭 + 생각보다 빨리 이해한 GitHub

9/26 일

 목표 

• 기획 아이디어(공유 여행 기록장)를 튜터님께 이야기하고 의견 받기

---

 튜터님 코칭 

• 협업 방식으로 Git, GitHub 사용을 추천
• 1주차에 프론트엔드는 기본 레이아웃을 빨리 잡고, 백엔드는 (레이아웃을 바탕으로) 데이터베이스 세팅
• 2주차에 프론트엔드는 자바스크립트 추가, 백엔드는 API
• 사이트를 만들 때 crud(create, read, update, delete)구현을 기본으로 생각하기 때문에 수정/삭제 기능을 만드는 것을 추천
  • 로그인 기능이 없을 것이라고 하니까 그렇다면 수정/삭제 기능 구현이 어려울 것 같다고 함
• 웹페이지는 기본적으로 상단(header), 중간(body), 하단(footer)로 나눔
  • header에는 로고, menu가 들어가고 페이지 간 이동해도 바뀌지 않는 부분
  • 포스트 작성 부분을 버튼으로 열고 닫는 기능보다는 header에 menu를 만들어서 페이지가 바뀌는 방식을 추천
  • 게시판을 만드는 bootstrap를 활용하기를 추천
• (질문) 워드클라우드 만들기
  • txt파일을 읽으라는 코드에 사용자가 작성한 내용을 통째로 넣어두고 (temp.html = `내용`) 워드클라우드로 돌리기 (txt file로 변환 후 워드 클라우드에 전달할 필요 x)
  • 완성 후 별도로 저장하기 기능 : 사용자가 가공해서 사용할 수 있도록
  • 데이터 베이스의 주소를 받을 수 있도록 구현. (조금 더 까다로운 로직 필요)
• (질문) 검색 기능 - 내가 쓴 기록 모아보기
  • 이름 + 닉네임(고유 데이터)을 받아서 둘다 검색하여 일치하면 글이 나도록 하는 방법
    (이름만은 서로 겹치는 사람이 있을 가능성 존재)
  • 프론트엔드는 백엔드에 데이터베이스 검색할 수 있는 단서(작성자 이름 / 도시 이름) 주면
    백엔드에서 sorting 해서 (내가 작성한 글 / 도시별 띄우기)기능이 가능함

---

튜터님 코칭 이후

 할 일 

• GitHub 사용법 익히기 - 튜터님이 공유해주신 자료
  • git 공부사이트 : https://backlog.com/git-tutorial/kr/
  • git 교육동영상 긴 것 : https://www.youtube.com/watch?v=lPrxhA4PLoA
    짧은 것 : https://www.youtube.com/watch?v=lelVripbt2M
• 역할 배분 구체화 필요

 아이디어 수정사항 

• header에 메뉴 최소 2개 구성
  • 포스트 피드 열람 페이지  (+ 워드클라우드) 
  • 포스트 작성 페이지

---

확실히 튜터님의 코칭을 통해 우리끼리만 했을 때 알지 못하는 내용들, 질문으로 묻지 않았지만 추가적으로 알아가는 팁들이 많다는 것을 느꼈습니다.

GitHub 계정은 만들어둔 게 있어서 그걸로 repository 만들고, Git을 다운로드 받아서 add, commit, push 를 연습한 결과 잘 작동했습니다. 이 때는 아직 튜터님이 공유해주신 Git & GitHub 사용법 자료가 없어서 구글링하면서 Git & GitHub을 이해하기 위해 노력했습니다. 

---

5일차. 안다고 착각했다, 팀으로 하는 GitHub은 또 새로움

9/27 월

 할 일 

• GitHub
  • 팀 프로젝트를 위한 repository 만들기
  • 전반적으로 GitHub 익숙해지기
  • master clone하기

---

팀원들 중에서는 제가 먼저 GitHub을 이해하고 add, commit, push를 문제없이 하게 되면서 팀 프로젝트를 위한 repository를 만든다고 자원했습니다.

어제까지는 나름 잘 되었었는데, 오늘은 하다보니까 뭔가가 계속 안되어서 해결을 위해 시간은 한참 쓰면서 막상 해결은 안되는 상황에 봉착했습니다 ㅠㅠ

아래에 글로 적으니 간단해보이지만, 제게는 팀 프로젝트하면서 마주한 큰 어려움 중 하나였습니다.

 문제들  - GitHub 관련

	문제	문제의 이유 or 해결방법
1	clone, pull을 안 해봤었는데 막상 해보니 계속 충돌이 발생한다는 error가 뜨고 어떻게 해결해야 할지는 모르겠었음	문제 이유	master와 제가 사용할 branch를 헷갈려하며 push, pull을 하는 바람에 그 사이에서 충돌이 일어났던 것 같음
		해결 방법	- 새로운 repository로 다시 시작 - master와 제가 사용할 branch를 헷갈리지 않기 위해, 서로 다른 editor를 사용 (pycharm과 vscode가 원래 둘 다 있었음, 이후에 다시 pycharm만 사용)
2	팀원들이 branch 만들기를 실패해서 대신 branch를 만들어줬는데 팀원들이 접근이 안 된다고 함	해결방법	각자가 git checkout -b [branch이름] 을 한 후에 git push 를 해야 master에 branch가 생성되고, 접근도 됨

 

새로운 repository를 만드는 것이 어떨지 팀원들에게 제안했을 때 괜찮다고, 그렇게 하자고들 이야기해주셔서 마음이 많이 놓였습니다.

문제 1번 때문에 master를 관리하는게 쉽지 않다고 느껴서, 새로운 master는 다른 사람이 할 생각이 있는지 물어봤었고 다들 크게 어필을 하지 않아서 스스로 용기내어 그냥 제가 다시 만들었습니다! 

---

6일차. GitHub 협업 적응 중

9/28 화

튜터님 코칭

• (질문) static 폴더가 GitHub에 업로드가 안됨 (hidden folder라고 뜸). 원래 안 되는 것?
  • 빈 폴더는 원래 업로드 되지 않아, 폴더 안에 아무 사진이나 txt 파일이라도 넣으면 GitHub에 업로드가 될 것

• (질문) 현업에서 master에 merge할 때 타이밍은 어떻게 맞추는지?
  • 보통 master는 건드리지 않는 파일. (최종만 업로드)
  • 각자의 branch 에서만 작업. 상급자의 승인하에 merge 결정
  • branch는 한번 push 하고 나면 삭제하는 경우 대부분
  • 작업자들은 담당 부분만 작업 후 commit
  • repository 주인(나) 외에도 merge 승인이 가능

• (질문) 개발순서 질문 : 상단 중단 하단으로 가야할지?
  • 헤더와 푸터를 먼저 하는 경우가 많음 (다른페이지에서도 고정일 경우)

• (질문) 자기글만 모아보기
  • 위해서 고유데이터가 필요함 -> 익명을 위해서 작성자 이름 + 닉네임이 아닌 숫자 4자리 + 닉네임을 받으려고 하는데 어떨지???
  • 가능! (숫자 4자리+닉네임 고정일때) - (제안: 생년월일? 전화번호 끝자리?)

• 업무 분담 tip
  • 프론트엔드 : 페이지별로 분담 / 페이지내에서 기능에 따라 분담 (ex. 헤더, 푸터, 바디)
  • 백엔드 : API별로 분담

---

 할 일 

• GitHub repository에 팀원들을 collaborator로 승인하기 - 나
• GitHub repository에 각자의 branch 만들기

 아이디어 수정사항 

• 메뉴 4개
  • home (포스트 피드 + 워드클라우드)
  • record (포스트 작성)
  • about (우리 소개)
  • search (자기글만 모아보기)
• 포스트 작성에서 도시 칸 누르면 범주 리스트가 나오는 부트스트랩 활용
  • 베타버전에서는 "국내"만 하기

---

아직까지는 직접 코드와 부딪히지 않아서 팀 분위기가 chill~ 했고 튜터님도 뭔가 잘 풀릴것 같은 느낌의 팀이라고 이야기 하셨는데,  

---

7일차. GitHub pull master 충돌 해결하기 + 프론트엔드 코딩

9/29 수

프론트엔드 끼리 그리고 백엔드 끼리 회의할 시간을 가지는 것으로 했다.

 할 일 

프론트엔드 

• 메뉴 4개를 위한 html 파일
• 모바일 버전 구현
• 대략적인 디자인

 백엔드

• flask 이용해서 로컬 서버 작업 환경 만들기 (http://localhost:5000/)

    from flask import Flask, render_template 
    app = Flask(__name__) 

    ## HTML 화면 보여주기 
    @app.route('/') 
    def homework(): 
        return render_template('index.html') 

    if __name__ == '__main__': 
        app.run('0.0.0.0', port=5000, debug=True)

• flask 프레임워크 이용 현재 master에 올라간 html(index, write) > 로컬 환경에서 열리도록 설정 완료
• API (GET,POST) 부분 공부하기

---

 개인 코딩 

프론트엔드끼리 코딩을 해서 

 

---

아래의 링크로 스파르타코딩클럽을 가입하면 5만원 할인을 받을 수 있습니다!

 

https://spartacodingclub.kr/?f_name=%EC%A0%95%ED%95%B4%EC%9D%B8&f_uid=610764842ffede35fb3d37ea

스파르타코딩클럽