커피좋아요

■ 다중 셀렉트 박스 만들기 이전에 포스팅했던 내용을 활용하고 추가적으로 다중 셀렉트 박스를 만들어 보려고한다. 우선 이전에 적었던 insert, select를 활용하여 의류를 등록하고, 셀렉트 박스에서 등록한 의류 목록을 볼 수 있는 페이지를 만들었다. 이전에 적었던 내용과 비슷하여 이 부분은 따로 코드를 추가하지 않았다. 의류 종류를 선택하고 해당 의류에 항목을 추가할 수 있는 html을 만들어주었다. 그리고 종류의 셀렉트 박스는 기존에 사용했던 의류 등록하기 페이지에서 만들어준 코드 재사용할 수 있기에 가져와주었다. $(function(){ $.ajax({ type : "get", url : "/clothes/showall", dataType : "json", success : (res) => { ..

■ GetMapping과 PostMapping 활용지난 게시글에서 insert와 select를 이용해서 추가, 목록 출력을 해보았는데 이번에는 update를 이용해서 수정을 해보려고한다. 우선 출력된 목록에서 "수정"을 누르면 수정할 수 있는 html을 만들어주었다. 그렇다고 해서 1번의 수정을 누른다고 해서 바로 해당 id, passwd 등에 맞는 html을 띄워주는 것은 아니다. 추가적으로 수정을 눌렀을때 num에 맞는 데이터들을 보여주어야하기 때문에 추가적인 작업이 필요하다. @GetMapping("/updateshow") public String updateShow() { return "users/update"; } 아래와 같이 @RequestParam을 이용하여 int id, model을 파라미..

■ GetMapping HTTP GET 요청을 처리하는 메소드를 맵핑하는 어노테이션으로 어떤 페이지를 보여줄지 결정하는 역할을 하며 url에 데이터를 포함시켜 요청한다. @Controller @RequestMapping("/users") public class SigninController { @GetMapping("/signin") public String getSignin() { return "users/signin"; } } ■ PostMapping HTML에서 태그를 사용하거나 ajax를 활용하여 서버로 데이터를 전송할때 주로 사용된다. @PostMapping("/signin") @ResponseBody public Map setSignin(@ModelAttribute SigninDto signi..

■ 스프링 Spring 스프링은 Java를 기반으로 한 웹 어플리케이션 프레임워크이며 자바 객체와 라이브러리들을 관리해주며 tomcat과 같은 웹 어플리케이션 서비스가 내장되어있다. 또한 자바 객체를 직접 스프링 안에서 관리하며 객체의 생성 및 소멸과 같은 생명주기를 관리한다 제어의 역전(Invertion of Control) 제어의 역전은 객체의 제어권을 프레임워크 컨테이너에게 넘기는 개념이다. 자바에서는 사용자가 각 객체를 직접 생성하고 제어해야했다면 스프링에서는 스프링 컨테이너에 Bean(객체)을 등록하면 스프링 컨테이너에서 객체의 생명주기를 컨트롤 해준다. 의존성 주입(Dependency Injection) 의존성 주입은 클래스간의 의존성을 클래스 외부에서 주입하는 것을 의미하는데 이는 객체를 외..

■ LinkedList Linked List는 각 노드(객체)의 데이터와 포인터를 가지고 있는데 데이터를 담고 있는 노드들이 연결되어있고, 노드의 포인터가 이전 노드의 주소와 다음 노드의 주소를 참조함으로서 구성된다. ArrayList에 비해서 데이터의 추가 삭제는 용이하나 탐색이 필요한 경우에는 속도가 떨어지는 단점이 있다. ● LinkedList의 종류 종류에 따라 next만 쓰는 경우 prev와 함께 쓰는 경우 등 다르게 사용된다. public class Node { Node next; // 다음 노드 주소를 저장하는 필드 Node prev; // 이전 노드 주소를 저장하는 필드 int data; // 데이터를 저장하는 필드 } singly linked list 다음 노드를 가리키기 위한 포인터 필..

■ 배열 ● 배열 생성하기 배열은 대괄호 [] 또는 new Array를 사용하여 생성한다 let players = ["손흥민", "이강인", "김민재", "황희찬"]; let num = [1,2,3,4,5]; let item = new Array("컴퓨터","노트북","아이패드"); ● 배열의 요소 접근 배열 내의 요소는 0부터 시작하는 인덱스를 사용하여 해당 인덱스의 값을 가져온다 let players = ["손흥민", "이강인", "김민재", "황희찬"]; let num = [1,2,3,4,5]; let item = new Array("컴퓨터","노트북","아이패드"); console.log(players[2]); console.log(num[0]); console.log(item[1]); ● 배열의..

■ JavaScript Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주며 서버,앱 등에서 다양하게 활용되고 있는 언어이다 ● 변수 let과 상수 const let은 데이터의 값을 변경 가능한 변수이고 const는 데이터의 값을 변경할 수 없는 상수이며 자바와 마찬가지로 숫자 타입, 문자열 타입 등을 결합이 가능하다 let name; // 가능 const title; // 불가능 let cat = "고양이"; cat = "강아지"; // cat이라는 변수에 다른 값이 대입될 수 있다 const user = "손흥민"; user = "김민재"; // 값 변경이 불가능하다 let num1 = 300; let num2 = 500; let sum = num1 + num2; conso..

■ ArrayList ArrayList는 List 인터페이스를 구현한 구체적인 클래스 중 하나로서 크기가 가변적으로 변하는 선형리스트이다. 기존의 배열으로는 자료를 담고 관리하는데 불편한점이 있어 나온 것이 ArrayList이다. ● 특징 연속적인 데이터의 리스트 ArrayList 클래스는 내부적으로 Object 배열을 이용하여 요소를 저장한다 배열을 이용하기 때문에 인덱스를 이용해 요소에 빠르게 접근 할 수 있다 배열은 크기가 고정되어 있어 불편함이 있지만 ArrayList는 데이터 적재량에 따라 가변적으로 공간을 늘리거나 줄일 수 있어 동적 할당에 해당된다 데이터를 리스트 중간에 삽입&삭제 할 경우 , 중간에 빈 공간이 발생하지 않도록 요소의 위치를 앞뒤로 자동으로 이동시키므로 삽입&삭제의 동작은 느..

■ JOIN데이터베이스에서 두개 이상의 테이블을 연결하여 하나의 결과의 테이블을 만드는 것을 의미한다 데이터 조회 시 다른 테이블의 데이터를 함께 조회 할 경우에 사용하며 데이터베이스에서 테이블을 분리하여 데이터 중복을 최소화 하고 데이터의 일관성을 유지하기 위해 사용한다 JOIN은 INNER JOIN, OUTER JOIN으로 나뉘며 OUTER JOIN은 다시 LEFT OUTER JOIN, RIGHT OUTER JOIN, FULL OUTER JOIN으로 나뉜다 ● INNER JOIN 조인하는 두 테이블에서 ON 절의 조건이 일치하는 결과만 출력한다SELECT * FROM 테이블1 INNER JOIN 테이블2 ON 테이블1.열 = 테이블2.열; ● LEFT, RIGHT OUTER JOINLEFT, RIGH..

■ MySQL 활용 MySQL을 활용하여 맘대로 DB, Table 생성후 쿼리문 적용해보기 ● soccer 데이터베이스 생성 ● table을 생성하고 필드에 auto_increment, primary key를 id에 주어 들어가는 순서대로 자동생성하게 해주었고 이름,유니폼번호,포지션,나이,국적,입단 년도 생성 ● table이 생성됬는지 show tables; 로 확인한 후 Insert into 테이블명 values(); 를 써서 적은 순서대로 입력 ● 입력 후 잘 들어갔는지 확인을 위해 select * from 테이블명; 을 통해 확인해주었고 잘들어갔다 ● 이것저것 select문 활용 1) name과 position만 출력하되 name을 내림차순으로 정렬 select 컬럼명, 컬럼명 from 테이블명 o..