(국비교육) 45 - 7회차 시험문제 + project1 이어하기12 (회원가입 중복체크 + 비동기vs동기 + JSON )

* 시험문제 

 

[문항1]  새 테이블을 만들 때 사용하는 sql 명령어는? 1번

1) create table

2) drop table

3) delete

4) truncate

5) limit

 

[문항2]  테이블을 삭제할 때 사용하는 sql 명령어는? 2번

1) insert

2) drop table

3) update

4) select

5) where

 

[문항3]  테이블을 수정할 때 사용하는 sql 명령어는? 3번

1) limit

2) order by

3) alter table

4) group by

5) having

 

[문항4]  테이블의 각 레코드를 구분하게 해주는 컬럼을 가리키는 용어는? 4번

1) not null

2) default

3) null

4) key

5) join

 

[문항5]  MySQL의 자료형 중 정수형을 나타내는 키워드는? 5번

 

1) varchar

2) datetime

3) null

4) min

5) int

 

[문항6]  MySQL의 자료형 중 문자열을 나타내는 키워드는? 1번

1) varchar

2) min

3) max

4) limit

5) default

 

[문항7]  MySQL의 자료형 중 날짜와 시간을 표현하는 키워드는? 2번

1) select

2) datetime

3) update

4) delete

5) insert

 

[문항8]  MySQL의 컬럼 제약사항 중 NULL을 허용하지 않는 키워드는? 3번

1) varchar

2) int

3) not null

4) double

5) text

 

[문항9]  MySQL의 컬럼 제약사항 중 중복을 허용하지 않는 키워드는? 4번

1) default

2) now

3) not null

4) unique

5) sysdate

 

[문항10]  MySQL의 컬럼 제약사항 중 기본값을 지정해 주는 키워드는? 5번

1) string

2) min

3) max

4) count

5) default

 

타입, 넥스트 : 자바스크립트로 바꿔준다음에 실행 바로실행x

바닐라 : 순수 자바 스크립

 

■ 회원가입 중복 체크하기

 

 

중복검사 버튼 클릭했을 때 아이디 값 출력되도록 콘솔에 넣어본다.

리턴 false 는 submit 으로 보내지 않기 위해서다. 

 

 

아이디 공백이거나 5글자 미만인 경우 메세지 뜨게 설정 가능하다. 

 

 

다음과 같이 css 효과 줄 수 있다. 

 

 

css 효과를 붙여서 한 번에 줄 수 있다. 

 

 

* 비동기통신(일방적)

- 일방적으로 주거나 받기, 요청과 응답 순서 보장되지 x

ex) 롤 화면 전체 바뀌지 않고 공격하기, 댓글 달기

- 데이터를 바뀌는 일부만 변경해서 속도가 빠르다.

- 적은 데이터 소모

- 대표적 비동기 통신으로 AJAX 가 있다. 

* 동기통신

- 턴이 넘어가는 것(주고받기), 요청과 응답 순서 보장 o

ex)바둑, 폼 전달  

 

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-%EB%B9%84%EB%8F%99%EA%B8%B0Async%ED%86%B5%EC%8B%A0-%EB%8F%99%EA%B8%B0Sync%ED%86%B5%EC%8B%A0

🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리

 

 

비동기방식으로 불러본다.

형식은 다음과 같다.

 

 

우리는 아직 데이터 연결을 하지 않아 다음과 같이 실패시 결과값이 나온다. 

 

 

해당 값을 찍으면 전달받은 파라미터 값이 출력된다. 

 

 

responsebody 는 바디에 결과값 1만 전달한다.

따라서 성공결과값 1 이라는 결과를 출력한다. 

 

 

if 조건으로 id 가 dj 와 gansin 인 경우에만 1이고 나머지는 0 이다.

 

https://cheershennah.tistory.com/179

[Spring] @RequestBody / @ResponseBody 어노테이션 이란?

 

이제 서비스가 일하게 해줄 것이다.

 

 

DAO 도 일하게 만들어준다.

 

 

SQL 도 일하게 해준다.

 

sql 문장 적어준다. 

 

 

없는값은 0, 있는 값은 1 이 뜬다. 

 

 

타입 맞춰주기 위해 result+"" string 타입으로 만들어준다.

그리고 실제로 구동해보면 정상적으로 연결된 것을 확인할 수 있다. 

 

 

등록된 아이디, 없는 아이디 css 효과 줄 수 있다.  

 

 

아이디창에 효과를 줄 수도 있다. 

 

 

오류 출력을 위해 잠깐 통신을 끊기 위해 url 을 checkID2 로 설정해준다.

오류 발생 시 다음과 같이 출력된다. 

 

■ JSON (java script object notation)

 

 

json 형식은 다음과 같다. 

 

 

이제 되돌려오는 타입도 json {result : 0 } 형태로 받을 것이다. 

 

 

return  타입  다음과 같이 받아줄 것이다.

 

 

그러나 다음과 같이 쓰면 오류가 뜬다. 

 

 

json 이 들어가야 해당 부분이 나온다.

따라서 json 을 maven 에서 링크 복사 후 붙여넣어준다.

 

<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20230227</version>
</dependency>

 

json 객체 만들어주고 json에 result 값을 넣어준다.

그리고 그 값을 return 해준다. 

 

string 타입이기 때문에 return 도 맞춰줘야 해서 json.toString() 으로 바꿔준다. 

 

 

success에서는 담아온 data 를 의미한다.

여기 변수는 위에 data 와는 다르며 명칭이 data 인 것이다.

변수명이 abc 혹은 그 외에 것이 되어도 상관이 없다.

왜냐하면 말 그대로 작업을 마친 데이터를 가진 변수명이기 때문이다.

 

이 데이터에서 담은 값을 뽑는것은 data.result 이다.

즉 여기서는 0과 1 이 나오게 된다.

 

https://www.json.org/json-ko.html

JSON

 

■ 게시판 2 만들기

 

 

이전 보드 게시판이랑 동일한 css 적용할 것으로 불러넣어주고,

jquery 사용을 위해서 script 넣어준다.

script 에서 function 을 통해 table 에 append 를 통해 값을 붙여넣어준다.

 

 

다음과 같이 화면 출력된다. 

 

 

게시판 게시글 list 안에 넣어주고 알림창에 넣어주면 다음과 같다.

const 는 변하지 않는 값을 말한다. 

 

 

for 문으로  안에 값 추가해준다. 

+ 연결해서 출력가능하게 만들어준다. 

 

 

보드 내용을 가져오는 비동기식 ajax 를 작성해준다. 

 

* 에러해결

 

나의 경우 $.ajax 를 하지 않아 오류가 떴다 

누락한 . 을 넣으니 정상적으로 실행되었다.

 

 

 

LoginController 에 있던 responsebody 를 RestController 로 분리해준다. 

 

 

restController 은 responsebody 를 전체에 적용해주는 기능을 한다. 

 

 

연결도 2개 써줘야 연결된다.

그러나 우리는 boardList2 를 login 과 연결하기로 했다. 

왜냐하면 분리한 checkID가 login 과 연결했었기 때문에 그냥 해당 서비스와 연결했다. 

 

 

이제 boardList2 url 을 get 방식으로 맵핑한다. 

보드서비스가 일한 것을 list 형식의 list 변수에 넣어준다. 

 

 

서비스에도 리턴타입으로 dao 메소드를 일한 값을 받는다.

 

 

DAO에도 sql 문 작성해준다. 

여러개 리스트 받을 예정이니까 selectList 로 받는다. 

 

 

sql 문 작성해준다. boardview 0번째에서부터 10개 나오도록 설정해준다.

0은 처음시작점, 10은 갯수이다.  

 

 

이제 다음과 같이 연결된 것을 확인할 수 있다. 

 

 

https://mangkyu.tistory.com/49

[Spring] @Controller와 @RestController 차이