SNS 개발후기(with React)
서비스 소개
사진으로 일상을 공유하는 SNS를 만들어보았다.
발랄함을 강조하고 싶어서 보라색 그라데이션을 테마로 잡았고, 서비스 이름도 보라색(purple)과 이용하게 될 유저들(s)을 의미하고 싶어서 purples로 하게 되었다.
팀원 소개
👦🏻jj-pa: 백엔드 개발, 배포, 약간의 프론트 개발을 맡았다.
👩🏻jellybrown(나): UI/UX와 프론트 개발을 맡았다.
프로젝트 소개
React 스터디를 하며 시작된 프로젝트로, 2021/01.01 ~ 2021.06.12 약 5달 정도의 기간이 걸렸다.
대표적으로 쓰인 기술 스택은 다음과 같다.
Front-end: React, Next + styled-component
Back-end: Nodejs, AWS S3
협업툴: Figma, Notion
기능 소개
이 SNS는 PC와 모바일 반응형으로 제작됐다. 모바일 버전으로만 소개할 예정이라, 혹시 PC버전이 궁금하다면 직접 방문해주시면 좋을 것 같다.
1. 회원가입
회원가입시 각 항목별로 적절하지 않은 경우, 하단에 에러 메세지가 나온다.
2. 로그인
로그인 시에도 각 항목이 적절한지 확인하고, 하단에 에러 메세지가 나온다.
3. 메인페이지
메인페이지는 카드 형태의 게시글들이 놓여있다.
게시글의 내용 부분을 누르거나, 더보기(…)를 누르면 모달창에서 상세 페이지로 이동할 수 있다.
4. 댓글
메인페이지에서 간단하게 말풍선 아이콘을 눌러서 댓글을 볼 수 있고, 댓글 입력도 할 수 있다. 댓글 전체 내용은 상세페이지에서 볼 수 있다.
5. 글쓰기 기능
하단에 있는 연필 아이콘을 누르면 글을 쓸 수 있고, 미리보기를 통해 사진을 미리 볼 수 있다.
6. 팔로우/팔로우 취소
게시글 글쓴이(유저 사진 or 아이디)를 누르면 팔로우/언팔로우를 할 수 있다. 이 기능은 뒤에 나오는 [7.게시글 필터링]과 연관이 있다.
7. 게시글 필터링
필터링 OFF: 기본적으로 모든 게시글이다.
필터링 ON: 모든 게시글 / 내가 팔로우한 사람들의 글 /나를 팔로우한 사람들의 글/ 내 글 이렇게 볼 수 있다.
8. 프로필 페이지
프로필 페이지에서는 사진과 이름을 바꿀 수 있다. 확인버튼을 누르면 1초뒤에 메인페이지로 이동된다.
9. 친구 검색
친구를 검색하고, 팔로우 혹은 팔로우 취소를 할 수 있다.
10. 게시글 검색
게시글 검색후 사진을 누르면 상세페이지로 이동한다.
개발 과정
프로젝트 기획(컨셉, 기능 논의)
어떤 컨셉을 잡고 만들지 같이 고민하다가, 우리는 특색없는 서비스가 많다고 느꼇고 발랄함을 밀고 가기로 했다.
처음인 만큼 기본 기능이 있는 SNS를 만들기로 했다.
- 포스팅
- 팔로우, 언팔로우
- 좋아요
- 글 필터링
이렇게 구현할 기능들을 논의했다.
디자인 작업
내가 UI/UX 부분을 담당했다. 이쁘게 만들고 싶었고 UX적인 고민도 필요하다고 생각해서, Figma로 생각해보며 디자인을 했다.
Front, Back 개발
각자 맡은 부분을 작업하기 시작했다. 어려운 부분은 같이 공부하며 코드를 적용해 보았고, 추가하고 싶은 기능이 있을 때는 건의해보고 구현했다.
1차 완성, 배포
어느정도 완성이 되었고, 미구현된 기능들이 있긴 했지만 처음부터 완벽할 순 없기에 배포했다.
셀프 피드백
사용하면서 알게된 몇가지 에러들과 아쉬운 점이 있었다.
- 모바일에서만 날짜가 NaN으로 나오는 문제
- 상세페이지에서 로그아웃시, 에러 뜨는 문제
- 댓글 UI(카드&상세) 부자연스러운 문제
- 아쉬운 프로필 페이지 디자인
네가지 문제점들을 수정하고, 약간의 리팩토링을 했다.
2차 완성, 배포
더 보완하고 싶었지만 여기서 끝내기로 했다. 욕심은 있었지만 여기서 마무리해야 더 멋진 프로젝트를 시작할 수 있다고 생각했다.
협업 방식
Figma, Notion
Figma를 이용해서 프로젝트 기능과 디자인을 공유하고, 후반부에는 Notion을 이용해서 오류사항을 공유했다.
Github
Github을 이용해서 master 브랜치에 바로 push하는 방식으로 협업했다.
코드 소개
코드에 대해서는 어떤 부분을 소개해야할지 모르겠다. 혹시 코드가 궁금하거나, 참고하고 싶다면 여기로(Github)👈 오면 코드를 볼 수 있다.
어려웠던 점
1. 상태관리 코드 복잡성(Redux)
거의 완성될 때까지 Redux와 Redux-saga를 썼는데 계속 보다보니 굳이 이렇게 써야하나 하는 의문이 생겼다. 불필요한 코드가 너무 많다고 생각했다.
나중에 Redux-toolkit을 보게 됐는데 예전에 비해 굉장히 유용해졌다고 들었다. 살펴보니 훨씬 더 간단하게 쓸 수 있어보였고, 너무 바꾸고 싶었다.
약간의 고생을 하며 바꾸고 보니 9개 있던 파일이 5개로 줄고 가독성도 훨씬 좋아졌다.
(하지만 Typescript 프로젝트에서 Redux를 쓴다면 그때 선택은 모르겠다.)
2. 아직도 어려운 파일 구조
나는 컴포넌트 안에서 작업하다가 복잡해지기 시작하면 다시 다른 컴포넌트로 뺐다.
하지만 지금와서 생각해보니 너무 잘게 쪼갠게 아닌가 싶기도 하다. (나는 잘게 쪼개는게 좋은데 내가 한 정도가 보편적으로 괜찮게 보는 정도인지 모르겠다.)
3. 협업
나 혼자 작업하는게 아니라서 계속 물어보고, 부탁하고, 부탁하고의 연속이었다. 후반부에는 에러가 계속 터졌는데 하나하나 부탁하는게 감당이 안됐다. 그래서 에러나 개선점들을 Notion에 정리했고, 한번씩 날잡아서 한번에 많은 것들을 수정해달라고 부탁했다.
개발 후 느낀점
🌸 완성!
우리가 만든 SNS를 널리 알리자는 의미보다는 “프로젝트의 완성”에 초점을 맞췄다. 둘 다 React를 이용한 개발은 처음이었고, 높고 특별한 퀄리티를 기대하긴 어려웠다. 그래서 기능적으로 부족한 부분도 있긴 하지만 우리끼리, 지인정도 까지는 한번씩 심심할 때 들어올 수 있는 서비스는 맞지 않을까 생각한다.
🌸 앞으로는
이 프로젝트는 스터디로 시작된 것이다. 처음에는 별 생각 없었지만 잘못하면 흐지부지 완성되지 못하고 끝날 것 같다는 생각이 들었다. 그래서 신경써서 마무리는 지었지만 생각보다 시간이 너무 많이걸렸다.
후에 다른 개발자들의 팁들을 듣고 책들을 읽어보니, 공통적으로 스스로 기한을 설정하고 예측하는 버릇을 들여야 마무리도 할 수 있고, 좋은 개발자가 될 수 있다고 말했다. 조금 늦게 알았지만 스스로 데드라인을 설정 하려고 한다.
