전체 글 439

스프링 35강. 스프링 구조 - OSIV, 영속화

스프링 Layer별 구조 1. 필터 역할 : 걸러주는 애 필터와 컨트롤러 사이에서 DB Connection 객체를 가져온다. == 세션 연결 (웹서버 아파치 톰캣 : request, session(id)으로 사용자 구분) ↓ OPEN SESSION / ↑ CLOSE SESSION : OSIV(Open Session In View) = TRUE 2. 컨트롤러 @Controller @RestController (String(text/html), 자바 오브젝트(application/json)) 역할 : 클라이언트의 요청을 받아 View나 Data를 응답 PutMapping( ) { 서비스.송금( ) } PutMapping( ) { 서비스.송금( ) } put매핑 요청은 fetch밖에 못한다! 3. 서비스 @S..

Spring/Blog-V1 2022.03.18

스프링 34강. id 중복체크

우리 블로그에는 한 가지 문제가 있다 기존에 존재하는 username으로 회원 가입하면 서버가 터져버린다. UNIQUE 제약조건에 위배된 것이다. 보통의 사이트에서 회원 가입할 때 아이디 중복확인 버튼이 만들어져 있었는데 그냥 키보드 입력 때마다 DB에서 이벤트 검사를 받을 수 있다. get요청이다. 이 아이디 DB에 있어? get 요청인데 Ajax 안 써도 되지 않을까? 안 쓰면 계속해서 전체 페이지가 새로고침 되기 때문에 get 요청인데도 Ajax를 사용한다. jQuery를 사용해주기 위해 헤더 레이아웃에 추가해주자. 일일이 머스태치 파일마다 추가하지 않아도 부분 템플릿으로 편하게 사용 가능하다. 우선 input 태그 dom을 찾아서 value 찾으려면 dom에 id를 부여해줘야겠다! 회원가입 키보드..

Spring/Blog-V1 2022.03.17

스프링 33강. 페이징

mariadb 페이징 SELECT * FROM post LIMIT 0,3; 주의할 점 첫 번째 숫자 0은 번지수, 두 번째 숫자 3은 한 페이지에 띄울 개수이다. 0, 3은 0번지부터 3개씩 페이징 하겠다는 말이다. 첫 번째 숫자만 바뀌면서 페이징 해주면 되겠다. 이렇게 네이티브 쿼리 만들어주면 되는데 jpa를 쓰면 알아서 페이징을 해준다. findAll 메서드에서 sort도 해주고 페이징도 해주는 메서드가 없다. 우선 정렬은 포기하고 실습해보자. findAll의 리턴타입이 Page인 것을 볼 수 있다. 페이지 타입은 어떻게 생긴 데이터를 건네주는지 테스트해보자. @ResponseBody를 걸어주면 RestController처럼 데이터를 리턴해준다. @GetMapping("test/post/list") ..

Spring/Blog-V1 2022.03.17

스프링 32강. 인덱스

USE greendb; CREATE TABLE boargreendbd ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(60), content LONGTEXT ); DESC board; 현재 쿼리 실행 단축키 Ctrl + Shift + F9 CREATE INDEX index_title ON board (title); SHOW INDEX FROM board; BTREE가 뭘까? 비트리를 알기 전에 다음 개념을 알고 가자. 다음과 같이 데이터가 저장되어 있을 때 지수를 찾기 위해 검색을 하면 기본적으로 풀 스캔한다. 3번째 데이터에서 지수를 발견했을 때 스캔을 멈출까? 멈추지 않는다. 지수는 유일한 값이 아니기 때문이다. 아래에 지수가 또 있을지도 모르니 끝까지 스캔..

Spring/Blog-V1 2022.03.15

자바스크립트 7강. JQuery

바닐라 자바스크립트 문법 : 라이브러리 도움 없이 순수한 자바스크립트 이때까지 라이브러리의 도움 없이 순수한 자바스크립트 문법을 배웠다. 라이브러리의 도움을 받아 좀 더 편하게 코드를 짜보자. 자바스크립트는 브라우저가 인식하는 언어이다. 자바스크립트로 뭘 할 수 있나? 기본적으로 http프로토콜은 html 파일을 돌려주는데 이때마다 새로고침이 일어난다. 나무는 다시 그릴 필요가 없었는데 다 다시 그려진 것이다. 이는 낭비가 너무 심하다. 그래서 나온 통신이 AJAX 통신이다. AJAX 통신을 해서 fetch 요청을 하면 JSON 데이터가 응답이 오는데 그러면 해 부분만 지우고 달로 다시 그려준다. 부분 리로드가 가능해진 것이다. 통신도 경량화되고 부분만 다시 그릴 수 있다. AJAX 통신을 할 때 뭐가 ..

JavaScript 2022.03.15

자바스크립트 6강. CORS 정책

해당 id의 포인트를 10만점 올려주는 메서드가 있다. @GetMapping(/point/{id}) 실제 실행될 쿼리 : update 인증이 필요한 요청이다. 아무나 update 할 수 있으면 안되기 때문에 관리자 아이디인지 확인해야한다! 로그인했으면 세션에 오브젝트가 하나 들어있을 텐데 이 세션에 아이디가 admin이면 update가 가능하게 하고 세션에 아무 값도 없거나, username이 admin이 아니면 튕겨내야 한다! id가 23번인 사람을 admin이 아닌데도 10만점을 올릴 수 있는 방법이 있다. 어떻게? GET:/point/23 1. postman 이용 2. 브라우저 주소창 이용 3. 하이퍼링크 a 태그 4. form 태그 요청 데이터베이스의 데이터에 영향을 미치는 write 메서드를 사..

JavaScript 2022.03.15

자바스크립트 5강. promise

pending은 대기하다 라는 뜻이다. Prototype은 원형이라고 생각하면 된다. Promise는 버퍼가 끝까지 다운로드할 때까지 pending중인 것이다. 이게 fulfilled이다. 우리가 받을 데이터가 1, 2, 3, 4이니까 모든 데이터가 버퍼를 꽉 채울때까지 pending상태인 것이다. 4가 끝이라는 건 어떻게 알까? 데이터가 끝이라는 자기들만의 프로토콜이 있을 것이다. 우린 몰라도 된다. 결과의 타입이 Response라는 타입이다. 결과를 Response 타입으로 받을 수 있다는 말인데 자바스크립트는 타입이 따로 없으니 신경 쓰지 않아도 된다. pending 상태에 데이터를 던지면 어음을 준다. 데이터는 나중에 줄테니까 일단 이거부터 받아! 인 것이다. 빈 박스를 먼저 준다. 이게 prom..

JavaScript 2022.03.15

자바스크립트 4강. fetch 함수

자바스크립트 공부하기 - 4단계 첫번째글 첫번째글 DOM을 제어하여 박스 안에 데이터를 추가해보자. 내가 찾은 타겟 뒤에 값을 넣을 건데 글자(p태그)를 찾는 게 아닌 박스를 찾아줘야 한다. 부모에게 자식을 추가해주는 것이다. 이때 중요한 것은 데이터를 추가해주는 게 아닌 dom을 추가해줘야 한다. 자바스크립트 공부하기 - 4단계 첫번째글 첫번째박스 값 채우기 첫번째글 통신으로 데이터를 받아서 그림을 그려줄 수 있다. 두 번째 박스 값 채우기 버튼을 클릭하면 list 데이터가 그려질 수 있게 만들어보자. 자바스크립트 공부하기 - 4단계 첫번째글 첫번째박스 값 채우기 첫번째글 두번째박스 값 채우기 자바스크립트로 html에 그림 그리는 방법이다!! 이렇게 사용하면 내가 원하는 부분만 리로드 된다. AJAX!..

JavaScript 2022.03.14

자바스크립트 3강. 람다 함수

특정 element를 찾을 때 . 이나 #을 사용하지 않고 메서드를 이용해 바로 찾을 수 있는 방법이 있다. document.getElementById("아이디명"); document.getElementsByClassName("클래스명"); document.getElementsByTagName("태그명"); 하지만 이렇게 사용하면 3가지의 메서드를 알아야 하기 때문에 추천하지 않는 방법이다. querySelector를 사용하자! 클릭 위 코드와 같이 사용하면 add 메서드에 인수를 넘겨줄 수 없다. 클릭 이벤트 리스너의 function 자리에 의미없는 이름의 hello 함수를 넣어주면 함수가 실행되지 않고 버튼이 클릭이 될 때 hello 함수가 호출된다. 클릭하면 무조건 실행될 중괄호 내부이지 hello..

JavaScript 2022.03.14

자바스크립트 2강. function

자바와 함수가 생긴 모양이 다르다. function이라고 선언만 해준다. 얘는 함수입니다 라고 알려만 주는 것이다. add 함수에 매개변수를 받을 때 let n1, let n2라고 적는 게 아니라 선언할 필요 없이 n1, n2라고만 적는다. 리턴을 해주고 싶어도 타입이 없으니까 그냥 return n1 + n2; 하면 끝이다. 더하기 리턴하기 싫다면 console.log(n1 + n2) 끝! 이 함수는 버튼으로 제어해줄 것이다. 이 버튼을 클릭했을 때 일어날 이벤트를 설정할 때는 2가지 방법이 있다. 1. onclick 속성 걸어주기 클릭했을 때 어떤 일이 생기게 할 것이냐? add( ) 메서드를 호출해줄 것이다. 필요한 인수도 빼먹지 말고 넣어주자. 더하기 자바 Swing에서는 버튼을 지켜보고 있는 리스..

JavaScript 2022.03.12