🔗 1. 결과물 미리보기

👉🏻 https://githubgw.github.io/twitter-clone

🙂 2. 자기소개

안녕하세요! 풀스택 개발자가 되기 위해 열심히 공부중인 취준생입니다. :)
대학교때 웹 프로그래밍 수업을 듣고 웹 개발에 관심을 가지게 되면서 시작했습니다.
처음 HTML과 CSS를 배우면서 화면에 바로바로 나타나는 것이 너무 신기하고 재밌었던 기억이 나네요.그 후, 자바스크립트를 배우게 됐는데 어려워서 중간에 많이 헤매던 중, 우연히 유튜브에서 노마드코더를 알게 된 후 무료 바닐라JS 강의를 시작으로 유튜브 클론, 리액트를 거쳐서 트위터까지 듣게 됐고, 마침 좋은 컨테스트가 열려 참가하게 됐습니다.

✅ 3. 서비스소개

트위터 클론 컨테스트인 만큼 최대한 트위터가 가진 느낌과 기능들을 살려서 실제 SNS 서비스 같은 모습으로 만들어 보고 싶었습니다.

# 3-1. 인증

• 비로그인 사용자도 읽기 허용

로그인을 한 후에만 트윗을 읽고 쓸 수 있는 기존 방식이 불편하다고 생각했습니다.
간단한 트윗은 로그인을 하지 않고도 누구나 바로바로 읽고 확인할 수 있게 하고 싶었습니다.
그래서 파이어베이스의 기본 룰과 방식을 바꿔서 비로그인시에도 읽기가 가능하도록 변경하였습니다.
로그인을 하지 않아도 사이트에 들어와서 방문자는 간단한 글을 읽고 확인하고 구경할 수 있도록 하였습니다.

• 회원가입, 이메일 로그인, 소셜 로그인(구글, 깃허브)

사용자가 이메일 또는 기존에 가지고 있던 구글이나 깃허브 소셜 계정을 통해 회원가입을 하고 로그인을 할 수 있습니다.
회원가입을 할 때 추가적인 사용자 이름을 통해 초기 기본 닉네임을 설정할 수 있습니다.
회원 탈퇴 기능도 구현은 하였지만 마지막에 고민 끝에 제거하였습니다.

• 이메일 주소 및 비밀번호 변경

회원가입 후 현재 로그인한 사용자가 이메일 변경 및 비밀번호 변경 버튼을 눌러 새로운 이메일 주소와 비밀번호로 변경할 수 있도록 하였습니다.
이메일 변경과 비밀번호 변경 버튼은 파이어베이스의 Auth를 통해 현재 로그인한 사용자가 확인될 때만 버튼이 보여지도록 하였습니다.
새로운 이메일 주소를 변경할 때, 기존에 회원가입했던 이메일 주소를 통해 인증을 받아야만 변경할 수 있는 방법도 있습니다.

# 3-2. 유저

• 사용자 정보 확인

프로필 페이지에서 사용자가 가입한 이메일 주소와 계정 생성일, 마지막 로그인 날짜를 확인할 수 있도록 하였습니다.
또한 사용자가 가입한 이메일이 인증된 이메일인지도 확인할 수 있습니다.

• 사용자 이름 변경 및 프로필 사진 변경

프로필 페이지에서 사용자 이름과 프로필 사진을 변경하고 업로드할 수 있습니다.

• 사용자가 작성한 트윗 목록

프로필 페이지에서 사용자가 작성한 트윗 목록을 한 눈에 모아볼 수 있도록 하였습니다.
사용자는 자신이 작성한 트윗 정보와 작성한 트윗의 수를 확인할 수 있습니다.

• 기본 프로필 사진

구글이나 깃허브 소셜 계정을 통해 회원가입을 하지 않은 사용자에게는 기본 프로필 사진을 넣어 대체하도록 하였습니다.

# 3-3. 트윗

• 트윗 작성, 수정, 삭제

글, 이미지, 움짤 등을 넣어 트윗을 작성할 수 있도록 하였습니다.
사용자는 자신이 작성한 트윗을 클릭해서 수정하고 삭제할 수 있습니다.

• 이모지 추가

사용자가 이모지를 추가할 때 단축키를 사용하지 않고 아이콘을 클릭해서 원하는 이모지를 선택해 추가할 수 있도록 하였습니다.

• 좋아요(❤️) 기능

사용자는 자신이 작성한 글과 다른 사람이 작성한 글에 좋아요(❤️)를 누를 수 있습니다.
좋아요를 한번 누르면 하트가 채워지고 다시 누르면 좋아요가 취소되도록 하였습니다.

• 트윗 정보

트윗을 작성하게 되면 트윗을 작성한 사람의 프로필 사진과 닉네임, 이메일 주소, 작성일자를 불러와서 확인할 수 있습니다.

• 전체 트윗 수, 트위터 검색

중앙 상단에서 현재 작성된 전체 트윗 수를 확인할 수 있습니다.
전체 트윗 수는 트윗 추가, 삭제가 이루어지면 실시간으로 숫자가 변경됩니다.
검색창에 키워드를 입력해 트위터 검색 결과를 확인할 수 있습니다.

• + 다른 사용자가 작성한 트윗 확인

메인 페이지에서 다른 사용자의 프로필 이미지를 클릭하면 그 사용자가 작성한 모든 트윗을 한 눈에 볼 수 있도록 하였습니다.
또한 팔로우 추천란의 더보기를 클릭시 사이트내에서 트윗을 작성한 모든 사람들의 목록을 확인할 수 있습니다.

# 3-4. 기타

• 다크모드

상단의 🌞 와 🌙 이모티콘을 눌러서 라이트 모드와 다크 모드를 전환할 수 있습니다.
라이트 모드는 깔끔한 흰색과 연한 회색을 조합해서 만들었고, 다크 모드는 어두운 회색과 남색을 조합해서 만들었습니다.
버튼을 클릭했을 때 state값에 변화를 줘서 그 state값을 이용해서 라이트/다크모드를 전환할 수 있도록 하였습니다.
스타일 컴포넌트를 이용해서 props를 받아 조건에 맞게 배경색과 주변 색상에 자연스러운 변화를 주었습니다.

• 플래시 메세지

사용자가 로그인, 로그아웃, 회원가입, 트윗 작성, 수정, 삭제, 프로필 업데이트 등등의 동작을 할 때 오른쪽 상단에 작은 플래시 메세지를 띄워 상태 확인을 할 수 있도록 하였습니다.
플래시 메세지는 alert(알림)창과 다르게 클릭하지 않아도 일정 시간이 지나면 자동으로 사라집니다.

💎 4. 개발과정(어려웠던 점과 해결방법)

# 4-1. 좋아요(❤️)

요즘 거의 대부분의 SNS서비스를 보면 좋아요 기능이 있습니다. 그래서 좋아요 기능을 구현해보고 싶었습니다.
처음 좋아요 기능을 구현했을 때는 사용자가 좋아요를 눌렀을 때, 파이어베이스의 컬렉션 안에 도큐멘트에서 해당 트윗을 찾아서 좋아요 숫자에 +1을 해주는 방식으로 만들었습니다.
하지만 이 방식으로 만들다보니 사용자가 새로고침을 하게 되면 또 다시 좋아요를 누를 수 있는 문제가 있었습니다. 또 좋아요를 누르고 다시 좋아요 취소를 할 때도 문제가 있었습니다.
그래서 좋아요를 누르게 되면 좋아요를 누른 사용자 uid 또는 이메일을 해당 트윗의 배열에 추가를 해서, 그 배열 안에 있는 값들의 갯수를 통해 좋아요 갯수를 계산할 수 있도록 하였습니다.
또 이미 좋아요를 누른 사용자인지 확인하기 위해서 배열 안에서 해당 사용자의 uid 또는 이메일이 존재하는지 대조해서 존재하지 않는 사용자만 좋아요를 누르고, 취소할 수 있도록 하였습니다.

# 4-2. Cloud Firestore 룰 변경

강의에서는 처음 사이트에 들어왔을 때 회원가입, 로그인 페이지가 보여지고 로그인을 한 이후에만 비로소 사용자가 트윗을 읽고 쓸 수 있는 방식이었습니다.
하지만 처음 사이트에 들어왔을 때 비로그인 사용자도 회원가입, 로그인 페이지가 아닌 트위터 홈으로 들어와서 간단하게 트윗을 읽고 확인까지는 가능하도록 하고 싶었습니다.
그래서 완전히 새롭게 방식을 바꿨습니다. Firebase 콘솔에서 Cloud Firestore 룰을 변경해서 읽기는 항상 허용하고, 쓰기만 제한되도록 룰을 재 설정하였고, 기존에 짰던 코드 방식도 로그인 페이지가 아닌 홈 페이지가 나올 수 있도록새롭게 바꿨습니다.
트윗을 작성하려면 로그인이 필요하지만, 비로그인 사용자도 다른 사람들이 작성한 트윗을 읽고 확인까지는 가능하게 만들었습니다.

# 4-3. Storage 대역폭 초과, Firebase 요금제 변경

트위터 클론을 완성하고 여러 이미지들과 움짤을 넣다보니 무료로 제공된 Storage 대역폭을 초과하게 되었습니다.
대역폭이 초과가 되면 기존에 Storage에 올라가 있던 모든 이미지와 움짤 등이 깨지는 문제가 있었습니다.
그래서 Firebase 요금제 변경을 통해 일일 대역폭의 사용량에 제한을 풀어 더 많은 사용자가 자유롭게 글을 올리고 읽고 쓸 수 있도록 하였습니다.

# 4-4. 트위터 레이아웃 구현 (CSS)

정말 트위터 같은 트위터 클론를 만들기 위해 세심하게 디자인하였습니다.
트위터에서 사용하는 색상들과 디자인, 레이아웃 등을 참고해서 디자인하였습니다.
트위터 레이아웃이 특이하게 가운데 작성한 트윗은 스크롤 되지만, 양옆 사이드는 고정된 레이아웃을 사용하고, 중앙 배치가 되어 있는 구조이기 떄문에 이 레이아웃을 잡는데 조금 어려웠습니다.
단순히 position: fixed를 통해 최상단이나 하단 또는 한쪽으로만 고정하는 것이 아닌 가운데로 양 옆을 고정해야 해서 레이아웃 구조를 잡는데 조금 어려움이 있었습니다.

🔥 5. 앞으로의 계획

이번 트위터 클론 컨테스트를 하면서 파이어베이스 공식 문서를 읽다보니 파이어베이스로 구현해볼 수 있는 것들이 정말 많다는 것을 느꼈습니다.
더 추가하고 싶은 기능들도 많고, 만들어보고 싶은 기능들도 있어서 업데이트 예정인 리액트 네이티브 강의와 우버이츠 강의를 듣고, 타입스크립트와 리액트 네이티브(모바일)로 좀 더 깔끔하게 다시 한번 만들어 보고 싶네요.
끝으로 좋은 컨테스트 제공해주신 니꼬쌤, 린님께 감사드립니다. 덕분에 좋은 결과물도 얻고, 좋은 경험도 쌓았습니다.

긴 글 읽어주셔서 감사합니다. :)