✨ 프로젝트 소개
인스타그램을 클론코딩한 개인 프로젝트 "HYESTAGRAM"!
내 이름의 뒷글자인 "혜"를 따서 HYESTAGRAM이라 지었다.
깃허브 링크 : https://github.com/yellowbutter0327/eunhye-stagram
🛠 기술 스택
HTML,CSS
React
SCSS
JSON
FIREBASE
📌 주요 기능
회원가입
- firebase를 사용하여 회원가입 기능 구현
- 유효성 검사
- 이미 가입되어 있는 이메일일경우 이미 가입되어 있는 회원 정보임을 alert해줍니다.
로그인
- animation을 사용해서 4초마다 다른 사진을 보여주는 기능
- firebase를 사용하여 로그인 기능 구현
- 유효성 검사 및 그에 따라 로그인 버튼 색상 변경
- 로그인시 로그인 되었다는 알림과 함께 유저의 uid를 세션스토리지에 저장
로그인을 하면 uid가 sessionstorage에 저장이 되고, 로그아웃을 하면
sessionstorage에서 삭제된다.
메인 페이지
- 검색어를 입력시 해당 검색어를 포함한 유저 리스트를 보여주는 기능
- 인스타그램 스토리 확인(클릭)시 style 변경
- 다크모드
mock data를 사용해 인스타그램 피드 기능 구현
- 피드 댓글 및 좋아요 기능
- 추천 계정 팔로우 및 언팔로우 기능
- 로그아웃시 세션스토리지에서 제거
기억에 남는 코드
- 개인프로젝트인만큼 나 혼자 로그인,회원가입 기능을 위해 firebase를 처음 사용해보았다. 처음에는 sessionsStorage에 email,pw를 저장하는 방식으로 코드를 짰는데, firebase의 고유 아이디인 uid를 사용해서 보안성을 높일 수 있다는 것을 알게 되었다.
email,pw로 작성한 코드
uid로 변경한 코드
잘한점
firebase를 사용하려고 도전한 것!
백엔드가 없어서 로그인, 회원가입을 어떻게 해야하나 고민하다가 firebase를 사용하게 되었는데 나 자신에게 칭찬한다. :)
처음에는 변수에 email과 pw를 지정해두고 일치하면 로그인이 되는 것으로 했는데 찝찝해서 firebase uid 방식으로 구현했더니 훨씬 만족스럽다.
가상 data 활용!
mock data를 하나씩 만든 것도 있지만 생각보다 무료 JSON data가 많다는 것을 알고 피드이미지와 유저이미지에 사용해보았는데 훨씬 편했다.
props,state에 대한 이해
하위 컴포넌트들이 상위 컴포넌트에서 전달받은 props를 사용하여 기능을 수행하고, 화면에 렌더링하는 방식을 이해할 수 있었다.
Feed 컴포넌트에서 각각의 피드 항목에 대한 정보를 받아서 렌더링하고 내부에서 사용하기 위해 props로 전달했다. map 함수로 객체 분해를 사용하여 각 항목의 프로퍼티를 변수로 할당하고, 이를 Feed 컴포넌트에 props로 전달했다.
props의 전달이 성공적으로 되어 화면이 잘 렌더링 되었을 때 정말 뿌듯했다!
개선하고 싶은 점
현재는 회원가입에서 닉네임을 받아오지 않아, 로그인을 해도 닉네임이 "hyehye"로 고정되어 있는데 다음에는 유저 닉네임과 사진까지 받아오는 연습을 하고 싶다.
스토리도 현재는 누르면 색깔이 바뀌는 데 스토리를 눌렀을 때 모달을 띄워서 실제 스토리 기능처럼 구현해보고 싶다.
📌 마지막으로
부트캠프가 끝나고 0부터 다시하자는 마음으로 강의듣기, 혜스타그램, my-color project, velog , 코딩테스트 공부까지 한다고 프로젝트 기간이 길어지긴 했지만 그래도 뚝심있게 완성한 나에게 칭찬한다!
무료 이미지, json 파일을 사용해보았는데 저작권 걱정도 없고 굉장히 편리해서 project할때 이용해볼 생각이다.
firebase롤 사용해 구현하였지만 나중에는 백엔드 공부까지 해서 모든 기능을 구현해보고 싶다. 👩💻
