JSP를 활용한 개발자 커뮤니티 - 네카라쿠배

프로젝트 소개

• 개발자 또는 개발에 관심을 갖는 사용자들을 위한 커뮤니티입니다.
• 커뮤니티의 기본적인 요소인 게시물의 기능을 다룹니다.
• 코딩 테스트(컴파일러) 기능도 추가했습니다.

팀원 구성

조담진	서정호	김민지
웹디자인, API	필수 기능 구현	DB 설계 및 구축
Sorae1118	jeongho77	minso00

🔨 Stacks

• Frontend

• Backend

• Tools & Environment

📀 Function

1. 로그인 / 로그아웃, 회원가입
2. 게시글과 게시글 내의 댓글 기능
3. 컴파일러 위젯 sphere-engine

📺 화면구성

1. 메인 화면

• 메인 페이지입니다. 헤더부분의 원하는 카테고리로 이동할 수 있습니다.
• 스크롤을 내리면 해당 카테고리의 게시글로 바로가기가 됩니다.
• 세션 정보에 따라 로그인, 로그아웃 UI가 달라집니다.
  
  
  

2. 로그인 화면

• 로그인 페이지입니다.
  
  
  

3. 회원가입 화면

• 회원가입 페이지입니다.
  
  
  

4. 게시글 화면

• 여러 게시글을 확인할 수 있는 페이지입니다.
• 가장 최근 게시물부터 보이도록 DB에서 호출합니다.
  
  
  

5. 상세글 화면

• 게시글 상세 페이지입니다.
• 각 페이지는 생성일, 조회수, 좋아요수가 나타납니다.
  
  
  

6. 컴파일러 화면

• 사용자가 원하는 언어를 테스트할 수 있는 페이지입니다.
• 스크립트로 sphere-engine API를 호출합니다. 아래 코드를 참고하세요.

<script>SEC_HTTPS = true;
    SEC_BASE = "compilers.widgets.sphere-engine.com";
    (function (d, s, id) {
        SEC = window.SEC || (window.SEC = []);
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
        js.src = (SEC_HTTPS ? "https" : "http") + "://" + SEC_BASE + "/static/sdk/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "sphere-engine-compilers-jssdk"));
</script>

• 원하는 언어를 선택하여 실행할 수 있습니다.