우리가 사이트를 이용할 때 흔히 볼 수 있는 검색 필터 기능을 한 번 자바스크립트로 구현해볼 것이다.코드 풀이 filter는 boolean 형식이다. form태그를 쓴다면, form 이 제출될때 이벤트가 발생하도록 해야함.: input 에 대한 key 이벤트 사용 Xsubmit 에 대한 click 이벤트 사용 Xform 에 대한 submit 이벤트를 사용한다.form이 submit 되면 새로운 요청이 발생하고, 이후의 자바 스크립트는 무시한다. form 에 대한 submit 이벤트는 반드시 !! 첫줄에 이벤트 기본작동을 막아야함.->   event.preventDefault() 확실하게 하기 위해서는 console.log 를 이용하는 것이 가장 바람직하다.->   console.log(searchValu..

오늘은 자바스크립트의 클릭이벤트를 활용하는 방법을 알아볼거다. 하나의 버튼을 이용하여, 오름차순 정렬과 내림차순 정렬 모두 수행할 수 있도록 한다. 즉, 홀수번째로 눌렀을때는 오름차순 정렬짝수번째로 눌렀을때는 내림차순 정렬로 바뀌도록 할 것이다 script 를 해당 폴더에 넣어두고, 선언해서 사용한다->     arrow 라는 클래스를 만들어서 여기에 🔺또는 🔻가 나오도록 할것이다.🔺: 오름차순을 의미🔻 : 내림차순을 의미 order 값이 1이라면, 버튼을 한번 더 눌렀을때에는 값이 -1로 바뀐다.->    const order = +target.getAttribute('order')target.setAttribute('order', -order) 문자열이 아닌, 정수형태로 비교하기 위해서 + 부..

이번엔 JavaScript의 정렬에 대해서 한 번 알아보자.출력할 js파일을 vscode에 넣어두어야한다.const arr = [ { "user": "TrynMst", "champion": "퀸", "team": "블루", "kill": 7, "death": 7, "assist": 7, "damage": 27176, "cs": 173 }, { "user": "강승우의 제발PLZ", "champion": "마오카이", "team": "블루", "kill": 4, "death": 6, "assist": 17, ..

오늘은 JavaScript를 접한 나를 위해 기본을 한 번 다져볼 것이다.유의사항- JavaScript는 자료형을 쓰지 않아도 된다.동적 타입을 지원해주기 때문.같은 변수에 서로 다른 값을 넣어도, 에러가 나지 않고 값과 타입이 변한다. - 변수로는 var와 let이 있다. 그러나, 일반적으로 let을 많이 사용한다.var는 재선언이 가능해서, 변수가 어디에 선언되어 있는지 판단하기가 어렵기 때문에프로그램상의 오류를 일으킬 수 있어서 잘 사용하지 않는다. - 상수로는 const가 있다. 상수는 변하지 않고 일정한 값을 갖는 수를 의미상수로 지정한 후에는 나중에 값을 바꿀 수 없다. 변수let으로 선언> let apple = 'yummy' 상수const로 선언> const arr = [ 1, 2, 3 ] ..

매장 같은 곳에서 사용하는 포스기들의 시스템을 실제로 비슷하게 구현하여 보자.1. 테이블로 구성해야 하는 항목 = CRUD 작업 대상 1. 상품 테이블 (Product)2. 매출 테이블 (Sales) 2. 각 테이블에 대한 스키마 구성상품 테이블상품번호(primary key)상품명이미지단가수량NUMBERVARCHAR2VARCHAR2NUMBERNUMBER (default 0) 매출테이블매출번호(primary key)날짜상품번호(foreign key)판매수량NUMBERDATENUMBERNUMBER 3. 각 테이블에 대해서 구현할 CRUD 기능상품테이블기능설명insert상품 등록select상품 조회(전체 목록 / 단일 조회) -- 2가지update수량 변경delete상품 삭제  매출테이블기능설명insert매출..

json과 ajax가 무엇인지 알아보자. 또한, @RestController를 사용해 보자.JSON : JavaScript Object Notation 자바스크립트 토대로 개발되었으며, 여러 프로그래밍언어에도 사용할 수 있는 독립형 언어이다.데이터 객체의 형태는 속성 - 값 쌍 형태.주로, 웹 브라우저와 웹 서버간 비동기 통신, 데이터 교환 등에 사용된다. home.jspday10 ex01 - ajax(1) 정수반환 ex02 - ajax(2) 문자열 반환 ex03 - ajax(3) map 반환 ex04 - ajax(4) List< DTO 반환(DB 이용 O) Ex01Controllerimport org.springframework.stereotype.Controller;import org.sprin..