본문 바로가기

SpringBoot/스파르타 웹개발의 봄 spring

(35)

[스파르타 웹개발의 봄 spring] 03.13~14 메모 조회하기 - getMessages 함수 ##개발 스펙 확인 기존 메모 제거하기 GET API 사용해서 메모 목록 불러오기 메모마다 HTML 만들고 붙이는 함수 만들기 ## GET API 사용해서 메모 목록 불러오기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 메모를 불러와서 보여줍니다. function getMessages() { // 1. 기존 메모 내용을 지웁니다. $('#cards-box').empty(); // 2. 메모 목록을 불러와서 HTML로 붙입니다. $.ajax({ type:'GET', url:'/api/memos', success: function (response){ console.log(response); // 콘솔로 확인 for(let i=0;i

[스파르타 웹개발의 봄 spring] 03.12메모 생성하기 - writePost 함수 ## writePost 함수 완성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // 메모를 생성합니다. function writePost() { // 1. 작성한 메모를 불러옵니다. let contents = $('#contents').val(); // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다. if (isValidContents(contents) == false) { return; } // 3. genRandomName 함수를 통해 익명의 username을 만듭니다. let username = genRandomName(10); // 4. 전달할 data JSON으로 만듭니다. le..

[스파르타 웹개발의 봄 spring] 03.11 클라이언트 설계하기 ## 필요한 기능들 접속하자마자 메모 전체 목록 조회하기 GET API 사용해서 메모 목록 불러오기 메모 마다 HTML 만들고 붙이기 메모 생성하기 사용자가 입력한 메모 내용 확인하기 POST API 사용해서 메모 신규 생성하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기 메모 변경하기 사용자가 클릭한 메모가 어떤 것인지 확인 변경한 메모 내용 확인 PUT API 사용해서 메모 내용 변경하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기 메모 삭제하기 사용자가 클릭한 메모가 어떤 것인지 확인 DELETE API 사용해서 메모 삭제하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기

[스파르타 웹개발의 봄 spring] 03.07~08 javascript 기초 ##자바스크립트 기본 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 // 숫자 let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요. let b = 2; console.log(a + b); // System.out.println()과 같은 녀석입니다. b = 7; console.log(a + b); // 문자열 let a="문자열"; let b='문자열2'; console.log(a + b); // 리스트 let fruits=['사과','바나나']; // 리스트는 [] 로 묶는다 // json 형식 let..

[스파르타 웹개발의 봄 spring] 03.06 HTML,css 기초 ##Html 기초 1.대표적인 태그 h1~h6 → headline의 약자, 신문 제목 같은 녀석이에요. div → divison, 나누는 녀석이에요. 투명 비닐봉투! p → paragraph, 신문 기사 단락과 같은 텍스트 내용을 담습니다. ul, ol, li → (un)ordered list, list에 해당합니다. bullet point. span → 글을 중간중간 잘라내서 색을 입혀준다든지 할 때 사용합니다. table, th, tr, td → 표 입니다! 엑셀 같은 표를 그릴 때 사용합니다. img → 이미지를 나타낼 때 사용합니다. ##css 기초 1.문법 head > style 태그 안에 작성합니다. • 세미콜론(;)으로 마무리합니다. 2. 상속 - - id 또는 class 상속 1 2 3 4..

[스파르타 웹개발의 봄 spring] 03.05 controller 만들기 ## MemoController API 구현 - -메모 생성,조회,업데이트,삭제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 package com.sparta_spring.sparta_spring_week03.controller; import com.sparta_spring.sparta_spring_week03.domain.Memo; import com.sparta_spring.sparta_spring_week03.domain.MemoRepository; import com.sparta_spring.sparta_sprin..

[스파르타 웹개발의 봄 spring] 02.09 API-GET ##GET API 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 package com.sparta_spring.sparta_week02.controller; import com.sparta_spring.sparta_week02.domain.Course; import com.sparta_spring.sparta_week02.domain.CourseRepository; import com.sparta_spring.sparta_week02.domain.CourseRequestDto; import com.sparta_spring.sparta_week02.service.CourseService; import lom..

[스파르타 웹개발의 봄 spring] 03.04 Service 만들기 ## 업데이트 기능하는 MemoService 만들기 : Service 는 업데이트 담당 1. MemoService 업데이트 기능 만들기 - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 package com.sparta_spring.sparta_spring_week03.service; import com.sparta_spring.sparta_spring_week03.domain.Memo; import com.sparta_spring.sparta_spring_week03.domain.MemoRepository; import com.sparta_spring.sparta_spring_week03.domain.MemoRequ..

이전 1 2 3 4 5 다음

티스토리툴바