티스토리

minlog
검색하기

블로그 홈

minlog

jimin-log.tistory.com/m

개발 공부 ✍

구독자
3
방명록 방문하기

주요 글 목록

  • [ Project ]Spring Boot - war 프로젝트 배포 및 실행 Spring Boot - war 프로젝트 배포 및 실행 추가로 개인 포트폴리오 소개 사이트를 제작하면서 스프링부트에서 jsp 파일을 사용했는데, 배포 시 jsp 파일의 위치를 찾지 못하는 문제가 발생했다. 인텔리제이 idea. 에서 작동시에는 문제가 없었기 때문에 당황했지만, 검색해보니 jsp 파일은 war 로 배포해야한다는 내용이 있었다. 1. war 파일 생성 우측 Gradle 에서 bootWar 를 클릭하면 파일이 생성된다. 처음 프로젝트 생성시 jar로 작업했으면 bootWar 가 없을 수 도 있는데 그렇다면 build.gradle에서 추가작업을 해주면된다. 1) plugins 추가 id 'war' plugins { id 'java' id 'war' id 'org.springframework.bo.. 공감수 0 댓글수 0 2023. 10. 20.
  • [ Project ] 네이버 클라우드 플랫폼(NCP) 가입 및 프로젝트 배포 이번에 공부하면서 학원에서 네이버클라우드 플랫폼을 활용해 서버에 진행했던 프로젝트를 올리게되었다. 네이버 클라우드에서 제공해주는 해택도 좋아서 서버에 처음 올리는 사람이라면 활용하기 좋을 것 같다. 우선 최초가입시 일정 금액의 쿠폰을 제공하고 있고, 카드 등록 시, classic의 Micro 서버를 1년 동안 무료로 대여해주고 있다. 1. 네이버 클라우드 플랫폼 가입 및 대여 1-1. classic 서버 대여 ubuntu-18.0.4가 기본이라고 한다. 그리고 서버 설정시 설정타입을 standard로 했었는데, 무료로 일년동안 사용하려면, micro 를 선택해야한다. standard는 과금이 될 수 있다. 나는 가입한지가 좀 됐어서 크래닛이 없기때문에 micro 로 선택해주었다. (설치할때 좀더 오래걸리.. 공감수 0 댓글수 1 2023. 10. 18.
  • [ Project · ArtMarket ] X-Frame-Options 트러블 슈팅 채팅 기능 구현을 완료하고 프론트 담당자 분이 프론트와 연결하는 작업을 진행하다가 ` X-Frame-Options ` 오류를 발견해서 이슈 해결 방법을 찾아보게 되었다. 01 . X-Frame-Options 오류 ` X-Frame-Options ` 오류는 처음 보는데 클릭재킹 공격을 막기 위한 설정이라고 한다. frame과 iframe, object 태그 에서의 참조를 제한하는 X-Frame-Options 라는 사양을 제안하고 있다. 주요 브라우저의 최신 버전에 모두 적용이 되어 있다. 위의 태그들을 렌더링 해야하는지 막아야하는지를 알려준다. X-Frame-Options의 값은 3가지가 있다. DENY : 해당 페이지는 frame 내에 표시할 수 없다. SAMEORIGIN : 해당 페이지와 동일한 org.. 공감수 0 댓글수 0 2023. 10. 14.
  • [ Project · ArtMarket ] 채팅 기능 사용 기술 정리 - WebSocket · Stomp · sockJs 프로젝트 시작 전, 웹소켓과 프론트를 연결하는 기술에 대해 미리 알아보고 습득했는데, 강사님께서 도움이 될만한 강의를 추천해주셨다 . 노마더코드 줌 구현으로 채팅 기능이 포함이 되어 있다고 하여 프론트 맏으신 분과 함께 내용을 빠르게 들어 보았다. 일단 작업 환경은 조금 달랐는데 프론트와 백앤드 모두 node.js에서 이루어지고 있었다. 강의 속에서 여러 기술들을 소개하고 다루는 방법에 대해 알려주었다. 각 기술들의 장점과 단점에 대해 정리하고 더 맞는 방법을 찾아보다가 프론트에서는 SockJs를 사용하기로 하였다. 1. 채팅 사용기술 정리 - 프론트 1-1. WS 강의에서는 WS와 Socket.io 를 다루고 있었다. 먼저 WS는 websocket 이 기본 브라우저에서 제공하는 기능으로 따로 설치가 없.. 공감수 0 댓글수 0 2023. 10. 14.
  • [ Project · ArtMarket ] 알림 · 파일 기능 분석과 DB 설계 채팅 기능과 연관되어 있는 알림기능과 파일도 분석하고 DB 설계작업을 했다. 1. 알림 기능 분석 1-1. 기본기능 유저 각자의 알림이 존재한다. 전달되는 메시지가 존재한다. ( 채팅 , 주문 현황에 대해 알림이 전송된다.) 그 메시지와 연관된 사람이 존재한다. 1-2. 추가기능 알림을 선택시 해당 페이지로 이동할 수 있다. 전체 알림을 확인 할 수 있다. 메일로 알림을 확인 할 수 있다. 1-3. 필요한 내용 받는 사람 / 보낸사람 / 알림 숫자 / 알림 구분 (어떤 알림인지) / 메시지 / 이동하는 페이지 / 알림 확인여부 / 받는사람 타입 ( 주문의경우 , 주문받는 사람인지 주문하는 사람인지 구분) 받는 사람 : 본인 보낸사람 : 닉네임 (입장) 일반 유저 : 작가 / 작가 유저 : 주문자 알림 구.. 공감수 0 댓글수 0 2023. 10. 6.
  • [ Project · ArtMarket ] 채팅 기능 분석 및 DB 설계 팀 프로젝트로 아트마켓이라는 플랫폼을 제작했다. 아트마켓은 아트가 필요한 고객과 아티스트의 중계 사이트로 팀원들과 프로젝트를 기획하고 어떤 기술들을 사용할지에 대해 정하며, 이전 부터 구현해보고 싶었던 채팅 기능을 추가 하였다. 해당 플랫폼은 가격을 구매자와 판매자가 함께 견적을 내고 합의하에 구매까지 가능하다. 때문에 서로 어떻게 연락을 주고 받는지가 중요한데, 게시판 대신 채팅으로 서로 견적 문의를 할 수 있고 이후 작품을 작업하면서, 작업에 필요한 파일과 컨펌, 완성된 작업물 전달을 까지 가능 할 수 있도록 제작 하였다. 1. 채팅 기능 분석 1-1. 기본기능 유저는 여러 작가와 대화할 수 있다. ( 여러 대화방 있다. ) 하나의 대화방에는 여러 ‘문자’들이 오고갈 수 있다. 하나의 대화방에서는 상.. 공감수 0 댓글수 0 2023. 10. 5.
  • [ Project · Travel Road ] summernote 무료 에디터 사용하기 무료 에디터 사용하기 네이버 구글 등 api가 존재하지만 간편하고 깔끔하게 사용하기 좋은 것 같아서 summernote를 선택했습니다. Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org 1. 필요 파일 설치 경로 : hompage > 'get started > 'download compiled' 사용가능한 소스들이 모두 들어있는데 그 중에서 자신의 프로젝트에 맞는 파일들을 선택해서 넣어주면 됩니다. 부트스트랩과 함께 사용할 수도 있지만 저는.. 공감수 0 댓글수 0 2023. 9. 4.
  • [ Project ] AWS 가입 및 프로젝트 배포하기 1. AWS 가입 및 가상 클라우드 서버 대여 1-1. AWS 가입 AWS 사이트 가입 결제 수단 등록 헤더 우측상단 지역 선택 (서울) [무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상 aws.amazon.com](https://aws.amazon.com/ko/free/?trk=fa2d6ba3-df80-4d24-a453-bf30ad163af9&sc_channel=ps&ef_id=Cj0KCQjw84anBhCtARIsAISI-xfd6bmwhTcpE8XpQN2g-e0au-WR-BTLNUQ2bHozni2t.. 공감수 0 댓글수 0 2023. 8. 21.
  • [ Project · Travel Road ] JAVA JSON으로 전달 받은 String 값 List로 변경 JSON으로 전달 받은 String 값 List로 변경 여행 리스트를 작성하던 중 작성 한 순서를 변경하고 싶을때, 쉽게 변경 가능하도록 드레그 하여 리스트 순서를 변경할 수 있는 기능을 추가하였습니다. 프론트에서는 드레그를 통해 ui 와 인덱스 번호가 변경될 수 있도록 jquery ui 라이브러리를 사용했습니다. 그리고 실제 데이터베이스의 리스트 순서값을 변경 하기 위해서 리스트 안에 각 객체의 고유 번호와 변경된 순서 값을 ajax를 통해 컨트롤러로 전달했습니다. Sortable | jQuery UI Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click.. 공감수 0 댓글수 0 2023. 7. 1.
  • [ Project · Travel Road ] 새로고침 시 데이터 중복 저장 막기, 컨트롤러 구분 새로고침 시 데이터 중복 저장 막기, 컨트롤러 구분 1. 문제점 확인 화면 단 작업 중 디자인이랑 페이지 동작을 확인하느라 새로고침을 여러번 하게 되었는데, 이때 원하지 않는 저장이 계속해서 발생하는 문제점을 확인하게 되었습니다. 실재 데이터 테이블을 확인해보면 이전 페이지에서 저장했던 내용이 중복으로 저장 되어 있는 것을 확인할수 있습니다. 2. 원인 확인 재 로딩 시 맵핑된 주소로 다시 POST 를 통해 접속하면서 저장로직이 한번 더 진행되는 것이었습니다. 📑TravelController.java @Transactional @PostMapping("/category") public String categorySave(@ModelAttribute("category") CategoryDTO categor.. 공감수 0 댓글수 0 2023. 6. 26.
  • [ Project · Travel Road ] 해시 태그 로직 구현하기 해시 태그 로직 구현하기 함께 작업하려는 인원을 해시태그로 입력 받아 공유된 회원은 함께 작업 할 수 있는 로직을 구현하려고 합니다. 우선 앤티티 객체는 필요한 게시판과 태그 그리고 두개의 테이블을 연결 시켜주는 해시 태그 객체를 생성했습니다. 1. 서버 구성 1-1. Entity 📑 Entity : 게시판(Category), 해시태그 (Hashtag) , 태그 (Tag) 더보기 📑Category.java package com.example.travel.domain; import lombok.*; import org.springframework.data.jpa.repository.Modifying; import javax.persistence.*; import java.time.LocalDateTime;.. 공감수 0 댓글수 0 2023. 6. 25.
  • [ Project · Travel Road ] D-DAY 날짜 계산하기 - LocalDateTime · LocalDate · Period LocalDateTime · LocalDate · DateTimeFormatter · Period 여행 계획을 세워서 공유하는 것이 이번 프로젝트의 주요한 로직입니다. 날짜 관련되어 기능들이 많이 필요할 것 같아서 로직을 구현 할때 사용할 수 있는 객체들을 정리하며 작업해보았습니다. 0. 적용한 로직 : DAY 날짜 계산하기 먼저 계획을 작성할때, 출발일과 종료일을 받아서 세부 일정을 입력한 날짜에 맞게 계획 할 수 있도록, DAY 를 계산하는 로직을 추가했습니다. ※ 추후에 현제 날짜와 비교하여 노출하는 로직도 추가할 예정입니다. 1) Controller 📑 TravelController.java @PostMapping("/category") public String categorySave(@Model.. 공감수 0 댓글수 0 2023. 6. 24.
  • [ Project · Travel Road ] 시큐리티 소셜 로그인 리팩토링 - 네이버, 카카오톡 기존 프로젝트는 소셜 로그인으로 구글을 받고 있었습니다. 네이버 로그인과 카카오 로그인 기능도 추가하여 리팩토링 해보았습니다. 1. NAVER 소셜 로그인 01. API 신청 naver developers 사이트에서 Application을 등록해줍니다. 1) 애플리케이션 등록 애플리케이션 이름 사용 API : 네이버 로그인 선택 제공 받을 정보를 선택 할 수 있다. 로그인 오픈 API 서비스 환경 : PC웹 서비스 URL : http://localhost:8087/ Callback URL : http://localhost:8087/login/oauth2/code/naver 애플리케이션 - NAVER Developers developers.naver.com 02. 프로젝트 내 설정 프로젝트에 소셜 로그인을.. 공감수 0 댓글수 0 2023. 6. 23.
  • [ Project · Travel Road ] 회원가입 시, 프로필 업로드 리팩토링 회원가입 시 프로필 업로드 기존에는 프로필사진 없이 회원가입을 진행하는 로직이였는데, 프로필 사진도 가입 시 추가 가능하도록 리팩토링 해보았다. 00) 설정 파일 수정 ( build.gradle ,application.properties ) 디펜턴시 추가 Apache Commons IO 라이브러리에는 유틸리티 클래스, 스트림 구현, 파일 필터, 파일 비교기, endian 변환 클래스 등이 포함되어 사용할 수 있습니다. 📑build.gradle 더보기 // https://mvnrepository.com/artifact/commons-io/commons-io 파일 저장 implementation group: 'commons-io', name: 'commons-io', version: '2.11.0' prop.. 공감수 0 댓글수 0 2023. 6. 15.
  • [ Project · Travel Road ] JAVA Apache 이메일 인증 구현- Google · Naver JAVA Apache 이메일 인증 구현 대개 웹 사이트들을 보면 회원이 아이디를 잊었을 시 이메일을 통해 회원임을 확인한다. 이메일 '인증번호'를 전송하여, 웹사이트에 입력한 번호와 일치하는지 확인 이메일에서 링크를 클릭하여 인증 방법으로는 위의 두가지가 있는데, 이번 개인 프로젝트에서는 첫번째 방법 '인증번호' 를 통한 회원 확인 로직을 구현해보려고 한다. ⭐ 프로젝트 명 : Travel Road ⭐ 개발환경 💻 BackEnd - JAVA11, SpringBoot , JPA(Spring Data JPA),Spring Security,OAuth 2.0 - Build Tool : Gradle (Jar) 💻 FrontEnd html, css, Javascript, thymeleaf, Bootstrap 📁 이.. 공감수 1 댓글수 3 2023. 6. 3.
  • [ Thymeleaf ] 프로젝트에서 '타임리프 템플릿' 레이아웃 사용 방법 Thymeleaf 사용자 화면단을 타임리프를 사용할 경우 레이아웃을 분리하여 작업할 수 있다. header, footer를 분리하여 공통된 영역은 한 곳에서 관리 할 수 있도록 설정 가능하다. 추후에 내용이 나 추가 사항이있을 경우, 유지보수에 편리하는 장점이 있다. 1. 설정 파일 세팅 📑 build.gradle dependencies { ... implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // 타임리프 레이아웃 implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect' } 📑 application.properties ##타임리프 템.. 공감수 0 댓글수 0 2023. 4. 26.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.