협업 툴
- 기록: 노션
- 소통: 개더
- 코드: 깃허브 프로젝트, 이슈
협업 방식(Tip. 과제를 참고해 보기)
- PR 양식 정하기
- 데브코스 과제 PR 기반으로 수정하기
- 코드 리뷰를 며칠 안에 할 것인지
- 커밋 컨벤션
- commitizen을 쓴다.
- 코드 컨벤션(eslint, prettier, stylelint 등)
- eslint Airbnb Style 기반으로 우리에게 맞게 수정하기 ⇒ 기본형 사용하다가 필요시 규칙 추가하기
QnA
- [궁금] 자체적인 logic은 없지만 props를 받는 컴포넌트가 존재할 때, 해당 컴포넌트에 style을 주기 위해 함수 컴포넌트를 정의하고, 따로 정의한 styled component를 return 시켜줘야 할까? 아니면 그냥 바로 styled component를 정의하여 export를 시켜주는 게 좋을까? 테스트를 해보니, 그냥 styled component를 정의해서 export 한 다음에 상위 컴포넌트에서 해당 컴포넌트에 props를 내려줘도 잘 동작한다. defaultProps나 propTypes 체크도 잘 진행된다. 그러면 굳이 함수 컴포넌트를 정의하지 않고 styled component만 정의해서 써도 좋을 것 같은데. 이런 방식에 혹시 어떤 단점이 있으려나.
- 하위 컴포넌트의 style을 추가 하는 방법에는 무엇이 있을까? inline style로 추가를 해야하는건가? 그렇다면 컴포넌트 유연성을 위해 ...props를 사용해야 하는걸까? 이미 정의된 컴포넌트를 사용하는 컴포넌트 즉 부모 컴포넌트에서 styled.components를 이용해서 style을 추가할수있는 걸까?
Styled components
- A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied.
- A helper component for theming. Injects the theme into all styled components anywhere beneath it in the component tree, via the context API. Check the section on Theming.
sass 파일을 themeprovider로 ?
잊지말자!
컴포넌트를 사용할때는 prop을 넘겨주고 받아와야한다!!!!!
중간발표 대본
안녕하세요,동영2팀입니다.
저희 팀이 만드는 프로젝트는 Deto라는 이름의 토이프로젝트를 공유하는 SNS입니다.
개발을 즐기고 흥미가 있는 사람이라면 누구나 자신의 토이프로젝트를 포스팅하여 공유하고, 또 서로의 프로젝트를 보며 소통을 하는 것이 저희 프로젝트의 핵심 기능입니다. 게시물을 올릴 때마다 유저의 레벨이 상승하도록 하여 재미를 부여했습니다.(?)
(와이어프레임 보면서)
메인화면에 접속하면 유저들이 올린 게시글의 리스트를 볼 수 있습니다. 카테고리를 선택하여 주제별로 게시글을 확인할 수 있고, 더보기 버튼을 클릭하여 기술 스택별로도 게시글을 필터링하여 확인할 수 있도록 설계했습니다.
또한 팔로워 수가 많거나 게시글의 좋아요수가 높은 인기팔로워들을 확인할 수 있습니다.
게시글을 작성할 때는 배포링크는 필수로 삽입하여 적어도 배포될 정도로 완성된 프로젝트를 공유할 수 있도록 구성했습니다. 깃헙링크는 글 작성자가 원하면 공개하고 원하지 않으면 공개하지 않아도 되는 선택사항으로 두었습니다. 또한 다른 유저들에게 협업 제안을 받고 싶은지를 체크하여 게시글을 본 다른 유저에게 협업 제안을 받을지 안받을지를 선택할 수 있습니다.
게시글의 상세 페이지에서는 게시글을 보고 좋아요를 누르고, 댓글을 남길 수 있습니다. 칭찬, 훈수, 잡담, 질문의 4가지 타입을 선택하여 댓글을 남겨 작성자와 소통할 수 있습니다. 또한 협업제안을 받도록 설정한 게시글이라면 협업제안 버튼을 누를 수 있어서 작성자에게 알림이 가도록 구성했습니다.
유저의 프로필이나 닉네임을 누르면 유저의 페이지로 이동할 수 있습니다. 레벨, 팔로잉수, 팔로워수, 올린 게시글들을 확인할 수 있고 DM을 보내거나 팔로잉 혹은 팔로잉 해제가 가능하도록 버튼이 존재합니다.
자신이 팔로잉하는 유저들의 목록을 확인하는 페이지입니다. 온라인 유저들은 초록색 뱃지가 프로필 상단에 붙어 있고, 온라인 유저들을 먼저 볼 수 있도록 배치하였습니다. 오른쪽의 토글 버튼으로 팔로잉을 해제할 수 있습니다.
또한 로그인과 회원가입 기능, 또 부가적으로 유저들이 DM을 통해 실시간 질문과 협업 관련 이야기를 주고받을 수 있도록 구성했습니다.
저희가 초기에 컴포넌트를 구성할 때에 컴포넌트 재사용성을 기준으로 작은 단위의 컴포넌트들로 구분하여 상위 컴포넌트를 이루도록 base, domain, pages의 3단계로 컴포넌트를 설계했습니다. 재사용이 가능한 base컴포넌트, 그리고 base 컴포넌트들을 조합하고 추가 기능을 입힌 domain컴포넌트, domain컴포넌트를 조합한 page컴포넌트의 3단계입니다.
해당 방식으로 base컴포넌트들을 먼저 만들어가던 중에 속도가 많이 더뎌져서 현재까지 기능적으로 제대로 구현한 컴포넌트가 없는 상황이 되었고, 진척도에 문제를 느껴 멘토님께 조언을 구하게 됐습니다. 멘토님께서 3가지의 문제점으로 프로젝트의 문서관리가 미흡하여 구체적으로 역할분담을 하지 않은 부분, 추상화해서 컴포넌트를 만드는 것이 쉬운 일이 아닌데 리액트에 대해 이해가 부족한 상태에서 추상화한 컴포넌트로 구성하려고 한 점과, 의사소통을 하는데에 문제가 있었던 것이 원인이라고 피드백해주셨습니다. 기존에는 그냥 각자 10개의 컴포넌트를 만들자만 정하고 정확히 누가, 언제까지 어떤 컴포넌트를 만들 것인지 구체적인 역할 분담을 하지 않았습니다. 그렇다보니 자신이 어떤 컴포넌트를 만들고 있는지 슬랙에 댓글을 남기는 방식으로 프로젝트가 관리되고 있어서 프로젝트의 문서관리를 명확하게 할 수 없었습니다. 또한 리액트에 대한 이해 부족으로 자신이 모르는 것이 무엇인지 파악하지 못하면서 질문하는 것에 어려움을 느껴 문제 상황의 공유가 늦어지면서 구현 속도가 더 더뎌졌습니다.
멘토님의 조언을 반영하여 현재는 base컴포넌트들부터 만들어 나가는 게 아니라 컴포넌트의 우선순위를 정해서 핵심이 되는 기능부터 먼저 만들어나가는 기능 중심으로 개발하고 있습니다. 제일 중요한 포스팅 기능과 포스트를 볼 수 있는 기능을 우선적으로 구현하고 있는 상황이고 부가적인 로그인이나 인기 사용자, 디엠 기능 등은 후 순위로 설정했습니다. 또한 깃허브 이슈를 사용하여 각자가 맡을 부분과 기간을 명확히 정해서 문서 관리 또한 진행하고 있습니다.
남은 기간동안 최대한 프로젝트를 완성해보겠습니다. 감사합니다!
!끝!
⬇여긴 아니에용❌
해당 방식으로 base컴포넌트들을 구현해가던 중에 리액트에 대한 이해 부족과 사용성을 고려하여 추상화해서 컴포넌트를 만들어가는 것에 어려움을 느껴 속도가 많이 더뎌졌습니다. 현재까지 기능적으로 제대로 제대로 구현한 컴포넌트가 없는 상황이 되었고, 진척도에 문제를 느껴 멘토님께 조언을 구하게 됐습니다.
멘토님께서 프로젝트의 문서관리도 미흡하고, 구체적으로 역할 분담을 하지 않은 부분과 의사소통을 하는데에 문제가 있었던 것이 원인이라고 피드백해주셨습니다. 그래서 현재는 멘토님의 조언을 반영하여 컴포넌트의 우선순위를 정해서 디엠이나 로그인같은 부가적 기능은 뒤로 제쳐두고 제일 중요한 포스팅 기능과 포스트를 볼 수 있는 기능을 우선적으로 구현하고 있습니다. 기존의 컴포넌트를 추상화하는 buttom → up 방식대신 기능 구현을 중심으로 한 top→down 방식으로 바꾸어서 domain을 위주로 개발 중입니다. 각자에게 확실한 역할과 기간을 부여하며 깃허브 이슈도 활용하여 구체적으로 역할을 분담하고 있습니다.
남은 기간동안 최대한 프로젝트를 완성해보겠습니다. 감사합니다!
문제
- 컴포넌트 구현의 문제
- 사용성을 고려한 컴포넌트 추상화의 어려움
- 리액트에 대한 이해 부족
- 의사소통의 문제
- 리액트에 대한 이해부족으로 무엇을 모르는지 모르는 상태여서 질문자체에 어려움을 느낌
- 다른사람에게 폐가 된다는 생각에 질문을 하지 못함
- 프로젝트 관리(문서화/역할 분담)
- 서로 진척도나 상황을 파악할수 있는 문서화가 되지 않았음
우리가 만들어야 하는것!!