-
(국비교육) 29 - 3회차 시험 + 500번 오류 + Spring 다운로드 + maven 이용하기 + JSTL + Github 이용하기 + Github 토큰생성개발/국비교육 2023. 7. 11. 12:06
■ 500번 오류
* team.jsp
if (list != null) 이 없다면 어떻게 될까?
먼저 get 으로 돌게 되는데, get 으로 왔을 때 list 가 없어서 오류가 난다.
따라서 오류를 막기 위해 if 를 통해 값이 없을 경우 for 문 돌리지 말고,
do post 로 가서 있을때는 돌아 라는 의미이다.
■ Spring 이용해보기 (하단 사이트 링크)
projects -> spring tools 4 클릭
맨 하단 3버전 설치 문구에서 파란색 글자 클릭
4.21 window 버전으로 다운로드 받는다.
해당 파일 설치 확인 가능
안에 sts-bundle 을 드레그 해서 로컬 디스크 c 로 옮긴다.
sts-3.9.18.RELEASE 로 들어가서 STS 실행시켜 준다.
이름을 workspaceSpring 으로 간단하게 지정해주고 시작해준다.
그런데 화면에 다음과 같이 오류가 뜬다.
해당 오류는 이클립스가 켜져 있어서 그런 것으로 꺼주고 다시 켜주면 문제 없이 실행된다.
정상적으로 구동 확인
project -> Spring Legacy Project 하고 Next 클릭
오늘 날짜로 프로젝트 만들고 Spring MVC Project 클릭하고 Yes 버튼 클릭
해당 오류가 뜬다..ㅠㅠ
버전 문제인가.?
1.8 이상 17이하만 지원해서 생긴 문제이다.
이를 위해 오라클에서 11 버전으로 다운받도록 하자
오라클 홈페이지 -> Products -> Java 클릭
Java SE -> Download Java now 클릭
java Windows 해당 윈도우 버전으로 설치
설치 확인 가능!
※ 참고
open-jdk : 유료코드 제외한 것
oracle-jdk : 유료코드 有
시스템 설정 -> 고급설정 -> 변수값 jdk-11 로 버전 바꿔준다.
path 경로도 확인해야 하는데 이상이 없어서 그 부분은 넘어간다.
다시 STS 켜준다.
계속 뜨지 않게 체크해주고 Launch
spring legacy project 생성
spring MVC Project -> Next
입력해주고 Finish 클릭
java 파일 jsp 파일 확인 가능하다.
Manually define a new server 로 새로운 서버를 만들어준다.
새로운 서버 만들기 선택 후 9.0 으로 설정 후 next
해당 폴더 선택 후 finish
다시 물어보지 않기 클릭
다음과 같이 확인 가능하다.
Window -> Preferences
enc 입력 후 UTF-8 로 다 바꿔주기
프로젝트 -> Properties
Java Build Path -> Libraries -> JRE -> Edit
여기서 jdk-11 안뜨는 오류 발생한다.
이는 jdk-17 이 잡혀 있어서 그렇다.
따라서 로컬 디스크 c 에서 해당 파일 삭제 후 다시 켜준다.
빈공간 preferences
edit 눌러서 폰트 변경해준다.
나는 D2-coding 으로 변경했다.
build path 에서 해당 부분 Java-11 (jdk-11) 로 변경해준다.
pom.xml 에서 버전을 11로 변경해준다.
/ 요청 들어오면 아래가 동작한다.
여기서 하단에 @RequestMapping을 만들어준다.
home2 는 jsp 파일 이름이고, /home 받으면 home2 로 열어주라는 뜻이다.
이에 해당하는 home2 jsp 생성해준다.
Tomcat 서버로 열어준다.
마찬가지로 main jsp 파일도 만들어준다.
main.jsp 로 바로 열 수 없다. 404 오류가 뜬다.
컨트롤러로 지나서 와야 오류가 안뜬다.
왜냐하면 spring 자체에서 jsp 로 가는 경로를 숨겼기 때문이다.
Maven Dependencies 에서 버전 확인 가능하다.
현재 버전 3.1.1 버전 쓰고 있다.
해당 부분을 변경하면 버전을 바꿔줄 수 있다.
maven 형상관리 도구 들어간다.
Maven Repository: Search/Browse/Explore (mvnrepository.com)
Maria DB 클릭
가장 많이 쓰는 3.0.8 버전 클릭
복사한 내용 dependecies 아래에 넣어준다.
마리아 디비 들어간 것을 볼 수 있다.
즉 마리아 java client 를 사용할 수 있게 된다.
형상 관리 도구를 사용하면 편하다.
※ 참고
gradle 과 maven 프로젝트 빌드 도구(=형상관리 도구)이다.
해당 루트를 따라 들어가 mariadb 생성 확인 가능
3.0.7 로 버전 내려줄 수 있다.
사진처럼 3.0.7 생성되었다.
우린 다시 3.0.8 로 돌려준다.
jsp에서 값 보내기 위해서 servlet 썼듯이
값 보내기도 가능하다.
ModelAndView 라는 박스안에 값을 담아서 보낼 것이다.
mame 라는 이름으로 뒤에 홍길동 즉, 합당한 값으로 객체 보내는 것이다.
setAttribute 와 같다고 생각하면 편하다.
해당 값을 불러준다.
그러면 다음과 같이 화면이 출력된다.
* JSTL / EL 태그 / <% %> 태그
- EL 태그 : 값찍고 출력하고 표현하는 역할
내장객체 불러올 수 있다.
EX) ${mame }
- JSTL 태그 : 꺾새로 표현하지 않고 자바 표현식 사용 가능하다.
- <% %> : 서블릿 태그
선언은 <%@ 가 붙는다.
core 태그 앞글자 따서 c 로 prefix 넣어준다.
3번줄이 있기 때문에 JSTL 태그 사용 가능하다.
<c: JSTL 사용할 수 있습니다. 란 뜻이다.
forEach 저 안에 내용 반복된다는 뜻이다.
1에서부터 10까지 반복하고 변수명 i 로 쓸게요.
step=" "
해당 값을 더한 값이 출력된다.
출력된 웹페이지 소스코드를 보면 JSTL 에 대한 코드는 보이지 않고
출력문만 보이는 것을 확인할 수 있다.
* 에러해결
/WEB-INF/views/main.jsp (행: [15], 열: [2]) TLD 또는 태그 파일 내의 attribute 지시어에 의하면, 속성 [test]은(는) 어떤 표현식도 받아들이지 않습니다.
알고보니 위에 상단 url jsp 가 빠져서 오류가 생겼다.
이를 넣어주고 돌리니 해결되었다.
if 를 통해 만약 i == 3 이면 "삼입니다." 를 출력하게 설정 가능하다.
lt : 무엇보다 작다면 뜻
즉 3 보다 작다면 실행
less than (<)
gt : 무엇보다 크다면 뜻
즉 3 보다 크다면 실행
greater than (>)
le : 작거나 같다
3보다 작거나 같은 것
less-than or equals (<=)
ge : 크거나 같다
3보다 크거나 같다.
greater-than or equals (>=)
eq : 같다
3과 같다면
equals (=)
ne : 다르다
3과 다르다면 ! 와 같다
not equals (!=)
※ 모음
- lt : <
- gt : >
- ge : >=
-le : <=
- eq : =
- ne : !=
<when> <othewise> 쓰려면 choose 로 감싸줘야 한다.
<when> 에 해당하면 실행
그렇지 않으면 <otherwise> 실행
if else 와 같다고 생각하면 편하다.
set : 세팅하다
변수를 선언할 때 <c:set></c:set> 으로 한다.
변수명은 "k" value 는 케이이다.
k = 케이랑 같다.
출력은 EL 태그나 out 으로 가능하다.
/ 를 쓰면 선언과 동시에 닫아주는 것을 의미한다.
새로운 값으로 대체하는 방법도 있다.
set: 세팅하는 것
out: 출력하는 것
var : 변수
value : 값
out 을 통해 출력 가능하다.
${k } 를 통해 위에 세팅한 새로운 값 이 출력되는 것을 볼 수 있다.
※ 옆에 out 은 밑에 글씨가 있어 출력된 것으로 무시해도 됨.
remove var = " "
해당 변수를 삭제할 수 있다.
변수를 삭제해서 출력 안된다.
for 문을 통해 10 부터 100까지 list 로 출력해본다.
Integer 를 받는 List 타입 객체를 만들어주고 for 문을 통해 값을 넣어준다.
10, 20 으로 나오기 위해 i 값에 * 10 해주고 add 를 통해 넣어준다.
넣어준 값을 이제 add.Object를 통해 list 란 이름으로 list 보낸다.
HomeController 의 역할은 DB에서 값을 보내주는 용도이다.
main.jsp 는 출력하는 용도이다.
※ 참고
M = Model = DB 에서 오는 값 data
V = View = jsp 보여주는 값
C = Controller =흐름제어
지금 우리가 하는 작업은 M V 작업이다.
이를 출력해보면 화면과 같이 나온다.
이제 foreach 구문을 통해 출력해준다.
items=" " 만들어진 리스트 값을 가져오고 이를 변수 i 에 담아준다.
여기서 i 는 하나 하나 나오는 값을 말한다.
이를 출력하면 다음과 같이 화면을 볼 수 있다.
■ git hub 이용하기
git hub : 소스코드 관리해주는 곳이다.
새로운 Repositories 생성하기 위해서는 초록색 New 클릭
Public 으로 클릭해서 공개 비공개 설정 가능
해당 주소 복사
github 에 올릴 프로젝트 선택 후 Team -> Share Project
create 클릭
기본 이름으로 그대로 설정
finish 클릭
물음표 아직 연결 안된 것을 의미한다.
Team -> Commit 클릭
옮길 파일 ++ 클릭
아래로 내려준 후 내가 남길 멘트 간단하게 작성한다.
Commit and Push 는 하드디스크 저장하면서 github 에 보내기
Commit 은 그냥 보내기
해당 URL 부분에 아까 복사한 주소를 넣으면 자동으로 채워진다.
다만 토큰을 생성하지 않았다면 패스워드는 채워지지 않는다.
password 사용을 위해 토큰을 생성해보자.
github 상단 아이콘 클릭
톱니바퀴 Settings 클릭
<> Developer settings 클릭
Personal access tokens 에서 클래식 토큰 클릭
옆쪽에 토큰 생성하기에서 클래식 클릭
내가 지정하고 싶은 이름과 일자를 지정하고
간단하게 아래 권한만 정하고 생성해준다.
그러면 패스워드 입력 가능하다.
이제 다시 Spring 으로 돌아와서 Preview 클릭
해당 화면이 나오면 github 에 정상적으로 올라간 것을 확인할 수 있다.
참고로 내 드라이브에서는 다음과 같은 곳에서 코드 확인 가능하다.
코드 보는 방법은 보고 싶은 프로젝트 오른쪽 버튼
Properties -> Resource -> Location 부분에 화살표 부분 클릭하면 바로 보여준다.
* 3회차 시험
[문항1] 순서가 있는 리스트를 만들고자 할 때 사용하는 태그는? (10점)
ol
[문항2] 아래 코드를 이용해서 배경색을 바꾸려고 한다. ①자리에 적당한 css 표기법은? (10점) .spotlight
[문항3] 자바스크립트 메서드 중 확인/취소 버튼을 만들고 확인을 클릭하면 true를 반환하고, 취소를 클릭하면 false를 반환하는 window 객체의 하위 메서드는? (10점) confirm()
[문항4] 다음중 CSS에서 마진을 아래와 같이 정의하려 한다
margin : 10 px 20px 30px 40px
4개의 방향으로 Setting 하였을때의 마진 순서 를 기술하시요 (10점)위, 오른쪽, 아래, 왼쪽
[문항5] 텍스트 필드에 입력된 내용이 숫자인지 아닌지를 체크해서 숫자가 아니면 true를 리턴하는 함수는? (10점)
isNaN()
[문항6] 다음 그림안에 괄호에 들어갈 항목을 가-나-다-라 순으로 맞게 기술하시요
(10점)가) margin 나) border 다) padding 라) tag
[문항7] 아래 Java Script의 수행결과는 ? (20점)
<script type="text/javascript">
var a = "Men's Generation";
var d = a.substring(3,9);
document.write(d);
< / script>=> 's Gen
[문항8] id 누락되었는지를 체크하는 유효성 검사를 하려고 한다. id가 누락되면 id를 입력해 달라는 alert 메세지를 출력하는
java Script 코드를 작성하시오. (20점)function chk() {
let id = document.getElementsByName("id")[0];
if (id.value == "") {
alert("id를 입력해주세요.");
return false;
}
}> 리턴값은 빼줘도 상관없다.
※ MVC 패턴이란?
M = Model = DB 에서 오는 값 data
V = View = jsp 보여주는 값
C = Controller =흐름제어
사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤, 이 3가지로 구성되면
맡은바에만 집중을 할 수 있게 되어 효율적이다.
사용자가 controller를 조작하면 controller는 model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 됩니다. 저건 하나의 로직을 설명하기 위해 만든 그림이고 사실 MVC 패턴의 구조는
Controller가 view에도 영향을 미치는(화살표를 보자) 부분이 있어야 합니다.
https://m.blog.naver.com/jhc9639/220967034588
'개발 > 국비교육' 카테고리의 다른 글
(국비교육) 31 - Spring 프로젝트 처음부터 데이터 베이스 연결까지 (0) 2023.07.13 (국비교육) 30 - Spring + MVC패턴 + 전자정부 페이징 + Spring jar 세팅 + MyBatis (0) 2023.07.12 (국비교육) 28 - 팀뽑기 웹버전 만들기 (0) 2023.07.10 (국비교육) 27 - 게시판 꾸미기 3 + summernote + 위지위그 + 자바스크립트 (0) 2023.07.07 (국비교육) 26 - 게시판 꾸미기 2 + executeUpdate + 자바스크립트 + 호이스팅 + var + let (0) 2023.07.06