JSP_Community

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>
     

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