Homile

✅ 오늘한 일

와이어 프레임 완성

• 작성된 와이어 프레임중 빠진곳을 체크하여 다시 작성하고 수정하는 시간을 가졌다.
• 완성된 와이어 프레임을 가지고 백엔드분들과 소통하여 어느부분에서 어떤 데이터, API가 필요한지에 대해서 대화를 했다.

화면 정의서 완성

• 1차적으로 내가 작성한 화면 정의서를 프론트 팀원분들께 보여드리면서 이런식으로 한번 작성해보면 좋을 것 같습니다! 하며 화면정의서를 작성하는 시간을 가졌다.
• 나도 이렇게.. 작성하는게 맞는가?에 대한 생각이 많았지만 최대한 많은 자료를 참고하여 작성했기에 경험이란 느낌으로 작성하는 시간을 가지게 되었다.
• 완성된 화면 정의서를 다같이 모여서 검토하고 수정하는 시간을 가지며 조금 더 다듬어서 완성했다.

📌 해야할 일

• 웹 디자인 작성
• 반응형 디자인 작성
• 메인 프로젝트 구현

✅ 오늘한 일

프로젝트 중간에 추석이 껴서 조금 나른해질 뻔한 마음을 다잡고 프로젝트를 조금이라도 진행했다. react에서 사용하는 다양한 라이브러리를 찾아보고 어떤것을 메인 프로젝트에서 사용하면 좋을지 자료를 찾는 시간을 가졌다. 찾은 라이브러리를 실제로 사용해보고 정리하는 시간을 가지는 시간이었다.

화면 정의서 작성

• 조금 완성된 와이어프레임 만큼의 화면 정의서를 작성했다.
• 프리 프로젝트때는 혼자 작성했었지만 프론트 팀원분들도 작성해보면 좋은 경험이 될 것 같아서 남은 화면 정의서는 팀원분들에게 나눠드리는게 좋을 것 같다고 생각했다.

리액트 초기 틀 작성

• 프리 프로젝트 때 미흡했던 파일, 폴더 구조잡기, 라이브러리 설치 등 초기 틀을 작성해보았다. 작성하면서 정말 미흡했던 점이 많았다는 것을 다시한번 깨닫는 계기가 되었다.

📌 해야할 일

• 와이어 프레임 완성
• 화면 정의서 완성
• 웹 디자인 작성
• 반응형 디자인 작성
• 메인 프로젝트 구현

✅ 오늘한 일

주제 선정

• 큰 주제를 팀원들과 함께 하나씩 던져봤더니 총 16개정도?의 주제가 나왔다.
• 이미 서비스 중인 주제들도 굉장히 많았지만 포트폴리오를 위한 협업 프로젝트이기 때문에 없는 서비스 주제를 찾기보단 기능에 중점을 맞춰서 주제를 선정했다.

사용자 요구사항 정의서 작성

• 선정된 주제를 가지고 팀원들과 함께 필요한 기능과 왜 필요한지를 사용자 요구사항 정의서에 작성했다.

와이어 프레임 작성

• 와이어 프레임을 팀원들과 함께 작성하다가 백엔드분들은 명세서를 작성하시는 것이 낫다고 판단되어 프론트끼리 작업을 했다. (처음엔 같이 어떤식으로 가면 좋을지 대화하며 작성)

📌 해야할 일

• 와이어 프레임 추가 작업
• UserFlow 작성
• 화면정의서 작성

✅ 오늘 한 일

S3를 통한 최종 배포

• 스택오버플로우의 모든 기능을 구현하지 못한 것은 아쉽지만 팀원들과 정한 기능은 완벽하게 구현해서 만족스럽다.
• 실 개발 기간은 주말 제외 평일만으로 기준으로 두었을 때 7일이다. (화면 정의서, 사용자 요구사항 정의서 등 기획관련 및 배포 제외)
• 메인을 위한 도약의 발판이라고 생각하면서 서로 공부하면서 모르는 것을 백엔드, 프론트엔드 나누지않고 모두가 함께 극복할 수 있었던 것이 가장 좋은 기회였다고 생각한다.

메인화면

• 메인화면의 나의 파트는 상단 Navbar, 왼쪽 사이드바였다.
• navbar
  • 비로그인, 로그인 시 나타나는 화면이 다르다는 것을 깨닫고 상태관리도구인 redux를 사용하여 로그인 여부를 판단하고 navbar의 출력되는 화면을 변경해 주었다. (메인화면, 회원가입 및 로그인 두 개의 gif를 보면 다름을 알 수 있다.)
• 왼쪽 사이드바
  
  • 스택오버플로우와 비슷하게 구현하게 되어 만족스러웠다.
  • 구현과정 중 어려웠던 점은 해당 버튼을 클릭시 이동이되면서 클릭한 버튼의 색상을 바꿔주는 것이 조금 어려웠지만 NavLink를 사용하여 해결 할 수 있었다.
  • React에는 구현시 편하게 할 수 있는 라이브러리가 다양하게 존재하여 개발하는 과정이 편해졌다. 하지만, 회사 입사를 위해선 JS로 구현 과제를 해결해야 하는 경우가 많이있기 때문에 프로젝트가 끝난다면 JS만으로 구현해볼 예정이다. (요즘은 프레임워크(React, vue 등)를 사용하여 구현 과제를 하는 경우도 있다함.)

회원가입 및 로그인

• 회원가입 및 로그인은 팀원이 맡아서 해결했다.
• redux에 대해 알려드리며 새로고침, localstorage에 담는 방법을 같이 해결했다.

질문 작성

• 질문작성은 나의 파트였다.
• 작성란을 구현하던 중 오른쪽에 있는 아코디언을 구현하는 것이 조금 어려웠지만 한번 해봤던 내용이어서 해결했다.
• CRUD를 다 구현했는데 이것은 이미 스터디, 코드스테이츠 과정에서 3번이상 구현해봤기에 조금은 쉽게 구현했다.

댓글 작성 및 삭제

• 댓글관련도 나의 파트였다.
• 파트를 너무 많이 가져온 것 같았다... 메인에서는 기간이 길기 때문에 팀원분들에게 더욱 다양한 파트를 줄 수 있도록 해야겠다. (나의 파트도 챙기면서...)
• 댓글작성의 경우 질문작성과 틀이 똑같아서 구현하는 것에 어려움은 없었던 것 같다.

📝 아쉬웠던 점

• 스택 오버플로우에는 다양한 기능이 존재했지만 많이 구현하지 못한것이 가장 아쉬웠다.
• 코드를 작성할 때 팀원들이 알아보기 편하도록 작성하지 못하여 어떤 코드인지 한번에 이해하지 못하는 일이 있었다. 이것은 유지보수를 할 때 좋지 못한 코드가 될 수 있다는 것을 뼈저리게 느끼게 되었다. 다음부터는 코드를 깔끔하게 작성하고 폴더 및 파일을 정리하는 습관을 가지도록 해야겠다.
• 팀원들과의 소통을 많이 하지 못했던것 같다. 물론 하루에 한번 또는 이틀에 한번은 꼭 얘기를 나눠봤던 것 같지만 매일 매일 어떤 부분을 하고 있는지는 알 수 있는 계기가 적었다. 메인에서는 더욱 많은 소통을 해야 겠다.

📌 해야할 일

• 메인 프로젝트 관련 주제 생각하기
• 기획 공부

✅ 오늘한 일

개인 프리 프로젝트 회고

• 프리 프로젝트를 하면서 진행했던 파트 및 어려웠던점에 대해 전체적인 회고록을 작성했다.

팀 프리 프로젝트 회고

• 팀원들과 함께 프리프로젝트를 하면서 좋았던 점, 아쉬웠던 점, 개선할 점을 얘기하는 시간을 가졌다.
• 전체적인 팀원들의 생각은 비슷했다.

• 분석 설계 회고
  • 좋았던 부분
    • Git book으로 API 명세서 작성 된 것
    • 사용자 요구사항 정의서를 필요한 만큼 작성했다.
    • 화면 정의서를 Figma로 팀원 모두와 필요한 부분에 대해서 실시간으로 대화를 나눴다.
  • 아쉬웠던 부분
    • 너무 필요한 기능만 하게되어 단순한 기능만 구현하게 되었다.
    • 화면 정의서를 구체적으로 작성하지 않았다.
    • 변경 사항을 주기적으로 업데이트 하지 못한 부분이 있다.
    • 팀원간에 커뮤니케이션이 적었다.
  • 개선할 부분
    • 다양한 기능을 구현해본다.
    • 화면 정의서를 조금 더 구체적으로 작성해본다.
    • 하루 10분정도 씩 모두 모여서 회의를 진행한다.
    • 개발 일정을 조금 더 세세하게 작성한다.
• 개발 회고
  • 좋았던 부분
    • 팀원이 어려운 부분을 같이(백, 프론트) 해결해 나갔다.
    • error 발생 시 다같이 해결한것이 좋았다.
    • 상대방의 풀리퀘스트를 승인하여 자연스럽게 리뷰가 된 점
  • 아쉬웠던 부분
    • [FE] 서로 맡은 파트만 개발하다보니 다른 팀원의 파트 코드는 바로 이해하기 힘들었다.
    • API 명세서 업데이트가 잘 되지 않았다.
    • 테스트 코드 작성이 안되었다.
  • 개선할 부분
    • [FE] 커밋 메세지, 폴더, 파일, 변수, 코드 체계에서의 일관성을 갖춘다.
    • 서로 작성한 코드에 대해 리뷰하는 시간을 갖는다.
    • 개발 진행 상황을 매일 공유한다.
• 배포 회고
  • 좋았던 부분
    • 기간내 원하는 기능을 구현했다.
    • 기간내 배포를 완료했다.
    • AWS S3와 EC2를 연동했다.
  • 아쉬웠던 부분
    • aws 계정이 공유가 되지 않아서 배포 관련 문제를 공유하기 어려웠다.
    • CloudFront와 EC2가 연동되지 않았다.
  • 개선할 부분
    • AWS 여러가지 기능 사용하기
    • AWS 계정 공유하기 (IAM, Key 등)

팀 빌딩 및 메인 프로젝트 주제 회의

• 멘토, 멘티(팀)이 정해지면서 자기소개서를 멘토분들이 볼 수 있도록 작성했다.
• 프로젝트 주제선정에 대해 간략하게 얘기를 하고 다음날 아이디어 믹스시간에 주제를 정하기 위해 자신이 원하는 주제 한가지씩 가져오기로 했다.

📌 해야할 일

• 주제 한가지 생각해보기

✅ 오늘한 일

로그아웃 기능 구현

옵션 버튼을 클릭했을 경우 드롭다운이 나타나면서 log out 버튼을 클릭하여 로컬스토리지의 memberId,token 값을 지워주고, 리덕스에 isLogin 이라는 로그인 여부를 판단해주는 상태를 false로 바꿔주었다.

로그아웃을 하게되면 Ask Question 버튼이 사라지게 작업을 해주었다. (리스트 부분은 아직 진행하지 않음..) 버튼이 있어도 상관은 없었다. 백엔드분들이 user의 토큰이 header로 넘어오지 않으면 작성되지 않게 막아두셨다고 한다.

그리고 로그인을 했을 때, user생성일이 담긴 memberId라는 값이 응답값으로 오는데 이것을 가지고 로그인한 유저가 작성한 글인지 판별하여 Edit, Delete 버튼의 유무를 나타낼 수 있게 진행했다. 

이부분은 전에 리덕스와 로컬스토리지를 거즌 16시간 정도 학습을 진행했던 것 같았다... (리덕스를 잘 못썻기때문에 많은 시간을 투자하여 내것으로 만들었다...)

리덕스 자료정리 링크: https://velog.io/@homile/React-redux-사용하기

📌 해야할 일

• 최종 배포
• 메인 프로젝트 주제 생각해보기