메리

maven 스프링 프로젝트에 외부 라이브러리를 추가하려고 함.

1. lib폴더 아래에 외부에서 가져온 jar 파일을 위치시킴.

2. pom.xml 파일의 dependency 부분에 아래처럼 내용을 추가해준다.

<dependency>
	<groupId>barcodes</groupId> <!--이름-->
	<artifactId>barcodes</artifactId> <!--이름-->
	<version>7.2.2</version> <!--버전-->
	<scope>system</scope> <!--scope-->
    	<!--파일위치-->
	<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/barcodes-7.2.2.jar</systemPath> 
</dependency>

아니면 이렇게...

<dependency>
	<groupId>org.apache.tika</groupId>
	<artifactId>tika-core</artifactId>
	<version>2.8.0</version>
</dependency>

3. Eclipse의 경우 pom.xml 저장

프로젝트 우클릭 > Maven > Update Project 

Maven 의존성의 범위에 관해서는 아래 페이지를 참고하였음..

Dependency Scope

• compile
  아무 것도 지정되지 않은 경우 사용되는 기본 범위.
  모든 클래스 경로에서 사용가능함.
• provided
  런타임시에는 포함X, 컴파일 시점에만 포함됨. runtime시에 JDK나 컨테이너가 dependency를 제공할 것으로 간주하여 런타임시에는 classpath에 추가되지 않음.
• runtime
  컴파일에는 포함X, 런타임과 test 시에만 포함됨.
• test
  테스트 컴파일 및 실행 단계에만 포함
• system
  JAR의 위치를 명시해야함. 항상 사용가능하며 레포지토리가 아닌 외부에서 찾음
• import
  <dependencyManagement> 부분에서만 사용됨.     

필요한 내용은 다음과 같다.

1. post 메소드로 요청하는 경우 

헤더 생성 + uri 생성 + body부 데이터 생성 => RestTemplate 으로 url 요청하기

2. GET 메소드로 요청하는 경우

헤더 생성 + uri 생성(파라미터가 있는 경우 붙여준다) => RestTemplate으로 url 요청하기

//ResTemplate 생성
RestTemplate restTemplate = new RestTemplate();

//헤더 생성
HttpHeaders headers = new HttpHeaders();
headers.add("Accept", "*/*");
headers.add("Content-Type", "application/json;charset=UTF-8");

//url 생성
URI url = URI.create("http://localhost:8888/api/test");

//POST로 보내는 경우 : body에 실어보낼 json데이터 생성
JSONObject jsonReq = new JSONObject();
jsonReq.put("data1", "data1");
jsonReq.put("data2", "data2");
HttpEntity<String> entity = new HttpEntity<>(jsonReq.toString(), headers);
ResponseEntity<String> response = restTemplate.exchange(url, HttpMethod.POST, entity, String.class);

//GET으로 보내는 경우 : 쿼리파라미터는 url에 붙여 보내면 댐
RequestEntity<String> req = new RequestEntity<>(headers, HttpMethod.GET, url);
ResponseEntity<String> res = restTemplate.exchange(req, String.class);

JSON obejct는 아래 의존성을 사용하였음

org.json은 사용해봤는데 이건 또 첨 사용해봄..

		<dependency>
			<groupId>com.googlecode.json-simple</groupId>
			<artifactId>json-simple</artifactId>
			<version>1.1</version>
		</dependency>

URL 요청 시 응답 결과는 아래와 같음

<200,{"result":0,"data":[
{"category":"animal","type":"tiger","name":{"girl":"tigirl","boy":"tiboy"},count":"2},
{"category":"animal","type":"pig","name":{"girl":"pigirl","boy":"pigboy"},"count":2}
]

URL 요청 및 응답 파싱하기.

//요청할 URL의 헤더 생성
HttpHeaders headers = new HttpHeaders();
headers.add("Accept", "application/json");
headers.add("Content-Type", MediaType.APPLICATION_FORM_URLENCODED_VALUE + ";charset=UTF-8");

//요청할 URL 생성
URI Url = URI.create("https://testsite.co.kr/api");

//요청
RequestEntity<String> requestEntity = new RequestEntity<>(headers, HttpMethod.GET, Url);
RestTemplate restTemplate = new RestTemplate();
ResponseEntity<JSONObject> responseEntity = restTemplate.exchange(requestEntity, JSONObject.class);

//응답 파싱
JSONObject responseJSON = responseEntity.getBody();
//body에서 "data"부분을 JSON Array로 파싱
JSONArray responseArray = new JSONArray(){{ addAll((Collection)responseJSON.get("data"));}};

ObjectMapper objectMapper = new ObjectMapper();
List<JSONObject> dataList = new ArrayList<>();

for(Object obj  : responseArray){
	//JSONArray에서 꺼낸 각 JSON을 obj-> Map 으로 변환시켜 사용한다.
	Map<String,Object> tmpMap= (Map) obj;
	Map<String,Object> listMap = objectMapper.convertValue(tmpMap.getOrDefault("name",null),Map.class);

	if(listMap != null) {
		listMap.put("myList", tmpMap.get("type"));
		JSONObject resultObj = new JSONObject(){{ putAll(listMap);}};
	}
}

json-simple은 첨이라 사용법이 익숙해지질 않음

sidebar 요소의 position은 fixed

.sidebar{
    position : fixed;
}

스크롤 위치에 맞춰 해당 요소의 margin-top이나 margin-left 속성을 실시간으로 변경해주어 이동하는 것처럼 보이게 하는 원리임.

//가로스크롤 시에는 고정하고 세로스크롤시에는 움직이는 경우
$(function() {
  var marginTop = parseInt( $(".sidebar").css('margin-top') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-top", marginTop - $(this).scrollTop() );
  });
});

//세로스크롤 시에는 고정하고 기로스크롤시에는 움직이는 경우
$(function() {
  var marginLeft = parseInt( $(".sidebar").css('margin-left') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-left", marginLeft - $(this).scrollLeft() );
  });
});

참고

스크롤바 위치 관련 내용

세로 고정 가로 스크롤 내용

Run As > Maven install 하여 war 파일을 생성하려고 했는데

아래와 같은 에러가 떴다.

Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sample: Compilation failure

해결 방법 : 

Maven 버전이 안 맞아서 그렇다는 경우도 있었으나 나는 JRE 경로가 안 맞는 경우였다.

JRE 경로설정 : [Window] > [Preferences] > [Installed JREs]

기존에 설정되어 있던 경로를 Edit을 눌러 Java 폴더 밑의 jdk 안에 있는 것으로 선택해주었다.

Apply and Close 후 다시 Maven install 해주니 target폴더 밑에 war파일이 생겼다. ㅎㅎ 

project 디렉토리를 선택하고 import 하려는데 폴더 선택이 안 되는경우

이클립스에서 같은 이름의 프로젝트가 있기때문...

1. Window > Show View > Project Explorer 를 눌러 프로젝트 목록에 들어간다. 

2. 같은 이름의 프로젝트를 삭제해준다.

Eclipse에서 Maven 프로젝트를 import 했는데 

The method is undefined for the type... 

오류가 뜨면서 실행이 안 됨.... Project Explorer 에 빨간 엑스가 잔뜩... 

해본방법 1:

프로젝트 우클릭 > Build Path > Configure Build Path > Order and Export 에 체크 안 된것 체크해봄..

해본방법 2 : lombok 업데이트

lombok 다운로드 페이지 > Download 클릭 

다운받은 lombok.jar 를 클릭하면 installer가 뜬다. 

Installer에서는 lombok을 설치 혹은 업데이트 할 수 있는 IDE를 자동으로 찾아준다.

그러면 Install/Update 버튼을 눌러서 실행해준다. 

완료되면 Install successful이 뜬당. IDE를 재실행 해주었다. 

해본방법 3 : [Project] > [Clean]

해본방법 4 : JRE 경로를 재설정 해주었다. 방법은 아래글에 .  . . . 

내가 순서대로 동기처리하고 싶었던 코드

ajax1
code1
code2
ajax2
code3

위의 로직이 이처럼 순차적으로 처리되길 바랐음...

promise를 사용하여 아래와 같이 짜보았다.

//promise 생성 시 resolve, reject 콜백함수를 인자로 넘김.
//작업 성공 시 resolve를, 실패 시 reject를 호출하면 됨.
let func1 = new Promise((resolve,reject)=>{ 
	ajax1
	ajax1 성공 시 resolve(); 호출하고 code1
});

//promise 결과를 사용하기.
//promise.then은 콜백이 resolve()인 경우에,
//promise.catch는 reject()인 경우에 실행하게된다.
func1.then({
	code2
	ajax2
	ajax2 성공 시 code3
}).catch({})

아래는 사용한 코드 예시임.

let func1 = new Promise((resolve,reject)=>{ //new Promise() 메서드로 생성되면 대기(pending) 상태                           
	$.ajax({
		url: "/api/test/get1",
		type: "get",
		async : false, //동기처리방식. 응답 완료 후 다음 로직 실행
		data: $('#data').val(),
		success: function (param) {
			let data = param.data;
			console.log("code1");
			resolve(data); //성공 시 resolve 콜백으로 리턴 값을 보내면 이행(fulfilled)상태
		},
		error : function(){                      
			reject(); //이행실패시 reject 콜백.
		}
	});
});

func1.then(function(data){ //promise.then : promise의 resolve 를 받는다.
	console.log("code2");
	$.ajax({
		url: "/api/test/get2",
		type: "get",
		async : false,
		success: function (param) {
        	console.log("code3");
 		}
	});
}).catch({console.log("실패"!)}); //catch : promise의 reject 를 받는다.

 jQuery에서 $를 alias로 사용하지 않도록 하는 방법

//jquery의 alias변경
var $aa = jQuery.noConflict();

$aa.ajax({});

$aa('#test').html("test입니다");

다른 라이브러리나

다른 버전의 jquery와의 충돌을 피할 수 있다.

reverse proxy ?

- 외부에서 내부 서버가 제공하는 서비스에 접근할 경우, proxy server(nginx)를 통해서 들어오는 방식
- 클라이언트 -> 프록시 -> 서버

reverse proxy 왜 사용?

- 사용자 요청 분산 역할(로드밸런싱)
- 서버로 직접 접근하는 것을 막는다. (IP및 포트 숨김 가능) 

예) http://www.test.com/web1 접근 시 1.2.3.4:8080 으로,                                                                            http://www.test.com/web2 접근시 1.2.3.4:8081 로 연결해줄 수 있게 함

forward proxy는?

- 일반적인 프록시
- 클라이언트 -> 프록시 -> 서버 
- 정해진 사이트만 연결하게 설정하는 등 웹 사용 환경을 제한할수 있으므로 보안이 매우 중요한 기업 환경등에서 많이 사용함

NGINX에서 설정하기

설정파일 : /etc/nginx/sites-enabled/default 

파일을 열어보면 대략 이렇게 생겼다.

기본적인 설정은 아래와 같다.

location / { //경로 설정
     proxy_pass http://123.45.678.90:8080;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header HOST $http_host;
}

• proxy_pass
  기본 설정. 들어온 요청을 어디로 포워드 해줄건지 설정함.
  현재 서버에 / 로 시작하는 path로 접근하면, http://123.456.78.90:8080 으로 접근하게 됨.
• proxy_set_header
  프록시 서버에 특정 헤더를 전달하기 위한 설정
• X-Forwarded-For
  HTTP 프록시를 통해 웹 서버에 접속하는 클라이언트의 IP 주소를 식별하는 표준 헤더
  클라이언트와 서버 중간에서 트래픽이 프록시나 로드 밸런서를 거치면, 서버 접근 로그에는 프록시나 로드 밸런서의 IP 주소만을 담고 있다. 
  클라이언트의 원 IP 주소를 보기위해 X-Forwarded-For 요청 헤더가 사용된다.
  Apache는 ProxyPass를 사용할 경우 기본으로 X-Forwarded-For 헤더를 구성하지만 nginx는 직접 구성해줘야 한다.
• $proxy_add_x_forwarded_for
  $http_x_forwarded_for,$remote_addr 와 동일함
  클라이언트의 IP 주소를 담고있는 $remote_addr 를 X-Forwarded-For Header의 값으로 추가해 줌
• HOST $http_host;
  HTTP Request 의 Host 헤더값
  http 요청이 들어 왔을 시 호스트 명

location /web1 {
     proxy_pass http://1.2.3.4:8080;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header HOST $http_host;
}

location /web2 { 
     proxy_pass http://1.2.3.4:8081;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header HOST $http_host;
}