열심히 끝까지
디바이스 융합 자바(Java) day26 - 웹개발,tomcat(톰캣)설치 및 자바연동, 웹 기본기(title, body,글씨체,사이띄우기 등,...) 본문
디바이스 융합 자바(Java) day26 - 웹개발,tomcat(톰캣)설치 및 자바연동, 웹 기본기(title, body,글씨체,사이띄우기 등,...)
노유림 2022. 7. 18. 15:59오늘의 진도
>>웹개발
>>영어 신문 만들기
국어
영어
신문(기사)
주제
>> 웹 개발을 하려면 고려해야할 사항
- 사용자가 어플리케이션을 이용할 때 어떤 것을 좋아할 지 아는 것
- 어플리케이션 경험
- 로직으로 풀어서 설명 가능
- 코드로 작성(코딩)
> 요즘 뜨는 언어, 기술, ...
- 유행
+++우테크(토,일 영상 2개)x2+++
-----------------인트로-----------------
프론트쪽에 취업하는 것이 아니기 때문에
HTML + CSS + 퍼블리셔 공부는 기본에 기본만 나감
<이전 수업>
- for, forEach / while
-- for, forEach
: 반복횟수를 알고 있을 때 사용
ex )
package class01;
import java.util.ArrayList;
import java.util.Iterator;
public class Test01 {
public static void main(String[] args) {
// for, forEach / while
int[] data = new int[3];
data[0] = 10;
data[1] = 20;
data[2] = 30;
System.out.println(data);
ArrayList<Integer> data2 = new ArrayList<Integer>();
data2.add(10);
data2.add(20);
data2.add(30);
System.out.println(data2);
for(int i = 0; i < data.length; i++) {
System.out.println(data[i]);
}
for(int i = 0; i < data2.size(); i++) {
System.out.println(data2.get(i));
}
for(int v : data/*data2도 가능*/) { // itr(이터레이터), rs(Result set)
System.out.println(v);
}
// 이터레이터
// 두개의 메서드 존재
Iterator<Integer> itr = data2.iterator();
while(itr.hasNext()) { // 메서드 시그니쳐 꼭 확인할 것(hasNext()는 boolean값 존재)
System.out.println(itr.next());
// 존재한다면 다음 값 보여줄 것
}
}
}
- MVC
※ MVC 로직 팁
로직별로 짜면 이 부분이 붙을 확률 多
M : 데이터의 형태(자료형, 개수,...)
DB와의 연결 -> JDBC
CRUD 구현 됬는지 확인
V : 사용자(유저, 브라우저) 편의성 고려(UI/UX)
유효성 검사(1차적 : 자료형(타입), 기본적인 범위(황당한 범위))
ex )
1~100까지 학생부
0이하, 100초과 xxx
if, 50번 전학을 갔는데 50번 검색?
>> 컨트롤러가 로직을 넘겨주면? 검사 하기
만약 안 주면? controller 시키기
C : Model -- View 연결 역할
로그(로깅 기법) - 많이 찍어서 view한테 가는 데이터가 올바른지,
모델에게 가는 데이터가 유효한지(유효성 검사)
ㄴ> 추후 view쪽으로 건내줄 수 있음
-> V가 아님!
-> 로그 지울 때, 주석으로 지울 것
++++++++++++++++++++++++++++++++++++++++++
- 코딩할 때 유의사항
※ console에 의존하는 경우가 많음.
1 로직 당 1 로그 << 로그를 찍어보는 것이 좋음(사전에 어떤 로그가 나올 지 예상해야 함)
>> 스스로 예상한 로그와 같은 지 확인할 것
-> 디버깅표 그릴 것
※ 예외 발생 시...
1) 예외 발생한 라인
2) 이유
3) 해결방법 구글링
4) 포스팅
※ 주석 생활화
※ 메서드 사용할 때에 메서드 시그니쳐 확인 필수!!!(자료형 정보 맞출 것)
※ 자료형, 개수, 메서드 형태(오버로딩, 오버라이딩)
>> 기본적으로 지킬 것
~> 지키면 실수하는 확률이 줄어들 것
[모르는 것이 있는 걸 아는데 검색할 방법을 모른다...]
>> 용어, 상황에 대한 이해가 있으면?
> 검색하기 편하다.
>> 웹의 기본 기초 지식
- 웹
: 요청(클라이언트가 하는 것)과 응답이 일어나는 장소
- 클라이언트
: 사용자, User, 브라우저, 고객
: 서버에게 요청을 함
- 웹 브라우저
chrome기준으로..
Java로 작성
: 응답해주는 페이지를 보여주는 V 공간
(이때, 페이지는 HTML 문서 <!DOCTYPE HTML>)
console -> GUI
구조 : HTML
스타일 : CSS
동작 : Java Script(자바 스크립트)
>> 자바랑 관계가 없음(이름에만 자바 작성)
- 서버
: (클라이언트가 수행한) 요청에 대한 응답을 수행
: 요청받은 서비스(사용자가 이용한)를 응답
>> preferences
>> GENERAL >> WEB BROWSER >> CHROME(맨 위에 두번째꺼도 선택)
URL(페이지를 저장해 놓은 공간)
: 요청 정보
ex ) https://comic.naver.com/webtoon/list?titleId=774862
: 요청에 대한 페이지 위치 정보
프로토콜(protocol)
: 약속, 통신 규약
- http : hypertext transfer protocol
>> 요청한 사람, 일반 문서(웹페이지)일반 문서라 보안이 약했음
>> 탈취해서 보면 내용을 보는 것이 가능
- https : hypertext transfer protocol secure socket
>> SSL(secure socket layer)
: 웹 페이지 텍스트 문서 자원을 암호화 계층을 추가하여 보안 강화
-> 공개키
IP와 도메인
- IP(P : PK 고유번호)
- IP 주소란?
: 네트워크 상에서 인터넷에 접속하는 컴퓨터를 구분하기 위해 사용하는 고유번호
: CMD에 ipconfig를 검색하면 IPv4 주소 존재
>> IP 주소는 고유번호라 해놓고, 왜 그 주소가 여러 명이 존재하는가?
그래서 도입된 것이 IPv6버전 << IPv4 주소가 고갈될것이다...ㅠㅠ
> 하지만 IPv6가 보안관련된 이슈 존재 + 회사 입장(개발비용 증가)
> 그럼에도 사용하는 이유?
:
- 도메인 : comic.naver.com
: IP 주소를 기억하기 어려우니까, 이름을 부여
도메인 사용하는 것이 권장
>> IP 주소를 사용하면 . 과 같은 것이 들어가기 때문에
도메인 사용하는 것을 권장
ex ) cmd nslookup www.naver.com
++++++++++++++++++++++++++++++++++++++++++++++++++
웹 페이지 작성
MVC 중에 V
지켜야 할 것
1. 웹 접근성 지침을 잘 준수해야 함
- 웹 접근성?
: (이 웹을 사용하는)모든 사용자가 웹에 접근하여 이용할 수 있도록 보장해주는 것
: 신체적인 조건, 환경적인 조건 등에 제약을 받지 않고도
잘 이용하고 정보를 잘 전달받을 수 있도록 작성해야 함
- 웹 표준 준수
: 웹 문서를 구조, 표현(스타일), 동작을 구분하여 사용하는 것
웹 문서? > 웹 페이지 텍스트 문서
- HTML
<> 태그 언어
<시작 태그></끝 태그>
<태그명 속성명="값">
ex ) <a href="aaa.png">갱플랭크</a>
- CSS
HTML로 구조화한 문서에게 레이아웃(스타일)을 부여
- JS ☆☆☆☆☆
연산 가능
"이벤트 처리"
ajax(비동기 처리), jQuery(플러그인),...
++++++++++++++++++++++++++++++++++++
- 해야할 일
1. 톰캣 설치
톰캣 9.0 64bit windows zip
32bit/64bit windows service installer
>> 아팟치 톰캣이 8080, ...
>> 유지하고 java에서 바꿀 것
>> 톰캣 파일에서 아직은 압축파일을 쓰지 않음
2. 버전 맞추기
>> cmd > javac -version 해서 버전 확인
3. 이클립스&톰캣 연동
v 프론트앤드를 개발하는 작업도구는 많음
-> 하지만 java 사용 > 다른 도구에 비해 작업을 자주 사용하지 않음..
>> 브라우저 화면 페이지 작성
HTML
을 응답해줄 서버의 역할로 톰캣 사용
DB => WINDOW>SHOWVIEW>DATA SOURCE EXPLORER
웹 => WINDOW>SHOWVIEW>SERVERS
- NO SERVERS 클릭 > APACHE TOMCAT 9.0 선택 > 폴더 선택 시 BIN 폴더가 보일 때까지 들어간 후 선택>FINISH
- 왼쪽 칸(PACKAGE EXPLORER)에 NEW > OTHER > WEB > DYNAMIC WEB PROJECT > test > FINISH
> package explorer 에서 project explorer > test open
- 잘못 깔리게 되면 PROJECT > PROPERTIES > SERVER > RUNTIME ENVIRONMENT 부분 싹다 지우기 REMOVE 할 것
java위의 부분이 DB-MODEL 로직
src/main/java > 기존에 저희가 쓰던 도구가 있던 곳(java(로직)가 있는 공간)
아래 src는 HTML
src > main > webapp 파트에서 문서 담당
> 하위는 환경설정 담당(쓸모 아직 이야기 안함)
> WEB-INF 안에 만들면 안 된다...
: 그 바깥에 만들 것
> HTML문서 바로 뜸
> OTHER > HTML작성 > HTML files
언어 연동
> preference
> web > HTML FILES, CSS FILES, JAVA SCRIPT, JSP FILES 전부 UTF-8로 변경
<TITLE>탭 이름</TITLE>
<BODY>
확인!
</BODY>
CTRL F11 > RUT TO SERVER > CHOOSE AN EXISTING SERVER LOCAL
>LOCALHOST > TOMCAT 지정하고 RUN > 에러 발생
>> 수정하는 방법
1. 우선 캡쳐하기
- 에러 내용 살펴보기 8080포트를 써야하는데 이미 쓰고 있어요..
- cmd > netstat -ano >
2. apachi 더블클릭
> port 보면 http/1.1 > 8088로 바꾸고 ctrl + s
3. 주석은 <!-- 주석-->
> 하지만 이 주석에는 중요한 것을 써 놓으면 안된다!
--------------------------------
웹 오류는 URL 체크가 필수!
404
400대 오류
클라이언트 잘못
사용자가 잘못된 요청
500
서버 프로그래밍
서버 잘못
로직에 문제점이 존재할 확률↑↑↑
---------------------------------
>> html 소스 보는 법
1. 메모장으로 바꿔서 본다
2. 인터넷에 드래그&드롭 해서 페이지 소스 보기
<> 태크 -> 요소
블록 요소 <h1></h1>
<h2></h2>
<p></p>
인라인 요소
-- 줄바꿈<br>
-- 블록 요소(글자크기1~6)<h1></h1>
-- 링크 걸기<a href = ""></a>
-- 굵은 글씨 강조<strong></strong>
-- target="_self" < 현재 창에서 띄우기(링크)
-- target="_blank" < 새 창 띄우기(링크)
-- <hr> 줄 긋기
-------------------------------
<p></p>와 <span></span>의 차이
<p> : 본문의 기사나 설명서에 많이 쓰임
<span> : 본문뿐만 아니라, 여러 곳에 쓰임, 구조의 한 종류
-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탭 이름</title>
</head>
<body>
<!--[1] <br> 한줄 띄우기 -->
APPLE <br>
BANANA <br>
KIWI
<!-- [2] 머릿글 크기(1,2~6까지 존재), 줄바꿈 제공 -->
<h1>블록 요소</h1>
<h2>특징)</h2>
<p>줄 바꿈이 제공됨</p>
<br>
<!-- [3] 강조, <hr> 줄 그어주기 -->
<strong>인라인 요소</strong>
<span>특징) 줄바꿈 제공xxx</span>
<br><br><hr>
<!-- [4] a : 태그, href와 같이 쓰임, 해당 링크로 이동하게 함 -->
<!-- target = "_self" < default값, "_blank" < 새 창 열기 -->
<a href ="#banana">바나나</a><br>
<a href="https://www.naver.com/" target="_blank">네이버</a> <br>
<a href="https://www.daum.net/">다음</a> <br>
<a href="http://www.google.co.kr/">구글</a>
<!-- 링크 뿐만 아니라 내 태그 내에도 이동 가능 -->
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h1>apple</h1>
<h2 id="banana">banana</h2>
<!-- .class 여러 개의 요소들에게 부여되는 공통 별명 -->
</body>
</html>-- 이미지 불러오기
<img alt="웹 접근성 위해 작성">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 속성이 자동으로 완성되는것 > 필수 속성, alt<웹 접근성을 위해 작성 -->
<!-- 시각 장애인 분들을 위해 alt를 사용하여 작성, 이거 없으면 광탈! = alt를 스크린리더로 읽기 위해 -->
<img alt="내가 다운로드 받은 일러스트 1" src="images/sun.jfif">
<a href="http://www.naver.com"><img alt="내가 다운로드 받은 일러스트 2" src="images/rain.jfif"></a>
<img alt="내가 다운로드 받은 일러스트 3" src="images/rainbow.jfif">
</body>
</html>
'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)' 카테고리의 다른 글
| 디바이스 융합 자바(Java) day28 - header,section,footer,div,id,class (0) | 2022.07.20 |
|---|---|
| 디바이스 융합 자바(Java) day27 - 리스트(list),표(table),폼(form) (0) | 2022.07.19 |
| 디바이스 융합 자바(Java) day24 - 웹크롤링+E-martmall과자코너크롤링 (0) | 2022.07.14 |
| 디바이스 융합 자바(Java) day23 - 웹 크롤링 (0) | 2022.07.13 |
| 디바이스 융합 자바(Java) day22 - 외래키,깃허브,비즈니스메서드(핵심관심,횡단관심(공통로직)),JDBC이용한 홈페이지 제작 (0) | 2022.07.12 |