SlideShare a Scribd company logo
1 of 12
XOXO프로젝트
(2021.06 ~ ing)
장지혁
https://github.com/bcm159/xoxoproject
제작 동기 왜 xoxo홈페이지 인가?
- 로그인, 게시판, 장바구니 등과 같이 기본적인 기능을 사용하기에
적합하다 판단
- 과거에 배웠던, 새로 배운 내용을 프로젝트에 적용하기 적합한
주제라 판단
- 가장 큰 이유는 취업을 위한 준비 과정 이라 판단
- 다양한 기능을 사용하여 코딩을 함으로써 실력 증진 기대
Front-End MVC게시판
Board-list
Board-read
Board-write
Back-End MVC게시판
Controller
Mapper
기본 spring mvc 구조를 따라 코딩을 하였다.
게시글을 만들때, selectkey를 사용하여 group_idx 값에 대입을 하여
계층형 게시판을 만들 수 있습니다.
또한 게시판의 수정과 삭제는 글을 쓴 본인이 아닐 경우 버튼이 생기지
않게 코딩합니다.
Read.jsp
Front-End Pagination
Board-list
1
2
Back-End Pagination
Pagination(DTO)에서 pageNum 값을 받아온 후
Select 쿼리문을 사용하여 Rownum 값을 만들어 내림차순을 합니다.
그 후 board_num의 값을 내림차순 하여 정렬 후,
페이지에서 시작하는 게시글 중 5개식 출력하여 나타냅니다.
BoardMapper
BoardController
Back-End Pagination
Pagination(DTO) 에서 받아온 값들을
JSP 파일에서 조건문을 이용하여 쪽수 pagination을 구현하였습니다.
Pagination DTO
Board.jsp
BoardController
Front-End Comment CRUD
Read
Back-End Comment CRUD
MVC와 같은 방식으로 댓글을 구현하려다 다양한 공부를 하고 싶어
비동기 방법의 AJAX를 사용하여 코딩을 구현하였습니다.
댓글에도 수정과 삭제의 버튼은 본인의 댓글이 아니라면
나타나지 않도록 구현하였습니다.
Read.jsp
Read.jsp
Front-End Login
Login
join
Back-End Login
Spring security를 사용하여 회원 등록, 권한 부여를 하였습니다.
또한, BCryptPasswordEncoder를 사용하여 비밀번호를 암호화 시켜 외
부에 노출이 되더라도 확인하기 어렵게 만들었습니다.
usermapper
userserviceImpl controller
보완점 및 후기
짧은 시간 동안 시각화와 서버를 구현하다 보니 미흡한 점이 많다는 생
각이 듭니다.
특히 Spring Security 같은 경우 완벽하게 이해했다기 보다는 부분적으
로 이해를 하고 사용한 점이 굉장히 아쉬웠습니다.
좀 더 공부를 한 후, 게시판 권한을 부여하여 ‘공지사항’과 같은 설정을
할 수 있도록 만들고 싶습니다.
지난 4개월 동안 부족하였지만 개인 프로젝트를 진행하며 스스로 문제
를 해결하는 능력을 키우도록 많은 노력을 하였습니다.
앞으로도 주어진 일만 해결하는 것이 아니라 능동적으로 문제를 해결해
나아가는 개발자가 되도록 최선을 다하겠습니다.
지금까지 긴 글을 읽어 주셔서 감사합니다.

More Related Content

Similar to xoxo 상세포트폴리오

Similar to xoxo 상세포트폴리오 (20)

Backend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build toolsBackend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build tools
 
Unity Auto Build iOS
Unity Auto Build iOSUnity Auto Build iOS
Unity Auto Build iOS
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
 
CoreDot TechSeminar 2018 - Session1 Park Jihun
CoreDot TechSeminar 2018 - Session1 Park JihunCoreDot TechSeminar 2018 - Session1 Park Jihun
CoreDot TechSeminar 2018 - Session1 Park Jihun
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
 
Django - CRUD 기능 구현
Django - CRUD 기능 구현Django - CRUD 기능 구현
Django - CRUD 기능 구현
 
Team project (for frontend)
Team project (for frontend)Team project (for frontend)
Team project (for frontend)
 
Jinyweb
JinywebJinyweb
Jinyweb
 
교바사
교바사교바사
교바사
 
Subversion Branch
Subversion BranchSubversion Branch
Subversion Branch
 
Metaworks3 Framework workbook 2015
Metaworks3 Framework workbook 2015Metaworks3 Framework workbook 2015
Metaworks3 Framework workbook 2015
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
 
Project anarchy로 3d 게임 만들기 part_2_vforge피하기
Project anarchy로 3d 게임 만들기 part_2_vforge피하기Project anarchy로 3d 게임 만들기 part_2_vforge피하기
Project anarchy로 3d 게임 만들기 part_2_vforge피하기
 
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
 
Mongo jdbc
Mongo jdbcMongo jdbc
Mongo jdbc
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)
 
XE Open seminar 테마만들기
XE Open seminar 테마만들기XE Open seminar 테마만들기
XE Open seminar 테마만들기
 

Recently uploaded

왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
Kyubok Cho
 

Recently uploaded (6)

인천대학교 졸업작품 발표 피피티 - 축제 올인원(All-In-One)
인천대학교 졸업작품 발표 피피티 - 축제 올인원(All-In-One)인천대학교 졸업작품 발표 피피티 - 축제 올인원(All-In-One)
인천대학교 졸업작품 발표 피피티 - 축제 올인원(All-In-One)
 
현대 학교의 체육관 혁신 방향과 과제 그리고 사례들을 정리한 자료.pdf
현대 학교의 체육관 혁신 방향과 과제 그리고 사례들을 정리한 자료.pdf현대 학교의 체육관 혁신 방향과 과제 그리고 사례들을 정리한 자료.pdf
현대 학교의 체육관 혁신 방향과 과제 그리고 사례들을 정리한 자료.pdf
 
2024_INU_graduation_presentation_data.pptx
2024_INU_graduation_presentation_data.pptx2024_INU_graduation_presentation_data.pptx
2024_INU_graduation_presentation_data.pptx
 
D그룹 졸업작품 1번. 자연어 처리(NLP)를 이용한 인천대 챗봇
D그룹 졸업작품 1번. 자연어 처리(NLP)를 이용한  인천대 챗봇D그룹 졸업작품 1번. 자연어 처리(NLP)를 이용한  인천대 챗봇
D그룹 졸업작품 1번. 자연어 처리(NLP)를 이용한 인천대 챗봇
 
왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
왜 학교에서의 스마트기기 활용이 학생의 대인관계에 영향을 미치는가? 조규복
 
2024_Puzners_work_introduction_slide_content
2024_Puzners_work_introduction_slide_content2024_Puzners_work_introduction_slide_content
2024_Puzners_work_introduction_slide_content
 

xoxo 상세포트폴리오

  • 2. 제작 동기 왜 xoxo홈페이지 인가? - 로그인, 게시판, 장바구니 등과 같이 기본적인 기능을 사용하기에 적합하다 판단 - 과거에 배웠던, 새로 배운 내용을 프로젝트에 적용하기 적합한 주제라 판단 - 가장 큰 이유는 취업을 위한 준비 과정 이라 판단 - 다양한 기능을 사용하여 코딩을 함으로써 실력 증진 기대
  • 4. Back-End MVC게시판 Controller Mapper 기본 spring mvc 구조를 따라 코딩을 하였다. 게시글을 만들때, selectkey를 사용하여 group_idx 값에 대입을 하여 계층형 게시판을 만들 수 있습니다. 또한 게시판의 수정과 삭제는 글을 쓴 본인이 아닐 경우 버튼이 생기지 않게 코딩합니다. Read.jsp
  • 6. Back-End Pagination Pagination(DTO)에서 pageNum 값을 받아온 후 Select 쿼리문을 사용하여 Rownum 값을 만들어 내림차순을 합니다. 그 후 board_num의 값을 내림차순 하여 정렬 후, 페이지에서 시작하는 게시글 중 5개식 출력하여 나타냅니다. BoardMapper BoardController
  • 7. Back-End Pagination Pagination(DTO) 에서 받아온 값들을 JSP 파일에서 조건문을 이용하여 쪽수 pagination을 구현하였습니다. Pagination DTO Board.jsp BoardController
  • 9. Back-End Comment CRUD MVC와 같은 방식으로 댓글을 구현하려다 다양한 공부를 하고 싶어 비동기 방법의 AJAX를 사용하여 코딩을 구현하였습니다. 댓글에도 수정과 삭제의 버튼은 본인의 댓글이 아니라면 나타나지 않도록 구현하였습니다. Read.jsp Read.jsp
  • 11. Back-End Login Spring security를 사용하여 회원 등록, 권한 부여를 하였습니다. 또한, BCryptPasswordEncoder를 사용하여 비밀번호를 암호화 시켜 외 부에 노출이 되더라도 확인하기 어렵게 만들었습니다. usermapper userserviceImpl controller
  • 12. 보완점 및 후기 짧은 시간 동안 시각화와 서버를 구현하다 보니 미흡한 점이 많다는 생 각이 듭니다. 특히 Spring Security 같은 경우 완벽하게 이해했다기 보다는 부분적으 로 이해를 하고 사용한 점이 굉장히 아쉬웠습니다. 좀 더 공부를 한 후, 게시판 권한을 부여하여 ‘공지사항’과 같은 설정을 할 수 있도록 만들고 싶습니다. 지난 4개월 동안 부족하였지만 개인 프로젝트를 진행하며 스스로 문제 를 해결하는 능력을 키우도록 많은 노력을 하였습니다. 앞으로도 주어진 일만 해결하는 것이 아니라 능동적으로 문제를 해결해 나아가는 개발자가 되도록 최선을 다하겠습니다. 지금까지 긴 글을 읽어 주셔서 감사합니다.