그동안 배웠던 내용들을 바탕으로 프론트엔드 기반 팀프로젝트를 시작했다.
랜덤을 돌려 시진님, 정원님, 민수님과 함께 3조가 되었다! 우리의 조 이름은 '보람삼조'
보람찬 3조로 생각하자 ...
또 내가 조장을 맡았는데 잘 모르는 내가 조원들을 잘 이끌어 마무리를 할 수 있을지 모르겠지만 도움은 못 주더라도 피해만 끼치지 말자는 마인드로.. 열심히 해볼 생각!!
제일 처음 프로젝트 주제를 선정할 때, 강아지를 키우고 있는 집사로서 처음 강쥐를 데리고 왔을 때 이게맞다저게맞다 , 수많은 영상과 정보들 등등 정보의 바다에서 허우적댔을 때
'아, 책 한권으로 모두 습득할 수 있는 강아지책 없나' 하는 경험이 생각이 나서 팀원들에게 의견을 내게된 베이스를 설명드리고 다행히 모두 좋다고 하셔서 운이 좋게 내가 원하는 사이트방향으로 만들게 되었다!
이를 해결해주기 위해 미리 많은 화장품 리뷰 영상을 토대로 화장품에 대한 데이터를 하드코딩으로 넣어두고 나의 조건을 담아 필터를 걸어 이에 대한 화장품 리스트 를 띄우고 리스트에서 각 화장품 정보 를 볼 수 있도록 하는 사이트를 만들어 보자고 논의를 했다.
그래서 결과적으로는 메인 페이지, 필터 페이지, 리스트 페이지, 상세정보 페이지 로 나누었고 나는 메인 페이지 에서 스크롤 인터렉션을 넣어보고자 화해 사이트를 클론코딩하여 웹 페이지를 만들어 보려고 한다.
목표는 다음과 같은 움직임을 보이는 사이트를 구현하는 것이다.
큰 틀은 이렇게 나누었고 각자 맡은 페이지에서 부가적인 기능들을 만들기로 하였다.
나는 지식 정보페이지와 커뮤니티페이지를 맡았다.
시각적인게 얼마나 중요한지 알기 때문에 배웠던 css나 부트스트랩 등 애니메이션기능을 최대한 많이 써볼 생각이다.
- 회의록
알아야할 정보나 기능정리 => Notion 활용
통일해야하는 디자인 => Figma 활용
큰 그림이나 전체적인 디자인을 팀원들과 공유하고 참고해서 만들어야할 것 같아서 시진님의 추천으로 기능이나 회의들은 notion을 디자인은 figma를 사용하여 공유하였다. 피그마 아주 좋은걸 ...?
프로젝트 2일차부터 4일차까지 개인적인 사정으로 인해 참여를 못 했다ㅠㅠ
- 회의록
충돌이 계속 생기니 pr, merge하면 바로바로 말해주자.
5일이 지난 후 돌아온 조장은 .. 어리벙벙 그 자체
만들어놓은 레포의 bash로 열어야하는데 기존에 작업하던 곳에서 팀프로젝트 브랜치로 이동하려니 오류가 계속 났었다. 리더님의 도움을 받아 해결 후 아직 못 만들고 있던 커뮤니티 페이지를 맡아 구현하기로 했다.
자유 커뮤니티 게시판 기능을 맡아서 작성 중이다 .
merge를 하면 branch가 삭제되길래 리더님에게 물어보니,
그게 맞는거라고 ㅎㅎ..
모든 작업 완료 후 pr및 머지를 한 후 작업했던 브랜치는 삭제 -
새 브랜치를 만들고 작업하고 다시 pr,머지 - 작업한 브랜치 삭제 - 생성 반복하면 된다 . => 작업했던 브랜치가 계속 남아있으면 디벨롭브랜치의 작업현황을 못보고있기 때문에 원래 작업한 브랜치는 삭제 후 재생성이 맞는거라고 하심
자주 헷갈려하니 정리해봄
제일 상단 root 폴더로 이동하기
$ cd Team_Project/
디벨롭 브랜치로 이동하기
git checkout develop
디벨롭 최신 상태 땡겨오기
git pull
작업했던 브랜치 삭제
git branch -d "작업했던 브랜치명"
새로 작업할때 사용할 new 브랜치 생성
git branch "브랜치명"
- 회의록
DB 만들기에 더 집중되있는 것 같아, 페이지가 정적인 느낌.
애니메이션 효과를 더 주기로함
js를 사용해서 댓글기능을 구현했다.
DB를 배우지 않아 화면상으로만 보이지만
localstorage를 통해 저장된 값을 불러오는 형식으로 구현!
아직 DB를 배우지 않아 창을 새로 열거나 로그아웃 후 실행하면 댓글이 사라지는게 아쉽지만 ㅜㅜ 어려워하던 로직짜기를 완성했다니 뿌듯했다.
바빠서 못채웠던 tip커뮤니티를 만들었다.
부트스트랩에 아코디언을 사용해서 고정 글 여러개 만든후 ,
페이지네이션을 구현하였다.
발표자료 및 부족한 css를 보충하였다.