1. Search
- #동료에게물어보기힘든것 #내가놓친것
- 고민하지 말고 Knock에 물어보자!
- 가중치, 중요도 계산으로 연관성이 높은 게시글이 검색 돼요!
2. Security
- #사내문서 #보안이생명
- 각 회사별 Admin이 있고, Admin을 통해서만 Member를 등록할 수 있어요.
- 읽기/수정하기 권한을 직급별로 부여할 수 있어요!
3. Community
- 카테고리를 나누어, 용도별로 관리해요!
- #오늘의점심 #직장내소모임 #수평적문화 #12기공채친목
- 소통이 활발한 사내분위기를 만들어요!
4. D.I.Y
- #내가원하는대로 #내맘대로 #다꾸아닌문꾸
- 즐겨찾기 기능이 있어, 내가 원하는 글을 원하는 폴더에 넣어 꾸밀 수 있어요!
- 즐겨찾기 폴더는 나만 볼 수 있으니, 안심하고 넣을 수 있어요!
| 이름 | Github | |
|---|---|---|
| FE 팀장 | 박정현 | https://github.com/swing-park |
| FE 팀원 | 송진환 | https://github.com/jinhwansong |
-
- 검색 성능 : 형태소 분석을 통한 정확하고 빠른 검색 결과 제공
- 편집상태 알림 : 게시글의 편집상태를 보여주고, 편집이 완료되면 알림 제공
- 개인별 문서 관리 : 자신이 작성한 문서를 관리하고, 필요한 사내 문서들은 폴더로 관리
- 게시글 공유 커뮤니티 : 댓글을 통해 소통하고, 편집 로그를 확인하여 다른 직원들의 편집 내역을 조회 가능
- 로그 기능 : 게시글이 편집되어 왔던 기록을 과거와 현재로 모두 열람 가능
- 다크모드 기능 : 라이트모드와 다크모드 기능
-
- 검색 및 유형별 조회 기능
- 게시물 상세페이지 기능
- 마이페이지, 즐겨찾기 기능
- 관리자 페이지 기능 (회사, 사원, 카테고리 등 관리)
- 댓글, 로그 기능
- 다크모드 기능
-
- 2023.03.10 ~ 2023.04.21
| 문서 검색 및 유형별 조회 기능 | 편집상태 조회 기능 |
|---|---|
 |
 |
| - 제목, 내용, 키워드 조회를 통한 우수한 검색 성능 - 카테고리별 검색 - 검색 필터(연관순, 댓글순, 조회순, 최신순) 제공 |
- 게시글 편집 상태 조회 - 편집 완료된 경우 수정을 원하는 사용자에게 알림 |
| 관리자 페이지 기능 | 댓글 및 로그 기능 |
|---|---|
 |
 |
| - 직원의 직급 및 권한 관리 - 사내 게시글의 카테고리 등록 및 관리 |
- 댓글로 커뮤니티 기능 - 로그를 통해 이전과 이후 게시글 비교 가능 |
Toast UI Editor / AWS SDK
-Toast UI Editor는 마크다운 에디터를 구현한 오픈 소스 라이브러리로, 사용자가 텍스트를 마크다운 형식으로 작성하면 해당 마크다운을 HTML로 변환하여 보여주는 기능을 제공합니다. 또한, 다양한 플러그인을 제공하여 사용자가 편리하게 에디터를 사용할 수 있습니다.
이 중에서 이미지 첨부 기능을 사용하기 위해서는 클라이언트에서 이미지를 서버에 업로드하고 링크를 받아와야 합니다. AWS SDK 라이브러리를 이용하면 Amazon Web Services의 다양한 서비스들을 JavaScript에서 사용할 수 있습니다. 이 중에서 S3 서비스는 클라우드 스토리지 서비스로, 이용자는 이를 이용하여 파일을 저장하고, 검색하고, 다운로드할 수 있습니다.
따라서, AWS SDK 라이브러리를 이용하여 Toast UI Editor에서 이미지를 업로드하는 커스텀 훅을 제작하여, 사용자가 편리하게 이미지 첨부 기능을 사용할 수 있게하였습니.
이러한 방법을 사용하면, 신입 사원들이 찾기 어려운 내용도 검색하여 찾을 수 있고, 선임들은 이를 통해 빠르고 쉽게 정보를 공유할 수 있습니다. 또한, Toast UI Editor와 AWS SDK 라이브러리를 이용하여 간편하게 이미지를 업로드하고 첨부하는 기능을 구현할 수 있기 때문에, 이를 활용하여 다양한 프로젝트에서 활용할 수 있습니다.
SSE
-SSE(Server-Sent Events)는 웹 애플리케이션에서 서버로부터 실시간으로 데이터를 받아와 화면에 표시할 수 있는 기술입니다. 이를 사용하면 WebSocket과 같은 양방향 통신을 필요로 하지 않으므로 서버 측에서도 부담이 적습니다.
하지만 SSE API call을 할 때, request에 인증 헤더를 추가해야 하는 경우가 있습니다. 이때 문제가 발생할 수 있는데, 일부 브라우저에서는 인증 헤더가 적용되지 않아 API call이 실패하는 경우가 있습니다.
이러한 문제를 해결하기 위해 Event-source-polyfill 라이브러리를 사용하였습니다. 이 라이브러리는 eventSource 객체에 xhr header를 주입하는 방식으로 인증 헤더를 추가할 수 있도록 지원해줍니다.
이를 사용하여 SSE API call을 수행하면 인증 헤더가 제대로 적용되어 API call이 정상적으로 수행하였 SSE API call에 대한 문제를 해결하였습니다.
editing status
- 게시글 수정 후 editing status가 업데이트되지 않는 이슈는 사용자 경험에 영향을 미치는 큰 문제였습니다. 따라서 이 문제를 해결하기 위해 적극적으로 접근했습니다.
우선적으로, 문제가 발생한 시나리오를 이해하고 문제가 발생하는 부분을 파악했습니다. 게시글 수정시점에 페이지를 이동하는 과정에서, editing status가 업데이트되지 않았습니다.
이 문제를 해결하기 위해, history 라이브러리를 이용하여 페이지 이동 이벤트를 감지하고, 해당 시점에 editing status를 변경하는 로직을 추가했습니다. 이를 통해 게시글 수정 및 삭제 시점에 페이지 이동 이벤트를 감지하고, 적절하게 editing status가 업데이트되도록 하였습니다.
또한, 이 문제를 해결하는 과정에서 우리 팀은 사용자 경험을 고려한 다양한 시나리오를 고려하고, 이에 따른 다양한 테스트를 수행했습니다. 이를 통해 문제를 해결하고, 사용자에게 더 나은 경험을 제공할 수 있었습니다.
이번 이슈를 통해 우리 팀은 문제 해결에 대한 전략과 문제 발생 시 빠르게 대처하는 능력을 향상시켰습니다. 이를 통해 우리 서비스의 안정성과 사용자 경험을 높일 수 있었습니다.