https://xxyeon129.github.io/fe-sprint-my-agora-states/

• 디스커션 배열 데이터 나열
• 작성한 디스커션 추가 기능
• 디스커션 배열에 사용자가 입력한 데이터 추가
• 현지 시간 적용
• Pagination - 한 페이지에 10개씩 디스커션 보이도록
  • 이전, 다음 페이지로 이동 가능
  • 이전, 다음 페이지가 없는 경우 페이지 유지
• CSS

💡 과제를 진행하면서 느꼈던 점

git

부트캠프에 와서 처음으로 만들어보는 프로젝트! 무엇보다 좋았던 점은 독학으로 프로젝트를 만들 때는 git으로 프로젝트를 관리하지 못했었는데, 이번 기회를 통해 git을 이용해 commit하는 방법과 Fork, Pull request, 배포 등을 배울 수 있어 좋았다.

아무래도 git이 협업 툴이다보니 독학으로 배우기에는 인터넷 강의만으로 채워지지 않는 한계가 있었는데, Solo project를 진행하면서 직접 해보니까 더 잘 이해가 되었다. 물론 작업하면서 줄곧 master branch로 commit을 하다가 뒤늦게 branch를 main으로 바꾸는 바람에 pull request를 할 때 수많은 오류가 나서 정말 고생했지만..🙃

그래도 이런 오류들 덕분에 듬성듬성하게 학습된 git 개념들을 좀 더 확실하게 이해하려고 노력하게 되었고, 여기저기 흩어져 있는 지식들을 한 데 모아 정리해볼 수 있는 기회가 되었다. 또 몇 시간 동안 매달리면서 오류들을 해결해보니 절대 해결하지 못할 것 같던 오류들도 알고 보면 별 거 아니라는 자신감이 생겼다. 이런 경험은 앞으로 계속해서 마주할 오류들에 대해 지치지 않고 계속해서 해결을 시도해보는 지구력의 기반이 될 것 같다!

project 제작

주제를 처음 봤을 때는 막막했지만, 세부적으로 단계를 나눠서 차근차근 생각해보니 Bare Minimum Requirement는 큰 문제 없이 잘 풀렸다. 사실 이번 프로젝트는 git에 애를 먹어서, 코드를 작성하며 프로젝트를 제작하는 것보다 git과 관련해서 훨씬 더 시간을 많이 할애했다..ㅋㅋ 그래도 진행하면서 아무리 막막해보이는 것도 차근차근 단계를 나눠 의사코드를 작성하며 어떻게 코드를 작성해야 할지 생각해보면 풀린다는 것을 깨닫게 되었다.

🚩 새롭게 알게 된 것

git으로 협업하기

Local Repository

• Repository: git에서 코드를 저장하는 공간. 저장소. 말 그대로 파일이나 폴더를 저장해두는 곳
• Local Repository: 자신의 컴퓨터 작업 공간(local)에 위치. 개인 전용 저장소
• local 환경의 directory에서 local git repository를 추가하면 → directory의 파일 변화 감지 가능
• git init → working directory → add → staging area → commit → .git directory

1. git init

• 일반적인 폴더(작업 공간)에 local git repository 추가
• git을 이용하여 자신의 프로그램 버전 관리를 할 수 있음
• 이렇게 git을 초기화하게 되면 기본적으로 main/master branch가 생성됨

2. git add

• git add <경로명> working directory의 untracked file을 → git 관리 하인 staging area로 추가
• git add . staging area의 모든 파일을 한 번에 추가
• 파일들의 변경 사항을 git으로 관리 가능
• git status staging area에 잘 옮겨졌는지 확인 → 늘 commit하기 전에 staging area 확인
• git restore <파일명> modified 내용 삭제 → 수정한 내용 삭제해버리고 기존 상태로 되돌림 (git add 취소)
• echo *.<파일 형식> > .gitignore 특정 파일들은 git에 포함하고 싶지 않을 경우 .gitignore 파일 안에 두기
• git rm --cached <파일명> staging area에 있던 파일이 working directory로 옮겨짐
• staging area는 commit을 하기 전, 내용을 기록하는 저장소

3. git commit

• git commit -m""
• staging area에 있는 변경 사항을 git repository에 옮겨주는 역할을 함
• Commit tip
  • 작은 단위로 나누어서 자주 하는 것이 좋음
    • 코드를 잘못 적은 경우, 이전 기록을 더 쉽게 복원 가능
    • 누가 해당 코드를 수정했는지 쉽게 파악 가능
    • 향후 학습할 merge, rebase 기능의 기반이 됨
  • 메시지는 짧고 간결하게, 사실적으로 작성 (동료 개발자가 참고하기 편하도록)
    • 기능 구현을 확인 가능하게, 정확한 기술 용어 사용
• 커밋한 기록을 되돌려서 이전으로 돌아가기 (커밋 취소)
  • git reset HEAD^
  • git reset HEAD~1
  • git reset HEAD^1
• git log 내 commit 로그 확인

Remote Repository

1. github에서 remote repository 생성

2. local repository에 remote repository git url을 등록

• git remote add <remote repository 주소를 대신할 이름> <remote repository url>
• git remote -v remote repository가 잘 연결되었는지 확인

3. local git repository에 기록한 내용을 remote repository에 push

• git push <remote repository 이름> <branch 이름>
• remote repository에 local repository 변동 사항 업데이트
• github에서 push가 되었는지 여부 확인

Fork

기존의 잘 만들어진 프로젝트에 변화를 주거나 새로운 것을 시도해보기 위해 다른 github repository를 복사하는 것

• 기존의 프로젝트에 영향 X, 서로의 프로젝트에 영향 X
• git clone <link> 자신의 컴퓨터 local repository로 옮겨 따로 개발
• push → Pull request public 프로젝트에 버그 수정 및 기능 추가 요청
• pull git pull <remote repository 이름> <branch 이름>public 프로젝트에서 새로 업데이트된 내용을 내 local로 받아와 합치기 (remote → local)

과정 정리

1. git clone <link> remote repostitory 가져오기
2. git init local repository 추가
3. git add <. or 파일명> → staging area
   + git branch 확인
   + git status 확인
4. git commit -m"" → .git directory
   + git log 확인
   + git remote 현재 프로젝트에 등록된 remote repository 확인
5. git remote add <remote repository 주소를 대신할 이름> <remote repository url>
   + git remote -v remote repository가 잘 연결되었는지 확인
   + git remote show <remote repository 이름> remote repository의 구체적인 정보 확인
6. git push <remote repository 이름> <branch 이름>
   + github에서 push가 되었는지 확인
   
   

Project

• HTML을 DOM 구조로 변환해주는 DOM Viewer
• Element.prepend() 부모의 자식 요소 맨 앞 위치로 추가
• flex-grow 형제 요소 간 공간 비중 설정
• array에 unshift()를 통해 요소를 추가해도 event 관련 함수가 즉각 반영되지는 않아서, unshift()한 요소에 따로 event 관련 함수를 호출해주어야 함
  (나는 요소가 추가되면 관련 함수들이 (새로운 요소가 추가된) 배열로 즉각 반영하여 작동되는 건 줄 알고 헤맸다)
• 데이터들을 하드코딩해놓은 것을 더미데이터라고 함
• 삼항 연산자 문법 checked.textContent = obj.answer ? “✔️” : “❌”
• new Date() .toLocaleDateString()
  
  

🤔 진행하면서 들었던 생각 + 오류

• HTML div 태그가 동일해도, 계속해서 반복적으로 코드를 작성하게 되는데, div를 만드는 코드 한 줄이나 function을 통해 갖다 쓰는 방법은 없을까?
• discussion 추가와 관련해서 click으로 하면 잘 되는데, submit은 preventDefault()를 적용했는데도 작동이 되지 않았다. 제출 시간 관계상 click으로 진행했는데, 이후에 submit은 왜 작동이 안되는지 살펴봐야겠다.
• 사용자가 submit한 디스커션의 아바타 프로필 이미지를 array를 만들어서 내가 원하는 이미지 링크들을 넣고, 해당 array에서 랜덤으로 나오게끔 해보고 싶었는데 시간 관계상 하지 못했다.

🔥 추가 학습이 필요한 것

• Pagination을 완전히 다 이해하지는 못했다.< > 화살표 사이에 1~5 숫자를 넣고 싶었는데, 작성한 코드가 동작하지 않아 화살표만 구현이 되고, 숫자는 나오지 않았다. Pagination에 대해 좀더 학습해봐야겠다.
• localStorage를 이용하여 새로고침해도 추가된 디스커션이 유지되도록 제작해보고 싶다.
• 디스커션을 클릭하면 답변이 나오게 하고, 사용자가 'Your question' 폼에 입력한 내용을 새로 추가되는 디스커션을 클릭하면 나오게끔 하고 싶었는데, 시간 관계상 하지 못했다.
• 현재는 'Your question' 폼 크기가 작아서 입력하기 불편해 보이니까, 사용자가 해당 폼을 클릭하면 왼쪽 타이틀이 위로 올라가고, 입력 폼이 왼쪽으로 쫙 늘어나 공간을 크게 확보하게끔 만들어보고 싶다.