[Javascript] 쌩 기초 & 웹 프로그래밍 jsp 뜯어보기

자바스크립트를 사용하여 다음의 일을 할 수 있다.

 

1. HTML의 '내용'을 변경할 수 있다.

2. HTML의 '속성'을 변경할 수 있다. 예를 들어 버튼을 클릭하여 특정 <img> 태그의 src 속성을 변경할 수 있다.

3. HTML의 '스타일'을 변경할 수 있다.

 

html input tag 내의 'id'는 javascript에서 getElementById에서 사용된다.

form tag에서 input 태그 내의 name=" " 은 넘기기 위해 사용된다.

 

 

value는 사용자가 입력된 값이 여기로 들어가는데, 생략해도 무관한 것으로 보인다.

 

 

기존에는 웹브라우저마다 다른 코드를 짜야해서 자바스크립트를 매우 어려워 했다. 브라우저마다 다르게 해야 하므로.

jQuery 메서드가 이를 해결해준다. 브라우저에 따라 동작하는 것을 다 만들어놨다.

 

 

select city를 할 때마다 이번에는 onchange를 통해 changeCity를 호출하도록 작성하였다. 이건 클릭의 개념이 아니라 선택의 개념

 

changeCity 내에서 우선 둘 다의 style.display를 "none"으로 표시하여 안보이게 한 후, 마지막에 선택된 city만 다시 on(공백)한다.

 

 

jQuery로 대체해서 동일하게 표현

 

자바스크립트의 핵심 : dom을 보이게 / 보이지 않게 하는 것 등 변형 하는 것!!

 

 

 

1. 변수 선언 방법

 

var, let, const 세 가지만 기억하면 된다!

 

1) var

똑같은 변수명을 사용해도 var은 그냥 받아들여준다. 이를 허용하는 이유는 유지할 필요 없는 x의 경우에 허용한다는 것이다.

변수명 선언에 머리 아플 필요 없이 그냥 사용할 수 있다고 생각하자.

 

 

2) let

let은 중복 정의 허용하지 않는다.

 

사파리 개발자 도구에서 활용할 수 있다.

 

 

3) const

const는 변경할 수 없는 상수이다. 따라서 컴파일 에러가 발생한다.

 

 

 

4) obj -> 서버에 던질 때 묶어서 던지는 개념 - json

html에서 등록을 눌러 register()를 실행하면, obj객체에 name, city가 들어가게 된다.

console.log(obj)는 아래에서 확인할 수 있다.

 

 

값이 여러 개일 경우, console 출력을 위해서 많은 인자를 받아야 한다. obj 하나로 넘기면 매우 편해진다.

 

 

또한, 굳이 obj에 key를 지정 안해두고 이후에 지정 - 대입을 동시에 할 수 있다. 매우 편리하다.

 

 

 

현재 실습하고 있는 html 결과 참고

 

 

앞에서는 option 내에 서울, 제주로 Hard coding해놨다.

실제로 지역 리스트는 백엔드 데이터베이스에서 가져오기 때문에 동적으로 동작하도록 html을 변경해야 한다.

 

 

 

기존 city에서 모든 option을 지운 후, 다음과 같이 for문을 통해 let city안의 값을 할당한다.

따옴표가 조금 헷갈리지만, <option> tag 내에 city[i].code와 같은 동적 value를 넣어야 한다면 그 안에서 "' value '"를 사용하여 감싸줘야 한다. 아래에서 더 자세히 설명하면,

 

 

city[i].name이 <option> tag 밖에 있으므로, 그냥 +를 통해 일반 string 처럼 추가한다.

 

 

city[i].code가 <option> tag 안에 있으므로, "' +city[i].code+ '"로 감싸야 한다.

 

 

 

---

 

jspf : Java Server Page Fragment -> JSP의 파편이라는 의미이다.

해당 페이지의 전체를 그대로 가져오는 역할을 한다.

 

 

 

---

1. 처음 localhost:8080으로 접속하면, RequestMapping에 의해 HomeController가 동작한다.

여기에서 questionDao에 저장된 모든 질문들을 setAttribute를 통해 "questions"라는 이름으로 request에 집어 넣고, home.jsp로 전달한다.

 

 

2. 위의 페이지는 home.jsp이다. foreach를 통해 HomeController에서 받은 question에 대해서 아래 li ~ </li>를 반복해서 뿌린다.

맨 위의 ul은 안의 리스트들을 숫자 없이 dot으로 표시한다는 의미이며, foreach안의 li는 리스트 하나하나를 의미한다.

foreach에서 each라는 value를 사용해서 Database에서 받아온 값들을 뿌려줄 수 있다.

 

+ a tag를 통해 <Strong> tag로 감싸진 부분에 링크가 걸려 있으며, 이를 누르면 /qna/show로 questionId 쿼리를 가지고 서버에 요청을 하게 된다. each.title로 되어 있는 것으로 보아 질문의 제목을 누르면 상세 내용에 대한 페이지로 이동하게 된다. 이는 아래 showController에서 설명한다.

 

+ <span>은 inline 속성(줄바꿈 x) 태그여서, 다른 속성과 같은 줄에서 출력된다.

 

+ <i>는 italic으로, 태그 사이에 있는 글자를 기울어준다. 위에서는 내용 없는데 왜 써준지 모르겠다. 주석처리해도 딱히 변하는건 없다.

 

+ tag 내의 title에 적힌 내용은, 해당 tag또는 링크에 마우스를 올렸을 때 팝업되는 내용이다.

 

페이지에서 질문 하나를 누르면, qna/show로 questionid를 가지고 ShowController로 요청하게 된다.

 

req.getParameter를 통해 get요청에서 온 parameter 내용을 가져와서 Long questionId에 저장한다.

req.setAttribute를 통해 그 아이디에 맞는 question과, answer를 set한 후, show.jsp로 넘어간다.

 

 

 

show.jsp 내부이다. 여기에서 form태그를 통해 삭제 로직이 post로 구현되어 있다. 삭제를 누르면 화면에서 사라지게 된다.

input type을 hidden으로 해두었으며, 삭제 버튼을 누르면 value가 action url로 이동하게 된다.

대략적으로 보면,

 

req로부터 받은 answerId를 통해 answerDao에서 제거를 한 후, response를 json 형식으로 변경해서 200 OK를 보내는 것 같다.

 

JSON형식으로 브라우저에 도착한다.