Synology Clone 🌝
소개
- Clone website : Synology
- Project Period : 2021.01.11 ~ 2021.02.04
- Front-End : 조아람, 김찬영, 최용석
- Back-End : 이수한
- Demo Video
- Github
Skill Stack
Front-End
- HTML
- ES6
- JavaScript
- React(CRA)
- styled-component
Back-End
- Python
- Django
- CORS Header
- Bcrypt
- PyJWT
- MySQL
- AqueryTool
- 모델링구성
협업 Tool
- Git, Github
- Slack : 비대면 소통
- Notion : 팀 내 개발 자료, 규칙, 안건 등 기록, 일정관리 및 작업 현황 공유
팀원들과 구현한 기능 🔥
- 회원가입 & 로그인 Validation
- pagenation & menuTap filter
- load more & scrollTop Button
- 게시판 CRUD
- 댓글 생성 및 삭제
- 대댓글 생성 및 삭제
- 조회수 & 좋아요 기능
- 솔루션 기능 (네이버 지식인 채택기능과 유사)
- React-Quill Editor
내가 담당한 기능
- 게시판 CRUD
- 댓글 생성 및 삭제
- 대댓글 생성 및 삭제
- 조회수 & 좋아요 기능
- 솔루션 기능
- React-Quill Editor
1. 게시판 작성
1-1 비회원 , 회원 구분
- 당연한 설정이지만, 비회원일경우는 create a Post 부분을 사용하지 못하게했다.
- 이번 프로젝트의 핵심은 Detaill이다. 최대한 클론사이트와 유사하게 만들도록 노력했다.
1-2 게시판 작성하기
- Antd을 적용한 Form 형식이다. Form 관련한 기능들이 있어 편했지만 불친절한 설명이 다소 아쉬웠다.
- 처음 적용한 것이 또하나 있다면 WYSIWYG Editor이다. 처음에 CKEditor5 , draft.js를 사용했지만 plugin 방식에서 eject를 사용하는것이 필수적이었기때문에 조심스러울 수 밖에없었다.
그래서 선택한 것이 Quill Editor였다. 만족스러웠다.
WYSIWYG이란 ? 'what you see is what you get'을 줄여 부른 말이다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말한다.
2. 게시판 수정
2.1 게시판 삭제
- 게시판 수정 혹은 삭제 설정또한 본인이 작성한 사람만 보일 수 있도록 설정했다.
- 당연한 설정이지만, 이런 설정 로직은 생각해본 적이없었다. 생각보다 디테일한 부분이 많아서 처음에는 생각할게 많겠구나 생각했지만 차근차근 로직을 그려나가다보니 이해가 잘되었던 거같다.
3. 게시판 댓글 추가 & 삭제하기
3-1 비회원 & 회원 구분하기
- 게시판 댓글 생성 및 삭제부분도 게시판 생성,삭제부분 하고 로직이 비슷하여 수월했다.
- 댓글 역시 비회원일경우 작성하지 못하도록 설정하였다.
- 사용자의 편의를 위해 엔터키 적용하였다.
4. 대댓글 추가 & 삭제하기
- 댓글은 전에 해본적이 있던기능이었지만 대댓글은 이번에 처음적용해봤다. 대댓글에서 좀 헷갈리는 부분이 있었는데, 결국 대댓글에 사용하는 기능역시 댓글에 있는 기능이라 컴포넌트 재사용을 고려했다.
- 고려하고 나니, 대댓글 삭제 기능은 자동적으로 따라와서 좋았던 것같다.
- 클론사이트의 댓글입력창 부분이 큰편이라 개인적으로는 선호하지않았다. 그래서 사용자 편의상, 대댓글을 작성하면 드롭다운 형식으로 구현했다.
5. 좋아요
좋아요 기능 역시 좋아요 버튼을 클릭했을 떄, 백엔드로 post하여 업데이트 된 Data를 받아서 UI에 보여주었다. 이때, 좋아요버튼이 1개이상일때, (즉 누군가가 한번이라도 버튼을 눌렀다면) 버튼을 레드로 유지하도록 했다.
6. 솔루션 (채택기능)
- Synology 사이트에서 매력적인 부분중 하나가 바로 솔루션기능이었다. 어렸을 때부터, 네이버 지식인에서 활동을 많이했다. 보잘 것 없는 나의 지식을 누군가가 도움을 얻고 내공이라는 점수를 주면 등급이 올라갔다. 그래서 더더욱 열심히했었고, 가끔 돌이켜서 내가 어떤 답변을 달았는지 보는것도 소소한 재미였다. 그래서 꼭 구현해보고 싶었던 기능이다.
- 사실완벽하진 않다. 솔루션이 채택 되는 수만큼 등급이 높아져야하지만, 등급 로직은 팀원들 합의하에 포기해야했다. 프로젝트가 끝나고 난 후, 시간이 되는대로 한번 구현해보고싶다.
- Question 카테고리에서 내가 질문을 하면, 원하는 답변을 한 사람에게 solution을 준다.
- 그러면 solution이 채택되어 메인페이지 solution tap에 등록된다.
셀프 칭찬 👍
1. Notion으로 팀원관리
- 1,2차 프로젝트에서 아쉬웠던 부분들은 서로가 서로의 코딩을 이해하지 못한 체 끝나는 게 아쉬웠다. 레벨업의 제일좋은 방법은 코드공유라고 생각이 들었다.
- 그래서 Code Reviews란을 만들어 서로 공유하고싶은 코드를 작성했다.
- 프로젝트에서 참고할만한 동영상 및 자료들도 정리했다.
- 일정관리 및 스탠드 미팅도 관리하여 보다 체계적으로 프로젝트에 임하고싶었지만 이 부분은 코딩하느라 바빠서 잘 이루어지지 못해 아쉬웠다.
- 그래도 시도는 좋았다고 생각하고 팀원들도 만족해서 나름 만족한다.
2. 쉽게 포기하지않는 마인드
ㄱ
사실 이번 프로젝트에서 사용한 Antd, WYSIWYG EDITOR는 첫도입이었던 만큼 나를 제법 힘들게 했었다. 특히 Editor부분에서는 CKEditor4 , CKEditor4, draft등 여러가지 Editor들을 사용하려고 노력했지만 끝내 사용하지못했다. 사수님한테 조언받은 것 중에 하나가 바로 많은 라이브러리중에서도 내가 선택한 라이브러리를 고른 이유가 분명해야한다고 하셨다. 그래서 3개를 포기할 수밖에없었다. 그 이유는 eject를 실행해 webpack을 직접 건들어야하기때문이었다.
그래서 Quill Editor로 전환했다. Editor 부분에서 시간을 많이 소모해서 기간내에 완성이 될 수 있을까 걱정도 들었다. 그래서 주말도 쉬지않고 백엔드분한테 부탁하여 나와달라고 부탁드렸고 서로 통신을 주고받으면서 맞춰나갔다. 그런 부분에있어서 백엔드분한테도 감사하고, 포기하지 않고 묵묵히 한 나에게도 감사하다.
3. 의사소통에 소중함을 안다는 것
우리 팀원은 프론트 3명, 백엔드 1명으로 구성되어있다. 그렇기에 백엔드분이 처음시작부터 걱정을 많이하셨다. 혼자서 다 커버해줄 수 있을까? 게다가 막내라서 더욱 그랬던 거같다.
나는 작업을 진행해 나가면서도 백엔드 분이 걱정되어 계속 걱정하지말라고 할수있다며, 백엔드에서 잘안되는 부분이있으면 프론트에서 어떻게든 하겠다고 조금이나마 위로를 달랬던 거같다.
그리고 제일중요한부분이 있는데, 주말에 나와서 Api를 주고받을때, 서로 계속 Data를 맞춰가면서 성공했을 때, 그 순간이 너무 행복했었던 거 같다. 그래서 서로 하이파이브 ! 했다.
1,2차 프로젝트 진행할 때보다 의사소통을 더 잘했던 거 같아 만족했다.
아쉬운 점들 😓
1. Atomic Design을 고민하다.
프로젝트 도입하기 전에 차장님이 Atomic Design을 기반으로 구성하는 것도 고려해보시라고 하셨다. 우린 Atomic Design에대해 생소하여, 구글링을 계속해나갔고, 알면 알수록 어려웠다. 그래서 설계하는데만 일주일을 잡아먹었다. 현업에서도 설계부분에서 시간을 많이 소모한다고 하지만, 직접 피부에 닿으니 조바심이 났다. 시간이 지나도 별 소득이 없었다. 결국, 조금이나마 모듈화하여 적용하긴했지만 만족스럽진 않았다. 이러한 부분들은 현업에서 많이 배우고싶다.
2. 영업시간이 9시..
기업협업 첫주의 불금의 날. 우리팀원들은 서로 화이팅하자고 회식을 진행하였다. 메뉴는 물론 근본 삼겹살! 거기에 소주까지! 금상첨화였지만 한가지 우리의 앞길을 막고 있었던 것이있었다.
바로 코로나로인한 조기마감영업시간이었다. 그래서 우리는 평소보다 소주를 약 1.5배속으로 마셨던거같다. 마시면 또마시고 .. 결국 7시에 입성하여 2시간만에 소주 4병이상을 마셨다. 사실 어렸을때는 30~40대 남성들이 왜 뱃살이 저렇게 나올까 싶었는데 그이유를 조금씩 알게되었다. 뱃살이 더 나오기전에 얼른 자기관리를 해야겠다.
기억에 꼭 저장하고싶은 코드!
1. fetch를 버리고 axios를 적용해보다!
1-1 Enum.js에서 export 정의 (필요한 컴포넌트에 기본셋팅을 도와줌)
1-2 Fetch적용 했을 경우
1-3 Axios instance 적용
- 확연이 줄어든 코드의 양, 그리고 무엇보다 기본셋팅을 설정할 수 있어서 편리했다.
- fetch를 사용할 경우에는 fetch를 사용하는 컴포넌트 마다 초기부터 셋팅해야하는 번거로움이 있었다. axios.create 내장함수를 통해서 기본셋팅을 하고 추가 입력만 해주니 훨~씬 간결하고 편해졌다!
2. 대댓글 구현 컴포넌트 재사용
2-1 댓글을 작성한 후, 표현할 UI SingleComment
2-2 대댓글을 작성할 CommentReply
- 댓글작성자 Data를 mapping 하여 각각의 댓글과 대댓글 컴포넌트를 생성
- 게시판 첫 로딩 화면에서는 대댓글이 보이면 안되므로, commet.reply가 없는 댓글만 보이도록 설정함
- 댓글Data를 대댓글컴포넌트로 전달한다.
- 여기서, 댓글이 있으니 대댓글을 달수있으므로, 댓글을 기준으로 잡는다
- 대댓글을 작성한 reply가 댓글의 id와 같아야 댓글을 기준으로 대댓글을 작성할 수있게된다.
- 그렇게 되면 또 다시 댓글이라는 컴포넌트가 같은 기능을 하므로, 다시 SingleComment와 CommentReply 컴포넌트를 재사용해준다.
3. Solution
- nickName은 sessionStorage에서 가져온 유저 닉네임값이다. 현재 로그인한 유저닉네임과 게시판 작성한 유저가 같고, 그 주제가 Qusetion 일때만 솔루션이 보여진다.
- antd 에서 사용한 CheckableTag를 사용하면 checked를 불리언 값으로 지정해주면 알아서 켜지고 꺼진다.
- solution이 채택되어진다면 켜지도록 설정했다. (버튼 색상)
- 로그인유저 의외에 다른유저한테 솔루션이 생성되어야한다.
4. 좋아요 버튼유지하기
- 좋아요버튼의 작동은되었지만 페이지이동 후, 다시들어오면 좋아요버튼의 숫자는 그대로있지만 색깔은 블랙으로 변해있었다.
- 좋아요버튼이 1개이상일경우에는 계속 빨강색으로 유지가 되어야했다.
- 그래서 생각해낸게 likeData를 따로 받아온것을 활용하기로했다.
- 좋아요가 1개이상일 경우에는 빨강색으로 스타일을 적용했다.
Synology Clone 프로젝트 후기
더디지만 조금씩 성장하는 모습이 보여진다.
개발을 시작한지도 어느덧 4달이상이 지난거같다. 작년에 처음 시작했을 때, 모든 것이 어려웠고 낯설었다. 특히, 초기셋팅하는 부분은 항상 어려운 부분이다. 그래서 부트캠프를 시작하기전에 계속 스스로를 의심했다. 적지않은 금액이기에 내가 과연 잘할 수 있을까? 남들의 페이스를 따라가지 못하면 어떡할까. 이런저런 걱정과 의심을 했던거같다. 하지만 쉼없이 달려온 끝에 그런 걱정과 의심은 조금이나마 줄어들었다. 이제는 어떤 것을 더 공부하여 보완하고싶다. 더 잘하고싶다. 팀한테 좋은 팀원으로 남고싶다. 라는 생각이 들었다. 단순히 코딩을 하는것 보다, 의사소통이 원활하면서 자기일을 묵묵히 하고싶다. 인간은 완벽할 수없다. 사실 모든 동물이 그렇다. 그렇기에 점점 채워나가는 재미가 있는 것이 아닐까? 처음에는 작지 몰라도 점차 점차 조금씩 이루어가는 나를 보며 감사함을 느끼고 이런 나와 같이 일하는 동료들에게도 감사한 마음을 전한다.
공유하는 것을 좋아하고 공유 받는 것을 좋아하는 나이기에 항상 열심히 할 수밖에없는 거같다.
감사합니다. 에이블스토 차장님 및 CTO님 그리고 직원분들, 무엇보다 4주동안 함께 프로젝트에 임한 위코드 동료들에게 진심으로 감사함을 전합니다!
