안녕하세요, DN팀의 발표를 시작하겠습니다. 발표 순서는 서비스 소개, 기능 시연, 사용 기술 스택 설명, 팀원 소개,FAQ 순으로 진행하겠습니다서비스소개> (개발자의 문제 해결 능력을 증명할 수 있는 가장 간단한 방법은 기록을 남기는 것입니다.) 디버그노트는 나의 문제 해결 과정을 에러 로그로 남기고 다른 유저들과 공유할 수 있는 서비스입니다. 여기서 말하는 에러 로그란, 나의 문제 해결 과정을 기록한 게시물입니다. 디버그노트에서는 개발자에게 친숙한 마크다운 에디터로 에러 로그를 남길 수 있습니다. 또한 다른 유저들의 에러 로그 중 유용하다고 생각되는 것들을 북마크할 수 있으며, 에러 로그에 댓글을 달며 다른 유저와 소통할 수 있습니다.시연> 그럼 시연 화면을 보면서 디버그노트의 서비스를 소개하겠습니다. 시연 전 아래의 배포링크를 통해 디버그노트에 접속하시면 기능 이해에 좀 더 도움이 되실 것 같습니다.

디버그노트로 들어가면 보이는 첫 랜딩페이지입니다. 랜딩페이지에서는 비회원이더라도 간단한 서비스 설명과 함께,다른 유저들이 작성한 에러 로그들을 최신순으로 조회해 볼 수 있습니다. 또한 제목과 내용을 기준으로 에러 로그를 검색이 가능합니다. 더 많은 에러 로그들은 하단의 페이지 번호를 눌러서 탐색할 수 있습니다.

각 에러 로그들을 클릭하면 에러 로그의 상세 내용과 댓글을 볼 수 있습니다. 에러 로그를 작성하고 댓글을 달기 위해서는 회원가입이 필요합니다. 시연 화면과 같이 모달 하단의 회원가입 링크를 누른 뒤, 나타나는 폼에 이메일, 비밀번호, 이름, 닉네임, 직업을 입력하고 가입을 진행합니다.

추후 회원정보를 변경하거나 탈퇴할 경우, 마이페이지의 회원정보 메뉴에서 해당 기능을 이용할 수 있습니다.가입이 성공적으로 진행되면 상단 네비게이션 바에 있는 글쓰기를 눌러 에러 로그를 남길 수 있습니다. 오른쪽 영역에서는 작성중인 글의 모습을 미리 볼 수 있습니다. 작성완료 버튼을 누르면 작성한 에러 로그를 바로 확인할 수 있으며, 오른쪽 상단의 수정 또는 삭제 메뉴를 통해 수정 및 삭제가 가능합니다. 하단의 댓글 영역에서는 댓글을 남겨 다른 유저와 소통할 수도 있으며, 댓글 수정도 할 수 있습니다.

자주 참조하고 싶거나 마음에 드는 에러 로그가 있다면, 오른쪽 상단의 북마크하기를 눌러 북마크 추가도 할 수 있습니다.

내가 작성했던 에러 로그, 내가 북마크한 에러 로그를 모아 보기 위해서는 마이페이지에 접속해야 합니다. 왼쪽 탭 메뉴를 클릭하면 내가 작성한 에러 로그, 북마크한 에러 로그를 모아서 볼 수 있습니다.--------------------------------여기까지 3분 예상.사용 기술 스택 설명> 다음으로 사용한 기술 스택에 대해 설명드리겠습니다. 프론트엔드에서는 컴포넌트 기반의 구현을 위한 리액트, CSS를 구조적으로 작성하고 관리하기 위한 스타일드 컴포넌트를 사용하였으며 백엔드에서는 이벤트 기반 비동기 런타임인 node.js로 서버를 구축하였습니다. 데이터베이스 관리를 위한 MYSQL, 객체지향적인 코드로 데이터베이스 쿼리를 편리하게 작성하기 위해 sequelize를 사용하였습니다. 배포 과정에서는 아마존 S3, EC2를 사용하였습니다.팀원 소개> 다음으로 저희 프로젝트 팀원을 소개하겠습니다. 팀원은 팀장 유지훈, 팀원 박재현, 정태영, 김수현으로 구성되어있습니다. 김수현, 정태영 팀원은 프론트엔드를, 유지훈, 박재현 팀원은 백엔드로 역할을 분담하여 프로젝트를 진행하였습니다. 각 팀원의 역할은 깃헙 위키페이지에서 더 자세히 보실 수 있습니다.