✿∘˚˳°∘°
61일차 : Editor, GitHub 본문
20230223
1. Editor - summernote
공지사항 작성폼에 summernote에디터추가하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#noticeWrite td, #noticeWrite th{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- textarea에 텍스트에디터만들기 -->
<%@include file="/WEB-INF/views/common/header.jsp" %>
<script src="/summernote/summernote-lite.js"></script>
<script src="/summernote/lang/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="/summernote/summernote-lite.css">
<div class="page-content">
<div class="page-title">공지사항 작성</div>
<form action="/noticeWrite.do" method="post" enctype="multipart/form-data">
<!--
첨부파일이 존재하는 경우
일단 양이 많기때문에 method = post
파일이 포함되는 경우 enctype="multipart/form-data
이 양식을 반드시 지켜줘야한다.
-->
<table class="tbl" id="noticeWrite">
<tr class="tr-1">
<th class="td-3">제목
<td colspan="3">
<input type="text" name="noticeTitle" class="input-form">
</td>
</tr>
<tr class="tr-1">
<th class="td-3">작성자
<td>
<%=m.getMemberId() %>
<input type="hidden" name="noticeWriter" value="<%=m.getMemberId() %>">
</td>
<th class="td-3">첨부파일</th>
<td><input type="file" name="upfile"></td>
</tr>
<tr class="tr-1">
<td colspan="4" style="text-align:left">
<textarea id="noticeContent" name="noticeContent" class="input-form"></textarea>
</td>
</tr>
<tr class="tr-1">
<td colspan="4">
<button type="submit" class="btn bc4 bs4">공지사항작성</button>
</td>
</tr>
</table>
</form>
</div>
<script>
$("#noticeContent").summernote({
height : 400,
lang : "ko-KR",
callbacks : {
onImageUpload : function(files){
uploadImage(files[0], this);
//이미지는 files에 들어가고 this는 이 에디터를 의미
}
}
});
function uploadImage(file, editor){
//file : 업로드용 / editor는 <img src=>로 보여주기 위해
//ajax를 통해에서 서버에 이미지를 업로드 -> 업로드된 이미지의 경로를 받아오는 역할
//받아온 이후 -> editor에 이미지 경로를 전달에서 화면에 표현
//<form method="post" enctyle="multipart/form-data">태그의 역할을 해줌
const form = new FormData();
/*
<form>
<input type="file" name="file">
</form>
*/
form.append("file", file);
$.ajax({
url : "/uploadImage.do",
type : "post",//파일업로드를 하려면 반드시 post
data : form,
processData : false,
contentType : false,
success : function(data){
//console.log(data); 이미지경로를 data로 받아옴
$(editor).summernote("insertImage", data); //알아서 img태그로 집어넣음
//<p><img style="width: 740.99px;" src="/upload/editor/flower11.png"></p><p><br></p><p>기절</p>
//데이터베이스의 본문에 위형식으로 들어감 -> 태그가 포함되므로 본문데이터를 넉넉하게 주어야함
}
});
//자바에서 ajax가 데이터를 받을 땐 기본적으로 문자열로 전송받음
//processData : 전송하는 데이터를 기본적으로 문자열로 전송
// -> 파일전송을 위해서 기본값인 문자열전송을 제거
//contentType : enctype="application/x-www-form-urlencoded;charset=UTF-8"
// -> 파일 전송을 위해서 encType 기본값을 제거
//이 두 설정이 빠지면 ajax로 파일업로드가 불가능하다
}
</script>
<%@include file="/WEB-INF/views/common/footer.jsp" %>
</body>
</html>이미지 upload를 위한 서블릿
package kr.or.iei.notice.cotroller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
/**
* Servlet implementation class UploadImageServlet
*/
@WebServlet(name = "UploadImage", urlPatterns = { "/uploadImage.do" })
public class UploadImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadImageServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 인코딩
request.setCharacterEncoding("utf-8");
//2. 값추출
//2-1. 업로드경로
String root = getServletContext().getRealPath("/");
String saveDirectory = root+"upload/editor";
//2-2. 최대사이즈 지정
int maxSize = 10*1024*1024;//10MB
//2-3. request -> MutipartRequest로 변환(파일업로드가 될때)
MultipartRequest mRequest = new MultipartRequest(request, saveDirectory, maxSize, "utf-8", new DefaultFileRenamePolicy());
String filepath = mRequest.getFilesystemName("file");
//3. 비즈니스로직 - DB에 파일업로드를 하지 않으므로 로직없음
//4. 결과처리
//업로드된 파일경로를 되돌려주면 끝
response.setCharacterEncoding("utf-8");//파일명이 한글일 수 도 있으므로
PrintWriter out = response.getWriter();
out.print("/upload/editor/"+filepath);//이게 되돌아간다
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
git
로컬저장소
파일이 생기거나, 수정되거나, 삭제가 발생하면 저장여부알림이 뜸
github
원격저장소
VCS(Version Control System)
undo commit -> 커밋된걸 취소
Revert -> 삭제된 파일 복구(안하는게 좋음)
branch -> 폴더를 복사한것과 비슷한상태 물리적으로 2개는 아님(git이 논리적으로 관리)
원본폴더 - main
branch폴더 - br1 - br인 상태에서 생성수정삭제한 작업은 main에 영향을 미치지 안흠
서로 같은폴더에서 다른작업을 하다가 합치는 작업이 가능하다(merge)
원본파일이 있는 상태에서 branch에서 사용하고 잘되엇을 때 merge
다른컴퓨터랑 연동 :
1. <>code에서 https url을 따옴
2. clone a repository 의 URL에 url입력 후 경로 잡아주고 생성
3. 2번째 피시에서 작업하고 push로 깃에 올리고
4. 1번째 피시에서 2피시작업물을 받을때는 pull로 받음
혼자 git사용시 문제가 별로 없는이유
1. 개발환경이 크게 다르지않음
2. 동시에 작업하는 일이 없음
- 동시에 작업 시 수정파일이 같은데 push가 동시에 들어가게되면, 에러발생(git충돌)
- 팀GIT 작업순서1. pull [ctrl + shift + p]
2. 개인 작업 브랜치 생성
3. 개발작업 (작업중인 브랜치명은 이클립스 프로젝트 폴더명 우측에서 확인)
4. 개발 완료 후 commit (개인 브랜치)
5. master branch로 변경6-1 master branch에서 변경사항이 없는경우
-> 개인 브랜치 merge
-> 후 변경사항 매인에서 push
6-2 master branch에서 변경사항이 있는경우.
-> 개인 브랜치로 변경
-> 개인 브랜치에서 메인브랜치 변경사항 merge;
6-2-1 충돌이 없는경우
-> master branch에서 개인브랜치 merge;
-> merge 후 push (master branch에서);
6-2-2 충돌 있는경우
-> 개인 브랜치에서 충돌이 발생
-> 충돌 해결...
7. 6과정 종료 후 5번부터 다시 개발 시작.
'국비수업 > Server' 카테고리의 다른 글
| 73일차 : Action Tag, EL, JSTL, Filter (0) | 2023.03.14 |
|---|---|
| 60일차 : mvc2WebProject - 6 ( API ) (0) | 2023.02.22 |
| 59일차 : AJAX, mvc2WebProject - 6 (0) | 2023.02.21 |
| 58일차 - mvc2WebProject - 5 (0) | 2023.02.21 |
| 57일차 : mvc2WebProject - 4 (0) | 2023.02.19 |
Comments