유랑하는 개발자

남는 노트북으로 혼자 스터디를 위한 웹 서버를 사용 했습니다.

당시 cpu 2코어에 램2기가 짜리 노트북으로 썼는데 오래된거 치곤

스터디용 웹 서버로는 문제없이 말끔히 잘 사용 했습니다.

그러다가 어느 순간 맛이 가더니 영영 돌아오지 못할 강을 건넜지요 ㅜㅜ

그때 태양광 발전기 사용하는 친구집에 설치 했었는데 더이상 신세지기 미안해서

새로운 웹 서버는 제가 사는집에 설치 하기로 했습니다.

그런데... 기존에 iptime을 사용 할때는 포트포워딩부터 DDNS설정까지

아주 쉽게 사용 했었는데 U+은 좀 많이 헤매게 되더라구요 ㅠㅠ

당연히 제 실력이 미달이라 많이 버벅됬지만요...ㅎㅎ

그래서 기록용으로 포스팅 합니다.

1. U+는 192.168.219.1 이 기본 게이트웨이 입니다. 해당 url로 접속 해주세요. 

(업체마다 219 부분 숫자가 다르다고 하더군요)

그리고 사용하시는 공유기를 클릭 합니다.

2. 패스워드는 따로 변경하지 않으셨다면 공유기에 붙어있는 웹 admin 암호 입니다. 

3. 그리고 상태정보 -> DHCP 할당 정보에 들어갑니다. 

4. 직접 사용할 웹 서버 물리적 주소(MAC)와 할당할 IP주소를 적어주세요.

그리고 우측 위의 추가 버튼을 누르신 후 맨 밑 설정 적용을 눌러줍니다.

(해당 웹 서버 사용처에서 ipconfig으로 확인해줍니다)

5. 그리고 메뉴바에서 네트워크 설정 -> NAT 설정으로 들어갑니다.

6. 서비스 포트를 적어줍니다. 보통 웹 서버로 사용 하신다면, 8080-8080으로 해주시고,

추가적으로 포트를 더 사용하신다면 원하시는 범위만큼 설정 해주세요.

프로토콜은 TCP/IP로 해주시고 내부 주소는 할당 받은 IP를 적어주시면 됩니다.

내부 포트는 거의 8080이고 혹시 다르시면 알맞게 적어주세요.

그리고 추가 후 저장을 해줍니다. 

7. 위에는 내부(192.168.219.XXX:8080)로 접속한것이고,

아래는 외부에서(XXX.XXX.XXX.XXX:8080)으로 접속한 것입니다.

외부에서 접속하는 방법은 해당 공유기의 외부IP를 참조 하시면 됩니다.

스프링 프로젝트에 MariaDB 와 Mybatis를 연동 후 테스트 까지 해보겠습니다.

테스트 진행은 Maria DB의 테이블 및 테스트 칼럼이 샘플이 존재해야 합니다.

* 저는 testdb 테이블에 age 란 int형 칼럼이 존재 합니다.

첫 번째로, pom.xml 에 아래 dependency를 복사 및 붙여넣기 하세요.

*Mysql 과 Maria DB의 차이 ↓

http://gabrielyj.tistory.com/119?category=732269

		
		
			org.mariadb.jdbc
			mariadb-java-client
			1.1.7
		

		
		
			org.mybatis
			mybatis
			3.3.1
		

		
		
			org.mybatis
			mybatis-spring
			1.2.4
		

		
		
			org.springframework
			spring-jdbc
			${org.springframework-version}
		

그 다음 WEB-INF폴더 -> spring폴더 -> root-context.xml 파일을 열어준뒤,

Namespace 메뉴를 클릭합니다.

(아래를 참고하고 aop, context, jdbc, mybatis-spring을 추가해주세요)

Namespaces에서 추가가 완료되면,

아래 내용을 root-context.xml 에 추가 해주세요.

url 의 jdbc:mysql:// 이후로는 사용하시는 IP와 포트 번호를 입력 해주시고,

username 과 password 는 각각 ID와 PW를 입력 해주시면 됩니다.

* 로컬 DB를 사용하시는분은 (jdbc:mysql://localhost:8080/DB이름) 을 입력 하시면 됩니다. 

* 혹시 localhost 인데 포트번호가 8080 아니면 해당되는 포트번호를 꼭 입력 하셔야 합니다.

그 다음 Java Resources 폴더-> src/main/resources 폴더 내부에

mappers 패키지 생성 후 그 안에 testMapper.xml 을 생성하고,

그 외부에 mybatis-config.xml 파일을 추가로 생성합니다.

testMapper.xml (DB 쿼리문을 작성하는 부분입니다.)

	
		SELECT age FROM testdb
	

mybatis-config.xml (이 부분은 테스트 하는 동안 수정할 필요 없습니다.입력만 잘해주세요.)

그 다음 추가로 Java Resources 폴더-> src/main/resources 폴더 내부에

mybatisUtil 이란 패키지를 생성하고,

인터페이스 TService 와 클래스 TServiceImpl를 생성해줍니다.

이 부분은 컨트롤러와 mapper 사이를 연결해주는 부분입니다.

SqlSession을 Inject 해주고,

namespace 에는 *Mapper.xml 내에서 사용하는 이름과 똑같아야 합니다.

인터페이스 TService (in mybatisUtil package)

package mybatisUtil;
public interface TService {
	public int test();
}

클래스 TServiceImpl (in mybatisUtil package)

package mybatisUtil;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Service;

@Service
public class TServiceImpl implements TService {
	
	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "my.mappers.testMapper";

	@Override
	public int test() {
		return sqlSession.selectOne(namespace + ".selectTest");
	}
}

이제 다시 root-context.xml 로 돌아가서 아까 입력 안한 2, 3번째 부분을 완성 합니다.

주의할 점은, mapperLocations 부분 부터

Mapper, Service, ServiceImpl 이 일치하지 않으면, 404에러 발생합니다.

404에러가 발생하면 꼭 *Mapper.xml 부터 절차적으로 확인 해보세요!

이렇게 DB연동 작업은 끝났습니다.

마지막으로 controller 에서 실행을 하면 됩니다.

Service 부분을 @Autowired 어노태이션을 입력 하여 TService 를 등록 해주시고,

ModelAndView형 메소드를 만들어 그 안에 test() 메소드를 실행 해줍니다.

*저는 바로 int 형으로 반환을 받고 뿌려주기 위해 int 형으로 선언 하였습니다.

그리고 addObject 메소드를 이용하여 mav 객체에 담아주고,

setViewName 메소드를 이용해 호출되는 페이지명도 담아줍니다.

* test.jsp 를 불러올것이기 때문에 test를 담았습니다.

package controller;

import javax.servlet.ServletException;

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 mybatisUtil.TService;

@Controller
public class TestController {
	
	@Autowired
	private TService tDAO;
	
	@RequestMapping(value = "/test.do")
	public ModelAndView portList(ModelAndView mav) throws ServletException {
		
		int test = tDAO.test();
		
		mav.addObject("test", test);
		mav.setViewName("test");
		return mav;
	}
}

마지막으로 아래를 참고하여 test.jsp 를 생성해줍니다.

그 다음 EL문을 이용하여 ${test}를 입력 합니다

* 위에서 addObject 할 때 이름을 'test'로 했기 때문에 ${test}

그리고 !!!

http://localhost:8080/프로젝트명/test.do   <- 접속하세요

이 부분이 말끔히 실행되려면, servlet-context.xml 부분의

preffix="/" suffix=".jsp" 입니다.

그래서 위에 setViewName 으로 넘어온 test가 /test.jsp 가 됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







	${test}

최종 결과 : 저는 DB에 입력된 age 값이 '10' 이였습니다.

Could not publish server configuration for Tomcat v8.5 Server at localhost.

Multiple Contexts have a path of 프로젝트명

해당 오류는 servelt.xml 에 등록된 프로젝트의 경로가 중복 설정되어 있을때 발생 합니다.

해결 방법 :

'Project Explorer' OR 'Navigation' 에서 위에처럼 사용 Server 의 web.xml 에 들어갑니다.

그러면 맨 밑에 프로젝트명과 경로가 입력 되어 있습니다.

보통 위 빨간색으로 표시된 path 부분이 중복 설정되어 있어 에러가 발생 하기 때문에,

해당 프로젝트명과 일치하는 경로명을 입력해 주시고 재 실행 하시면 됩니다.

*/PortfolioPage 와 /JunPage는 제가 사용하는 프로젝트명이므로,

 자신이 설정한 프로젝트명으로 입력 하셔야 합니다.

처음 스프링을 공부 했을때, 왜 home.jsp가 실행되지 않는지 이해를 못 했습니다.

근데 사실 아주 간단하지 않은 간단한 구조를 갖고 있었습니다.

home.jsp 에서 바로 실행을 하게 되면 아래와 같이 404 에러가 발생 합니다.

왜냐하면, WEB-INF는 보안의 이유때문에 직접 접근이 불가능 합니다.

해당 폴더에는 프로젝트의 환경 설정을 해주는 중요한 파일들이 존재하게 됩니다.

예를들어, DB 를 사용한다면 WEB-INF폴더에  저장된 DB의 ID, PW가

적나라게 드러나기 때문입니다.

그렇다면 어떻게 접근 해야 할까요?

스프링 프로젝트의 기본 home.jsp 작동 원리를 이해 하시려면,

밑의 프로젝트 구조를 알아야 합니다.

webapp 의 WEB-INF 폴더 안에는 web.xml 이란 파일이 존재합니다.

*web.xml 은 프로젝트의 환경 설정을 해주는 파일

프로젝트가 실행되면 web.xml 이 가장 먼저 실행되고, 그 다음 

DispatcherServlet이 해당 프로젝트로 들어오는 요청들을 낚아채고 핸들링 해줍니다.

그 낚아챈 요청들은 servlet-context.xml로 보내주게 됩니다.

그렇게 요청을 받은 servlet-context.xml 은

① : <annotation-driven /> 란 태그를 사용하여 @(어노태이션)을 사용할 수 있고,

그 어노태이션의 사용 위치는(패키지명:Home_Test)

② : <context:component-scan base-package="aaa.bbb.(패키지명)" />

해당 패키지명 내부의 클래스들입니다.(클래스명:HomeController.java)

@RequestMapping의 value가 "/" 인데 이것의 의미는 프로젝트명 이후에

아무런 주소없이 실행을 시키면 해당 메소드를 실행 시키라는 뜻입니다.

addAttribute는 model객체에 "serverTime"이란 이름으로 현재 시간을 담은것이고,

return "home"은 위의 servlet-context.xml에서 설정한

preffix와 suffix를 앞 뒤에 붙여준다는 뜻입니다.

즉!!! http://localhost:8080/Home_Test/ 이렇게 주소창에 실행을 시키면

1. web.xml 실행 후 servelt-context 가 요청 낚아챔

2. servlet-context에서 어노태이션의 사용 여부 및 위치를 확인 후 값 전달

* /Home_Test/ 라서 "/"요놈만 넘어가는 중입니다,

  ex) Home_Test/home.jsp 라면 home.jsp 가 넘어갑니다.

3. Homecontroller의 @Controller가 확인되며, mapping 값인 "/"인 home 메소드가 실행

* return 값 "home"은 다시 servlet-context.xml 로 넘어갑니다.

4. servlet-context.xml 이 return 값 'home'에 preffix와 suffix를 붙여 줌

* preffix(/WEB-INF/views) + home + suffix(.jsp) = /WEB-INF/views/home.jsp

5. home.jsp 가 실행됨

* 실제론 (http://localhost:8080/Home_Test/WEB-INF/views/home.jsp) 가 실행 됩니다.

Can not find the tag library descriptor for "http://  java.sun.com/jsp/jstl/core"

이런 에러가 발생한다면, 우선 pom.xml 로 가서 'javax.servlet' 부분을 확인 하세요

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

<version>1.2</version>

</dependency>

하지만 해당 부분이 별 문제가 없다면, Project를 clean 해보세요

* 상단 메뉴 -> Project -> Clean -> All projects or 해당 프로젝트 선택 후 'OK'

그래도 안 되신다면, 

Maven 저장 경로에서 pom.xml에 등록된 jstl의 jar파일이 있는지 확인 해주세요.

만약 없으면 Maven 업데이트를 해주면 자동으로 다시 설치 됩니다.

* 프로젝트 폴더 -> 우클릭 -> Maven -> Update Project

보통 pom.xml을 잘 못 만지거나, 아무런 이유 없이 발생 하더군요...

아무런 이유가 없다면 첫 번째 방법을 써보시고,

아니라면 두 번째 방법을 써보세요 :-)

java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException

에러는 pom.xml 이나 web.xml 잘 못 건드렸을떄, 또는 아무런 이유없이... 발생 됩니다.

(세개 모두 직접 겪어 봤습니다ㅠㅠ)

이 에러를 해결하기 위해서 이 방법들을 사용했습니다.

이 순서로 한 번 진행 해보세요

1. 프로젝트를 clean 해줍니다.

   * 상단 메뉴 -> 'Project' -> 'Clean' -> All projects or 해당 프로젝트 선택

2. Tomcat server를 Clean

   * Server 의 동작을 원하는 서버를 선택 후 우클릭 하시면 clean 메뉴가 있습니다.

3. 현재 사용중이 Tomcat 폴더의 servlet-api.jar을 사용중인 jdk lib에 붙여넣습니다.

   * 

4. Maven Repository의 javax servlet를 삭제 후 업데이트 합니다.

5. Maven Repository의 모든 폴더 삭제 후 업데이트 합니다. 

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

6. javax.servlet-api 버젼을 3.1.0 으로 설정

   * pom.xml 에서 해당 dependency  에서 설정 해주면 됩니다.

7. 톰캣 폴더를 통째로 삭제 후 재설치

저는 이 방법을 사용 했을때 다행이도 해결이 되었습니다.

다른 분들도 꼭 해결 하시길... 바랍니다 :-)

첫 번째 파일 : web.xml (WEB-INF폴더)

--  WEB-INF 폴더에 'config'란 폴더 생성 후 'presentation-layerbiz.xml' 파일 생성

--  서버 시작될 때, 해당 위치에 있는 context파일을 모조리 읽어들이는 것을 뜻합니다.

     이 경로 안에 파일이 오류나면 서버 실행시 404 에러가 발생합니다.

--  중간의 characterEncoding 은 한글 인코딩을 위해 사용합니다.

--  servlet-name. class, url-pattern 에 오타 없는지 꼭 확인 해야 합니다.

     이 부분은 컨트롤러를 위해 사용 됩니다.

	
 	
		ex(main.do or index.jsp)
		



	
		contextConfigLocation
		/WEB-INF/spring/root-context.xml
	
	
	
		org.springframework.web.context.ContextLoaderListener
	

	
	
		characterEncoding
		org.springframework.web.filter.CharacterEncodingFilter
		
			encoding
			UTF-8
		
	
	
		characterEncoding
		*.do
	


	
	
		action
		org.springframework.web.servlet.DispatcherServlet
		
			contextConfigLocation
			
			/WEB-INF/config/presentation-layerbiz.xml
		
	
		
	
		action
		*.do
	

두 번째 파일 : root-context.xml(WEB-INF -> spring 폴더)

--  DB를 연동 할 때 사용함. 중간중간 DB 및 서버 정보는 사용자에 맞게 입력해야합니다.

--  3 번째 단락의 component-scan은 Service 와 Implement 가 저장된 패키지명으로 해야됩니다.

세 번째 파일 : presentation-layerbix.xml

--  component-scan 의 base-package 부분은 controller 를 저장한 패키지 이름으로 해야합니다.

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan r />xmlns:context="http://www.springframework.org/schema/context" xsi:schemalocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		"http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
  
    
   
   
      
         
   

웹페이지 개발을 보다 동적으로 하기 위해 제이쿼리를 사용하는데

이때 문서 객체 구조 요소를 선택하기 위해 '선택자'를 이용합니다.

선택자와 사용법 입니다.

브라우저 객체(BOM)의 객체인 screen 객체 메소드에 이은,

location객체와 history 객체의 메소드 입니다.

location.href : URL을 설정 및 반환 합니다.

location.host : URL 호스트 이름과 포트 번호를 설정 및 반환합니다.

location.hostname : URL의 호스트 이름을 설정 및 반환합니다.

location.hash : URL의 해쉬값을 설정 및 반환합니다.

location.origin : URL의 프로토콜, 호스트이름, 포트번호를 반환합니다.

location.protocol : URL의 프로토콜을 설정 및 반환합니다.

location.port : URL의 포트 번호를 설정 및 반환합니다.

location.search : URL의 쿼리스트링을 설정 및 반환합니다.

location.reload() : 화면을 새로고침 합니다.(F5와 같은 기능)

history.length : 방문 목록 갯수를 표현합니다.

history.back() : 이전 페이지로 이동 합니다.

history.forward() : 존재하는 다음 페이지로 이동 합니다.

history.go() : 인덱스 값에 맞춰 페이지가 이동 합니다.

navigator.appCodeName : 브라우저 이름을 반환합니다.

navigator.appName : 브라우저 이름을 반환합니다.

navigator.appVersion : 브라우저의 버전 정보를 반환합니다.

navigator.cookieEnabled : 쿠키 사용 여부를 반환합니다.

navigator.geolocation : 유저 접속 위치의 Geolocation 객체를 반환합니다.

navigator.language : 브라우저의 사용 언어를 반환합니다.

navigator.onLine : 온라인 브라우저 인지 확인합니다.

navigator.platform : 운영체제 정보를 반환합니다.

navigator.product : 브라우저 엔진 이름을 반환합니다.

navigator.userAgent : 서버 정보를 반환합니다.

navigator.javaEnabled() : 자바 사용 여부를 확인 합니다.(boolean)

결과 값이 보이는 내용만 테스트 하였습니다.

	console.log(navigator.appCodeName);
	console.log(navigator.appName);
	console.log(navigator.appVersion);
	console.log(navigator.cookieEnabled);
	console.log(navigator.geolocation);
	console.log(navigator.language);
	console.log(navigator.onLine);
	console.log(navigator.platform);
	console.log(navigator.product);
	console.log(navigator.userAgent);
	console.log(navigator.javaEnabled());

실행 결과 :

자바스크립트의 배열을 추가,  삭제, 정렬 기능을 사용할 수 있는

배열 메소드를 코딩 하였습니다.

join('문자열') : 배열 객체 데이터를 문자열로 이어줍니다.

reverse() : 배열 객체 데이터의 정렬 순서를 역방향으로 해줍니다.

slice(index1, index2) : index1 ~ index2 까지의 구간을 잘라서 표현합니다.

sort() : 배열 객체 데이터를 오름차순으로 정렬합니다.

concat(배열) : 선택된 배열+'배열'을 하나의 배열로 연결 합니다.

pop() : 배열 객체 데이터의 마지막 데이터를 삭제합니다.

push() : 마지막 인덱스에 새로운 데이터를 추가 합니다.

shift() : 배열 객체 데이터의 맨 첫번째 데이터를 삭제 합니다.

unshift() : 첫번째 인덱스 앞에 새로운 데이터를 추가 합니다.

	var arr1 = ['A', 'B', 'C', 'D'];
	var arr2 = ['가', '나', '다', '라'];
	var arr3 = [1, 5, 3, 8, 2, 7];
	var arr4 = ['E', 'F', 'G', 'H'];
	var arr5 = ['a', 'b', 'c', 'd'];

	console.log(arr1.join(' & '));	// join('문자열')
	console.log(arr1.reverse());	// reverse()
	console.log(arr3.slice(0,3));	// slice(index1, index2)
	console.log(arr3.sort());		// sort()
	console.log(arr3.splice());		// splice()
	console.log(arr4.concat(arr5));	// concat(array)
	arr2.pop();		// pop()
	arr2.push('카카');	// push('문자열')
	arr2.shift();		// shift()
	arr2.unshift("가가"); // unshift('문자열')
	console.log(arr4.length);	

결과 :