오늘은 이클립스(Eclipse) Git(깃),GitLab(깃 랩),GitHub(깃허브) 연동하기/프로젝트 내려받기를 해보겠습니다.

선행

1.Gitlab or GitHub repository 만들기

2.Gitlab or GitHub repository에 프로젝트 import 해놓기

3.Gitlab or GitHub URL 알아놓기

환경

OS : Windows 10 Home
Eclipse 4.10.0
EGit 5.5.1

자기 이클립스 버전(Version) 확인

이클립스 상단 메뉴 -> Help -> About Eclipse -> Version 확인

그럼 본격적으로 이클립스 깃 연동 시작합니다.

1.EGit 다운로드

이클립스 상단 메뉴 -> Help -> Eclipse Markplace… -> egit 검색 -> download 

저는 이미 다운로드하여 Installed라고 뜹니다.

이제 다운로드 받고나면

이클립스 상단 메뉴 -> Window -> Show View -> Other.. -> Git -> Git Repositories

즐겨찾기 하단 메뉴에 뜨게 하는 방법입니다.

2.GitLab or GitHub URL 등록하기

이클립스 하단 즐겨찾기 메뉴 -> Git Repositories 탭 우측 -> 초록색 화살표 모양 아이콘 클릭(Clone Git Repository)

저 아이콘을 누르면 이 창이 뜨게 되는데요, 아까 복사해놨던 GitHub URL를 URL 칸에 넣어줍니다.

그럼 다른 창들이 알아서 채워지게 됩니다. 그리고 Next > 클릭

보통은 master만 존재할 겁니다. 저는 원래 진행하던 토이 프로젝트라 브랜치가 많습니다.

자기가 가져올 브랜치들 체크 후 Next > 클릭

이제 Local에 Git 저장소를 만들어야 합니다. 개념은 다 아시겠죠?

지금 만드는 건 Remote repo를 Local repo에 넣겠다는 거고, 넣을 곳을 지정해라 이겁니다.

지정 후 Finish 버튼 클릭

Finish 하고 Git Repositories 탭 선택 후 Local Git 확인

파일이나 폴더 이름을 가려 가독성을 떨어뜨린 점 죄송합니다.

3.GitLab or GitHub Repository 프로젝트와 연결하여 내려받기

Local Git 선택 후 마우스 우클릭 -> Import Projects... 클릭

바로 Finish 눌러줍니다.

최종 확인

이렇게 프로젝트에 조그마한 git 원통이 보이면 잘 내려받아진 겁니다.

다음부턴 Test Git으로 글 포스팅하겠습니다. 프로젝트 명을 다 가려서 정말 죄송하고,

다음 Eclipse로 Commit, Merge, Push 등을 다루겠습니다.

SOP(동일 출처 정책(Same-Origin Policy))

개념

개념을 알기전 먼저 ajax로 다른 도메인서버의 자원을 요청 할 경우 이와 같은 에러를 만나게 된다.

(다른 페이지가 아니라 다른 도메인입니다 도메인 www.a.com 자원요청 -> www.b.com)

chrome(크롬)

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin ‘www.b.com' is therefore not allowed access.

 FireFox(파이어폭스)

교차 원본 요청 차단: 동일 출처 정책으로 인해 'www.b.com'에 있는 원격 자원을 읽을 수 없습니다. 
자원을 같은 도메인으로 이동시키거나 CORS를 활성화하여 해결할 수 있습니다.

외부로 요청이 안 되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책(same-origin policy)이라는 보안 규칙이 존재하기 때문이다.

자바스크립트 엔진 표준 스펙? 그럼 <script></script> 안에 있는 것말고

다른 도메인 서버의 <img> 파일이나 css 파일을 가져 올 수 있는 것인가?

정답은 맞습니다

<script></script> 안에 스크립트로 둘러 쌓인걸 "Cross-Site HTTP Requests" 라고 한다.

바로 그것이 자바스크립트 엔진 표준스펙에 존재하는 뭐다?

동일 출처 정책(same-origin policy)

우리에겐 아주 못된 악역이지만 이 역시 탄생 배경이 존재합니다.

사용 이유

예를 들어 이 정책이 없다는 것은? 그냥 아무나,누구나 내 도메인 서버에 와서 자원을 가져 갈 수 있는 것이다. 그렇다는건 비밀번호를 가로채는 스크립트를 만들어 자원을 쉽게 빼 갈 수 있다는 뜻이 된다.

한마디로 보안에 취약하다.

조건

프로토콜, 호스트명, 포트가같아야만 자원을 주고 받을 수 있다.

www.a.com -> www.a.com/a1 O

www.a.com/a1 -> www.a.com/a2 O



www.a.com -> www.b.com X

www.a.com/a1 -> www.b.com X

하지만 우리는 ajax를 이용한 rest api 서비스를 굉장히 많이 사용하기 때문에

꼭 same-origin policy을 부시고 CORS를 허용 해줘야한다.

CORS(교차 출처 자원 공유(Cross Origin Resource Sharing))

개념

웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙이다. 서버와 클라이언트가 정해진 해더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 교차 출처 자원 공유(cross-origin resource sharing)라는 이름으로 표준화가 되었다.

한마디로 Cross-Site Http Request를 가능하게 해주는 표준 규약

종류

Simple Request

Preflight Request

Credential Request

Non-Credential Request

Simple Request

이는 다음 3가지를 만족해야 합니다.

1. GET, HEAD, POST 중 한 가지 방식을 사용

2. POST일 경우 Content-type이 아래 셋 중 하나를 만족

- application/x-www-form-urlencoded

- multipart/form-data

- text/plain

3. 커스텀 헤더를 전송하지 않아야 함

Preflight Request

이름에서 볼 수 있는 것처럼 Preflight(예비) 요청을 먼저 보내고 서버가 이에

응답이 가능한 지 확인합니다. 예비 요청은 OPTION메서드로 HTTP 요청을 전송합니다.

이후 실제 Actual(본) 요청을 보냅니다.

그리고 서버가 이에 응답하며 통신하는 형태이죠.

Preflight Request는 위의 Simple Request에 해당하는 조건에 만족하면 안돼요.

그렇기에 GET, HEAD, POST 이외 메서드를 사용하는 경우에만 사용 가능한 요청입니다

만약 POST 요청을 사용할 경우에는 Content Type이 위의 3가지 경우가 아니거나 

(application/json)

또는 커스텀 헤더를 사용할 경우에 사용할 수 있다는 점을 기억해야 합니다.

예비 요청과 예비 응답, 본 요청과 본 응답 총 4번의 형태로 구성되어 있습니다.

순서

Client 예비(method = OPTIONS) 전송-> Server OPTIONS를 확인하고 서버쪽 CORS가 허용 돼있으면 요청에 답함

(그렇지 않으면 405 Method Not Allowed HTTP 반환)

Credential

HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청

요청 시 xhr.withCredentials = true를 지정하는 것이 가장 큰 특징

Access-Control-Allow-Credentials: true

만약 위의 설정이 false라면? 브라우저는 이 요청을 거부할 것입니다.

Non-Credential

사실 withCredentials 플래그는 디폴트 값이 false입니다.

그러니 위의 Credential 요청에서와 같이 처리해주지 않는다면 모든 요청이 바로

Non-Credential에 해당된다고 볼 수 있습니다.

방식

1.jsonp 방식

위에서 설명했듯이 css,img,js 파일은 동일 출처 정책에 걸리지 않는다.

그러므로 <script></script> 스크립트를 json 형식으로 변경 후 읽어오는 방법

하지만 GET 방식만 요청이 가능하다.

2. 웹브라우저 외부 요청 허용 옵션 사용

-disable-web-security 옵션을 추가하여 크롬 실행

1,2번은 추천하지 않습니다. 2번은 더더욱

일반 사용자들에게 -disable-web-security 옵션을 써서 브라우저를 실행 시키라고 하는 것은 말도 안되죠

3.CORS 요청 핸들링

Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS

Access-Control-Max-Age: 3600

Access-Control-Allow-Headers: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization

간단 설명

Request headers (클라이언트의 요청 해더)  

Origin: 요청을 보내는 페이지의 출처(도메인) 

Access-Control-Request-Method: 실제 요청하려는 메서드 

Access-Control-Request-Headers: 실제 요청에 포함되어 있는  해더 이름

Response headers (서버에서의 응답 해더)

Access-Control-Allow-Origin: 요청을 허용하는 출처. * 이면 모든 곳에 공개되어 있음을 의미한다. 

Access-Control-Allow-Credentials: 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 true. true를 응답받은

클라이언트는 실제 요청 시 서버에서 정의된 규격의 인증값이 담긴 쿠키를 같이 보내야 한다.

Access-Control-Expose-Headers: 클라이언트 요청에 포함되어도 되는 사용자 정의 해더.

Access-Control-Max-Age: 클라이언트에서 preflight의 요청 결과를 저장할 기간을 지정.

클라이언트에서 preflight 요청의 결과를 저장하고 있을 시간이다. 해당 시간 동안은 preflight요청을 다시 하지 않게 된다.

Access-Control-Allow-Methods: 요청을 허용하는 메서드. 기본값은 GET, POST라고 보면 된다.

이 해더가 없으면 GET과 POST 요청만 가능하다. 만약 이 해더가 지정이 되어 있으면,

클라이언트에서는 해더 값에 해당하는 메서드일 경우에만 실제 요청을 시도하게 된다.

Access-Control-Allow-Headers: 요청을 허용하는 해더.

조건

Client Access-Control-Allow-Origin 허용 해줘야하고,

Server Access-Control-Allow-Origin 허용 해줘한다

한마디로 Client-Server 양쪽 모두 허용해줘야 통신이 가능하다.

저는 Client 즉 제 웹에만 허용을 주구장창하고 API 서버에는 허용을 안했습니다.

그러고 삽질을 엄청했죠 지구의 맨틀까지 보일뻔 보일 뻔했습니다 너무 삽질해서…

아 이런 개념말고 허용해주는 코드를 달라고요??

그건 따로 Java 탭에서 다루겠습니다.

안녕하세요 무작정 일단 따라 해 보는 Spring 커뮤니티 만들기 4탄 시작합니다.

환경

Eclipse 2019-9 Jee
JDK 1.8_231
Apache Tomcat 8.5.47
MariaDB 10.4.10
MyBatis 3.2.2
+ JSTL 1.2
+ jackson 2.9.4

오늘의 할 일

1.URL 8080,프로젝트 명 제거
2.JSTL,EL 설정
3.게시판 CRUD 기능 만들기

시작하기에 앞서 지금 상태에서 Run on Server를 하시면

http://localhost:8080/springEx01/ 이렇게 8080이랑 springEx01이라는 프로젝트명이 붙는걸 보시게 되는데요

이걸 안보이게 하려면 설정을 조금 해줘야합니다.

8080 포트와 프로젝트명 URL에서 없애기

이클립스 하단 Servers 탭 클릭 -> Tomcat v8.5 Server at localhost 더블 클릭 -> Overview 탭 클릭 -> HTTP/1.1 PortNumber 8080에서 80으로 변경

그리고 저장 후 바로 Modules 탭 클릭 -> 해당 프로젝트 클릭 후 Edit… 버튼 클릭 -> Path에 프로젝트명 지우고 "/" 만 남기고 저장 "/"는 남겨야 합니다.

짜잔! URL이 깔끔해진 모습

index.jsp에 a 태그 href도 <a href="/view/dashboard">대시보드 보러가기</a> 이렇게 변경해줍니다.

현재 인덱스 페이지와 대시보드 페이지만 존재하고 있는데요.

일단 대시보드 페이지에 게시판 리스트를 보여주고 작성,수정,삭제는 다른 페이지에서 진행하겠습니다.

로그인은 다음 5장에서 다룹니다.

먼저 JSP에서 Java 코드<%= %>를 쓴다면 가독성이 매우 떨어지므로 저희는 JSTL & EL ${} 이라는걸 사용하겠습니다.

새로운 라이브러리를 추가할 땐? 정답! pom.xml

pom.xml 디펜던시<dependency> 추가

<!-- jstl dependecy -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>

<dependency> 추가 후

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 이 문구를 JSTL & EL 태그를 사용 할 때

JSP 파일 최상단에 넣어주면 되는데요. Prefix="c"말고도 여러 개가 있으므로

include 전용 JSP를 만들어줍니다.

views -> jstlHeader.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

이제 JSTL,EL 태그를 사용할 JSP 페이지 <!DOCTYPE html> 위에 넣어주시면 됩니다.

<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>

자 그럼 준비가 끝났으니 본격적으로 게시판 만들기 CRUD를 시작합니다.

먼저 CRUD 중 R(read)부터 만들겠습니다.

대시보드에 들어가면 제일 먼저 게시판 리스트가 보이도록 만들 예정입니다.

리스트를 보여주려면 먼저 DB에서 데이터를 Select 해와야겠죠

ViewController.java

@RequestMapping("view/dashboard") 
public ModelAndView dashboard() { 
List result = boardService.getBoardList();  
ModelAndView mav = new ModelAndView(); 

mav.addObject("result",result); 

return mav; 
}

BoardService.java

List getBoardList();

BoardServiceImpl.java

public List<Board> getBoardList() {
return boardDAO.getBoardList(); }

BoardDAO.java

public List<Board> getBoardList() {	
return sqlSession.selectList("getBoardList"); }

board-Mapper.xml

<select id="getBoardList" resultType="board">
SELECT * FROM board order BY id DESC;
</select>

원래 작성 순서는 Mapper -> DAO -> Service -> Controller 순이지만 일단 익숙지 않은 분들을 위해 Controller부터 작성하였습니다.

dashboard.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dashboard</title>
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
  }
</style>
</head>
<body>
<p>dashboard</p>
<div>게시글 리스트</div>
<table>
<thead><tr>
<td>제목</td>
<td>조회수</td>
<td>좋아요</td>
<td>첨부파일</td>
<td>글 작성 날짜</td>
</tr></thead>

<c:forEach var="b" items="${result }">
<fmt:formatDate value="${b.create_time}" pattern="yyyy-MM-dd HH:MM:ss" var="dateFormat_cr"/>
<tr>
<td>${b.subject }</td>
<td>${b.views }</td>
<td>${b.likes }</td>
<td>${b.attachments }</td>
<td>${dateFormat_cr }</td>
</tr>
</c:forEach>
</table>
<div> <a href="/view/boardwrite">글 작성하기</a></div>
</body>
</html>

UI는 아직 허접하지만 일단 게시판 리스트가 잘 출력되는 모습입니다.

이제 글 작성하기 링크를 누르면 글을 작성할 수 있게 C(Create)를 만들어봅시다.

먼저 작성을 다 한 후 jQuery ajax를 이용한 POST 방식을 사용할 겁니다.

views -> view -> boardwrite.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<meta charset="UTF-8">
<title>글 작성</title>
<script type="text/javascript">

function boardValidation(){
	
	var subject = $("#subject").val();
	var content = $("#content").val();
	
	if(!subject){
		alert("제목 입력은 필수입니다.");
		$("#subject").focus();
		return false;
	}else if(!content){
		alert("내용 입력은 필수 입니다.");
		$("#content").focus();
		return false;
	}else {
		boardWrite(subject,content);
	}
	
}

function boardWrite(sub,con){
	
	$.ajax({
		
		url : "/jquery/boardwrite",
		type:'POST',
		data : {
			subject : sub,
			context : con
		},
		success:function(data){
			if(data == 1){
				alert("글 등록이 완료되었습니다.");
				location.href="/view/dashboard";
			}else {
				alert("글 등록 실패");
			}
		},error:function(){
			console.log("error");
		}
		
	})
	
}

</script>
</head>
<body>
<form>
<table>
        <caption>게시판 글쓰기 </caption>
    <tbody>
            <tr>
                <th>제목: </th>
                <td><input type="text" placeholder="제목을 입력하세요. " id="subject"/></td>
            </tr>
            <tr>
                <th>내용: </th>
                <td><textarea cols="30" rows="10" placeholder="내용을 입력하세요. " id="content"></textarea></td>
            </tr>
           <!--  <tr>
                <th>첨부파일: </th>
                <td><input type="text" placeholder="파일을 선택하세요. " name="filename"/></td>
            </tr> -->
            <tr>
                <td colspan="2">
                    <input type="button" value="등록" onclick="boardValidation()"/>
                    <input type="button" value="뒤로" onclick="javascript:location.href='dashboard'"/>
                </td>
            </tr>
    </tbody>
</table>
</form>
</body>
</html>

jQuery 플러그인이 필요하겠죠 저희는 *CDN 방식으로 받겠습니다.

boardwrite.jsp <head></head>안에 넣어줍니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

*CDN :콘텐츠 전송 네트워크(Content delivery network)는 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 인터넷 서비스 제공자에 직접 연결되어 데이터를 전송하므로, 콘텐츠 병목을 피할 수 있는 장점이 있다

하지만 Spring 입장에선 boardwrite.jsp를 못 찾겠죠?

무조건 jsp를 view로 등록할 땐 Controller에서 받아줘야 합니다.

ViewController.java

@RequestMapping(value="view/boardwrite",method = RequestMethod.GET)
	public ModelAndView boardwrite() {
		ModelAndView mav = new ModelAndView();
		return mav; }

그리고 위에 boardWrite() 메서드를 보시면 URL를 /jquery/boardwrite로 보내고 있죠

저희는 Controller의 용도를 나눠서 가독성이 좋도록 할 겁니다.

ViewController.java : View를 보여주는(연결해주는) Controller

JqueryController.java : jquery + ajax를 이용한 메서드들

자 그럼 JqueryController.java를 만들어야겠죠

src/main/java -> controller -> JqueryController.java 생성

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.company01.springEx01.logic.Board;
import com.company01.springEx01.service.BoardService;

@Controller
@RequestMapping("jquery/*")
public class JqueryController {

	@Autowired
	BoardService boardService;
	
	@RequestMapping(value="jquery/boardwrite",method = RequestMethod.POST)
	@ResponseBody
	public int boardwrite(Board board) {
		int result = 0; 
		result = boardService.boardwrite(board); 
		return result;
	}
	
}

@ResponseBody : json으로 응답해주는 어노테이션

여기서 보면 boardwrite 메서드의 리턴 타입이 int라고 돼있는데

어라? 저는 int로 리턴하면 String or Object로 리턴하라고 에러가 나던데요? 네 맞습니다.

원래 스프링은 Model 객체를 리턴해 "view"를 보여주려고 하는 성질이 존재하는데,

갑자기 int를 리턴해버리면 처음부터 형태가 맞지 않다며 예외를 뱉습니다.

그럼 아예 값을 리턴해주는 JSON 형태로 던져주면 어떨까요? 네 바로 그 작업을 하는 것입니다.

pom.xml

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.4</version>
</dependency>

BoardService.java

int boardwrite(Board board);

BoardServiceImpl.java

@Override
public int boardwrite(Board board) {
return boardDAO.boardwrite(board);}

BoardDAO.java

public int boardwrite(Board board) {
return sqlSession.insert("boardwrite",board);
}

board-Mapper.xml

<insert id="boardwrite">
insert into board (id,subject,context,attachments,likes,views,create_time,update_time) 
values(#{id},#{subject},#{context},#{attachments},#{likes},#{views},now(),null);
</insert>

만들었으니 한번 해볼까요?

대시보드에 있는 글 작성하기 버튼(링크)을 클릭합니다.

글 작성 UI

일단 첨부파일은 로직이 조금 필요하므로 나중에 하고 제목, 내용만 입력하도록 하였습니다.

글 작성 후 등록

대시보드

짠! 잘 들어왔죠 이제 저 글 제목을 클릭하면 내용을 볼 수 있고, 조회수가 1씩 증가하도록 해보겠습니다.

dashboard.jsp

제목 부분에 a 태그 링크 추가

<td><a href="/view/boardDetail?id=${b.id }">${b.subject }</a></td>

/view/boardDetail 페이지가 없죠? 새로운 페이지 추가 Controller는 뭐였죠??

네 맞습니다!!

ViewController.java

@RequestMapping(value="view/boardDetail",method = RequestMethod.GET)
	public ModelAndView boardDetail(int id) {
		boardService.viewsUpdate(id);
		Board result = boardService.getBoardDetail(id);
		ModelAndView mav = new ModelAndView();
		mav.addObject("result",result);
		return mav;
	}

매개변수 int id : get으로 넘어오는 "id" 매개변수를 받는다.

viewUpdate : 조회수 추가 메서드

getBoardDetail : 특정 글 하나의 데이터를 조회하는 메서드

views -> view -> boardDetail.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>
<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
<title>글 내용</title>
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
  }
</style>
<script type="text/javascript">
function boardDelete(){
	
	
}

function boardUpdate(){
	
	
}
</script>
</head>
<body>
<form>
<table>
        <caption>게시판 글 내용 </caption>
    <tbody>
            <tr>
                <th>제목: </th>
                <td>${result.subject}</td>
            </tr>
            <tr>
                <th>내용: </th>
                <td>${result.context}</td>
            </tr>
            
            <tr>
                <th>조회수: </th>
                <td>${result.views}</td>
            </tr>
            <tr>
                <th>좋아요: </th>
                <td>${result.likes}</td>
         	</tr>
         	
            <tr>
                <td colspan="2">
                    <input type="button" value="수정" onclick="boardDelete()"/>
                    <input type="button" value="삭제" onclick="boardUpdate()"/>
                    <input type="button" value="목록보기" onclick="javascript:location.href='dashboard'"/>
                </td>
            </tr>
    </tbody>
</table>
</form>
</body>
</html>

BoardService.java

Board getBoardDetail(int id);
void viewsUpdate(int id);

BoardServiceImpl.java

@Override
public Board getBoardDetail(int id) {
return boardDAO.getBoardDetail(id);}

@Override
public void viewsUpdate(int id) {
boardDAO.viewUpdate(id);}

BoardDAO.java

public Board getBoardDetail(int id) {
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("id",id);
		return sqlSession.selectOne("getBoardDetail",map);
	}

public void viewUpdate(int id) {
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("id",id);
		sqlSession.update("viewUpdate", map);
	}

board-Mapper.xml

<select id="getBoardDetail" resultType="board">
SELECT * FROM board where id = #{id};
</select>

<!-- update -->
<update id="viewUpdate">
UPDATE board SET views = views+1 WHERE id = #{id}
</update>

대시보드

제목에 클릭할 수 있는 링크가 생겼습니다.

글 내용(boardDetail)

내용 페이지에서 새로고침을 하게 되면 조회수가 1씩 증가하는 걸 볼 수 있습니다.

삭제와 수정은 아무나 하면 안 되기 때문에 다음 글인 로그인 구현하기를 하고 진행하도록 하겠습니다.

귀찮아서 그런 거 아닙니다.

그럼 다음은 회원가입 그리고 로그인 후 세션 저장까지 해보겠습니다.

최종 Project Explorer

먼저 IT에 일하시는 분들은 엔지니어,개발자 등.. 각 분야에서 Linux나 프로그래밍 언어를 다룰 때

Namespace(이하 네임스페이스)라는 말이 굉장히 많이 나온다.

대충 네임스페이스는 "소속"이다. 까지만 알고 넘어가는 경우가 많은데 정확히 알아보도록 하겠습니다.

개념

네임스페이스.. 직역해보면 이름공간? 뭔가 이름과 관련된 용어인건 분명하다.

그럼 이름은 왜 지어지는가? 바로 구분, 구분를 하려고 이름을 짓지않습니까?

제 블로그 이름은? .java의 개발일기

다른 사람이저에 다른 글을 보더라도 .java의 개발일기라는 이름을 보고

아 이 사람 글이구나 싶을껍니다.

물론 Linux에서 다루는 네임스페이스와 프로그래밍 언어에서 다루는 네임스페이스는 정확한 뜻이 조금 다를수 있으나,

사용하는 목적은 같다 네임스페이스는 한마디로,

한 덩어리의 데이터에 이름을 붙여 충돌 가능성을 줄이고, 쉽게 참조할 수 있게 하는 개념

예를 들면 A라는 네임스페이스의 자원1,2,3

B라는 네임스페이스의 자원1,2,3

여기서 자원 1,2,3은 같으나, 네임스페이스로 구분을 할 수 있다는 것이죠

연관 키워드

Linux : PID namespace, network namespace, UID namespace…

Programming language : namespace A() {}, namespace B() {}

MyBatis : <mapper namespace="mapper.board-Mapper">

안녕하세요 무작정 일단 따라 해 보는 Spring 커뮤니티 만들기 3탄 시작합니다.

환경

Eclipse 2019-9 Jee 
JDK 1.8_231 
Apache Tomcat 8.5.47
+ MariaDB 10.4.10
+ MyBatis 3.2.2

자 오늘은 제일 중요한 DB 연결을 해볼껀데요, DB는 MariaDB 10.4.10 version을 사용합니다. 참고 해주세요

Java로 DB 연결 할 때 꼭 필요한 준비물이 무엇입니까?

네? DB 연결 코드?

네?? 하느님께 기도하기?

네??? MariaDB는 모르겠다는 당신! 반성하십시오.

MSSQL, MySQL, MariaDB, PG등 모든 DB를 JAVA로 연결 할 땐 DB 드라이버 라이브러리가 필요합니다.

즉, jar 파일말입니다. Spring이 아니라면 jar 파일을 홈페이지에서 구해서 라이브러리 폴더에 넣어줘야 하지만

저희는 *Maven을 사용하고 있습니다. *Maven이 정확히 무엇인지는 모르겠지만

일단 라이브러리를 쉽게 다운받고 자동으로 등록 해주는 빌드 툴이라고만 알고 있읍시다.

대표적인 빌드 툴

*Gradle : 자바 프로젝트의 빌드(build)를 자동화 해주는 빌드 툴(build tool) (최신)

*Maven : 자바 프로젝트의 빌드(build)를 자동화해주는 빌드 툴(build tool)

1.Maven으로 MariaDB 라이브러리를 다운로드

https://mvnrepository.com/ 사이트 접속

검색 창에 mariadb 검색

1. MariaDB Java Client 클릭

Usages가 가장 많은 2.3.0 버전을 받겠습니다.

2.3.0 클릭

<dependency>
    <groupId>org.mariadb.jdbc</groupId>
    <artifactId>mariadb-java-client</artifactId>
    <version>2.3.0</version>
</dependency>

코드 복사

프로젝트로 돌아와 pom.xml이라는 파일에 붙여넣기 후 파일 저장

2.Spring version 및 서블릿(servlet) version 변경

pom.xml 파일을 손 댄김에 Spring 버전도 바꿔줍니다.

Spring 프로젝트 기본 버전

Spring Framework 3.1.1 
java version 1.6
Maven compiler
source 1.6
target 1.6
servlet-api 2.5
jsp-api 2.1

변경 후 버전

Spring Framework 4.3.4
java version 1.8
Maven compiler
source 1.8
target 1.8
servlet-api 3.0
jsp-api 2.2

주의 : Java version 1.8로 올릴땐 로컬에 설치된 Java가 1.8이상이여야 합니다.

Before

pom.xml

<properties>
<java-version>1.6</java-version>
<org.springframework-version>3.1.1.RELEASE</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>
</properties>


<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>


<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>2.5.1</version>
    <configuration>
        <source>1.6</source>
        <target>1.6</target>

        <compilerArgument>-Xlint:all</compilerArgument>
        <showWarnings>true</showWarnings>
        <showDeprecation>true</showDeprecation>
    </configuration>
</plugin>

web.xml

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

After

pom.xml

<properties>
<java-version>1.8</java-version>
<org.springframework-version>4.3.2.RELEASE</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>
</properties>


<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
<scope>provided</scope>
</dependency>


<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>2.5.1</version>
    <configuration>
        <source>1.8</source>
        <target>1.8</target>

        <compilerArgument>-Xlint:all</compilerArgument>
        <showWarnings>true</showWarnings>
        <showDeprecation>true</showDeprecation>
    </configuration>
</plugin>

주의 : servlet-api는 artifactId도 변경해야 됩니다.

web.xml

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

저장 후 Building workspace(n%)를 꼭 다 기다려주세요 꼭!

spring version, mariadb-java 잘 받아졌는지 확인

다 기다리셨으면 또 할 게 남아있습니다.

프로젝트 우 클릭 -> Properties -> Java Build Path -> Libraries 탭 클릭 -> JRE System Library 더블클릭 or Edit… 버튼 클릭 -> Java 1.6으로 설정 돼있는걸 로컬에 있는 Java 1.8 파일 선택 후 Finish 클릭

주의 : jre 말고 꼭 jdk를 사용하셔야 나중에 불이익(?)이 없습니다.

바로 Properties 창 Close 하지마시고

Project Facets 선택 -> Java 선택 -> 1.6 - 1.8로 변경 -> Runtimes 탭 클릭 -> Tomcat 체크 박스 체크 후

Apply and Close

또 기다림...

스프링은 설정이 반이라고 할 수 있는데요, 프레임워크를 쓰면 어쩔수 없이 설정부분이 많이 들어갑니다.

3.MyBatis 연결

자! 이제 DB 연결의 시작인데요 Java로 커넥션을 설정 할수도 있지만

저희는 바로 *MyBatis을 이용하여 Spring + *MyBatis를 사용합니다.

*MyBatis : 개발자가 하드코딩하는 걸 굉장히 줄여주는 아주 고마운 SQL 프레임워크 생산성 쑥쑥

설정

pom.xml 라이브러리 추가

(이제 감 잡으신 분들도 있겠지만 라이브러리 추가는 항상 pom.xml)

<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.2</version>
</dependency>

<dependency><groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.2.0</version>
</dependency>

<dependency> <groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${org.springframework-version}</version>
</dependency>

<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.4</version>
</dependency>

WEB-INF - spring - root-context.xml

 root-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">
	
<!-- mariaDB와 연결을 담당하는 dataSource --> 
<bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
<property name="driverClass" value="org.mariadb.jdbc.Driver"></property>
<property name="url" value="jdbc:mariadb://127.0.0.1:3306/데이터베이스이름"></property> 
<property name="username" value="root"></property> 
<property name="password" value="password"></property> 
</bean> 
 
 <!-- SqlSessionFactory --> 
 <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> 
 <property name="dataSource" ref="dataSource"></property> 
 <property name="configLocation" value="/WEB-INF/spring/mybatis/mybatis-config.xml"></property>
 </bean> 
 
 <!-- SqlSessionTemplate --> 
 <bean id="sqlSessoinTemplate" class="org.mybatis.spring.SqlSessionTemplate"> 
 <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg> 
 </bean>

		
</beans>

WEB-INF - spring - mybatis 폴더 생성 - mybatis-config.xml 파일 생성

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<typeAlias alias="board" type="com.company01.springEx01.logic.Board"/>
</typeAliases>

<mappers>
<mapper resource="mapper/board-Mapper.xml"/>
</mappers>
</configuration>

src/main/resources -> mapper 폴더 생성 -> board-Mapper.xml 생성

board-Mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.board-Mapper">

<select id="getBoardList" resultType="board">
select * from board;
</select>
</mapper>

4.MariaDB 만들기

MariaDB 접속 (HeidiSQL 이용)

새 DB 만들기

CREATE DATABASE toyblog;

새 Table 만들기

CREATE TABLE board (

id INT AUTO_INCREMENT PRIMARY KEY,
subject VARCHAR(64),
context VARCHAR(512),
attachments VARCHAR(64),
likes INT,
views INT,
create_time DATETIME,
update_time DATETIME
)

INSERT INTO board VALUES(1,'제목1','내용1','첨부없음',0,0,NOW(),NULL);

가짜 데이터도 하나 넣어주었습니다.

파일 제공

5.MyBatis를 이용한 DB 값 받아오기

src/main/java -> com.company01.springEx01 -> logic -> Board(VO). java 생성

Board.java 

public class Board { 

private int id; 
private String subject; 
private String context; 
private String attachments; 
private int likes; 
private int views; 
private Date create_time; 
private Date update_time;

//get and set ...

}

여기까지 만드시고

Source 탭 -> Generate Getters and Setters 클릭 후 Select All -> Generate 버튼 클릭

Source 탭 -> Generate toString().... 클릭

src/main/java -> com.company01.springEx01 -> service -> BoardService.java(인터페이스) 생성

import java.util.List;
import com.company01.springEx01.logic.Board;

public interface BoardService {
	List<Board> getBoardList();
}

주의 : BoardService class를 만드는게 아니고 interface를 만드는 겁니다. 

src/main/java -> com.company01.springEx01 -> service -> BoardServiceImpl.java 생성

BoardServiceImpl.java

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.company01.springEx01.dao.BoardDAO;
import com.company01.springEx01.logic.Board;

@Service
public class BoardServiceImpl implements BoardService{

	@Autowired
	BoardDAO boardDAO;

	public List<Board> getBoardList() {
		return boardDAO.getBoardList();
	}
	
}

src/main/java -> com.company01.springEx01 -> dao -> BoardDAO.java 생성

BoardDAO.java

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.company01.springEx01.logic.Board;

@Repository
public class BoardDAO {

	@Autowired
	public SqlSession sqlSession;
	
	public List<Board> getBoardList() {
		
		return sqlSession.selectList("getBoardList");
		
	}
}

src/main/java -> com.company01.springEx01 -> controller-> ViewController.java

ViewController.java 

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.company01.springEx01.logic.Board;
import com.company01.springEx01.service.BoardService;


@Controller
@RequestMapping("view/*")
public class ViewController {
	
	@Autowired
	BoardService boardService;
	
	@RequestMapping("view/dashboard")
	public ModelAndView dashboard() {
		List<Board> result = boardService.getBoardList(); 
		System.out.println(result);
		ModelAndView mav = new ModelAndView();
		
		return mav;
	}
	
}

결과

성공적으로 MyBatis를 이용한 DB 연결이 됐습니다.

얼추 세팅이 맞췄으니, 다음부턴 본격적으로 게시판 만들기에 돌입하겠습니다.

최종 Project Explorer

컴퓨터 사면 백신보다 Chrome를 먼저 설치하는 Google Chrome 신자가 쓰는 네이버 웨일(Naver Whale)

일주일 체험 리뷰 및 네이버 웨일 소개(Naver Whale) 시작합니다.

Whale 리뉴얼 2.0

소개

네이버 웨일? 정~말 생소하다. 네이버 개발자센터 돌아다니다가 우연히 알게되었다.

(지금 홍보하길래 최신꺼인줄 알았지만 무려 2017년부터 나온 것이다.)

일단 웨일이 무엇이냐하면, 브라우저(Browser)다 브라우저

크롬,파이어폭스,익스플로러,엣지 등.. 같은 인터넷 브라우저

무려 네이버가 만든.. 많은 기술을 접목시켰다는데 한번 본론으로 가보겠습니다.

그것도 *크로미움 기반으로 만든 브라우저랍니다.

한마디로 크롬이랑 같은 엔진을 사용한 것입니다.

*크로미움

크로미움이라는 오픈소스 프로젝트에서 만든 브라우저 이름이 바로 크로미움입니다.

구글에서 2008년 9월 시작한 프로젝트인 크로미움은 오픈소스 프로젝트 이기 때문에 구글 직원이 아닌 사람들도 참가할 수 있으며, 이 프로젝트를 통해 만들어진 소스코드에서 컴파일된 브라우저가 바로 크로미움인 것입니다.

크로미움의 소스 코드는 다양한 브라우저들의 기반 엔진이 됩니다.

크롬의 뼈대이죠

특징

크로미움 기반 브라우저

현재 유일한 국산 브라우저 (스X브라우저는 서비스를 종료했다)

호환성

환경 : Windows / macOS / Linux / iOS , android
지원 : Windows 7 이상 / OSX 10.9 이상

시작하기

소개 및 장점

웨일 다운로드 경로

파일을 받아 다운로드를 시작한 모습

벌써 기대를 주는 다운로드 창입니다. 되게 아기자기한 다운로드 모습

아직 고래를 보면 도커가 생각나지만 웨일이 바로 떠오르는 그날까지....화이팅

짠! 다운로드를 다 하고 네이버 웨일을 실행하면, 구X인가?라는 생각이 바로 들만큼 오마주를 한 것 같다.

하지만 그냥 오마주 하지 않았다. 바로 웨일의 핵심(?) 사이드바!! 

그리고 다운로드하자마자 크롬의 즐겨찾기를 가져오냐고 물어보는 웨일

정말 써보고 만든 티가 난다.

제가 쓰고 있는 티스토리 블로그도 사용자가 꾸밀 수 있게 해 놓았죠

요즘 대세는 사용자가 입맛대로 바꾸는 *UI가 대세인데요,

웨일도 창의 색깔, 기능의 위치, 위젯 형태, 사진 등을 사용자가 꾸밀 수 있게끔 해놓았습니다.

*UI : User Interface의 준말, 사용자가 보는 화면을 뜻함

보시면 화면은 JDK 9 Docs 문서인데요 옆에 사이드바를 이용해서 따로 창을 켜지 않고,

사이드바를 열여 파파고를 이용할 수 있습니다.

제가 생각하는 최고의 장점이죠, 메인화면+사이드바 이용

웨일 써 본 기능중 제~~ 일 맘에 듭니다. 

개발자 도구 역시 크로미움 출신이라 크롬과 똑같은 *UI를 제공합니다.

또 하나의 장점이죠, 간편한 네이버 확장 앱 제공

물론 크롬도 확장 앱을 가지고 있지만, 국산 브라우저다운 사용자 맞춤 UI를 제공합니다.

저전력 브라우징

놀랍도록 빠른 로딩 속도(라는데 일주일 써봤지만 체감은 못 느꼈습니다.)

빠르고 즉각적인 응답속도를 구현하는 ‘프로세스 가속화’ 등 관련 기술들을 중점적으로 개발

빠른 캡처를 제공하는 캡쳐 기능

브라우저 내에서 캡쳐 기능을 제공하기 때문에 바로바로 원하는 부분을 캡처할 수 있습니다.

단점

이클립스에서 web project 진행 할 때 설정을 웨일로 할 수 없다는 점.

네이버에서 만들었으니 당연하겠지만, 기본 검색이 네이버 검색이라는 점.

비교

메모리 점유율(%)

웨일 > 크롬

지원하는 기능

웨일 > 크롬

지원하는 기능이 많은 만큼 메모리 점유율이 높은 것은 당연지사

정리

어쩌다 보니 후기가 아니라 홍보 글이 된 거 같은데, 그만큼 장점이 많다.

사용하는데 익숙하지 않은 불편함이 조금 있지만 번역을 달고 사는 사람이기에

보조 창은 정말 쓸모가 있었고, 유용한 것 같다.

맨날 웨일을 쓰진 않겠지만 쇼핑,간단한 서핑 정도는 웨일에서 할꺼 같습니다.

다만, 기본 검색이 네이버 검색이라 도큐먼트 문서나 신 기술 공부는 크롬을 켜서 구글에 검색 할 것같습니다.

마지막으로..

후기 쓰는 김에 홍보 잠깐, 네이버 웨일 홈페이지에서 퍼왔습니다.

탑재 기능들 소개

파파고  < papago >

네이버가 모바일용으로 개발한 통역 앱이다. 현재 사용 가능한 언어는 한국어, 영어, 일본어, 중국어, 프랑스어, 스페인어의 6개 국어로, 총 30종 언어 쌍의 통·번역을 제공한다. iOS 및 안드로이드 OS, PC에서 이용 가능하다.

나만의 '웨일' 디자인하기

나만의 감성을 담아 웨일을 꾸며보세요.  새 탭 페이지부터 브라우저 스킨까지 내 취향에 맞게 브라우저를 설정할 수 있습니다.

배터리와 메모리 절약

'배터리 세이버' 기능과 '메모리 세이버' 기능은 나의 배터리와 메모리를 지켜줍니다.  웨일로 웹 브라우징을 하며 배터리는 더 길게, 메모리는 더 여유롭게 쓰세요.

이거 좋은거 같아요.

하나의 창에서 한눈에 *옴니태스킹

*옴니 태스킹< omnitasking > : '옴니(omni) : 모든 것 + 태스킹(tasking) : 작업(일)'의 합성어로 하나의 창에서 여러 가지 일을 동시에 하는 것을 말한다.

사이드바

사이드바에는 웹 서핑에 필요한 각종 도구들을 모았습니다. 도구를 꺼내서 쓰거나 밸리에 담아 둔 링크를 다시 읽을 때, 음악 플레이어가 필요할 때는 사이드바 버튼을 클릭하세요.

스페이스

두 개의 창을 왔다 갔다 하며 탐색해야 할 땐 스페이스를 여세요.  왼쪽 창의 링크를 누르면 오른쪽 창에서 확인할 수 있습니다.

모바일 창

모바일 창은 PC웹과 모바일 웹을 동시에 탐색할 수 있게 해 줍니다.  모바일 웹을 열고 싶을 땐 [설정] 메뉴에서 [모바일 창]을 클릭하세요.

​

다양한 인지 기술로 막힘없는 웹 브라우징

맥락을 이해하는 최첨단 번역 기술

이미지 속 텍스트까지 번역해주는 최첨단 번역 기능을 사용해보세요. 웨일에 탑재된 파파고의 번역 기술은 맥락까지 이해하여 외국어 페이지를 막힘 없이 사용할 수 있게 합니다.

안 써봤습니다. 하지만 믿습니다

귀로 들으며 즐기는 웹서핑 *TTS 기술

사람의 말소리처럼 편안하고 자연스럽게 본문을 읽어 주는 웨일의 음성 합성 (*TTS) 기술을 경험하세요.

*TTS: 지정한 문장을 음성으로 읽어준다. 목소리는 꽤나 괜찮다. 간격이 조금 부자연스러운 것만 빼면 좋은 TTS. 특히 선택한 문장의 언어를 자동 인지하여 언어에 맞는 TTS 엔진을 자동 적용시킨다. 영어(클라라)/일어(유리)/중국어(메이메이)는 네이버 번역 사이트에 들어가면 문장 읽어주는 TTS 엔진과 동일한 엔진인데, 한국어의 경우 번역 사이트에서 쓸 수 있는 음성인 미진/진호 대신 네이버 뉴스 음성 읽어주기 기능에 사용되는 엔진인 '규리'로 읽어준다.

목소리로 글을 쓸 수 있는 음성 인식 기술

웨일은 키보드 없이 말만으로도 글자를 입력할 수 있게 해주는 음성 인식 API를 지원합니다.

사람을 배려하는 스마트한 기능들

퀵 서치

바로 검색 결과를 확인하고 싶은 키워드는 드래그하세요.  간단한 검색 결과부터 번역까지 그 자리에서 바로 확인할 수 있습니다.

스마트 팝업

웨일의 스마트 팝업으로 팝업을 쉽게 관리하세요.  팝업을 열고 닫기 좋게 한 곳에서 모아줍니다.

사이트 곧장 가기

주소 창에 복잡한 사이트 주소를 힘겹게 입력하지 않아도, 사이트 이름만 입력하면 바로 이동할 수 있게 해 줍니다.

플러그인 호환 모드: ActiveX 호환 기능

LG전자-네이버, ‘웨일 브라우저 모바일 최적화 기술’ 공동 개발 MOU라는 기사가 뜰 만큼, 여러 방면에서 노력하고 있네요.

LG전자는 LG V50S 씽큐에 웨일 브라우저를 기본 탑재

-출처 네이버 웨일 홈페이지

Host '172.10.0.254' is not allowed to connect to this MySQL server

원인

DB를 외부에서 접속 시도시 나는 에러이다.

보안상 root 계정에 아무나 접근 할 수 없기 때문에 허용 할 IP를 지정해줘야 한다.

DB 접속 후 현재 설정 확인.

select Host,User,plugin,authentication_string FROM mysql.user;

모든 IP 허용

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '패스워드';

IP 대역대 허용

GRANT ALL PRIVILEGES ON *.* TO 'root'@'172.10.0.%' IDENTIFIED BY '패스워드';

특정 IP 허용

GRANT ALL PRIVILEGES ON *.* TO 'root'@'172.10.0.254' IDENTIFIED BY '패스워드';

IP 허용 후 원래 상태로 되돌리기

DELETE FROM mysql.user WHERE Host='%' AND User='아이디';
FLUSH PRIVILEGES;

이 설정을 했음에도 불구하고 접근 권한 거부가 뜬다면,

firewall(방화벽)를 확인 해보자. 3306 port를 허용해줘야 한다.

방화벽 포트 확인

firewall-cmd --list-all-zones

3306 포트 허용하기

firewall-cmd --permanent --zone=public --add-port=3306/tcp

프레임 워크(Framework)

개념

원하는 기능 구현에만 집중하여 빠르게 개발할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것

프로그램의 기본이 되는 뼈대라고 보면 된다.

뼈대? 뭔 뼈대? 이해가 잘 가지 않는다.

예를 들면 공룡제작 프레임워크를 다운받아서 써보자.

기본으로 공룡 뼈대가 제작돼있다.

-티라노사우루스 뼈대

-벨로키랍토르 뼈대

-스피노사우루스 뼈대

-알로사우루스 뼈대

그럼 우리가 티라노사우루스 뼈대(프레임워크)를 골라 제작(코딩)을 한다고 가정했을 때,

티라노의 형태가 이미 만들어져있으니 살을 어떻게 붙일까만 집중해서 코딩할 수 있겠죠

그리고

뼈대엔 팔이 2개 있는데 새로운 뼈를 만들어서 팔을 3개 만들 순 없다.

왜? 팔 2개라고 정의 해놨으니까요 "티라노사우르스 뼈대는 팔이 2개다." 라고 말이죠

하지만? 팔을 굵게 만들고, 꼬리는 짧게 다리는 길게(메소드길게(메서드) 만들순 있습니다.

사용 이유

만약 공룡 제작 프레임워크가 없다면

그 뼈대 자체를 만드는데만 한 세월이 걸리게 됩니다.

하지만 프레임워크를 이용한다면 더욱 빠르게 만들 수 있고,

팔 2개 다리 2개 꼬리 1개 이렇게 정해져있으니 표준을 정할 수 있습니다.

예를 들어

공룡 제작프레임워크 소스를 받는다면 "아 팔 2개 다리 2개 꼬리 1개이겠구나" 알 수 있습니다.

언어별 대표 프레임워크

Java - Spring

Python - Django

PHP - Laravel

JavaScript - React

GO - Revel

Ruby - Rails

라이브 러리(Library)

개념

필요한 기능을 미리 준비 해놓은 개념

굉장히 범위가 포괄적이다.

미리 작성된 코드, 서브루틴(함수), 클래스, 값, 자료형 

이 모두가 라이브러리에 속한다.

한마디로 재사용이 가능한 코드의 집합 이라고 보시면 됩니다.

예를 들면 위 예시처럼 공룡 제작 프레임워크를 쓰고 있다가

그냥 발톱이 아닌 강철 발톱을 쓰고 싶다면?

발톱은 팔 2개 다리 2개

총 4개나 들어간다.

그럼 라이브러리를 쓰지 않는다면 강철 발톱을 하나 만들어서

일일이 복사 붙여넣기 해야 한다.

매우 가독성이 떨어지며 유지보수도 굉장히 힘들다.

하지만 이미 만들어진 강철 발톱라이브러리가 있다면 그 라이브러리를 적용 시킴으로써

바로 강철 발톱을 장착 시킬 수 있다.

여기서 프레임워크의 강점이 또 나온다. 강철 발톱은 반드시 공룡 제작 프레임워크에만 사용 가능하다는 점.

(특정 프레임워크에 맞게 나온 라이브러리들이 많이 존재한다)

사용 이유

재사용이 필요한 기능으로 반복적인 코드 작성을 없앨 수 있다.

그러므로 개발이 훨씬 수월해진다.

대표 라이브러리

JavaScript - jQuery, Chart.js

Python - 아파치 Libcloud, Arrow,Behold

Java - JUnit, Jackson