맨들맨들 돌덩이

티스토리 생일 : 2020.11.18. 모든 문의 : highcw@naver.com

개발/WEB

최종 구현 화면 도메인 화면, 화살표를 드래그하여 로그인 페이지로 진입할 수 있다. 그 후 로그인 화면, 아이디 찾기 및 비밀번호 찾기, 회원가입을 진행할 수 있다. 해당 웹 사이트의 메인 화면. 하단의 5개의 메뉴 바를 이용하여 웹의 기능들을 이용할 수 있다. SNS 기능의 화면이다. 인기 게시물과 최신 게시물을 구분하여 리스트로 출력할 수 있도록 하였다. 게시글을 클릭하여 넘어가면, 사진을 드래그 및 방향 화살표를 클릭하여 여러 사진을 확인할 수 있다. 또한, 댓글과 좋아요 기능 등을 확인할 수 있다. 대표 중고거래 플렛폼, D 사의 어플 디자인을 본 따 디자인 설계를 진행하였다. + 버튼을 클릭하여 글을 작성하거나 할 수 있으며, 원하는 게시물에 들어가 자세한 내용을 확인할 수 있다. 게시글에 들어..

2022. 4. 24.

개발/WEB

Web_ project 진행_8 : Spring Boot + Sring chat, 스프링 채팅 시스템 구현(1) :: MS (tistory.com) Web_ project 진행_8 : Spring Boot + Sring chat, 스프링 채팅 시스템 구현(1) 스프링으로 채팅 시스템을 구현하기 위해서, Lombok, MongoDB, Flux 을 사용합니다. 왜 필요할까요? 세 개의 요소들 모두 리엑티브 환경에서 사용하기 유용한 도구들 입니다. Flux는 리액티브 프로그래 kaey.tistory.com 에서 이어지는 글입니다. 채팅 서버(서버B)는 jdk 11버전을, STS4, mongoDB, Lombok, Flux가 사용되었습니다. application.yml spring: data: mongodb: h..

2022. 4. 24.

개발/WEB

스프링으로 채팅 시스템을 구현하기 위해서, Lombok, MongoDB, Flux 을 사용합니다. 왜 필요할까요? 세 개의 요소들 모두 리엑티브 환경에서 사용하기 유용한 도구들 입니다. Flux는 리액티브 프로그래밍의 방법 중 하나이고, 리액티브 프로그램은 주변의 환경과 끊임없이 상호작용하면서 프로그램이 실질적으로 주도하는 것이 아니라 환경이 변화했을 때 이벤트를 받아 동작하는 과정입니다. lombok 역시 getter, setter 의 과정을 축약시켜주는 등의 도움을 줍니다. 즉, 채팅은 실시간으로 소통이 되어야하므로, 리액티브 기반의 프로그래밍이 필요하다 볼 수 있습니다. 그리고 이를 실시간으로 저장되어야 하는데, 비동기적 통신에 유리한 mongoDB를 채팅의 데이터베이스로 사용합니다. 들어가기 앞서..

2022. 4. 24.

개발/WEB

*해당 프로젝트 기술은 메아리 프로젝트에서 제가 담당했었던 기능 분야 쪽만 기술 합니다!! 이외엔 팀원들과의 합작입니다. 시나리오 구성 사용자가 커머스 화면으로 진입하여, 채팅 버튼을 눌렀을 때, 로그인된 사용자의 아이디와 해당 게시글의 번호를 채팅방 번호로 설정하여 채팅 기록을 관리할 수 있도록 설정한다. 왜? 게시글의 번호를 채팅방 번호로 설정하였을까? >> 해당 프로젝트에서 아직 SNS 에서의 DM 시스템을 구현하지 않았기 때문에 채팅방 번호가 겹쳐질 에러 사항을 염두할 필요가 없었기 때문. 해당 JSP에선 스프링 채팅 시스템을 구현하기 위해서, 필요힌 유저의 이름을 담을 객체 username와 채팅의 시스템 방을 구현하는 객체 roomNum에 원하는 정보를 담고 옮길 필요가 있다. 따라서 앞서 커..

2021. 11. 17.

개발/WEB

*해당 프로젝트 기술은 메아리 프로젝트에서 제가 담당했었던 기능 분야 쪽만 기술 합니다!! 이외엔 팀원들과의 합작입니다. 앞서 서술한 회원가입 시스템에서 이어지는 내용이다. 회원가입 부분 확인은 다음 링크에서. Web_ project 진행_2 : Spring 회원가입 구현 :: 절실성실 (tistory.com) Web_ project 진행_2 : Spring 회원가입 구현 *해당 프로젝트 기술은 메아리 프로젝트에서 제가 담당했었던 기능 분야 쪽만 기술 합니다!! 이외엔 팀원들과의 합작입니다. 사전에 계획된 회원가입에 사용될 맴버 테이블을 참고하여 VO파일을 kaey.tistory.com 사용자에게 로그인 요청이 들어왔을 때, 처리해줄 tiles와 controller를 작성한다. *모든 controller..

2021. 11. 5.

개발/WEB

*해당 프로젝트 기술은 메아리 프로젝트에서 제가 담당했었던 기능 분야 쪽만 기술 합니다!! 이외엔 팀원들과의 합작입니다. 게시글 삭제 역시 Param의 형식으로 ArticleNO을 받아오고 해당 값을 이용해서 DB의 있는 값들을 삭제한다. com.mySpring.myapp.sns.controller.removeArticle try { snsService.removeArticle(articleNO); File destDir = new File(ARTICLE_IMAGE_REPO+"/"+articleNO); FileUtils.deleteDirectory(destDir); message = ""; resEnt = new ResponseEntity(message, responseHeaders, HttpStatus..

2021. 11. 4.

개발/WEB

*해당 프로젝트 기술은 메아리 프로젝트에서 제가 담당했었던 기능 분야 쪽만 기술 합니다!! 이외엔 팀원들과의 합작입니다. 앞서, 게시글 리스트에서 가져온 articleNO 의 값을 @RequestParam 을 통해서 Controller에서 처리할 수 있도록 해준다. 그 후, 받아온 articleNO의 값을 통해서 그 값을 통해 원하는 게시글의 값을 호출하는 형식의 로직을 통한다. com.mySpring.myapp.sns.controller.SnsControllerImpl public ModelAndView viewArticle(@RequestParam("articleNO") int articleNO, HttpServletRequest request, HttpServletResponse response) ..

2021. 11. 4.