홈

1. Vue.js 인증과 권한 : 230508 1) Pinia 사용 방법 pinia 설치 방법** : npm install pinia a. Pinia 기본 설정 main.js import { createApp } from 'vue' import { createRouter, createWebHashHistory } from 'vue-router' import { createPinia } from 'pinia' const pinia = createPinia(); // Vue.createApp이 글로벌 라이브러리이다. createApp(App) .use(router) .use(pini...

1. 성능 개선 테스트 : 230507 1) 성능 개선에 대한 개념 성능 개선이 무엇인가 : 렌더링 성능저하 해결하기 SQL 튜닝 개념 및 접근 방법 MySQL 쿼리 튜닝 은 어떻게 할까? 기초편 (INDEX) 2) 성능 개선하는 실제 예시 홈페이지 리라이팅 시, 아키텍쳐 변경 문제점 JPA N+1 문제의 해결 방법 도메인 운영시, 데이터가 필요한 이유

1. JPA 기본 개념 : 230501 1) JPA과 ORM 기본 개념 ORM : DB와 서비스를 연결 시, 불필요한 작업을 줄여준다. persistence layer로 어떤 것을 사용하십니까? : ORM을 이용한다. a. 정리 : Mybatis : DAO의 함수와 함수에서 구현된 쿼리문을 매핑해놓는 것이다. Mapper Tool만 작성하면, 알아서 매핑해주더라. JPA : JPA는 Object와 Table을 매핑한다. 그러면 우리는 SQL문을 작성하지 않아도 된다. JPA가 DAO도 구현해준다. 또한, JPA가 Repository의 인터페이스도 구...

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...