값 :

8진수 / 2진수

 

변수:

var -> let

지역변수 / 지역화

 

const :

상수형변수

 

문자열 : 템플릿 문자열

어금부호로 감싸는 문자열

값을 포맷하거나 내려쓰기 등이 자유롭다

Escapte 문자를 포함하고 싶다면 ?

String.raw`...\n\n`

 

JSON이 향상되었다.

변수에 담겨진 값을 이용해 Object를 만들때

 

뽀개기 : 객체가 가지고있는 속성들을 지역변수화해서 값을 옮겨담는 작업 

	let kor = 30;
	let eng = 40;
	let math = 50;
	
	let exam = {
		kor :kor,
		eng :eng,
		math:math,
		total:	function(){
		console.log("total");
		}
	};
	console.log(exam.total());
	
	exam = {
			kor,
			eng,
			math,
			total(){
		console.log("new total");
	}};
	
	console.log(exam);
	console.log(exam.total());
	
	exam = {
			kor,eng,math,total(){console.log("prac");
			}
	}
	console.log(exam.total());

 

객체의 키를 변수로 사용

	let attr = "kor";
	let exam = {
		[attr] : 1,
		eng : 2
	};
	console.log(exam.kor); // 1출력
    
    	let attr = "kor";
	let exam = {
		[attr+"1"] : 1,
		eng : 2
	};
	console.log(exam.kor1);

객체를 뽀개지않고  사용하는 방식은 가독성이나 실행 성능을 낮춘다.

 

function printExam(exam){
	//뽀개기 Destructuring
	/*let kor = exam.kor;
	let eng = exam.eng;
	let math = exam.math;*/
	//let{kor, eng, math} = exam;
	let{kor,eng,math,avg=100} = exam;
	console.log(avg);//100
	
	let total = kor + eng+math;
	console.log(`kor:${kor}, eng:${eng}, math:${math}`); //ex2.js:485 kor:10, eng:20, math:30
	console.log(`total is ${total}`)//ex2.js:486 total is 60
}

let exam = {
	kor:10,
	eng:20,
	math:30
}

printExam(exam);

 

별칭사용

let{kor:k, eng, math, avg=100} = exam;
console.log(k) // 10

대괄호 변수선언

let [x,y] = [2,3];
console.log(x);//2
console.log(y);//3

[x,y] = [3,4];
console.log(x);//3
console.log(y);//4

[x,y] = [y,x];
console.log(x);//4
console.log(y);//3

[a,b] = [b,a] : 임시변수없이 교체가능

 

선언없는 할당

코드블럭( )으로 감싸기.

let a;
let b;
[a,b] = [10,20];
console.log(`a:${a},b:${b}`); //a:10,b:20

let kor;
let eng;
({kor,eng} = {kor:80, eng:90});
console.log(`a:${kor},b:${eng}`);//a:80,b:90

 

let notices = {
	title:"공지사항목록",
	list:[
		{title:"굿~", content:"좋아요~"},
		{title:"호호~", content:"웃음소리~"}
	]
};

//let {list:[{title}]} = notices;//굿
let {list:[,{title}]} = notices;//호호

console.log(title);

 

조인은 평상시쓰는것이므로 연습해야한다

 

VIEW

뷰: 멀리볼수도, 작게볼수있는 보고싶은대로 테이블단위

실질저장모델은 아니지만 , 그모양자체를 하나의 다른이름으로 사용가능,코드를 단순화시킴

수정,삭제,업데이트불가, 조회(읽기)전용의 테이블형태이다. 1.복잡한쿼리간단하게, 2.사용자가들이 볼수없게 가림

CREATE VIEW NOTICE_VIEW21 
AS 
SELECT N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME WRITER_NAME, COUNT(C.ID) CMT_COUNT
FROM NOTICE N 
    LEFT JOIN MEMBER M ON N.WRITER_ID = M.NICNAME 
    LEFT JOIN "COMMENT" C ON N.ID = C.NOTICE_ID 
    GROUP BY ROWNUM, N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME;

SELECT * FROM NOTICE_VIEW21 
WHERE ROWNUM BETWEEN 1 AND 10 
ORDER BY REGDATE DESC;

 

SELF JOIN

자기가 자기자신을 조인

데이터가 서로 포함관게를 가지는 경우 : 담당,구성,연락

EX 게시글의 댓글이 댓글이참조하는경우

참조키가 다른테이블이아니라 자기것

참조키는

SELECT M.*, B.NAME BOSS_NAME 
FROM MEMBER M
    LEFT JOIN MEMBER B ON B.NICNAME = M.BOSS_NICNAME;

 

SELECT M.*, B.NAME BOSS_NAME, B2.NAME B2_NAME 
FROM MEMBER M
    LEFT JOIN MEMBER B ON B.NICNAME = M.BOSS_NICNAME 
    LEFT JOIN MEMBER B2 ON B2.NICNAME = B.BOSS_NICNAME;

B2.NICNAME (부모)= B.BOSS_NICNAME;(자식)

자식이 부모를 참조하는 형식 

 

부모가 자식을 참조할수없음 

 

CROSS JOIN

실무에서 쓰일일이 적음

 

조인대신 서브쿼리사용

그동안 조인해서 그룹바이 집계

부모의 컬럼을 추가할땐 조인해서 컬럼추가했었다.

컬럼을 가져와야할 경우 컬럼추가시 조인하지않고도 가능하다

 

서브쿼리로 간단히 가능

 

INNER JOIN (교집합)

문장암기할것

-결과물 총 28개

-멤버 : 25개

-노티스 : 45개

노티스가 멤버의 NICNAME을 참조하고있다.

SELECT * 
FROM 
    MEMBER INNER JOIN NOTICE 
    ON MEMBER.NICNAME = NOTICE.WRITER_ID;

 

OUTER JOIN (합집합)

OUTER도 포함시키는 조인

OUTER(관련없는 것)

부모테이블의 아우터,

자식테이블의 아우터 각각 존재가능

 A의 모든 열 더하기 B에 있는 공통부분

 

LEFT OUTER JOIN 

멤버의 모든열 + 노티스에 있는 공통부분

SELECT * 
FROM 
    MEMBER LEFT OUTER JOIN NOTICE 
    ON MEMBER.NICNAME = NOTICE.WRITER_ID;

6개 만들어진다

RIGHT OUTER JOIN 

NOTICE의 모든열 + 멤버에있는 공통부분

SELECT * 
FROM 
    MEMBER RIGHT OUTER JOIN NOTICE 
    ON MEMBER.NICNAME = NOTICE.WRITER_ID;

노티스의 이너3개+아우터2개 = 5개

FULL OUTER JOIN 

A와 B의 합집합

8개

JOIN은 중요하므로 익숙해져야한다.

필드이름의 충돌문제

두개의 테이블을 합칠경우 컬럼이름이 중복될 수있다.

별칭을 붙여서 사용할수있다.

SELECT N.ID, NAME 
FROM 
    MEMBER M INNER JOIN NOTICE N 
    ON M.NICNAME = N.WRITER_ID;

 

INNER JOIN의 특징 : 

모든회원이 조회되지않고, 글쓴회원만 조회된다.

SELECT M.NICNAME, M.NAME, COUNT(N.ID)
FROM 
    MEMBER M INNER JOIN NOTICE N ON M.NICNAME = N.WRITER_ID
    GROUP BY M.ID, M.NICNAME ,M.NAME;

from에있는걸 먼저 집계한후 진행

 

3개 테이블 조인하기

SELECT N.ID, N.TITLE, N.WRITER_ID, M.NAME WRITER_NAME ,COUNT(C.ID) CMT_COUNT
FROM 
    NOTICE N 
    LEFT JOIN MEMBER M ON N.WRITER_ID = M.NICNAME 
    LEFT JOIN "COMMENT" C ON N.ID = C.NOTICE_ID
    GROUP BY N.ID, N.TITLE,N.WRITER_ID, M.NAME;

자식과합치면 부모가 2,3개씩 늘어난다.(중복발생)

집계해야만 자식을 내 레코드에 껴넣을수있다.

 

페이징시 WHERE절 필요

 

 

stanleykou.tistory.com/entry/SQL-INNER-%EC%A1%B0%EC%9D%B8%EA%B3%BC-OUTER%EC%A1%B0%EC%9D%B8%EC%9D%B4-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

( Ajax ) ``억음부호 ${ } / insertAdjacentHTML / JSON.parse

로딩화면만들기

 

검정화면 나타내기

 

검은색화면이 생기고 사라진다.

이미지를 가운데위치시키기위해 flex, center적용

dom을 쓰는것보단 ``억음부호안에다가 넣어서 쓰는게좋다.

JSON 라이브러리

원래는 json형식으로 format에 담아서 문자열을 누적해야했다.

그동안 println(list)넣은것은 운좋게 작동했던것. 빈공백이나 문자열에러가 발생해왔다.

{notice },{notice },{ }가 들어가야한다.

쉽게만들어주는 라이브러리가있다. list객체를 json규격의 문자열로 바꿔준다.

gson 다운로드 -> WEB-INF>lib에 넣어준다.

수정페이지 흐름

1.edit.jsp에서 form태그의 action을 "edit"으로 method는 "post"로 지정

 

2. 동일 url을 갖고있는 EditController.java와 맵핑

사용자가 입력한 id,title,content가 notice객체 담겨 update함수의 파라미터로 전달된다.

사용자에게는 sendRedirect에 연결된 detail페이지가 보여진다.

3. NoticeService.클래스에 update()메소드를 생성한다.

가져온 notice객체를 파라미터로 받는다.

sql문에는 수정될 항목에 = ? 를 넣는다.

?를 넣을 수있도록 PreparedStatement객체를 만들고

notice.getTitle()로 제목을 불러온뒤 setString에 넣는다.

결과값은 excuteUpdate()를 이용해 담는다.

수정한  내용 저장하기

NoticeServiece.java에서  update()에{ } sql,url, forname, connection  복사붙여넣기

CreateStatement 대신 PreparedStatement사용

Update/Delete/Insert는 executeUpdate()사용

 

수정->저장을 누르면 상세내역에서 저장된 내용이 보인다.

등록페이지만들기

<form action="URL">

폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시

 

edit.jsp복사해서 reg.jsp만들기

list.jsp에서 글쓰기버튼만들기

reg.jsp  / list.jsp

 

사용자가 저장을 누르면 post된다.

등록처리만 하는 컨트롤러필요

redirect 가 다시 목록페이지로간다

콘솔창에 에러가없었는지확인할것

SQL오류가 발생

현재로그인한 정보를 넣어야하는데,

일단 자기계정넣기

 

삭제하기기능

doget요청할것

Select : executeQuery(sql)

Update , Insert, Delete : prepareStatement(sql)


조인(join) : 테이블을 하나로 합치는것

참조:관계형, 참조해서 합쳐서쓴다

 

멤버가있어야 글을 쓸수있다.

멤버 데이터 -> 등록하는 행위

 

참조되는녀석 : 부모

참조하는 녀석 :자식

FROM에는 테이블외에 격차형이 올수있다.

 

문제점 :

데이터베이스에있는 강아지목록중에 선택한 강아지의 상세보기가 안되고,

한 팝업창에 3마리의 정보가 한꺼번에 나열되었다.

백엔드 연습중이어서 자바를 수정해야했다.

 

해결 : 

-DB, JSP, JS 모두 수정

 

 

DB :

DB의 목록중 특정 행의 자료를 끌고와야한다.

식별할 수있는 ID컬럼추가 및 ID명 추가

DB의 강아지정보를 잘 불러오고있다 !!

JSP

강아지프로필 불러올 태그에 자바코드 부여

1. jsp 파일에 반복할 for문넣기

2. 선택한것을 식별하기위한 id값넣기 (div)태그추가

3.div태그에 클래스명 부여 "pet-id- [p.getId()]"

<%for(Pet p : list){ %>
<div class="pet-id-<%= p.getId() %> d-none">
<div class="detail-name">
<h2><%=p.getName() %></h2>​

팝업 close버튼에 hidden input 태그넣기

프로필 팝업 3가지중 특정 팝업만 id부여

<div class="profile-popup" id="popup-1">
	<%-- <%for(Pet p : list){ %> --%>
		<div class="popup-content">
			<div class="close-btn" onclick="togglePopup()">×</div>
				<input type="hidden" id="petId" name="petId" value="">

Javascript

js 팝업함수 재정의

1. hidden input태그 선택

2. if조건문 : id가 있다면 input태그의 value에 id값을 넣기

3. 클래스명이 pet-id-숫자 인것을 선택

4. 해당 클래스의 d-none을 지운다.

//상세보기
function togglePopup(id) {
	console.log("profile");
	console.log(id);
	document.getElementById("popup-1").classList.toggle("active");
	//var detail = document.querySelector('.dog-info .detail');
	//var petId = '.pet-id-' + id
	//console.log(petId);
	var petId = document.querySelector('#petId');//hidden input태그 선택
	var pet;
	if (id) petId.value = `${id}`;	
	
	pet = document.querySelector(`.pet-id-${petId.value}`);
	//console.log(petId);
	//console.log(pet)
	//if(petId.value) pet = document.querySelector(`.pet-id-${petId.value}`);
	pet.classList.toggle('d-none');	
}

 

오늘 수업에 배운 input hidden을 적용했는데, 신기하다..

가려진 input태그로 id가 전달이 되서 그 id관련 정보만 출력된다. 

사진업로드 및 프로필수정적용,삭제 배우면 CRUD작업은 거의 마무리 되가는것같다. 빨리 완성하고싶다. 

중복이 발생

url만 다를뿐 

중복코드를 줄이고, 페이지번호를 누르면 목록을 바로 출력하자

하단번호를 누르면 목록이 보인다.

 

window.addEventListener("load", function() {
	var section = document.querySelector("#ex10");
	var tbody = section.querySelector("tbody");
	var requestButton = section.querySelector(".btn-request");
	var pager = section.querySelector(".pager");
	
	function bind(url){//데이터를 화면에 연결
		var request = new XMLHttpRequest();
		request.onload = function() {
			var list = JSON.parse(request.responseText);

			var trEmpty = tbody.querySelector(".empty");
			if (list.length > 0 && trEmpty != null)
				trEmpty.remove();

			for (var i = 0; i < list.length; i++) {
				var tr = `<tr>
							<td>${list[i].id}</td>
							<td>${list[i].title}</td>			
						</tr>`;
				tbody.insertAdjacentHTML("beforeend", tr);//
			}
		};/*request*/
		
		request.open("GET", url, true);//false 동기
		request.send(null);
	}

	pager.onclick = function(e) {
		e.preventDefault();

		if (e.target.tagName != "A")
			return;

		var page = e.target.innerText;//사용자가누른 페이지

		bind(`../api/notice/list?p=${page}`);	
	};

//request버튼누르면 목록나열
	requestButton.onclick = function(e) {
		bind("http://localhost:8080/api/notice/list");

	};/*requestButton*/
});

 

Q. 기본 1페이지가 로드되자마자 보이도록하려면?

bind()메소드를 밖으로 빼낸다.

로드되자마자 보이게됨

Q. 2페이지를 누르면 2페이지로 바뀌어야하는데, 밑으로 누적되서 나온다.

1페이지를 지워주고 2페이지가 보이도록하려면 ?

tbody.innerHTML = ""; tbody의 자식들을 지운다.

 

Q. 데이터가 요청된 후에 지워져야하므로 

onload안에서한다. 

 

Q. 검색기능추가

NoticeList.java에 필드(검색종류), 쿼리(검색내용) 변수를 넣는다.

변수들이 null 그리고 빈문자열이 아닐때 변수에 담아 getList에 넣고 전달한다.

 

작업중이라는것을 알리면서, 다른요청을 또 하지않도록

명령할수있는버튼을 다 가리기

 

align-itemscenter;

그리드내에서의 아이템 수직정렬

수직축 : align/ 아이템 : item

align-itemscenter;


box-sizingborder-box;

콘텐트에 높이 90px

그리드에서 height90px + padding 5px 주면 박스가 커진다. (패딩을주면 박스가깬다)

콘텐트는 90이고 패딩이 5px로 늘어나서 박스자체가 커진다.

높이가 총 102으로 늘어남 (아이템 90 + 패딩 5 + 5 + border 1 + 1 )

box-sizingborder-box; 을 넣으면 박스 90준것이 유지된다


사용자가

1.목록페이지를 본다

2. 클릭하면 자세한내용이 나온다 (detail.jsp) 

3. 자세한페이지에 수정버튼, 삭제버튼이있다

 

제목,내용 수정할 수있게해보자.

수정할 수있는 상태를만들기

id에 해당하는 수정페이지

detail.jsp

detail.jsp를 복사한다.

제목 value에 자바코드를 넣는다.

내용 textarea태그를 만들고 안에 콘텐트를 불러온다.

<td colspan="3"><input type ="text" name="title"value="<%=notice.getTitle() %>"></td>
<tr>
<td colspan="4">
<textarea rows="20" cols="80"><%=notice.getContent() %></textarea>
</td>
</tr>

edit.jsp

<%=id%>

detail.jsp?id=<%=notice.getId()%>">취소</a>


sendRedirect

서블릿이 다른 서블릿을 요청할 수있게한다.

사용자가 저장을 눌러서 '업데이트처리'한테 post했지만 detail.jsp를 사용자에게 돌려준다.

 

jsp로만들면 <%%>코드블럭부담 + 제스퍼이용, 업데이트는 서블릿으로하는게 낫다

디테일jsp에 출력기능이 다있다. redirect로 detail.jsp에게 출력기능을 부탁한다.

 

  • 새로운패키지생성 controller.lecture
  • EditController 클래스생성
  • edit.jsp에서 보낸 <form action="edit" method="post"> , <textarea rows="20" cols="80"><%=notice.getContent() %></textarea>를 받을수 있게 준비한다.
  • name = "title"을 넣어 value="" 가 전달되게한다.
  • <textarea>태그에도 name을 넣는다

id는 자바스크립트로 값에 접근하는데 사용,

name은 jsp에서는 request.getparameter(name); 이렇게 값에 접근

editcontroller / edit

업데이트시 특정레코드만 수정하는거니까 id가 필요하다.

edit.jsp에 <input>태그에 숨겨서 보낼 수있다.

<input type="hidden"name="id" value="<%=id%>">


service.get(id);

editController.java

 

NoticeService.java

  • NoticeSerive.java에 update(Notice notice) 메소드 생성
  • 제목,내용,조회수,첨부파일 등  업데이트가 될 수있다.
  • sql을 한문장으로 쓸 수있게한다. 범용으로 쓸 수있는 update().
  • service.get(id);를 통해 해당id에 대한 데이터를 채워놓은상태에서 title,content를 다른값으로  대체할수있다.
notice = service.get(id);

조회수만 업데이트된다면 나머지는 null값을 가진다. -> 데이터를 DB에서 가져와서 업데이트한것만 바꾼다음에 널을 채운다. (sql에 업데이트 가능한것들을 한번에 나열)

수정할 것만 채워서 전달하면 나머지는 null이 채워지고 ->업데이트 후 기존데이터가 null이 된다.

넘겨지지않은 부분을 채워야한다.

So, EditController클래스에서

Notice notice = new Notice();로 새로운 객체를 생성하지말고

Notice notice = service.get(id);로 기존의 데이터를 가져온다.

 

Javascript Project 5 . 요리검색

요리를 검색할 수 있는 페이지

사용자가 요리를 검색하면, 관련 요리들이 리스트업된다.

랜덤버튼을 통해 자동으로 요리를 보여준다.

 

CSS

  • 검색정렬 grid를 이용
  • repeat을 통해 갯수,너비를 조정, grid-gap으로 간격조정
  • 해당 요리사진에 마우스를 대면 요리정보가 가운데 위치
  • 해당 요리사진을 클릭하면 목록하단에 상세내역이 펼쳐진다.
  • @media와 gird를 이용해 반응형적용

 

JS

  • const를 처음 선언하고 콤마로 한번에 처리.
  • fetch()함수로 API호출
  • join으로 배열연결해서 항목 한꺼번에 출력

 

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

www.daleseo.com/js-window-fetch/

콘솔자바 

서블릿 ,

둘다 자바프로그램

콘솔자바  서블릿 , JSP
프로그램 서버프로그램 HTML 코드안에 Java코드
  분산형, 웹기반 서버프로그램  
  톰캣이 실행환경
class ???extends HttpServlet{ 
public void service(HttpServletRequest request,HttpServletResponse response)
}
 

옛날에는 클라이언트서버형태(CS)

톰캣 : 웹서버역할 + 와스역할

뭘해결하기위해서나왔는지 ? 생각할것

 

사용자의 요청이 있을때

사용자 요청을 수반하다보면, 일반적으로 get요청을 많이 받게된다.

노가다식 문서출력 out.write("html태그") 이작업을 자동으로해주는애 : 제스퍼(JSP)

주소창말고 자바스크립트로도 웹서버를 요청할수있게되었다

JSON이 가장편하다

 

페이지숫자 불러오기

페이지정보불러오기(NoticeList.java에서 연결)

번호누르면 파싱된 제이슨문자열 출력

 

"http://localhost:8080/js/ex1.js"
http://localhost:8080/api/notice/list 
../api/notice/list?p=${page}

1.IF문

2. FOR문자체를 줄이기

1. if문으로함

상세내역만들기

페이지연결

 1번째 게시물의 제목을 누르면 상세내역으로이동

 

컬럼안에서도 헤더역할이있다.<th>

colspan = 3 전체중에 3칸차지해

 

목록으로 돌아갈수있게 하이퍼링크넣기 "list.jsp"
게시글마다 다른 아이디값부여

 

글 목록에 마우스를 대면 하단에 주소값이 바뀌는것이보인다

페이지별 id부여

jsp에서 id요청 , java에서 get(id)메소드만들기

list.jsp에서 실행할것


detail.jsp화면
목록에서클릭한 내용에 콘솔에출력된다

노드객체를 사용할 수 있는 능력
브라우즈가 제공하는 객체
-window
-window.document
--node object
   얻기  /  속성 / 스타일 / 조작하는
-window.XmlHttpRequest : Ajax
-- 원격으로 데이터를 요청해서 그 결과로 화면(노드 객체)를 조작하는 기술

[자바스크립트 (X) ]   ------------------------          [ 자바 on Tomcat ] 
                                                                          (동적)문서를 제공

[자바스크립 on Browser] <----- XmlHttpRequest-------> [자바 on Tomcat] Servlet/JSP
    데이터 "요청"                                                         데이터를 제공(XML/CVS)
    노드 조작


 

Ajax - > web version2 :비동기적으로 데이터를 요청해서 화면을 갱신하는 기술의 집합

Frontend 기술의 가장 꽃

주요 API :

XmlHttpRequest

-open() / send() 

비동기로 처리할때 사용하는이벤트

onreadystatechange

onload

onerror

onabort

onloadend

 

동기적 : 페이지자체를 새로고침, 데이터가 바뀔때마다 업로드를 해야한다.(다른것들이 가동불가)

비동기적 : 부분적으로 바로바로 데이터를 업로드, 다른것도 가동

 

웹브라우저에서 페이지를 보려면 서버를 요청해야한다.

 

ex1.js파일에서

request.open("GET", url, true);

url를 요청한것

out출력도구

컬렉션일경우 알아서 toString을 호출해서 항목들을 [ , , , ] 로 묶어서 출력해준다.

이것을 쪼개써야하는데,,JSON표기가 아니다..이 포멧은 어디서왔을까

Notice누르고 에프3

묵시적으로 투스트링호출됨

NoticeList 클래스 / NoticeService클래스

오버라이드된 toString메소드에 의해 출력된것이다.

JSON형태로 바꾼다면 ? 

key ""떠블따옴표로 감싸져있어야하고, 그러려면 역슬래시가 앞에 들어가야한다.(이스케이프) 이중더블따옴표모양이되니까,,

json형태로 바꾼것
제이슨형태문자

title, writerid의 값도 문자열이므로 따옴표가 되어있어야한다.

"title":"????",

이제 클라이언트에서는 JSON형태의 문자열을 받은거니까 파싱해서쓰면된다


request.responseText은 통으로되어있음

list은 배열로 되어있음

 

파싱이 잘되서 배열이되어있다면 0번 인덱스를 출력해보자

 

JSON.parse() : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.

서버로부터 브라우저로 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체화.

문자열스트링을 JSON객체로 변화시켜준다.

request.responseText은 그냥 문자열이었다.

문자열 키를 큰따옴표로 묶어야한다. ->JSON객체로 쉽고빠르게변환된다.

 

테이블의 내용이 데이터가없을 경우에만 레코드가 존재하지않습니다를 보이고,

데이터가있으면 데이터만 보이게해보자.

4가지 방법이 있다.

1.innderHTML 사용 문자열로넣기

2. DOM을 직접생성해서 추가하는 방법

3. template을 이용한 클론

4. append말고 insertAdjacentElement로 이웃하는곳에넣기

개발자도구를 띄어놓은상태에서 새로고침해야 새로나온다

 

1. innerHTML (바람직x)

 

2.

3.template

4. append말고 insertAdjacentHTML로 이웃하는곳에넣기

템플릿스트링 ?

여러라인 문자열제공 `` 

내려쓰기를마음대로쓸수있다

포멧문자열

es6에서 등장

 

달라기호 데이터를 거기에 꽂아넣을수있다

${ }

문자열을 +로 더할필요없이 ` ${} `로 사용가능

insertAdjacentHTML(위치, 넣을태그)
request를 누르면 10개의 데이터가 불러와서 나열된다

beforeEnd : tbody.insertAdjacentHTML("beforeend",tr);

HTML 문자열 "<tbody>AAA</tbody>"를 개체가 종료되기 전에 tr을  삽입.


레코드가 존재하지않습니다는 데이터가 있을경우 안나오게해보자(if 조건문)

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

웹 서버와 WAS :victorydntmd.tistory.com/121#:~:text=%EC%9B%B9%20%EC%84%9C%EB%B2%84%EB%8A%94%20%EC%A0%95%EC%A0%81%EC%9D%B8,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4.&text=WAS%EB%8A%94%20DB%20%EC%A1%B0%ED%9A%8C%EB%82%98,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4

AJAX란 ?

velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

insertAdjacentHTML

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

 

 

Javascript Project 4 . 비디오 플레이어

비디오플레이어

비디오플레이어 완성

  • video태그의 control속성을 이용해 제어
  • 재생시에는 일시정지버튼으로 바뀌고, 일시정지일때는 재생버튼이 보이도록 설정
  • 비디오 시간과 슬라이드바를 일치시켜 현재의 재생시간 범위를 보여준다
  • input태그의 range속성을 이용
  • currentTime으로 비디오재생시간 불러오기.

 

 


참고 블로그

studyingych.tistory.com/44

hleecaster.com/html-form/

im-developer.tistory.com/55

developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

DNS의 목적

Domain Name System

호스트명과 IP 주소 매핑을 수행하는 시스템

-ip주소는 0이나 1이 32번 반복되는 비트의 나열이므로 기억하기 힘들다. -> 사람이 알기쉽게 하고자 컴퓨터에 호스트명을 붙이고ㅓ 통신상대를 지정하게 만든것

호스트명으로 통신상대를 지정하더라도 변함없이 통신상대의 IP주소가 필요하므로 호스트명에 매핑된 IP주소를 가져오는 시스템, 이름해석이 필요

 

DNS의 구조

리소스 레코드 : 호스트명과 IP주소의 매핑

 

도메인과 존 

도메인 : 호스트명의 집합

 

http://www.naver.com/ 

www.naver.com :웹서버의 의 호스트명

www.naver.com의 IP주소를 알아내기 위해서 자동으로 DNS서버에 질의

DNS서버의 IP주소가 잘못 지정되어있다면 DNS서버에 네임쿼리가 도달하지않음->이름해석x->접근불가

 

 

 

'* > What I did today' 카테고리의 다른 글

JOIN  (0) 2021.08.21
Process vs Thread  (0) 2021.08.20
dto와 entity를 구분해서 구현한 이유  (0) 2021.08.20
Web Server VS WAS  (0) 2021.08.16
스프링 핵심 원리 이해1 - 예제 만들기  (0) 2021.08.06
캡슐화/추상화/다형성  (0) 2021.08.03
비전공자를 위한 이해할 수 있는 IT지식 (정리)  (0) 2021.04.13
네트워크 개요  (0) 2021.04.11

DOM (Document Object Model)

  • 웹문서(HTML,XML,SVG)를 브라우저가 이해할 수있는 구조로 구성하여 메모리에 적재하는것
  • 모든 요소와 요소의  어트리뷰트,텍스트를 각각의 객체로 만들어 부자관계로 표현하는 트리구조로 구성
  • DOM 자바스크립트를 통해 동적으로 변경
  • 메모리상의 DOM을 변경하여 정적인 웹페이지를 동적인 웹페이지로 변경

브라우저는 HTML문서를 로드 한후 해당 문서에 대한 모델을 메모리에 생성. 이때 모델은 객체의 트리로 구성된다.-> DOM tree

HTML 문서내의 각 요소에 접근/수정 : DOM은 모델 내의 각 객체에 접근하고 수정할 수있는 프로퍼티와 메소드를 제공.DOM이 수정되면 브라우저를 통해 사용자가 보게될 내용도 변경

 

DOM tree

브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델

 

노드선택 

document.getElementsByClassName(class)

firstElementChild, lastElementChild: 태그만선택

firstChild, lastChild : 공백,줄바꿈모두 텍스트노드로  취급

previousElementSibling, nextElementSibling :형제 노드 중에서 Element type 요소만을 탐색한다.

 

 

Javascript Project 3 . 영화관 좌석 예약

영화관 좌석 예약

영화관 좌석 예약시스템 만들기

  • 이용자가 원하는 영화를 선택후 해다 영화금액에 맞춰 금액이 책정
  • 선택한 좌석의 수가 하단에 업데이트
  • 웹스토리를 이용해서 사용자가 선택했던 좌석을 임시저장 (새로고침해도 사용다시 재확인할 수있다)
  • 이미 예약된 좌석은 선택이 불가능

CSS

  • perspective를 사용해 스크린모양에 원근법을 적용
  • rotate를 이용해 스크린의 각도조절. 기울기조정
  • select박스 디자인변경 (네이티브지원모양 해제)

JS

  • localstorage 사용 : 키의  값을 사용해 이용자가 선택한 좌석 정보가 남아있게한다.
  • 로컬스토리지를 통해 읽어온 좌석정보를 자바스크립트 객체로변환

 

 

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

equality37.tistory.com/16

nykim.work/26

www.daleseo.com/js-web-storage/

gahyun-web-diary.tistory.com/80

SELECT 구절

SELECT / WHERE/ GROUP BY / HAVING/ ORDER BY

 

내장함수

-문자열관련함수

-변환함수

-날짜함수

-NULL 관련함수

-집계함수

 

SELECT, FROM, WHERE, GROUP BY, HAVING, ORDER BY , ASC ,DESC (무조건외우기)
  • 집계한결과쓸때는 HAVING
  • FROM 에는 격자형태 결과물이오면된다
  • ROWNUM: 결과집합에 대한 가상의 순번
  • 쿼리문 작성순서와 실행순서가 다르다.

WHERE절과 HAVING절의 차이

  • WHERE절은 모든 레코드(행)에 대해서 조건을 적용한다.
  • HAVING절은 GROUP BY절을 통해 만들어진 GROUP들에만 조건을 적용한다.
    WHERE절에 집계함수 못씀.

 

실행순서 :

WHERE절끝나면 ROWNUM생기고 정렬(번호를붙이고 정렬하니까 순서엉망)

 

정렬하고나서 번호를 붙여야 한다. 정렬을 끝내고(안쪽FROM) 로우넘버를 다시붙이자

NOTICE 테이블에서 제목에ㅔ 'a'가 들어간것을 등록일 날짜기준으로 내림차순

조회한것을 n 이라고 명명

n을 ROWNUM으로 1~5개 만 출력

 

결과화면 / 정렬을 먼저하고 ROWNUM붙여 실행


숫자함수

  • ABS(n) : n의 절대값을 반환
  • CEIL(n) , FLOOR(n) : n보다 같거나 큰 정수를 반환한다
  • ROUND(n,i) : n을 소수점 i+1번째 자리에서 반올림
  • TRUNC(n,i) : n을 소수점 i+1번째 자리에서 버림
  • POWER(n1,n2) : n1을 n2번 거듭제곱한 결과
  • MOD(n1,n2) : n1을 n2로 나눈 나머지 값

문자함수

  • INITCAP(char) : char의 첫문자만 대문자 나머지 소문자
  • LOWER(char) : char를 소문자로
  • UPPER(char) : char을 대문자로
  • CONCAT(char1, char2) : char1 char2를 붙인다.
  • SUBSTR(char, pos,len) : char의 pos번째 문자부터 len길이만큼 잘라서 반환.
  • LTRIM: char1의 좌측부터 char2를 찾아서 삭제후 반환 (한번만 삭제한다.)
  • RTRIM: LTRIM과 비슷. 오른쪽부터 검색을 진행
  • LPAD(char1,n,char2) : char1의 왼쪽부터 char2를 채운다. n은 연산후 총 문자열 자릿수를 의미한다.
  • RPAD(char1,n,char2)  : LPAD와 비슷 , 오른쪽부터 진행
  • REPLACE(char1,char2,char3) : char1에서 char2를 찾아 char3을 반환한다. LTRIM과 달리 여러번 진행한다.
  • LENGTH(char) : char의 길이
  • DECODE(input1, search1 , result1, search2, .. ,default) :  input1을 search1과 비교하여 같은 값이면 result1을 반환하고, 같지 않을 경우 search2를 비교하는 방식을 반복한다. 최종적으로 같은 값이 없으면 default를 반환한다.

날짜함수

  • SYSDATE : 현재 시스템 일자 반환
  • ADD_MONTHS(date,int) : date에 int 수 만큼 월을 더한 날짜 반환
  • MONTHS_BETWEEN(date1,date2) : date1을 기준으로 두 날짜 사이의 개월 수 반환 
  • LAST_DAY(date) : date의 월말일 반환
  • ROUND(date, format) : format에 따라 반올림한 날짜 반환
  • TRUNC(date,format) : format에 따라 잘라낸 날짜 반환
  • NEXT_DAY(date,char) : date기준으로 char에 명시한 요일의 날짜를 반환

변환함수

  • TO_CHAR(char or date , format)  : 숫자나 날짜를 format에 맞는 문자로 변환                                                                                  ex) to_char(sysdate , 'YYYY/MM/DD'), to_char(12345, 'L9,999.99')
  • TO_NUMBER(char,format) : data를 format에 맞는 숫자로 변환
  • TO_DATE(char, format) : char를 format에 맞는 날짜로 변환
  • TO_TIMESTAMP(char,format) : char을 format에 맞는 타임스탬프로 변환

NULL 관련 함수

  • NVL(input1,input2) : input1이 null이면 input2를 반환
  • LNNVL(조건식) : 조건식의 결과가 false이거나 unknown이면 true를 , true이면 false를 반환한다.
  • NULLIF(input1, input2) : input1과 input2가 동일한 값이면 null을 아니면 input1을 반환한다.

 

SELECT * FROM NOTICE WHERE ROWNUM BETWEEN 1 AND 5;
SELECT SUBSTR ('HELLO',1,3) FROM DUAL;--인덱스는0부터,3개 HEL
SELECT SUBSTR ('HELLO',3) FROM DUAL; --3부터 나머지 LLO

SELECT * FROM MEMBER ORDER BY NAME DESC;--이름을 기준으로 역순으로 정렬해서조회
SELECT * FROM MEMBER WHERE NAME LIKE '박%' ORDER BY NAME;--회원중에서 박씨성을 가진 회원을 조회하시오, 오름차순으로정렬(ASC생략가능)
--이름이 같을경우 닉네임으로 정렬하자 2차정렬이필요할때
SELECT * FROM MEMBER ORDER BY NAME ASC, NICNAME DESC;--이름오름차순, 이름이같다면 닉네임으로 내림차순정렬
--일별,월별조회수,회원수집계 등 ->집계함수,분석
SELECT COUNT(*) FROM NOTICE; --게시글의 전체수조회. NULL이들어간건 제외된다.되도록 식별자를넣기
SELECT COUNT(ID) FROM NOTICE;
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID;--작성자별 게시글 수 조회
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID ORDER BY COUNT(ID) DESC, writer_id ASC;

UPDATE MEMBER SET GENDER = '여성' WHERE ID =21;
COMMIT;

SELECT COUNT(ID),GENDER FROM MEMBER GROUP BY GENDER;--ID를 통해서 개수를 구한다.성별기반. 성별로 카운트조회

UPDATE MEMBER SET BIRTHDAY = 19881215 WHERE ID = 21;
COMMIT;
--생년월일에서 년도만잘라내서 YEAR이라는 컬럼을만들고 년생을 오름차순으로정렬
SELECT COUNT(ID),SUBSTR(BIRTHDAY, 1, 4) YEAR 
FROM MEMBER 
GROUP BY SUBSTR(BIRTHDAY, 1,4) 
ORDER BY YEAR ASC;

--회원별 게시글수를 조회(단,게시글 수가 2미만 레코드만출력) 집계함수조건 HAVING
SELECT COUNT(ID),WRITER_ID FROM NOTICE GROUP BY WRITER_ID HAVING COUNT(ID) < 2;
--최신등록순으로 정렬한 결과에서 상위 열명을 원하는 경우조회
SELECT*FROM ( SELECT*FROM MEMBER ORDER BY REGDATE DESC) WHERE ROWNUM BETWEEN 1 AND 10;
--나이가 30이상인 회원목록조회(순서를 바꾸거나 먼저계산해서 실행)
SELECT*FROM MEMBER WHERE AGE > = (SELECT AVG(AGE) FROM MEMBER);
--보조쿼리,서브쿼리 먼저실행 안쪽에별칭만들어 쓰기
SELECT * FROM (SELECT ROWNUM NUM, NOTICE.* FROM NOTICE)
WHERE NUM BETWEEN 6 AND 10;

--등록일자를 기준으로 역정렬, N:결과집합이름, TITLE에 A가들어간것
SELECT * FROM (
    SELECT ROWNUM NUM, N.* 
    FROM (
        SELECT * 
        FROM NOTICE 
        WHERE TITLE LIKE '%a%'
        ORDER BY REGDATE DESC
    ) N
)
WHERE NUM BETWEEN 1 AND 5;
--where title like'%a%'

 

 

더보기

집계한결과쓸때는 HAVING

11:15다시

FROM 에는 격자형태 결과물이오면된다

 

SELECT * FROM NOTICE ORDER BY REGDATE DESC;

전체조회 중 파란색부분만 출력해보자.

SELECT * FROM (SELECT ROWNUM NUM, NOTICE.* FROM NOTICE) WHERE NUM BETWEEN 1 AND 5; 

ROWNUM으로 가상의순번으로 집계되어있다. 

ROWNUM: 결과집합에 대한 가상의 순번


최신등록순으로 정렬한 결과에서 상위 열명을 원하는 경우조회하려면 ?

1.잘못된 쿼리 : ROWNUM이 순차적이지않다.

ROWNUM이 순차적이지않다

2. 순차적이지않은 ROWNUM에서 5개를 뽑은셈

쿼리문 작성순서와 실행순서가 다르다.

 

실행순서 :

WHERE절끝나면 ROWNUM생기고 정렬(번호를붙이고 정렬하니까 순서엉망)

 

정렬하고나서 번호를 붙여야 한다. 정렬을 끝내고 로우넘버를 다시붙이자

SELCT * FROM (SELECT ROWNUM NUM, N.* FROM ( SELECT * FROM NOTICE ORDER BY REGDATE DESC) N) WHERE NUM BETWEEN 1 AND 5;

결과집합 별칭은 AS쓸쑤없음
NOTICE. 생략가능 

roeldowney.tistory.com/332

bloodfinger.tistory.com/46

docs.oracle.com/cd/B19306_01/server.102/b14200/functions001.htm#:~:text=SQL%20functions%20are%20built%20into,functions%20written%20in%20PL%2FSQL.

Javascript Project 2 . 슬라이드 네비게이션 & 팝업 

슬라이드 네비게이션 및 회원가입 팝업창 만들기

웹프로젝트 중 가장 궁금했던 네비게이션 슬라이드와 팝업부분을 구현했다.

  • 햄버거 버튼을 누르면 네비게이션 슬라이드바가 열리고 닫힌다.
  • 가입버튼을 누르면 배경은 어두워지고 화면의 중간에 회원가입창이 뜬다.
  • 회원가입창의 닫힘버튼 외 영역에 클릭을하면 팝업창이 사라진다.

 

CSS

  • 메인색상 변수화해서 쓰기
  • 자바스크립트 대신 transform을  활용
  • rgba는 상속이되지않아 특정요소에만 적용할 수있다.

JS

  • toggle은 너무 유용하다. 온앤오프
  • 네비게이션은 toggle적용 , 팝업창은 직접 클래스명 추가 제거적용
  • 다양한 삼항연산자의 활용

참고 : 슬라이딩네비, translate, opacity

www.w3schools.com/howto/howto_js_sidenav.asp

www.tabmode.com/homepage/transform-translate.html#gsc.tab=0

webclub.tistory.com/231

www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/

youtu.be/iE_6pQ3RlZU

 

Javascript Project  1 .  회원가입양식 및 유효성검사

회원가입양식

 

사용자이름, 이메일, 비밀번호를 기입할 수있게 했다.

사용자가 입력한 값이 유효하면 초록색으로 하이라이트를 주고, 유효하지않으면 빨간색이 뜨며, 안내메세지가 해당칸 하단에 나온다.

이메일정규식을 넣어 이메일값의 유효성을 검사한다.

 

 

 

 

 

 

 

 

 

 

CSS

  • 사용자가 입력하기위해 input칸을 누르면 선택한 칸을 보여주기위해 보더강조한다.
  • 주요색상은 이름을 선언후 불러서 쓰기
  • 상위태그에 relative를 줘서 하위태그가 absolute적용 후 포지션기준을 잡을 수있게 했다.
  • 에러메시지는 기본적으로 가려주고, 에러상태에서만 나타나도록 설정.

JS

  • 이메일 정규식표현을 구글링 한 후 유효성검사 함수에 넣어줬다. 사용자가 입력한 이메일문자의 유효성을 검사한다.
  • 올바르게 입력했으면 input태그를 감싸는 부모태그에 하이라이트속성이 담긴 클래스명이 추가된다.
  • 조건설정시 콘솔에 입력하면서 작동되는 지 확인하면서 작성
  • 첫번째 암호와 확인암호가 불일치 할 경우 안내메세지를 출력한다.

개인프로젝트를 작게나마 매일 해야겠다.

자바스크립트기능을 넣을때마다 효과들이 눈에 보이니까 재밌다. 아직 백엔드기능이없어서 빈깡통느낌이지만, 빨리 주변지인들도 이용할 수있는 사이트를 완성하고싶어졌다.

 

+ Recent posts