Codeora

코더라는 간단하지만 자주 사용하는 코드들을 저장하기 위해 만들어진 사이트입니다.

배포 링크: https://codeora.web.app/

사용 스택

• React
• TypeScript
• Styled-Components
• Firebase
  • Authentication : 로그인, 회원 가입 등 사용자 정보 저장에 사용
  • Firestore Database : 사용자가 작성한 코드 저장에 사용
  • Hosting : 웹 앱 배포에 사용
• Recoil, Recoil-Persist : 로그인한 사용자 정보 등 클라이언트 상태 관리에 사용
• React-Query : 사용자가 작성한 코드 글 조회 등 서버 상태 관리에 사용
• React-Syntax-Highlighter : 코드 작성 시 하이라이팅을 주기 위해 사용
• React-Fontawesome : 폰트어썸 아이콘을 리액트에서 불러오기 위하여 사용
• StoryBook : 컴포넌트 테스트를 위해 사용
• Adobe Express : 페이지 로고 및 파비콘 제작에 사용
• Pixabay : 랜딩 페이지 배경 이미지 출처

기능

배운 점

문제 해결

추가할 기능

• 코드 즐겨찾기 기능 및 즐겨찾기한 코드만 필터링하여 보여주는 기능 추가하기
• 코드 작성, 수정 중 다른 페이지로 이동 시 beforeunload 이벤트처럼 confirm 창 띄우기
• 메인 페이지에서 맨 위/맨 아래로 가는 버튼 추가하기
• 사용자 닉네임 변경하는 기능 추가하기
• 사용자 정보에 프로필 사진 추가하기