IT공식문서를 한국어로 함께 번역하는 공간과 국내 개발자들과 함께
공식문서와 기술에 대해 이야기할 수 있는 커뮤니티를 제공하여
영어 장벽으로 인한 정보 격차를 해소합니다.
DocshunD는 혼자 읽기 힘든 방대한 공식 문서를 개발자들이 힘을 합쳐 번역하고, 실시간으로 질문과 답변을 주고받으며 함께 성장하는 공간입니다.
높은 언어 장벽과
파편화된 번역 정보
집단지성을 통한
신뢰할 수 있는 공동 번역
문서 전체가 아닌 문단 단위로 쪼개어 번역을 제안할 수 있어 부담 없이 참여 가능합니다.
가장 많은 추천을 받은 번역이 대표 번역으로 노출되어, 집단지성에 의한 품질 관리가 이루어집니다.
문서별 채팅방에서 문서를 보며 실시간으로 질의응답을 나눕니다.
STOMP.js
번역 중 중요한 내용을 바로 기록할 수 있는 개인 메모장을 제공합니다.
React MD Editor문서 ID를 WebSocket Topic으로 구독하는 Pub/Sub 구조를 설계하여 문서 독자가 서로 간섭 없이 독립적인 대화를 나눌 수 있는 실시간 채팅 서버를 구축했습니다.
Axios Interceptor를 통해 모든 요청에 JWT 토큰을 자동 주입하고, React Router Guard를 구현하여 권한이 없는 사용자의 접근을 확실히 차단해 안정적인 보안환경을 만들었습니다.
프로젝트 전용 색상, 폰트를 정의하고, 이를 기반으로 모바일, 태블릿, 데스크톱 사이즈에 맞게 반응형 레이아웃을 일관성 있게 구현했습니다.
정식 QA 3회, 외부 QA 진행 및 팀 내 전담 인원 배정을 통해 기능, 로딩, 예외 상황을 집중 검증했습니다. 특히 현업 QA 전문가의 검수를 통해 실제 서비스 수준의 완성도를 확보했다는 평가를 받았습니다.
문서 ID별로 고유한 Topic을 구독하며, 페이지 이탈 시 자동으로 구독을 해제하여 안정성을 확보했습니다.
STOMP 기반의 구독 시스템으로 여러 방의 대화를 동시에 관리하고, 채널을 분리하여 독자 간 간섭 없는 소통 환경을 구축했습니다.
내가 메시지를 전송하거나 이미 하단에 있을 때만 하단으로 자동 스크롤이 되도록 구현했습니다.
과거 메시지를 읽는 중에는 신규 메시지가 와도 스크롤이 고정되어 흐름을 방해하지 않도록 구현했습니다.
// Axios Interceptor: 자동 토큰 주입 및 401 에러 통합 처리
const requestInterceptor = (config) => {
const token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
};
const responseInterceptor = (error) => {
if (error.response?.status === 401) {
// 전역 AuthStore를 통한 로그아웃 처리
useAuthStore.getState().logout();
window.location.href = "/";
}
return Promise.reject(error);
};
공통 인터셉터로 모든 API 요청의 보안 로직을 모듈화하여 관리 효율을 높였습니다.
모든 요청에 JWT를 자동 포함시켜, 반복되는 인증 코드를 효과적으로 줄였습니다.
Mobile View
Desktop View
Tailwind CSS의 유틸리티 클래스를 활용하여 모바일, 태블릿, 데스크톱 등 모든 디바이스 환경에 최적화된 반응형 레이아웃을 구현했습니다.