[React+Nodejs+SpringBoot] 커뮤니티 프로젝트(팀)

ABILITY

ABILITY는 약 1개월 동안 준비한 비트캠프 3조(팀명: ABILITY)의 파이널 프로젝트입니다. 6개월 간의 배운 것을 총 활용해서 만든 프로젝트이며, 6명의 팀원이 함께 만들었습니다. 하지만, 뷰 라이브러리로 적용한 React는 별도의 스터디를 병행하며 진행한 것이며, 따로 배우지는 않았습니다. 그렇기 때문에 처음 리액트 설계부분에 부족함이 있어, 서버사이드 렌더링을 일부에만 적용했다는가, 리덕스나 리덕스 사가를 모든 페이지에 적용하지 못한 문제가 있습니다. 하지만, 준비 기간이 2개월(실제 코딩기간 45일) 동안 스터디를 병행하며, 한 사이트를 만들었다는 것을 높게 평가해 주시면 좋겠습니다.

프로젝트 개요

우리 프로젝트는 한국형 Stack overflow를 지향하고 있습니다.
여러가지 트랜드를 반영한 최신 기술과 고급 기술들을 많이 적용해서 만든 기술 중심형 프로젝트입니다.
사용자들은 질문을 통해 개발에 대한 해결방안을 얻고, 답변을 통해 일정한 포인트(능력치)를 얻을 수 있는 사이트 입니다.또한 사용자들은 페이지를 통해 구인을 원하는 기업에 지원할 수 있고, 사용자 간의 채팅도 가능하며, 본인이 만든 프로젝트 영상을 다른 사용자들에게 보여줄 수 있는 공간을 제공합니다.

프로젝트 주제 선정 배경

1. 한국에는 철저히 개발자를 위하며, 질문과 답변 중심의 커뮤니티가 부족하다.
2. 실제로 우리가 개발을 하면서 필요한 정보를 쉽게 찾을 수 있는 사이트가 필요하다.
3. 내가 만든 프로젝트를 평가 받거나 자랑할 수 있는 공간이 없다.
4. 6개월 동안 배운 기술을 최대한으로 활용하여 사이트 구축을 할 수 있다.

Target

• 초기 : 개발 입문자 - 영어에 약하고 원하는 정보를 찾을 수 있는 능력이 부족하다.
• 그 이후 : 개발 입문자 & 숙련된 개발자 - 초기부터 사용하고 있는 개발자들을 중심으로 꾸준히 사이트 규모를 늘려나가며, 많은 수의 질문과 답변을 기반으로 더 많은 개발자들을 모은다.

프로젝트 기본 설정

• 기본색 : #5F4B8B(울트라 바이올렛), #F3F3F3(화이트), #242729 (검정)
• line-height : 1.3
• 기본 폰트 : font-family : Noto Sans,Arial, "Helvetica Neue", Helvetica, sans-serif
• 텍스트 에디터 폰트, 코드 폰트 : hack, Arial, "Helvetica Neue", Helvetica, sans-serif
• 연속된 버튼은 다른 색으로 한다.
• 메인 버튼이나 중요한 버튼은 #5F4B8B 색상(PRIMARY를 강제로 색상 변경 - 전역)으로 한다.
• 대부분의 버튼은 "오른쪽"에 위치 시킨다.(모바일 사용자의 편의성 극대화)

URL : www.team-ability.com

ABILITY 프론트엔드 사이트 로드맵

통계 데이터 활용

• 메인 배너에 대한 클릭 수 또한 통계 데이터로 수집하며, 광고 수익 구조는 CPC 방식으로 계산 해보았습니다.

아토믹 디자인 패턴 적용

리액트로 처음 프로젝트를 진행하다보니, 프로젝트 시작전 폴더 구조의 분할에 대한 공부를 했습니다.. 그 중에서 아모믹 디자인 패턴을 적용하여 폴더 구조를 "atoms/, molecules/, organisms/, templates/, pages/"로 구분하였고, 실제로 느낀 장점은 컴포넌트 분류가 일정한 패턴이라 필요한 컴포넌트를 찾아서 재사용하기 좋았습니다.

NEXT 프레임 워크 사용

코드 스플리팅 및 prefetch, 원활한 SSR 적용을 위한 next 프레임워크 사용

IE 최적화

서버사이드 렌더링(SSR)

서버사이드 렌더링(SSR) 개선

기존의 서버 사이드 렌더링의 문제는 데이터만 서버에서 렌더링이 먼저 되기 때문에, 최초 접속시 혹은 새로 고침시 CSS가 깨지거나 흔들리는 현상이 나타났습니다. 여기에 대한 개선책으로 styled-components를 사용하고 styled-components에 SSR을 적용했습니다.

Redux-Reducer 설계

Redux-saga를 활용한 로그인 유지 기능

EsLint 사용

팀원의 코딩스타일을 통일하기 위해 사용(프론트에서는 react-recommand, 백엔드 node.js에서는 airbnb 적용)

ABILITY 백엔드 사이트 로드맵

DATABASE ERD

MySQL 저장 프로시저와 스케줄러

MySQL Trigger

Mybatis

CLOUD COMPUTING

배포전 번들 사이즈 분석

데몬 & 무중단 배포

로봇 배제 표준

형상관리 및 도구

Git - SourceTree, BASH, ZSH


Git Commit Message Convention - 첫 문장(이하 '타이틀')은 영어로 작성한다, 타이틀은 동사로 시작하며 명령문을 유지한다, 타이틀과 본문은 한줄의 간격을 둔다, 본문은 한글로 작성해도 된다

이슈 관리

프로젝트 도중에는 깃을 통한 이슈관리를 시간 관계상 진행하지 않았고, 모든 이슈는 Slack 채널을 활용하며 이슈를 공유했습니다.


하지만, 프로젝트가 종료된 이후에는 이슈 관리 부분을 git의 issues를 활용하여 관리했습니다.

구글 애널리틱스에 의한 추적

사이트 방문자 추적을 위한 구글 애널리틱스를 적용했습니다. 물론 직접 로직을 만들어 구현할 수도 있었지만, 일전에 미니 프로젝트에서 구현해본 결과, 구글 애널리틱스를 활용하는 것이 정확도 측면이나 효율적인 측면에서 더 우수했습니다. 또한 직접 구현하는 것뿐만 아니라, 좋은 기술 혹은 모듈, 라이브러리 등을 찾아서 사용하는 것도 개발자의 중요한 능력 중 하나라고 판단되었습니다.

공통 업무

기존 프로젝트 분석(프로젝트 및 PPT) 및 문서화, 목업툴을 통한 페이지별 디자인 및 레이아웃 구성, 시나리오 수정

담당 업무

참고링크

• GitHub: https://github.com/JungKyuHyun/
  
• Naver Blog: https://blog.naver.com/ajdkfl6445