SPRING#1_5_Project_Memo_Part

카테고리 없음

SPRING#1_5_Project_Memo_Part_1

성-민 2023. 2. 6. 22:57

1. 메모장 프로젝트 소개

- 개요

앞에서 배운 WEB, API, Spring, DB, JPA 등의 개념 및 기술을 활용하여 간단한 메모장 사이트를 만들어 보겠습니다.

- 필요한 기능 살펴보기

1) 접속 하자마자 메모장 전체 목록 조회하기

a. GET API 사용해서 메모 목록 불러오기

b. 메모마다 HTML 만들고 붙이기

2) 메모 생성하기

a. 사용자가 입력한 메모 내용 확인하기

b. POST API 사용해서 신규 메모 생성하기

c. 화면 새로고침하여 업데이트 된 메모 목록 확인하기

3) 메모 변경하기

a. 사용자가 선택하고 수정한 메모가 어떤 것인지 확인

b. 변경한 메모 내용 확인

c. PUT API 사용해서 메모 내용 변경하기

d. 화면 새로고침하여 업데이트 된 메모 목록 확인하기

4) 메모 삭제하기

a. 사용자가 선택한 메모가 어떤 것인지 확인

b. DELETE API 사용해서 메모 삭제하기

c. 화면 새로고침하여 업데이트 된 메모 목록 확인하기

2. HTML, CSS 기초

HTML, CSS, Javascript의 구분

- HTML은 뼈대고, CSS는 꾸며주는 녀석입니다.

HTML의 기초

- head, body 태그로 구분됩니다.

head 태그는 CSS, Javascript 코드를 포함

body 태그는 뼈대 전체를 포함

대표적인 HTML 태그들

- h1~h6

=> headline의 약자, 사이즈

- div

=> divison, 나누는 것

- P

=> paragraph, 신문 기사 단락과 같은 텍스트 내용을 담음

- ul, ol ,li

=> (un)ordered list, list에 해당합니다. bullet point

- span

=> 글을 중간중간 잘라내서 색을 입혀준다든지 할 때 사용합니다.

- table, th, tr, td

=> 엑셀 같은 표를 그릴 때 사용합니다.

- img

=> 이미지를 나타낼 때 사용합니다.

등등이 있습니다.

CSS의 기초

- 문법

head > style 태그 안에 작성합니다.

세미콜론(;)으로 마무리 합니다.

3. JavaScript 기초

Javascript란

- 브라우저를 살아 숨쉬게 만드는 역할

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

크롬 개발자 도구

- Javascript 공부를 기본으로 웹서비스 개발하는데 필수입니다.

- F12 키를 누르면 개발자 도구가 뜹니다

Javascript기초 문법

- 변수

let a = 3; 
let b = 2;
console.log(a + b); 
b = 7;
console.log(a + b);

- 자료형(문자, 숫자, boolean, 리스트, 딕셔너리)

- 문자, 숫자

let name = 'bknam';
let course = "웹개발의 봄 Spring"
let num = 10;
console.log(num + name);

- boolean

let age1 = 18;
let age2 = 20;
let isAdult = age1 > 19;
console.log(isAdult); 
isAdult = age2 > 19;
console.log(isAdult)

- 리스트

let fruits = ['사과', '딸기', '수박']
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

- 딕셔너리

let course = {
	'title': '웹개발의 봄, Spring',
	'tutor': '남병관'
};

console.log(course);

- 반복문

let fruits = ['사과', '딸기', '수박'];
for (let i=0; i<fruits.length; i++) {
	let fruit = fruits[i];
	console.log(fruit);
}

- 조건문

let fruits = ['사과', '딸기', '수박']; 
for (let i=0; i<fruits.length; i++) {
	let fruit = fruits[i];
	console.log(fruit == '수박');
}

- 함수

function sample() {
	alert('얼럿!');
}

- 백틱

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

4. jQuery 기초

jQuery

- jQuery는 미리 작성된 자바스크립트 함수 모음집입니다.

- 주로 사용하는 HTML, CSS 조작 함수를 미리 만들어서 제공해 줍니다.

*jQuery는 head 태그 사이에 임포트 해준다.

jQuery 사용법

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

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

- 개발자 도구 > 콘솔에서 jQuery를 사용하려면 해당 웹사이트에 이미 임포트 되어 있어야 합니다.

숨기기 / 나타내기

- HTML 나타내기

$('#post-box').show();

- HTML 숨기기

$('#post-box').hide();

input 값 가져오기, 넣기

- input 값 넣기

$('#post-url').val('new text');

- input 값 가져오기

$('#post-url').val();

HTML 없애기, 추가하기

- HTML 없애기

$('#post-url').val();

- 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>`);

5. 스프링 MVC 이해 - Response

스프링 MVC

- MVC (Model - View - Controller) 디자인 패턴

- server에서 HTML을 내려주는 경우

1. 정적(static) 웹 페이지

- Controller

1. Client의 요청을 Model로 받아 처리

ex) 회원가입을 위한 개인 정보들 (id, password, name)

2. Client에게 View(정적 웹 페이지, HTML)를 내려줌

2. 동적(dynamic) 웹 페이지

- Controller

1. Client의 요청을 Model로 받아 처리

2. Template engine 에게 View, Model 전달

a. View : 동적 HTML 파일

b. Model : View에 적용할 정보들

3. Template engine

a. View에 Model을 적용 => 동적 웹페이지 생성

ex) 로그인 성공 시, "로그인된 사용자의 id"를 페이지에 추가

Template engine 종류 : 타임리프(Thymeleaf), Groovy, FreeMarker, Jade 등 (스프링에서 JSP이용은 추천X)

4. Client 에게 View(동적 웹 페이지 HTML)를 내려줌