🙏🏻질문 사절🙏🏻

아..!! 이거 물어봐도 되나..??
강의 시간에 모르는게 있을 때, 강사님이나 옆사람한테 물어보는게 눈치 보이셨나요??
이런 문제를 해결하기 위해 질문 사절이 만들어지게 되었습니당
이제 눈치 보지 말고 익명 게시판에 질문해주세요. 모두가 친절하게 답변 주실 거요😆
만약 답변을 아무도 안달아 주신다면 저희가 꼭 해드리겠습니다 (아는선에서🙏)

게시글 작성	댓글 작성

팀원 소개 😎

Developoer	Developoer	Developer	Developer
김승연	박현민	백재원	윤동열

개발 언어 및 활용 기술 💻

Tech

       

API

Deploy

Tool

   

GIT⚡

Git Flow

Git Commit Convetion

   ✨ feat : 새로운 기능에 대한 커밋
   🐛 fix : 버그 수정에 대한 커밋
   👷 build : 빌드 관련 파일 수정에 대한 커밋
   🔨 chore : 그 외 자잘한 수정에 대한 커밋
   📝 docs : 문서 수정에 대한 커밋
   💄 style : ui 스타일에 관한 커밋
   🎨 refactor : 코드 리팩토링에 대한 커밋
   ✅ test : 테스트 코드 수정에 대한 커밋
   🎉 init : 프로젝트 시작에 대한 커밋
   🔖 release: 릴리즈에 대한 커밋
   ➕ plus : add dependency
   ➖ minus : remove dependency

Kanban Board

사용 API💽

카카오 로그인

https://developers.kakao.com/docs/latest/ko/kakaologin/common

FireStore

https://firebase.google.com/docs/firestore?hl=ko

ToastUI

https://ui.toast.com/tui-editor

서비스 화면 🖥

⚒ 주요 기능 ⚒

1. 카카오 로그인
2. Toast 에디터를 활용한 마크다운 게시글 작성
3. 익명 질문 생성과 삭제, 댓글 작성
   
   

로그인 화면 🔐

Step 1️⃣

• Kakao API를 활용해 카카오 로그인 구현
  
  

Step 2️⃣

• 카카오톡 아이디와 비밀번호 입력하여 로그인
  
  

Step 3️⃣

• 로그인이 완료되면 location.href 이용해 메인 화면으로 전환
  
  

🙏🏻질문 사절🙏🏻 메인 화면

• Toast Ui API를 활용한 마크다운 형식 게시글 작성 기능
• Firebase API를 활용한 사용자 게시글, 댓글 데이터의 DB 연동 및 처리
• 댓글 게시 기능
• 우측 상단의 로그아웃 클릭시 카카오 로그인 초기 화면으로 이동 (location.href 이용)
  
  

어려웠던 점 🤢

• 댓글 작성 기능에서 태그의 값이 동적으로 할당되도록 구현하는 부분이 어려웠고, for문을 이용해 태그의 id 값을 동적으로 할당하는 방식으로 해결하였습니다. getElementsByClassName 사용시 태그가 배열이 아닌 객체로 받아와지는 문제가 있었고 querySelectorAll을 사용해서 해결하였습니다.
• 삭제 버튼 구현시 비동기 처리로 인하여 렌더링 시점 차이를 파악하기 어려웠습니다. 이를 asyn/await를 이용해 비동기 처리로 해결하였습니다.

아쉬운 점 🤔

• FireStore 무료 버전의 한계로 속도(성능) 저하가 발생했던 점이 아쉬웠습니다.
• 이틀이라는 짧은 기간동안 기획 - 디자인 - 개발 -테스트가 이루어져야 한다는 점에서 고도화 하지 못했던 점, 마감 직전에 수정되는 사항들에 대해서 git flow 전략을 지키지 못했던 점이 아쉬웠습니다.

향후 추가하고 싶은 기능 📝

• 당일 Todo리스트와 날짜별로 게시글과 댓글을 확인할 수 있는 기능을 구현할 예정입니다.
• 신규 게시글과 댓글이 추가되면 사용자에게 알림을 띄워주는 기능을 구현할 예정입니다.

배운점 😃

• Firebase API를 활용해 가이드라인을 읽고 CRUD 기능을 구현해볼 수 있었습니다.
• 카카오 로그인, Toast UI, Firebase를 사용하면서 api 활용법을 익힐 수 있었습니다.
• Git flow 전략을 사용하여 협업함으로써 형상관리에 대해 이해하고 적용해볼 수 있었습니다.
• async/await를 적용해보며 비동기처리에 대해 이해할 수 있었습니다.

체험하기 🙌🏻

https://eastheat10.github.io/dont-ask-to-me/html/login.html