growing pear

- $(document).ready 함수의 의미 페이지가 모두 로드된 직후 실행할 자바스크립트 코드를 넣는 곳 컴파일러가 index.html을 위에서 아래로 순서대로 해석을 하는데 js 파일이 index 파일에서 위쪽에 적혀있어도 index 파일을 파일 끝까지 모두 다 해석한 뒤 js 파일의 $(document),ready 부분을 해석함 (일단 접속하면 관심 상품을 보여주어야 하기 때문에 showProduct 함수를 호출하고 있음) - showProduct 만들기 function showProduct() { /** * 관심상품 목록: #product-container * 검색결과 목록: #search-result-box * 관심상품 HTML 만드는 함수: addProductItem */ // 1. GET..

주의!!) 파라미터를 받을 때 파라미터가 JSON 형태면 JS가 알아서 JSON으로 변환함!!! 참고로 파라미터 itemDto는 stringify함수를 거친 결과인 문자열임 function addProduct(itemDto) { /** * modal 뜨게 하는 법: $('#container').addClass('active'); * data를 ajax로 전달할 때는 두 가지가 매우 중요 * 1. contentType: "application/json", * 2. data: JSON.stringify(itemDto), */ /** 주의!!) 파라미터를 받을 때 파라미터가 JSON 형태면 JS가 알아서 JSON으로 변환함!!! * 참고로 파라미터 itemDto는 stringify함수를 거친 결과인 문자열임 ..

- 파일 분리 코드가 지나치게 길어지는 것을 방지하고 가독성을 높이기 위해 html에 몰아서 썼던 Javascript나 CSS를 분리함 - src > main > resources > static > index.html Select Shop 모아보기 탐색하기 Apple 아이폰 11 128GB [자급제] 919,990원 최저가 Apple 아이맥 27형 2020년형 (MXWT2KH/A) 2,289,780 원 X ⏰최저가 설정하기 최저가를 설정해두면 선택하신 상품의 최저가가 떴을 때 표시해드려요! 원 설정하기 - src > main > resources > static > js > basic.js let targetId; $(document).ready(function () { // id 가 query 인 녀..

function deleteOne(id) { // 1. DELETE /api/memos/{id} 에 요청해서 메모를 삭제합니다. $.ajax({ type: "DELETE", url: `/api/memos/${id}`, success: function() { alert("삭제가 완료되었습니다."); window.location.reload(); } }); }

현재 체크모양 버튼의 기능을 구현하고 있음! 수정한 내용을 담고있는 부분은 ${id}-textarea임!! - val() : input 태그에 정의된 value 속성의 값을 확인하고자 할 때 사용 - text() : selector 태그 내에 존재하는 자식태그들 중에 html 태그는 모두 제외한 채 문자열만 가져올 때 사용 function submitEdit(id) { // 1. 작성 대상 메모의 username과 contents 를 확인합니다. let username = $(`${id}-username`).text().trim(); let contents = $(`${id}-textarea`).val().trim(); //${id}-contents가 아님!! // 2. 작성한 메모가 올바른지 isVal..

[개발 스펙 확인] 기존 메모 제거하기 GET API 사용해서 메모 목록 불러오기 메모마다 HTML 만들고 붙이는 함수 만들기 * 하지만, 입력일과 수정일 날짜데이터가 안보인다..!! 어떻게 된거지?!!!!!?!?!??!?! Timestamp와 Week03Applicaion 파일에 뭔가를 빼먹었다 https://nazero.tistory.com/20 타임라인서비스) Repository 만들기 /*Memo.java*/ package com.sparta.week03.domain; ... @NoArgsConstructor // 기본생성자를 만듭니다. @Getter @Entity // 테이블과 연계됨을 스프링에게 알려줍니다. public class Memo extends Timestamped { /.. naze..

/*index.html*/ ... //Validation function isValidContents(contents) { if (contents == '') { //입력한 내용이 없을 때 alert('내용을 입력해주세요'); //경고창 띄움 return false; //함수의 결과값을 false로 리턴 } //입력한 내용이 140byte가 초과되면 if (contents.trim().length > 140) { //trim(): 앞뒤 공백 모두 제거 alert('공백 포함 140자 이하로 입력해주세요'); //경고창 띄움 return false; //함수의 결과값을 false로 리턴 } return true; //함수의 결과값을 true로 리턴 } // 익명의 username을 만듭니다. functio..

- 조건문 Java와 동일 if(조건문) { 조건문이 true일 때 실행되는 부분 } else { 조건문이 false일 때 실행되는 부분 } let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다. for (let i=0; i

- 변수 선언 방법 자바와 달리 자료형을 쓰지 않고 let을 사용 let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요. let b = 2; console.log(a + b); // System.out.println()과 같은 녀석입니다. b = 7; console.log(a + b); - 문자, 숫자 문자 + 숫자 = 문자 let name = 'bknam'; let course = "웹개발의 봄 Spring" // 자바와 다르게 홑/쌍따옴표 상관없습니다. let num = 10; console.log(num + name); // 문자 + 숫자 하면 둘 모두를 문자로 묶습니다. - boolean 값이 true 또는 false 밖에 없음 let age1 = 18..