728x90
click과 bind는 똑같다
test1 , 2, 3을 누르면
alert창에 내용이 뜬다
add 버튼을 누르면 빨간 글자가 추가된다

위에 test X 글자는 클릭하면 alert창이 뜨는데

나중에 append로 붙은 빨간 글자는 alert이 안뜬다
비동적

이게 게시판을 만들때 append로 글들을 밑에 달면 
새로생긴 글에 클릭이 안먹히는 이유다
   
bind는 이벤트를 걸고
unbind는 이벤트를 해제한다

이게 동적처리..

여기3번의 find는 오타가 아니라 li를 찾으라는거
  근데 이제부터 bind는 안쓴다

bind가 on으로 바꼈다
사진이 동적처리를 한것이다

이렇게 하면 추가된 것들에도
이벤트가 적용된다

append로 붙는 것들에
on으로 이벤트를 적용해야 한다

  click만 쓰면 비동적이라서 on을 붙인거랑은 다른 기능이다


728x90
728x90

게시판

데이터가 들어갈수도 있고 안들어갈 수도 있다.
근데 데이터가없으면 defaultValue로 1을 하겠다.
  난 글목록을 들어가는 컨트롤러에서 처음에 글을 불러왔는데 그럼 ajax를 안써서 데이터가 문자열로 받게된다.

그래서 페이지를 들어가는 컨트롤러 1개 
스크립트로 페이지를 들어가면 자동으로 ajax를 통해 컨트롤러에서 글목록을 불러오게 1개

이렇게 하면 글이 json객체로 들어오게된다.
이게 파란색줄 처럼 가면 디스패처를 거쳐 컨트롤러에서 찾기 떄문에 값이 안나온다

그래서 빨간색줄 부분을 만들어서 디스패처로 못가게 막아야지 원하는대로 찾아서 간다.
   
 
 
글목록 불러온거에 
세션값 더 불러오기
 

 

세션을 보내고 값을 확인해보면 

세션이 들어온느걸 볼 수 있다.
근데 a태그를 이렇게 걸면
보이는 모든 a태그에 alert가 걸린다.
(메뉴에도)
class 속성을 추가해서 구별해준다
(id를 너무 많이해서 class로 해봤다)
f12를 눌러서 확인하면

사진처럼 class속성이 들어간다
   
이게 그림으로 보면 이렇게 생겼는데

똑같은 id가 5개나 뜬다.
class는 seq니까 다르고
이렇게하면 each문을 돌면서 subject를 전부다 선택하게 되서
5개가 다 선택된다
. = 클래스속성

사진처럼 클래스 속성을 선택함으로서 원하는 1개를 선택할 수 있게 된다.

. (클래스속성중에) +items.seq(를 찾아라)
 
다른방법  
.click를 하면 비동기방식이라서 클릭하는 1개만 반응 한다.

on을 쓰면 (반드시 부모로부터 출발해야 한다)
부모.on(이벤트, 자식, 함수( ){ };

subjectA의 부모가 와야하는데 얘의 부모는 boardListTable

이방법은 동기방식
부모아래 자식을 클릭하면 

 

boardView

alert으로 확인해보면 boardDTO:{~}이렇게 나온다

그래서 접근할려면 data.boardDTO.subject 이렇게 해야 한다.,
   
   

 

글클릭하기


 
   
   
   

값 받아온거 json으로 만들어주는 방법

ModelAndView의 jsonView를 이용하면된다.

 

 


조회수

HttpServletResponse 파라미터에 추가하고
이클립스에서 가져온다
이클립스에서는 쿠키를 구별할수 없어서
다 가져와서 반복문 돌려서 필요한걸 꺼냈는데 
스프링에서는

파라미터에쓴
 @CookieValue(value="memHit", required=false) Cookie cookie
덕분에 필요한 memID쿠키만 얻어올수있다

그래서 for문 안돌리고
바로 필요한거를 쓸 수이싿.
이거 두개 위치가 다르면 조획수 방지가 안먹힌다
   

페이징처리

여기서한다
 
 
 
@Component 가 있어야

@Autowired걸고 끌고올 수 있다
 root에 생성해줘야이
컴포넌트가 먹힌다
총글수 가져와서
boardPaging계산한 값을 컨트롤로 리턴
이제 boardPaging 을 들고
boardList.jsp안에 스크립트에 있는 success안으로들어간다.
이렇게 간다

저 succecss 의 data에는
pg, list. memId, boardPaging값이 들어간다
이걸 하나씩 빼서 쓰면 되는거다
확인
이 안에다가 페이징 처리를 하면된다
그럼 저기로 간다

왜 html로 빼오지? = 태그까지 끌어와서
보드 페이징에 적어둔 span태그까지 끌고나오기때무에
text말고 html로 빼와ㅑㅇ 한다
728x90
728x90

프로젝트 생성

Spring Legacy Project로 생성

처음생성하면 파일을 다운로드 받게 되는데 오래걸린다.
앞으로 사용할 url를 설정하는 곳이다
이렇게 할거다
생성완료
pom.xml로 들어가서 
설정을 바꿔준다

프로젝트를 생성하면 기본으로 1.6버전인데 내꺼 버전이랑 맞춘다
 
그리고 메이븐으로 업데이트
 
그리고 프로젝트를 실행하면 
기본적인게 있어서 나온다
지금 날짜와 시간이 나온다.
로그창을 보면 뭐를 거쳐서? 어딜거쳐서? 나온게 보인다.
서버를 더블클릭해서 사진의 순서대로 들어가보면
3번이 우리가 쓸 url이고 4번은 프로젝트명이다

만약url를 바꾸고 싶으면 여기서 바꿀 수 있다.
   
자동으로 만들어지는 이런게 있다
 
   
web.xml에 들어가본다


웹과 관계 없는것들은 ContextLoaderListener의 제어를 받는데 
root-context.xml로 바꿔놨다.

웹과 관련된 것들을 제어하는 DispatcherServlet
을 servlet-context.xml에서 제어한다.
 
한글처리만 따로 넣어준다.
pom.xml에 가면 여러가지 dependency가 있는데 그냥 냅둔다.

그리고 내리다보면 test가 있는데 이제 필요한 dependency는 test위에 써준다.(그냥)

 


이미지 파일은 index와 같은 위치에 있다.
그래서 이미지 파일 경로에 ..이 아니라
.을 써야한다.

.은 같은 파일
..은 상위파일
그리고 servlet-context.xml에서 
이미지파일을 안읽고 디스패처로 넘어가는걸 방지하기위해 
resources를 추가해준다.
   
   
   
   
   

로그인페이지

   
스크립트에서 onclick사용한걸
제이쿼리쓸거니깐 id속성을 넣어준다
디스패처로 못넘어가게 막아주고
 제이쿼리를 사용하기 위해서 id속성 잡고
div넣어주고
member.js파일

회원가입 버튼에 넣어준 id속성을 누르면

경고하는 div띄우고

id랑 pwd값들고 ajax로 넘긴다
데이터 타입은
성공 실패에 따라 성공했습니다/실패했습니다를 보내야 하니깐
js파일에서 ajax로 값 넘보냈으니까
컨트롤러에서 받아서 데이터 처리 해야한다

값이 id랑 pwd 2개가 넘어오는데 mapper에는 한개의 값만 넣을 수 있다
그래서 map으로 묶어준다.(다른데서 해도된다)

로그인에 세션값이 필요한데 컨트롤러에서 파라미터에 세션을 추가해줘야 한다.
 
이렇게 작성
  중간에 memberDTO도 생성
lombok도 필요하니까 디펜던시 pom.xml에 붙이기
 
  DB접속할려면 커넥션풀이랑 마이바티스랑 다 피룡하니까
또 디펜던시 가져오기

 

네임스페이스 쓴 파일 다른데서 가져오기
커넥션풀? DB에 접속에 필요한거 bean생성한거 가져오기
마이바티스 사용할 매퍼 xml생성
DB에 연동해야 하니까 sqlsession 임포트
DB연결

 


로그아웃

 
 
   
   
   

String이니깐
리턴은 주소값
이렇게 하면 section부분에 창이 뜬다
컨트롤러부분에 writeForm에 .jsp 붙여야 한다.

model?
displayt가 디스패쳐에 걸려서?
값이 없으니까 계속 찾아들어가서 무한루프가 생긴다
${display} != '' 값이 없다
${not empty display} 빈값이 없다?
 
중복확인  
문자열 타입
제이슨타입
우편번호  
이렇게 해서 바로 창을 띄우고 싶으면
servlet-context에서
17번줄 때문에 디스패처를 안거치고 페이지를 띄운다
아니면 컨트롤러에 하든가
serialize를 하면
form에 있는 name속성을 메모장에 적은 문자열 형태로
넘어간다
컨트롤러에서 리졸버를 찾아가는데 사진처럼 찾아가면 안된다.
다른 리졸버를 찾아가야한다
녹색이 찾아가게 해주는 리졸버가 빨간색이다
그래서 넣어주는데 beans를 넣어줘야 한다.
왜?? 
<c:처럼 태그명이라는데....
하고 mapper까지 갔다오기
 
이렇게 값이 돌아온다.
받아온 값을 for문을 돌려서 출력해야 하는데

값을 받아온건 data
그안에 1개의 값을 가지고 있는건 list라서
data.list 로 써야 한다
 
 
 
 
 
 
 
address = adress.replace(/null/g, '');
정규식
우편번호에 a태그 걸기

 
a태그는 td의 자식으로 들어간다
 
 
 
 

실행해서 클릭하면

여러개의 a태그 중에서 내가 클릭하는 하나

객체가 나온다
 
지금 this에(서울강남구~ )부분에 있는데
그 앞에 있는 우편번호를 선택해 와야 하는데
그걸 선택하는 방법은?
 
이렇게 하면 우편변호를 가져다가 우편번호에 넣을 수 있다.
 
   

boardMapper를 등록핳혀면 springconfiguration에 들어가서 알려야 한다

 
를 써준다

게시판에는 세션이 필요한데
1. 컨트롤에서 세션을 생성해서 보내줘도 되고
2. boardServiceImpl에서 세션을 필드로 잡고 오토와이어로 생성해도 된다.

세션을 받아오면 Object로 받아야한다.

728x90

728x90

JdbcTemplate()

 

queryForObject : 오로지 1개의 레코드만 가져온다
queryForList : 1개 이상의 레코드들을 가져온다

Object queryForObject(String sql, Object parameter, Object result)
queryForObject( sql문, new BeanPropertyRowMapper<DTO>(DTO.class), result )
- DB로부터 1개의 레코드를 가져와 가바 객체에 저장한다
- 오직 한 개의 레코드만 반환되는 여부를 검사한다, 하나 이상의 레코드가 반환 되는 경우 예외처리된다.
- 값이 없으면 null반환
- 하지만 이 함수를 사용할때는 Exception을 잘 파악하고 사용해야한다.일반적으로는 찾고자하는 값이 없을 경우 null을 return할 것이라 생각할 것이다. 하지만 위 함수는 record를 못찾으면 EmptyResultDataAccessException을 발생시킨다.

new BeanPropertyRowMapper<DTO>(DTO.class)
-쿼리문을 통해 가져오는 결과값들에 해당하는 속성들과 매칭되는 변수를 가진 DTO에 설정해준다
-생성자를 통해서 설정을 하기 때문에 필요한 변수들 이외에 다른 변수들이 여러개가 함께 있어도 구분하여 사용하면 되므로 다른 변수들이 DTO에 같이 있어도 무관하다
자바 파일에 DB연결시 사용하는 예시
값이 없을시 예외처리를 해야하는데 하지 않으면 에러가 난다.
사용 결과

 

queryForList()
- DB로부터 1개 이상의 레코드를 가져와 자바 객체의 List를 만드는데 사용한다.

 


Mybatis

typeAlias쓰면 mapper파일에서 sql문 할때 type이랑result생략가능하지 않나?

https://blog.naver.com/thgus5570/221118953503

 

typeAliases 사용방법

XML Mapper를 이용하는 데 있어 매번 parameterType이나 resultType을 패키지까지 포함된 클래스명을...

blog.naver.com

 

sqlSessionFactory 는 내용이 바뀌지 않고 계속 똑같이 사용됨

이렇게 계속 중복되게 쓰지말고 줄이자
스프링의 xml파일에서 bean생성을 통해 자바에서 중복으로 사용되던 코드를 줄일 수 있다

커밋까지 자동으로 해주는 트렌젝션까지 해서 
중복되는 코드를 줄일 수 있다.

https://blog.naver.com/adioson/221382367739
이클립스에서 마이바티스를 사용할 때 xml에 db연결을 위한 커넥션풀과 
sql문장을 쓰는 매퍼파일,
타입알리아스가 있었다.

매퍼파일은 여러개가 있어도 되지만 커넥션풀이 있는 xml파일은 1개만 있어도 된다.


스프링에서 빈설정은 전부 스프링이 한다
이 부분에는 sql세션이 있는 매퍼가 필요
xml에 SqlSession, Transaction, userDAOMybatis를 
빈으로 생성했기 때문에
자바 클래스에서 SqlSession생성가능
그리고 mapper에 sql문을써준다

아래에 있는 UserDAOMybatis클래스에서 
xml에 써있는 커넥션 풀과 sqlSession을 통해 DB를 연결한다

저게
sql생성, sql문, 뭐 가져오고 3~5줄되는걸 줄인거다.
그리고 mybatis-config.xml 파일에서 매퍼파일을 사용한다는걸 알린다

applicationContext.xml의 SqlSession에 mybatis-config.xml를 읽어오라는코드를 적어놨다.
applicationContext.xml에
<tx~ >라고 트렌젝션 어노테이션을 사용한다는 말을 했기 때문에 

UserDAOMybatis 클래스에 트렌젝션 어노테이션을 사용해서 자동으로 commit하고 close까지 한다
 
매퍼는 따로 빼도 되고 1번
 
스프링에 줘도 된다  2번
 
오라클 컬럼명과 UserDTO의 필드명이 다를때 
resultMap을 사용해서 강제 매핑하고

parameterType이 아니라 resultMap을 사용한다.
왼쪽의 밑줄친 3줄이 스프링을 사용하면서 오른쪽의 
private SqlSession sqlSession 한줄로 바뀌고

아랫줄을 보면 DB연결, sql문, commit, close하는걸 한줄로 바꿔준다.
   

 

conf파일 이용 -> xml에 한거 자바파일로 옮기기(다운그레이드?)

이거 먼저 xml에 있는거 옮기기

아이디명이 메소드명으로 넘어온다

DB연결에 사용하는데 사용하는 DataSource는 여러가지 종류가 있지만 그 중에 많이 사용하는 BasicDataSource를 이용한다

BasicDataSource는 Apache에서 제공하는 클래스이다.


출처:https://babtingdev.tistory.com/323
sqlSessionFactory를 가져온다

getObject의 리턴타입이 팩토리이다
???? 왜 SqlSessionFactoryBean 안하고 SqlSessionFactory 쓰지?
https://mybatis.org/spring/ko/getting-started.html

리소스를 선택해야 한다  왜?
자원이 있어야 해서??

스프링 프레임워크에는 CLASS_PATH에 저장된 리소스 파일을 쉽게 가져올 수 있도록 해주는 ClassPathResource클래스를 제공한다

ClassPathResource는 스프링 프레임워크가 제공하는 클래스로, 리소스에 대한 파일 이름, File 객체, URL, URI 등 리소스와 관련된 정보를 제공한다

new ClassPathResource에 적은 주소를 자원으로 삼아서 
setConfigLocation를 만들었다

????

그리고 데이터 소스도 추가한다.
????!?!?!
 

자바파일에 작성하는법 공부하기

UserInsertService
빈 만들어주기

만드는 김에 UserDTO랑 userDAOMybatis도 만들어줌


   

 

스프링 웹

 

--

컨트롤러가 여러개 있으면 
requestMapping을 사용한다.

handler가 @controller가 적혀있는 클래스를 찾아서
requestMapping을 통해 같은 걸 매핑해준다.
이클립스에선 request에 값을 싣어서 보내줬는데

jsp에선 modelAndView에 싣어서 보내준다



파란별로 되어있는건 스프링이 자동으로 만들어주고

직접 만들거는 초록색으로 칠한거 2개뿐이다
   
 
서블릿의 이름에 따라 많이 영향을 받는다
   
 핸들러를 이용할려면 자바 파일에 컨트롤러를 써줘야 한다

핸들러는 스프링이 자동으로 만들어준다
 
@Controller가 여러개 있으면
@RequestMapping를 통해서 사용자가 원하는걸 찾아낸다.

get이 기본방식

hello라는 주소를 치면 스프링이 알아서 부른다
내가  url값에 주소를 hello처럼 친다
그럼 get방식으로 되어있으면
스프링이 알아서 '메소드명()' 메소드를 불러낸다.

사용자가 직접 이름을 맘대로 지을 수 있다.
빨간색이 겹치는건 그 클래스안에서 부른 메소드이기 때문에 에러가 안나는데

주소값(이름)인 파란색이 겹치면 에러가 난다

빨간색과 파란색을 똑같이 할 필요는 없다
그냥 알아보기 쉽게 똑같이 한다
 
뷰를 띄우면 internalResourceViewResolver가 설정한 확장자 파일로 열어준다는 코드이다

내부적으로 setter로 받기 때문에 property로 객체를 만든다

(class에 있는 단어 internalResourceViewResolver를 클릭하고 f3을 누르면 상세 설명이 나오고 그 안에  setter로 받는다는 내용이 있다)
 
 
 
   
   
   

 

728x90
728x90

페이지 이동

jsp는 파일을 만들면 9개의 내장객체를 만든다.

여기서는 각jsp로 만든 페이지들을 이동하는 방법중에 sendRedirectforward를 이용하는 것을 할 것이다.

 


send~는 각각의 페이지의 rwquest와 response의 정보가 다르고 공유되지 않아서
aa.jsp에서 apple를 사과라 칭하고 bb.jsp에서 불러내면 
bb.jsp에선 aa에서 일어난 일을 모르기 때문에 null값이 나온다.
(앞의 페이지와 뒤의 페이지의 정보가 다른데)

forward는 앞의 페이지와 뒤의 페이지의 정보가 같다

네모는 데이터?가 공유하는 공간인데 저렇게 연결이 되면 bb의 request와 response는 사라지고
aa의 request와 response로 공유되서 사용된다.

그리고 aa에서 apple를 사과라고 하면 bb에서도 apple를 사과라고 인식할수 있다.
데이터가 공유된다는 이야기이다.

 


위 두개의 request는 다른 request이지만

아래의 의 request는 같은 request이다.

 

 


근데 12번줄은 이제 안쓰는 기술이다.

대신 9번 10번을 사용한다.

728x90
728x90

다음 API

 회원가입에 필요한 주소를 찾는 방법중 내가 생각하기에 가장 간단한 방법은 다음 api를 이용하는것이다.

http://postcode.map.daum.net/guide

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

이 사이트에 들어가면 우편번호검색에 필요한 코드를 다운받을 수 있다.

먼저 회원가입에 필요한 폼을 html로 만들고 그 모양에 맞는 api를 다운받으면 된다.

먼저 내가 만든 회원가입 폼이다
이클립스에서 만들었다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>

</head>
<body>
 <form name="writeForm" method="post" action="http://localhost:8080/memberServlet/WriteServlet"> <!-- 비밀번호 들어가 있으니 POST 방식 사용  -->
 <h2>회원가입</h2>
 <hr>
 <table border="1" cellpadding="2" >
  <tr>
  	<td align="center" width="80">이름</td>
   	<td><input type="text" name="name" id="name" size="20" placeholder="이름입력">
   	<div id="nameDiv" style="border:1px red solid; color:red; font-size:8pt; font-weight:bold;"></div>
   	<!-- div 반응형에서 많이 사용 -->
   	</td>
   
  </tr>
  <tr>
    <td align="center">아이디</td>
   	<td><input type="text" name="id" id="id" size="20" placeholder="아이디입력">
   	<div id="idDiv" style="color:red; font-size:8pt; font-weight:bold;"></div>
   	</td>
   	
  </tr>
  <tr>
    <td align="center">비밀번호</td>
   	<td><input type="text" name="pwd" size="30"></td>
  </tr>
  <tr>
    <td align="center">재확인</td>
   	<td><input type="text" name="rePwd" size="30"></td>
  </tr>
  <tr>
	<td align="center">성별</td>
	<td><input type="radio" name="gender" value="0" checked>남
	<input type="radio" name="gender" value="1">여</td>
  </tr>
  <tr>
	<td align="center">이메일</td>
	<td>
		<input type="text" name="email1" size="15"> 
		@ 
		<input type="email" list="email2" name="email2" placeholder="직접입력">
		<datalist id="email2">
			<option value = "gmail.com">
			<option value = "naver.com">
			<option value = "daum.net">
		</datalist>
	</td>
  </tr>
  <tr>
  	<td align="center">핸드폰</td>
	<td>
	 <select name="tel1" style="width:60px;"> 
	  <option value="010">010</option>
	  <option value="011">011</option> 
	  <option value="017">017</option>
	 </select> 
	 -
	 <input type="text" name="tel2" size="5">
	  -
	 <input type="text" name="tel3" size="5">
	</td>
  </tr>
  <tr>
	<td align="center">주소</td> <!-- onclick은 무조건 javascript와 연결. 굳이 javascript 안 적어줘도 됨 -->
	<td><input type="text" id="postcode" name="zipcode" size="5" readonly>
	<input type="button" value="우편번호검색" onclick="checkPost()"><br>
	<input type="text" id="address" name="addr1" size="50" placeholder="주소" readonly><br>
	<input type="text" id="detailAddress" name="addr2" size="50" placeholder="상세주소"></td>
  </tr>
  <tr>
  	<td colspan="2" align="center">
   	<input type="button" value="회원가입" onclick="javascript:checkWrite()">
	<input type="reset" value="다시작성">
	</td>
  </tr>
 </table>
 </form>
 <script defer src="../js/member.js"> </script>
 <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"> 
 //js파일 하나 판 거 알려줘야 함 ↑
 //<script type="text/javascript"
 //내 파일 기준으로 .. <상위 파일
 </script>
</body>
</html>





 

모양은 이렇다

내가만든 주소창의 모양과 다음에서 제공하는 모양과 비슷한 api를 받으면된다.

이 사진에 있는 예제코드를 보면

<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    function sample6_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    document.getElementById("sample6_extraAddress").value = extraAddr;
                
                } else {
                    document.getElementById("sample6_extraAddress").value = '';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample6_postcode').value = data.zonecode;
                document.getElementById("sample6_address").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("sample6_detailAddress").focus();
            }
        }).open();
    }
</script>

예제코드를 보니 주소입력을 하는 칸도 포함이 되어 있었다. 본인이 만든 회원가입 html에 맞게 합쳐주면 된다.

그리고 스크립트 부분도 넣어주면되는데 나는 js파일을 따로 만들어 스크립트 부분을 모아놨다.

이렇게 스크립트 부분만 떼어내서 js파일에 넣어주고

회원가입 폼에는

이렇게 입력해서 경로?를 알려준다. 저 부분을 쓰지 않는다면 writeForm은 스크립트부분이 어디 있는지 알수 가 없다.

그리고 이제 DB에 회원을 저장하기 위해 테이블을 만들어주는데 주소부분은 다음에서 받은 코드와 같은 변수명으로 만들어준다.

그리고 홈페이지를 실행해서 우편번호찾기를 누르면

이렇게 다음의 우편번호 서비스를 이용할 수 있게된다.



 

wdev를 이용하는 방법

먼저 우편번호, 주소를 입력할 DB 테이블을 만든다.

create table newzipcode (
zipcode varchar2(7),        --우편번호
sido varchar2(20),           --시도
sigungu varchar2(30),      --시군구
yubmyundong varchar2(20), --읍면동
ri varchar2(20),               --리
roadname varchar2(100),  --도로명
buildingname varchar2(100) --빌딩명
);


우편번호 API를 이용하는 방법은 여러가지가 있지만 지금은 이 사이트의 api를 이용해본다.

http://www.wdev.co.kr/zip/data.asp

 

도로명주소 우편번호

우편번호 자료(개발자용) 가장 최근 자료를 다운로드하여 사용하시면 됩니다. (이전 자료는 참고용, 필요한 경우만 받으세요) 최근자료 10개가 기본으로 나옵니다. 전체 자료를 보시려면 이곳을

www.wdev.co.kr

홈페이지에 들어가 사진에 있는 것 처럼 all이라고 써있는걸 받으면 된다.

 

파일을 받았으면 압축을 풀어준다.

그 안에 텍스트 파일이 있는데 한국의 모든 주소가 적혀 있다. 이 안에 있는 데이터를 DB에 저장해서 DAO클래스를 이용해 사용할 것이다.

먼저 텍스트 파일을 엑셀에서 모든 파일 타입으로 연다. (모든파일로 안바꿔주면 파일이 안보인다.)

아래 사진처럼 해주고 마침을 누르면 시간이 좀 걸려서 생겨난다.

그다음은 그냥 마침하고 끝낸다.

파일이 생성되고 나면 roadcode부분은 필요없으니깐 삭제해준다

 

그리고 저장은 아래 사진처럼 이름을 바꾸고 파일형식은 csv로 바꿔서 저장해준다

 

다음은 ctl파일을 작성할 건데 메모장을 켜서 아래의 글을 붙여넣고

load data
infile 'D:/jave_ee/lib/newzipcode.csv'
insert into table newzipcode
fields terminated by ","
trailing nullcols
(zipcode,
sido,
sigungu,
yubmyundong,
ri,
roadname,
buildingname)

파일 이름은 newzipcode.ctl로 작성하고
파일 형식은 모든파일
경로는 C:\app\bitcamp\product\18.0.0\dbhomeXE\bin\newzipcode.ctl에 해준다.

 

그다음은 sqldeveloper에 들어가서 임포트 해주면 된다.

사진처럼 들어가서 데이터 임포트를 해준다.

 

728x90
728x90

톰캣을 깔고 이클립스를 깔고 JSP를 실행해볼려는데 Run을 하니까 저런 오류가 뜬다.

다행히 https://blog.naver.com/stiff_soul/221750623998

 

이클립스 tomcat 에러 - Starting Tomcat v9.0 Server at localhost' has encountered a problem.

The server cannot be started because one or more of the ports are invalid. Open the server editor ...

blog.naver.com

이 블로그에 자세하게 정리가 되어 있었다.

톰켓에서 이런 오류가 뜬다면 포트 번호에 문제가 있을 것이라고 한다.

Show View > Other 에서 Server을 누르면 아래에 서버탭이 생긴다.

여기에 뜬 거를 더블클릭하자

노란 동그라미 친 부분이 -으로 되어있을 것이다. 톰캣을 설치할때 써있던 포트번호를 입력하고 
ctrl + s 를 눌러 저장하고 실행하면 

정상적으로 작동한다.

728x90

+ Recent posts