[항해99] 웹개발의 봄, Spring 강의(3) 정리

 

1. abstract

 

abstract를 클래스에 붙이면 추상클래스가 되고 추상클래스란 하나 이상의 추상메서드를 포함하는 클래스이다.

추상 메서드는 선언만 있고 본체는 없는 함수이며 선언부에 abstract라는 키워드를 붙인다.

추상클래스는 객체 만들기가 불가능하고 상속해서만 사용가능하다. 상속해서만 사용해야 하기 때문에 추상 메서드의 접근 지정자로 prvate는 사용할 수 없다.

 

abstract class Animal {
    public String sName; //일반 멤버 변수
    ….
    public void move() { …} // 일반 메소드 
    abstract void howl(); //추상 메소드
    …
}

 

 

2. HTML, CSS, Javascript 기초

 

HTML은 뼈대고, CSS는 꾸며주는 녀석이다.

 

CSS에서 선택자가 두가지가 존재하는데 HTML파일을 통틀어 단 하나만 존재하는 id는 CSS에서 #으로 표시한다.

class는 중복 적용이 가능하다. CSS에서는 .으로 표시한다.

 

.wrap {
    width: 538px;
    margin: 10px auto;
}

#contents {
    width: 538px;
}

.area-write {
    position: relative;
    width: 538px;
}

 

javascript란 클릭, 마우스 오버 시 색 변화, 숨기기, 나타내기, 등등 수많은 일을 할 수 있다.

백틱을 사용하면 문자열 안에 변수를 같이 사용할 수 있고 HTML 구조도 넣을 수 있다.

 

let name = '내 이름';
let text = `${name}님의 스프링 5주 완주를 축하합니다!`;
console.log(text);

 

3. JQuery, ajax

 

JQuery는, 미리 작성된 자바스크립트 함수 모음집이다.

JQuery를 임포트 후에 사용하면 된다.

$ 로 시작하고, 괄호안에 선택자로 대상을 적으면된다.

$('#contents').hide();

백틱을 사용하여 HTML을 추가할 수있다.

$('#cards-box').append(`<div class="card">
    <img class="card-img-top"
         src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
         alt="Card image cap">
    <div class="card-body">
        <a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>`);

 

ajax

Asynchronous JavaScript And XML의 약어로 언어나 프레임워크가 아닌 구현 하는 방식을 의미한다.

데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법이다.

 

JQuery는 간단한 문법으로 ajax를 사용할 수 있게 도와주기 때문에 JQuery ajax를 많이 쓰는편이다.

 

JSON.stringify() 메서드는 josn 객체를 String 객체로 변환시켜준다.

JSON.parse() 메서드는 string 객체를 json 객체로 변환시켜준다.

$.ajax({
	type: "POST",
	url: "/api/memos",
	contentType: "application/json", // JSON 형식으로 전달함을 알리기
	data: JSON.stringify(data),
	success: function (response) {
		alert('메시지가 성공적으로 작성되었습니다.');
		window.location.reload();
	}
});

 

$(document).ready()

JQuery 이벤트 메서드중 하나로 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미이다.

프로그램이 시작하자마자 실행되는 메서드라고 생각하면된다.

$(document).ready(function(){
	...
});