홈

1. JS : 230424 1) CSS 애니메이션 이벤트 객체 애니메이션가 동작하다가 멈추면, 각 엘리먼트들이 자리 바뀜. dom.js // 4-2. 이벤트 객체 { let s1 = document.querySelector(".s2"); let ul = s1.querySelector("ul"); let current = null; // ul.querySelectorAll("li.current"); let lis = ul.querySelectorAll("li"); for(let li of lis) li.onclick = ...

1. JS : 230417 1) ES2015 ES2015는 ES6를 의미한다. 클래스와 모듈화가 ES6의 가장 큰 특징이다. 2) ORM JPA : 원래는 SQL문을 안 써야 하는데, JPA가 JPQL로 SQL문을 써야 할 수도 있어서 별로 좋지 않은 프레임워크일 수도 있다. Entity에 어노테이션이 너무 많이 붙어버린다. 3) ES6 개념 shape.js let canvas = document.createElement("canvas"); canvas.width=500; canvas.height=400; /...

1. 인증과 권한 1 : 230410 1) Session 개념 a. Session 로직 a) 조건 1 세션 / 쿠키를 이용해서 사용자가 인증되었던 적이 있는지를 확인함. if 너 로그인 했니? 아니요 -> 로그인하고 와 b) 조건 2 if 너 로그인 햇니? 네 -> if(그럼 너 어드민 이니?) 아니요 -> 권한이 없다~ 얘. b. Session-Id 개념 세션아이디는 서버자원을 사용하는 것이기 때문에 인증을 하면 그때 키(세션아이디, 세션키)가 부여받게 된다.** package kr.co.rland.web.controller.admin;...

1. Vue.js, NodeJS : 230403 1) Vue.js의 API 정리 함수에게 전달되는 옵션이라서 ‘Options API’라고 부른다. Global API : Global API은 create를 통해서 전달되는 인자를 API를 통해서 전달된다. Built-ins API는 지시자를 사용하는 API이다. 1차 프로젝트는 원래, Vue.js에서 Options API, Global API, Built-ins API만 사용하려고 했다. 이 3가지 API가 Vue.js에서 제공해주는 기본 API이다. 공식 레퍼런스에 있는 나머지 API는 Vue에서 기본적으로 제공해주는 AP...

1. AJAX, REST API : 230327 1) View단에서 심어놓은 데이터, JS에서 사용(최종) JS에서 자식 노드에서 부모 노드는 1개라서 부모 노드 찾기는 쉽다. 반대로 자식 노드는 여러 개이므로 한 번에 찾기가 힘들다.(여러 조건이 필요) View단에서 심어놓은 데이터를 심기 위해서 html dataset을 이용한다. 하지만, 우리는 thymeleaf를 사용하기 때문에 타임리프에서 사용하는 dataset을 이용하게 된다. 위의 코드에서 let categoryId =1;로 데이터를 상수로 지정했지만, 우리가 원하는 형태는 사용자 입력에 의해서 데이터를 심어 놓고 JS...

1. 타임리프 사용법 : 230320 1) 타임리프에서 link 태그를 사용해서 url 생성 th:href는 @{url 경로}로 설정하여 이용하는데 “이동 경로”를 의미한다. th:href=”@{detail(id=${menu.id})}” “소괄호”가 쿼리스트링인 “?”를 의미한다. 추가 내용 : th:text는 문자열 생성 th:each는 반복문 th:if는 if 조건문 실습 코드 : MenuController.java // @RequestMapping에서 detail을 "/deta...

1. 채팅 기능 1 : 230319 mariaDB, STOMP, JPA, Mybatis, thymeleaf, ajax 실습 코드 : SpringConfig.java package com.socketjs.chat.config; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.EnableWebS...

1. SpringBoot 방법론 : 230313 1) 트랜잭션 방법론 1) 트랜잭션 개념 : ACID(Automicity, Consistency, Isolation, Durability) 원자성, 일관성, 고립성, 지속성 2) 트랜잭션 실습 : a. 첫 번째 실습 : 업데이트를 2번 실행했는데 1번만 처리한다. 실습 코드 1 : DefaultMenuService.java package kr.co.rland.web.service; import java.util.List; import org.springframework.bean...

1. 기본 자료구조 및 알고리즘 : 230307 ~ 1) 배열 : 11720번 230307 문제 : 숫자의 합 구하기 1) parseInt() 메소드를 사용하여 Java에서 char 배열을 int로 변환할 수 있습니다. 이 메서드는 String 객체를 가져와 정수 값을 반환합니다. 이 메서드는 Integer 클래스에 속하므로 정수로 변환하는 데 사용할 수 있습니다. 2) parseInt() 메소드와 valueOf() 메소드를 사용하여 Java에서 char 배열을 int로 변환할 수 있습니다. parseInt() 메서드는 valueOf() 메서드가 반환하는 String...

1. Mybatis : 230306 1) 이전 내용 복습 : a. 리액티브 개념 : 모델을 이용해서 View와 Controller로 나눈 것으로 MVC 패턴의 다른말이다. 리액티브 플랫폼 : react, angular, vue.js가 있다. model을 view가 소비한다. 컨트롤러 개입 없이 model이 view를 바꾸고 view가 model을바꾸는 개념이 리액티브 개념이다. 그래서 re-active이다. c. Jaesper : 기존 코드를 서블릿 코드로 만들어주는 도구이다. d. JSTL과 EL을 이용한 View의 코드 ...

1. Spring Boot 개발 환경 인텔리제이 단축키 : “sout” 단축키 : 인텔리제이에서 “sout”만 입력하면 Sytem.out.println() 단축키 커맨드 + 옵션 + V : 변수 뽑아내기!! 변수 생성하는 중요 단축키 1) HikariCP HikariCP라는 커넥션 풀이 스프링 2.x 버전부터는 기본이다. 스레드로서 속도가 빠르다. 커넥션 풀이라는 것이 스레드를 미리 만들어놓고 나눠줘서 네트워크 속도가 빠르다. 2) SLF4J 로깅을 통합한 인터페이스로서 로깅에 필요한 경우에 쓰인다. JPA에서 자동화 기능 때문에 DB에 접...

1. SpringBoot 프로젝트 진행 시, 주의할 7가지 내용** 1) Raw 타입은 사용하지 말자 클래스와 인터페이스 선언에 타입 매개변수가 쓰이면 이를 제너릭 클래스 혹은 제너릭 인터페이스 List 인터페이스는 원소의 타입을 나타내는 타입 매개변수 E를 받는다. a. Raw 타입이란? Raw 타입이란, 제너릭 타입에서 타입 매개 변수를 전혀 사용하지 않을 때를 말한다. 예를 들어 List를 선언할 때 List만 선언해 놓은 경우를 말한다. 실습 코드 : private final Collection stamps = ...; 이 코드를 ...