🐶 wellseecoding

📍 프로젝트 소개

먼저 프로젝트명 wellseecoding 은 '코딩을 곧 잘 알게될거야' 라는 뜻 입니다.
IT업계 취준생, 현업자들을 위한 웹앱이며, 혼자 공부하는 것보다 함께 목적달성을 하기 위한 사람들을 매칭 시켜주는 플랫폼 입니다. 수많은 IT 커뮤니티들과 비교 해봤을 때, wellSeeCoding이 뽐낼만한 차별점은 실명제로 하여금 스터디나 사이드 프로젝트를 구할 시, 보다 더 신뢰도를 가질 수 있다는 점과 함께 할 구성원들을 스터디장이 신청자의 마이페이지 이력들을 보고 핏이 맞는 사람으로 컨택할 수 있다는 점입니다. 또 내세울만 한 차별점이라면 사람들이 이용하기 편리하도록 제작된 UI/UX 입니다.
(실제로 IT업계에 종사하는 50명 내외의 다양한 직군의 사람들을 직접 설문조사 한 결과물을 참고하여 유저들의 니즈에 맞춰 기획하고 디자인하고 개발했습니다.)

⏳ 작업 기간 (2021. 08 ~ 2021. 11)

✨ 팀 소개

팀명	MIC (May I clone?)
프론트엔드 개발자	이현주
프론트엔드 개발자	이준희
기획 & UI/UX 디자이너	박진아

💻 Front 기술 스택

역할	스택명
프레임워크
CSS-in-JS
상태관리
기본 언어
포맷팅
패키지 매니저
토큰 관리
서버
버전 컨트롤

💻 Backend 기술 스택

역할	스택명
프레임워크
서버
토큰 관리
데이터 베이스
CI/CD
API 관리
버전 컨트롤

🧑🏻‍💻 역할분담

작업자	작업 내용
이준희	- 로그인 및 소셜로그인(NAVER, KAKAO) 관리 - 홈/ 함께해요/ 알림/ 검색 페이지에 대한 반응형 웹 페이지 구현 - 재사용 가능한 모달 컴포넌트 구현 - 함께해요 페이지 게시판 CRUD 작업 - 댓글 페이지 관련 CRUD 작업 - 검색 페이지 구현 - 메인 페이지 기능 구현 - 알림 페이지 구현 - 상태 관리 및 전반적인 흐름 제어 - 코드 리뷰 - 백엔드 API 개발 및 연동
이현주	- 아이디어 기획 및 팀빌딩 구성 - 디자이너와 함께 플로우 차트 기획 - 전 페이지 UI/UX 레이아웃 마크업 작업 - 회원가입 폼 조건에 따라 유효성 검사 - 회원가입 절차 (유저의 정보 입력폼 작업) - 회원가입을 통해 POST시킨 마이페이지 정보 GET 으로 불러오기 - 마이페이지 수정 - 상태 관리 및 흐름 제어 - 재사용 가능한 컴포넌트 구현

작업자

작업 내용

이준희

- 로그인 및 소셜로그인(NAVER, KAKAO) 관리
- 홈/ 함께해요/ 알림/ 검색 페이지에 대한 반응형 웹 페이지 구현
- 재사용 가능한 모달 컴포넌트 구현
- 함께해요 페이지 게시판 CRUD 작업
- 댓글 페이지 관련 CRUD 작업
- 검색 페이지 구현
- 메인 페이지 기능 구현
- 알림 페이지 구현
- 상태 관리 및 전반적인 흐름 제어
- 코드 리뷰
- 백엔드 API 개발 및 연동

이현주

- 아이디어 기획 및 팀빌딩 구성
- 디자이너와 함께 플로우 차트 기획
- 전 페이지 UI/UX 레이아웃 마크업 작업
- 회원가입 폼 조건에 따라 유효성 검사
- 회원가입 절차 (유저의 정보 입력폼 작업)
- 회원가입을 통해 POST시킨 마이페이지 정보 GET 으로 불러오기
- 마이페이지 수정
- 상태 관리 및 흐름 제어
- 재사용 가능한 컴포넌트 구현

🌟 `웰시코딩` 주요 기능 소개

`로그인`

로그인 기능은 총 3가지의 경우를 지원합니다

이메일로 로그인
카카오로 로그인
네이버로 로그인

`회원 가입`

가입한 정보를 바탕으로 자신을 소개할 수 있는 정보를 입력합니다.

현재 자신의 상태 (학생/취준생/현업 개발자)
간단한 자기소개
자신을 나타낼 수 있는 포트폴리오
경력 정보

등 을 기입할 수 있습니다

`함께해요`

함께해요 페이지는 사용자가 게시글 작성시에 생성한 해시태그 등을 바탕으로 랜덤으로 게시글을 가져올 수 있는 구조입니다.

자신의 정보를 바탕으로 글을 작성할 수 있으며, 자신의 글에 대한 키워드를 해시태그로 추가하여 글에 대한 정보를 한눈에 볼 수 있습니다.

검색 기능을 통해 모임 '이름/ 소개 / 태그' 를 바탕으로 한 게시글을 불러올 수 있습니다.

로컬 스토리지에 저장된 정보를 바탕으로 최근 검색어를 유지시켜줍니다.

`홈`

홈 페이지는 나의 활동을 한눈에 볼 수 있습니다.

내가 만든 모임
내가 가입한 모임,
내가 가입 신청한 모임
좋아요 한 모임

을 세분화하여 관리할 수 있습니다.

또한 알림 기능을 통해 나와 관련된 알림을 받아 옵니다.

내 게시글에 달린 댓글에 대한 알림
내 게시물에 가입 신청한 사람에 대한 알림
내가 가입신청한 모임의 가입 여부에 대한 알림

을 알림 페이지에서 확인할 수 있습니다.

`마이페이지`

회원 가입 시에 작성했던 정보를 수정할 수 있는 페이지입니다.

추가적으로 자신의 정보뿐만 아니라 다른 사람의 정보를 확인할 수 있습니다.

주요 기능 보기(.gif)

🔸 회원가입 `현주`

이름, 이메일, 비밀번호, 비밀번호 확인 까지 유효성 검사를 철저히 마친 후 회원가입이 성공적으로 완료되면 마이페이지에 소개 될 프로필을 입력합니다.

🔸 함께해요 페이지 `준희`

랜덤 포스트 불러오기

게시글 작성하기

게시글 수정하기

함께해요 가입 현황 보기

🔸 게시글 댓글 관련 기능 보기 `준희`

댓글 쓰기 / 수정하기 / 삭제하기 / 답글 쓰기

🔸 메인(홈) 페이지 `준희`

홈 메인 / 알림 기능

내가 작성한 게시글에 모임 링크 추가하기

🔸 검색 페이지 `준희`

검색 기능 구현 (최근 검색어 저장 포함)

🔸 마이페이지 `현주`

회원가입 절차에서 입력된 프로필 내용물들을 마이페이지에서 확인해 볼 수 있습니다 ! 🙆🏻‍♀️ 추후에 수정 작업도 가능합니다.

피그마 디자인 보기

느낀점

부족한점

1. QA의 부재

아직 경험해 보지 못한 부분이라 조심스럽게 적지만, 자바스크립트에서도 'Jest'와 같은 테스팅 라이브러리가 존재한다고 알 수 있다. 당장 우리가 사이드 프로젝트로 만드는 서비스의 규모가 아닌, 실제로 수십 수백만명이 사용하는 서비스가 될 경우 내가 로컬에서 브랜치를 따서 $ yarn build 만으로 이상 없음을 확인하고 배포 환경에 머지하지는 않을 것이다.

지금까지는 경험하지 못한 부분이고 현업에 들어가기 전에 하기에는 아직 내가 부족한 부분을 메우기 위해 우선순위에서는 밀려있는 상황이다. 로컬에서 문제가 없던 부분들이 배포환경에서 머지됐을 때 갑작스럽게 모듈을 못찾는 등의 문제로 인해 메인 브랜치에 급히 hotfix 커밋을 날린 경험이 있다. 해당 부분을 현업에서 실무로 배워 다음 사이드 프로젝트 진행 시에는 불필요한 커밋과 에러를 줄이는 방향으로 가고 싶다

2. Next를 사용하며 생긴 문제

Next 프레임워크를 통해 초기 HTML 파일에 대한 서버 사이드 렌더링, SEO 등 을 적용했지만, pre-render를 위한 getServerSideProps 등의 초기 함수를 설정하지 못했다. 또한 서버 사이드 렌더링을 바탕으로 로직이 제어가 되면서 웹 API의 기능 등을 사용하기 위해 useEffect 내부에 방어 코드를 많이 적게 되었다.

useEffect(() => {
if (typeof window !== 'undefined') {
...
}
}, [])

대부분의 페이지는 다이나믹 라우팅을 바탕으로 로컬 스토리지에 저장된 토큰을 바탕으로 HTTP 요청을 보내는 방향으로 구성했기 때문에 해당 로직이 반드시 필요하였고, 대부분의 페이지 및 하위 컴포넌트에는 해당 방어 코드가 들어간 것 같다. '다들 이렇게 짜나?' 라고 까지는 생각해봤지만 이걸 어떻게 리팩토링할 지에 대해서는 생각하지 않았던 것 같다. 다른 상대적으로 더 뛰어난, 더 잘 아는 개발자분들의 코드를 많이 접해서 분석하고 스스로 리팩토링 하고 싶은 부분이다.

3. 코드리뷰의 부재

1,2 를 종합한 내용이다. 내 스스로는 나쁘지 않은 코드라고 생각할 수 있지만, 평가를 받지 않는다면 계속 우물 안 개구리로 살 수밖에 없다. 비슷한 실력을 가진 동료 개발자와 작업을 했기 때문에 내 코드에 대해서 제대로 의견을 주거나 조언을 받은 경험이 없었던 것 같다. 지금까지의 배움의 의지를 바탕으로 코드 리뷰가 더해진다면 지금보다 훨씬 더 성장할 수 있을 것이라 생각한다.

junh0328/wellseecoding-front