수강생 프로젝트

수강생 프로젝트

KH정보교육원에서 진행된 프로젝트를 팀 단위로 보실 수 있습니다.

JoyCodeMe

프로젝트 발표날짜 : 2024. 11. 25

KH IEI PROJECT
 
Jocomi

(디지털컨버전스)공공데이터 융합 자바개발자 양성과정A23(3) 1회차

팀장/팀원 엄**(팀장) : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, git 충돌 관리 - React, Spring-boot 개발 환경 구축 - 메인 페이지: 전체 UI 및 기능 구현 - 로고 JS 애니메이션 구현 - 페이지 사용 설명 영상 편집 및 적용 - 이메일 전송 API 구현 - footer, header 작성 및 구현, footer 페이징 처리 - 홈페이지 메인 기능 구현(웹제작) - 웹 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 UI 코딩 및 화면 출력, 다운로드 및 저장 기능 구현 - 기능 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 Java를 사용한 Spring Framework 백엔드 기능 구현 파일 작성 기능 구현 - DB 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 Oracle DB 를 사용한 DB 쿼리문 작성 기능 구현 - 회원 등급별 사용 권한 적용 및 기능 구현 - 웹 제작 사용기록 페이지 : 웹 제작 사용 시 기록 저장 및 기능 구현, 화면 출력 - 일반 로그인 기능 , 네이버 로그인 API 기능 구현 - 회사 소개 페이지: typed 라이브러리를 이용한 텍스트 출력 기능 구현 - 웹 제작 설명 페이지 : UI 및 기능 전체 구현 - 기술 소개 페이지: UI 구현 - 페이지 URL 로그인 인터셉터 React 전체적용 - 가이드 페이지: UI 공동구현 - React Hook 상태 관리
기** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, 기능 명세서 작성 - 메인 페이지 : 채팅 API 기능, SVG 기능 개선, 풀페이지 기능 참여 네이버 지도 API 기능 참여, 모든 페이지 반응형 추가, 메뉴바 반응형 추가 - 회원 페이지: 로그인 회원가입 기능, - 기술 소개 페이지: 기술 소개 페이지 작성, - 문의사항 페이지: 자주 묻는 질문 기능 구현 - 가이드 페이지: 결제 API 적용, 기능 구현 - 관리자 페이지: UI 구현, 대쉬보드 , 서버상태 체크 , 차트, 회원 분포도 기능 구현 - 마이페이지: UI 및 기능 구현, 프로필 수정, 비밀번호 변경, UI 및 기능 구현 , 등급 기능 구현 - 협업 툴(GitHub) 관리 및 유지보수 - icon 모듈 추가 및 구현 - CORS 통신 기능 추가 및 외부 접속 IP 차단 기능 구현
양** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, ERD 테이블 설계 - 관리자 페이지: UI 구현, 게시글 관리, 신고 게시물 관리 기능 구현 - 메인페이지: 4번째 페이지 UI 구현 - 고객 지원 페이지: 공지사항, 자유게시판, 프로젝트게시판, 문의사항 UI 구현 및 기능 구현 - summernote 라이브러리 기능 구현 - 게시물 상세 페이지, 게시물 목록 페이지 UI 및 기능 구현 - 문의사항 , 프로젝트 게시판 공개 및 비공개 처리 - 댓글 및 답글 기능 구현, 추천/신고/조회수 기능 구현 - 게시글 작성/수정/삭제 기능 구현
이** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드 - 메인 페이지: 풀페이지 스크롤 라이브러리 적용 및 기능 구현 - 회원 페이지 : 로그인/회원가입 UI 구현 및 ID중복 체크, 아이디 찾기, 비밀번호 재설정 , 관리자 및 사용자 비밀번호 암호화, 제약조건, 소셜로그인(네이버 로그인 API 기능 참여, 구글 로그인 API) , 전화번호 유효성(하이픈) 기능 구현 - 이메일 인증 API 기능 구현 - 회사 소개 페이지: UI및 기능 구현, Naver Maps API 구현 - 결제 내역 페이지: 결제 내역 기능 구현 - 가이드 페이지: UI구현 - 관리자 페이지: 고객 관리 페이지 기능 구현 - 마이페이지: 소셜 로그인인 경우 비밀번호 변경 삭제 기능 구현, 비밀번호 변경 시 제약조건, 암호화 기능 구현 - env 파일 분리 및 키값 적용 - 결제 수단 페이지: UI및 수정/삭제/비활성 기능 구현 - 고객 관리 페이지 : 초기 UI 구현 - 웹 제작 페이지: UI 구현
개요 기획 의도
국가적으로 지원범위가 넓어지고 전세계적으로 관심이 쏠리는 Open AI 와 Web 개발을 접목시켜 시간을 단축시키고 편리한 개발환경을 제공하여 보다 빠른 Web Project 제작과 정확한 작업을 수행 할 수 있도록 지원

프로젝트 개요
본 프로젝트는 OpenAI API와 웹 개발 기술을 융합하여 사용자가 보다 편리하고 효율적으로 웹 프로젝트를 제작할 수 있도록 지원하는 시스템입니다.
국가적 및 글로벌 차원에서 관심이 증가하고 있는 AI 기술을 활용하여 개발자들에게 시간 단축, 정확한 작업 수행, 개발 환경 개선을 목표
본 프로젝트는 React와 Spring Boot를 기반으로 설계, AI API, Oracle DB, 그리고 다양한 웹 개발 기술을 통합하여 회원 등급별 권한 관리, 데이터 저장 및 분석, 사용자 친화적 UI/UX 등 현대적이고 기능적인 웹 플랫폼을 제공
이를 통해 다양한 사용자(일반 사용자, 관리자)가 편리하게 웹 제작, 데이터 관리, 고객 지원 등을 수행할 수 있는 맞춤형 웹 서비스를 제공하는 것이 목표
구현기능 메인 페이지
- 로고 JS 애니메이션 적용.
- 풀페이지 스크롤 라이브러리 적용 및 기능 구현.
- 채팅 API 기능 추가.
- SVG 기능 개선.
- 페이지 사용 설명 영상 편집 및 적용.
- 모든 페이지 반응형 적용.

회사 소개 페이지
- 회사 위치(지도) 및 팀원 소개 기능 구현

웹 제작 페이지
- Web, Funtion, DB 별 AI API를 사용한 제작 기능 구현

결제내역 페이지
- 결제단계, 결제일 등 결제 정보 내용 기능 구현

고객지원 페이지
- 공지사항 게시판, 프로젝트 게시판, 자유게시판, 문의사항 게시판 기능 구현
- 조회수 및 게시글 신고/수정/삭제/댓글/답글 기능 구현

가이드 페이지
- 결제 수단 및 결제 단계 / 적용 기능 구현

관리자 페이지
- 대쉬보드, 구독 회원 관리, 고객 관리, 채팅 관리, 게시물 관리, 신고 관리 기능 구현

로그인 페이지
- 회원가입/소셜로그인 기능 구현

마이페이지
- 사용기록, 프로필 수정, 비밀번호 변경 기능 구현
설계의 주안점 사용자 중심의 UI/UX 설계

- 애니메이션 적용: 로고 JS 애니메이션, 스크롤 효과 등을 활용하여 시각적 흥미 유발.
- 명확한 정보 구조: 웹 제작, 고객 지원, 결제 내역 등의 기능을 카테고리별로 체계화.

효율적인 AI 기술 활용

- AI API를 사용하여 사용자 요청에 따른 자동 웹 페이지 제작, DB 작성, 기능 구현 지원.
- 개발자 및 사용자 간 업무 효율성을 극대화하는 기능 제공.

회원 및 권한 관리 시스템

- 회원 등급별 기능 제어: 등급별로 사용 가능한 기능을 제한하여 시스템 안전성 확보.
- 소셜 로그인 및 인증: Naver, Google API와 이메일 인증 기능을 통한 보안 강화.

데이터 처리 및 저장 안정성

- Oracle DB 및 Spring Framework를 활용하여 데이터 관리 안정성 및 성능 최적화.
- AI API를 활용한 데이터 저장 및 처리 기능 구현.

관리자 편의 기능

- 대시보드, 구독 회원 관리, 고객 관리, 게시물 신고 관리 등의 효율적인 관리 도구 제공.
- 실시간 데이터 처리 및 시각화: 차트와 서버 상태 확인 기능 구현.

협업 및 유지보수 용이성

- GitHub 기반의 협업 환경 구축 및 코드 관리.
- CORS 통신 및 외부 IP 차단: 외부 접근 제어를 통한 보안 강화.
- 환경 변수 관리(env 파일)로 유지보수 효율성 향상.

현대적 기술 스택 활용

- 최신 웹 기술인 React, Spring Boot, JSON, Oracle DB 등을 사용하여 확장성과 유지보수성을 확보.
- 다양한 라이브러리 및 API 활용으로 기능 구현의 편의성 강화.
사용기술 및
개발환경
Development Environment

- STS, VS Code, SQL Developer

Frameworks & Language

- Java, HTML/CSS, JavaScript (JS), Spring Framework, MyBatis, Maven

Libraries

- React, Oracle Database, Tomcat, JDBC, JSON, GSON, Lombok

Tools

- Git, Figma, Canva
이전글담가락
다음글Ex-site
KH정보교육원
  • 고용노동부 선정
  • 5년 인증 우수훈련기관 선정
  • 대한민국 브랜드 어워즈 대상
  • IT교육부문 4년 연속 대상 수상
  • 고용노동부
  • 장관 표창

빠른 상담

KH임직원은 수강생 한 분 한 분의 성공적인 취업을 위해 최선을 다하겠습니다.

No.1 국내 최대의 취업 실적을 보유한 KH정보교육원에 오신 것을 환영 합니다.
KH의 전 과정은 NCS(국가교육표준화)기준을 준수하며 100% 무료, 전액 국비지원을 받으실 수 있습니다.

교육희망 과정

희망과정 선택


세부 교육과정

전화 아이콘
  • 051-637-2157
  • 전국대표문의전화(연중무휴)

교육희망 지점지점은 필수로 선택해주세요

신청자 정보

- -

기입 내용이 사실과 다를 시 상담 서비스가 원활하지 않을 수 있습니다.

051
637
2157

대표문의
(연중무휴)

개강일정

개강일정

국비대상자 간편조회

국비대상자
간편조회

온라인 상담

온라인 상담

오시는길

오시는길

카톡 상담

카톡 상담

KH정보교육원
전국대표 문의전화
(연중무휴)

051-637-2157

주말·공휴일에도 상담 및 접수 가능합니다.

  • 2023 당산지원

    5년 인증 우수
    훈련기관 선정

  • 2022 강남지원

    5년 인증 우수
    훈련기관 선정

  • 2022 종로지원

    5년 인증 우수
    훈련기관 선정

  • 2020 강남지원

    훈련 이수자 평가
    A등급 획득

  • 2020 종로지원

    훈련 이수자 평가
    A등급 획득

  • 2019 당산지원

    훈련 이수자 평가
    A등급 획득

  • 2019 IT교육부문

    브랜드 대상
    4년 연속 수상

  • 2018 당산지원

    4차 산업 선도
    훈련기관 선정

KH정보교육원 | 사업자등록번호 : 487-86-00763 | 사업자등록번호 : 851-87-00622 | 서울 강남 제2014-01호 | 대표자 : 양진선 | 책임자 : 양진선 |  개인정보관리책임자 : 양진선

강남지원 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F
강남지원 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F
강남지원 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F
종로점 : 서울특별시 중구 남대문로 120 그레이츠 청계(구 대일빌딩) 2F, 3F
당산점 : 서울특별시 영등포구 선유동2로 57 이레빌딩(구관) 19F, 20F
논현점 : 서울특별시 강남구 논현로 132길 9 마루빌딩 1F, 2F, 3F
부산점 : 부산 부산진구 중앙대로 627 삼비빌딩 2F, 12F