(국비교육) 35 - project1 이어하기3 + 웹포트 설정 + 포트열기 + 상대 IP 가져오기 + 삭제하기 작업(CRUD)

■ 웹포트 설정 및 모듈 설정

 

 

8080은 웹테스트 포트 80은 진짜 웹포트

따라서 8080 -> 80 으로 변경

 

 

모듈 / 로 변경한 이유는 /pro 말고 / 만으로 열리게 처리하기 위해서이다.

 

 

다음과 같이 확인이 가능하다. 

 

■ 상대방 ip 가져오기 

 

 

상대방 ip 가져와본다.

192.168.0.0 처럼 표시되므로 String 으로 받는다. 

 

해더쪽을 읽어서 forwarded ip 뽑을 것이다.

 

 

만약 없거나 ip.length() == 0 거나 대소문자 상관없이 unknown 일때 

다른 헤더에서 IP 주소를 가져오기 위해 다음과 같은 순서로 확인하는 것이다.

 

"unknown".equalsIgnoreCase(ip) 와 ip.equlsIgnoreCase("unknown") 동일한 뜻이다. 

 

	public String getIp() {
		HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes()).getRequest();
		
		// 상대방 ip 가져오기
		String ip = null; // 192.168.0.0 -> HttpServletRequest 가 있어야 합니다.

		ip = request.getHeader("X-Forwarded-For"); // 헤더족을 읽어서 forwarded ip 뽑을 것이다.

		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("Proxy-Client-IP");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("WL-Proxy-Client-IP");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("HTTP_CLIENT_IP");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("HTTP_X_FORWARDED_FOR");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("X-Real-IP");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("X-RealIP");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("REMOTE_ADDR");
		}
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getRemoteAddr();
		}

		return ip;
	}

 

■ 포트 열어주기

 

 

80 포트를 통해 다른 사람이 볼 수 있도록 설정해본다.

Defender 방화벽으로 들어간다. 

 

 

고급 설정 클릭

 

 

남들이 들어와서 볼 예정이니까 인바운드 규칙 -> 새규칙 

 

 

포트 클릭

 

 

TCP, 특정 로컬 포트 80 으로 설정

 

 

연결허용 -> 다음

 

 

3개 그대로 선택 후 다음

 

 

이름 및 설명 적어주기

 

 

생성 확인 가능

 

■ IP 설정해주기

 

 

IP 설정을 위해 DTO 설정을 해준다.

getter setter 도 설정해준다. 

 

 

ip 세팅해준다. 

위에 ip 는 request 로 가져오기 때문에 위와 다르게 ip 만 설정해주면 된다. 

 

하이디 값 넣어준다. 

 

 

이제 맵퍼에서 찾을 수 있도록 bip 값도 넣어준다. 

 

 

하이디에 정상적으로 들어간 것 확인 가능하다.

 

 

출력을 위해 detail.jsp 에서 bip 출력구문 넣어준다.

 

 

다음과 같이 출력이 가능하다. 

 

■ ip 다른 표시로 출력되게 만들기 (하트 표시)

 

* 선생님 방법

 

. 이 없거나 null 이면 실행 안되게 설정하는 if 써준다.

indexOf() 메소드로 . 포함되어 있다면을 체크해준다. 

그리고 dto.getBip() 을 통해 ip 를 받아오고,

split 을 통해 해당 것을 배열에 넣어주고 배열을 변환해주고 다시 set 을 통해 넣어주고 조인 처리해준다.

 

*내 방법

 

 

만약 null 이 아니거나 . 을 포함하고 contains 를 사용하여 실행하게 한다.

일단 dto.getBip 을 통해 넣어주고 이를 . 으로 나눈다.

\\. 으로 한 이유는 . 을 인식하지 못할때도 있기 때문이다.

 

배열에 이를 넣어줘서 배열 값을 하트로 바꿔주고

이를 다시 join 을 통해 배열을 문자열로 바꿔준다.

 

마지막으로 이 값을 dto.setBip을 통해 넣어주면 우리가 원하는 하트가 ip 에 출력된다.

 

 

출력결과 

 

■ Util

 

 

상대방 ip 에 대한 기능을 Util 로 빼서 다른 곳에서도 import 해서 쓸 수 있도록 설정할 것이다. 

보드 컨트롤러에 있던 ip 내용을 잘라내고 Util 에 넣어준다. 

 

상단의 Component 는 Controller Service Repository 3가지를 제외한 그 외 일반객체를 나타낼 때 쓴다. 

 

https://baek-kim-dev.site/64

[카카오 면접] @Service,@Controller,@Component 차이

 

 

이제 Util 을 Autowired 로 연결시켜준다. 

 

 

이제 컨트롤러에서는 util 과 연결돼 util.getIp() 메소드를 쓸 수 있다. 

 

 

Util 로 이동돼도 다른 사람 ip 정상적으로 연동되는 것을 확인 가능하다. 

 

■ 게시판에서 명령문 통해서 변경 못하게 막기

 

 

해당 게시판 자체에서 일정 코드를 넣어서 변경되는 것을 막아주고자 한다.

<tr><br> 과 같은 HTML 태그를 임의의 사용자가 제목에 넣게 되면 게시판이 깨지게 된다. 

 

 

우선 dto에서 getBtitile 을 통해 값을 가져오고, 가져온 값을 변수로 저장한다.

replaceAll 을 통해 받는 < 기호를 &lt로 변경, > 표시를 하게 되면 &gt 로 변경하게 해주면 공격을 방지할 수 있다. 

 

그리고 이 값을 다시 dto 에 저장해주면 된다. 

 

 

 

다음과 같이 깨지지 않는 것을 확인할 수 있다. 

 

 

따라서 이를 util 에 메소드를 만들어서 기능을 넣어준다. 

 

 

Util 과 연결을 시킨다. 

 

 

보드 서비스에서 해당 기능을 불러서 사용해준다. 

 

 

ip 처리도 service 로 옮겨준다.

왜냐면 컨트롤러는 흐름 역할만 하고 로직은 서비스가 처리하기 때문이다. 

 

즉 먼저 title 에 < or > 공격이 있을 경우 이를 바꾸는 처리를 해주고,

얻어온 ip 도 다음에 저장해준다. 

 

그리고 이 값을 DAO 에 넘기는 것이다. 

 

 

컨트롤러에 있던 내용은 Util 로 연결됐으므로 삭제해준다.

 

■ 수정 삭제 기능 넣기

 

 

icon finder 에서 해당하는 이미지 다운받기

크기는 24 정도로 준다.

 

https://www.iconfinder.com/

7,600,000+ free and premium vector icons, illustrations and 3D illustrations

 

 

해당 이미지를 삽입해준다.

 

다음과 같이 토끼 이미지 밑에 넣어줄 수 있다. 

 

 

이모티콘 사이 간격 벌릴 수 있다. 

 

※ HTML 웹꾸미기 용어 

&nbsp : 여러 개의 공백을 나타내기 위해서 사용한다. 

 

 

onclick 함수를 만들어준다.

여기에 함수도 넣어준다. 

 

 

닫는 헤드 태그 위에 함수 기능 적어준다.

자바스크립트 변수 let 으로 변수 선언해준다. 

confirm 을 통해 알림창 뜨고 alert 통해서 참 거짓이 나온다.

 

 

if 를 통해 만약 참인 경우 삭제하게끔 처리해준다.

여기서 맵핑되지 않아 오류가 뜬다. 

따라서 보드 컨트롤러에서 맵핑처리해준다. 

 

 

@RequestParam 은 자동으로 int 타입으로 변환해준다. 

return "redirect:board" 를 통해 다시 보드로 돌아가게 해준다. 

 

 

"bno" 라는 이름으로 int 타입 bno 로 선언하겠다.

 

 

원래 게시글 하나만 삭제 원한다면 bno 삭제처리 해줘도 무방하다.

추후에는 사용자 정보도 함께 담아서 함께 삭제할 것이다.

따라서 boardService.delete(dto) 로 해준다. 

 

이제 서비스에 해당 메소드를 생성해준다. 

 

 

서비스에도 마찬가지로 boardDAO가 일하는 delete 메소드를 넣어준다.

해당하는 메소드도 DAO 에 생성해야 한다. 

 

 

sqlSession의 delete 메소드도 일하게 한다.

이에 대한 구문은 board-mapper 에서 설정해주면 된다.

 

 

보드 맵퍼에서 delete 이름의 파라미터 boardDTO 로 설정하고

해당하는 SQL 문을 작성해준다. 

 

#{bno}는 MyBatis에서 파라미터 값을 동적으로 바인딩하기 위한 플레이스홀더이다. 

 

 

required 필수값이 원래는 true 가 기본값인데 이를 false 로 해준다.

required 는 필수로 요구하는 값이다. 이를 0으로 설정한 것이다.

value = bno,  defaultValue = "0" 을 하면 0 을 기본값으로 설정하는 것이다. 

 

 

 

원래는 다음과 같이 delete 요구 받았을 때 400 오류가 뜬다. 

 

 

하지만 위와 같이 설정하면 기본 delete 만 입력해도 다시 보드로 돌아오게 된다. 

왜냐하면 기본 bno 를 0으로 받기 때문이다.