키자드에 등록된 dbelle의 티스토리 포스트 목록

dbelle의 등록된 링크

dbelle로 등록된 티스토리 포스트 수는 96건입니다.

[React] 배열에 항목 수정하기 [내부링크]

1. active이용 1) App.js 에 active 추가 const [users, setUsers] = useState([ { id: 1, username: 'velopert', email: '[email protected]', active: true }, { id: 2, username: 'tester', email: '[email protected]', active: false }, { id: 3, username: 'liz', email: '[email protected]', active: false } ]); 2) userLisrt.js 부분에 style추가 function User({ user, onRemove }) { return ( {user.username} ({user.e..

[React] 배열에 항목 제거하기 [내부링크]

1. 삭제 ui 와 아이디를 가제와서 삭제하는 함수 만들기 1) userList.js -- User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 한다 () => Remove(id) 함수로 새로 만들지 않고 onRemove(id)를 적용한다면 렌더링 된 순간 함수 호출된다. import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(u..

[React] 배열에 항목 추가하기 [내부링크]

1. username, eamil, 등록하기 버튼 ui 준비 - createUser.js import React from "react"; function CreateUser({username, email, onChange, onCreate}){ return( 등록 ); } export default CreateUser; 2. 배열에 항목 추가하기 구현 - App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App_4() { //CreateUser에서 필요한 props 준비 const [inputs, setInputs..

[React] 배열 렌더링 하기 [내부링크]

1. 배열 렌더링 하기(기본) 1) UserList.js - 기본 배열 정렬 import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: '[email protected]' }, { id: 2, username: 'tester', email: '[email protected]' }, { id: 3, username: 'liz', email: '[email protected]' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username..

[기본 자료구조-Class] Extends 와 Implements 의 차이점 [내부링크]

1. Extends 1) 일반클래스, 추상클래스(abstract 클래스)에 상속 2) 오버라이딩(재정의)x 3) 다중 상속 x 4) class to class, interface to interface 상속은 extends를 사용한다 2. Implements 1) interface 상속 ** 인터페이스 - 모든 멤버변수는 public static final (생략가능) - 모든 메서드는 public abstract (생략가능) - 그 자체로 인스턴스 생성 x -> implements 사용하여 구현 2) 오버라이딩(재정의)0 -> 부모 객체는 선언안할시 정의 내용을 자식에서 오바라이딩(재정의)해서 사용 3) class 클래스 이름 implements 인터페이스 이름 // 인터페이스에 정의된 추상 메소드 구..

[기본 자료구조 - Class] 중첩 클래스 [내부링크]

중첩 클래스 멤버 클래스 (Member Class) - 인스턴스 내부 클래스, 정적 내부 클래스 지역 클래스 (Local Class) - 지역 내부 클래스 익명 클래스 (Anonymous Class) - 익명 내부 클래스 1. 멤버 클래스 : 선언이 다른 클래스 또는 인터페이스 선언에 의해 직접 둘러싸인 클래스 1) 인스턴스 내부 클래스 : 클래스 안에 선언된 클래스, 즉 필드를 선언하는 위치에 있는 클래스 package ex2_1; public class InnerExam1 { class Cal{ //내부 클래스 int value = 0; public void plus(){ value++; } } 내부 클래스 안에 있는 함수를 쓰기 위해서는 아래 코드와 같이 외부 클래스를 먼저 생성하고, 이후 내부 클..

[React] useRef 로 특정 DOM 선택하기 [내부링크]

" 초기화 버튼 눌렀을 때, 커서가 '이름' 인풋박스로 선택되게 하기 " 1) App,js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 2) InputSample.js - import React, { useState, useRef } from 'react'; - const nameInput = useRef(); - const onReset = () => { setInputs({ name: '', nickname: '' }); nameInput.current.focus(); }; - import React, { useState, useRef..

[React] input 상태 관리하기(input이 한 개일 때, input이 한 개 이상일 때) [내부링크]

1. input 상태 관리하기(input이 한 개일 때) 1) App,js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 2) InputSample.js input 태그의 value 값도 설정해주는 것이 중요. 그렇게 해야, 상태가 바뀌었을때 input 의 내용도 업데이트 됨 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.val..

[React] useState를 통해 컴포넌트에서 바뀌는 값 관리 (클릭 이벤트) [내부링크]

1. +1일때 1씩 증가하고 -1일때 1씩 감소하는 UI 만듬 1) Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; 2) App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 3) 결과 2. 이벤트 설정 1) Counter.js import React, { useState } from 'react'; //useStare를 사용해서 바뀌는 값을 관리 function Counter() { const [number, ..

[React] 조건부 렌더링 [내부링크]

조건부 렌더링이란 ? 특정 조건에 따라 다른 결과물을 렌더링 하는 것 1. isSpecial={true} 1) App.js - props 값 설정을 생략하면 ture 한 것과 같다 (isSpecial = isSpecial={true}) import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; 2) hello.js - 삼항연산자 : isSpecial 값이 true 라면 * 를, 그렇지 않다면 null 을 보여줌 -> null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게됨 import R..

[React] props를 통해 컴포넌트에게 값 전달하는 법 [내부링크]

1. props의 기본 사용법 1) App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 2) Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 3) 결과 2. defaultProps로 기본값 설정 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값 설정하면 됨 1) Hello.js import React from 'react'; funct..

[React] JSX의 기본 규칙 [내부링크]

1. 꼭 닫혀야 하는 태그 태그를 열었으면 꼭, 이렇게 닫아주어야 한다 2. 꼭 감싸져야 하는 태그 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 한다 , (Fragment) 등 3. JSX 안에 자바스크립트 값 사용 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여준다 import React from 'react'; import Hello from './Hello'; function App() { const name = 'react'; return ( {name} ); } export default App; 4. style 사용 import React from 'react'; import Hello from './Hello'; function App() { cons..

[React] 리액트 컴포넌트 만들기(기본) [내부링크]

1. 리액트 불러오기 import React from 'react'; 2. Hello 라는 컴포넌트를 내보내겠다는 의미 export default Hello; 3. Hello 컴포넌트를 App.js에서 불러와 사용 import React from 'react'; import Hello from './Hello'; //Hello.js의 Hello컴포넌트 불러오기 function App() { return ( ); } export default App;

[React] Git Bash를 이용하여 리엑트 실행 및 리엑트 파일 만들기 [내부링크]

1. Node.js 설치 https://nodejs.org/en Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Yarn 설치 https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 3. Vscode 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor ..

[React] 리엑트 파일 생성 에러(npx create-react-app 설치 에러) [내부링크]

$ npx create-react-app start-react start-react라는 파일을 생성하려는데 자꾸 이러한 에러가 날 때 두가지 방법이 있다. npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\aaa\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\kkddy\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete..

[Datatables.js] Datatables 이용하여 테이블 만들기(사용법) [내부링크]

1. https://datatables.net/ - css/js 등 필요한 파일 연결 2. table 하나 그린 뒤 (스크립트 작성) 테이블 만들기 회원번호 이메일 이름 전화번호 3. Controller - 해당 페이지 연결 - 페이징 처리 포함하여 데이터 넘겨주기 (Ajax) : PageRequest - 몇 페이지, 한 페이지의 사이즈, Sorting 방법(Option)을 가지고, Repository에 Paging을 요청할 때 사용하는 것 - PageRequest의 생성에는 찾을 page와 한 페이지의 size를 필수 인자로 받는다. - Repository에서 findAll 메서드를 살펴보면 위와 같이 Pageable을 인자로 줄 수 있다. PageRequest는 Pageable 클래스를 impleme..

[Thymeleaf] JPA 페이징 처리 하기 (타임리프 기반) [내부링크]

총 페이지 버튼이 화면에 10개씩 보이게 하고, 10이거나 10을 넘어갈 경우 다음 버튼이 생기며, 10을 넘어갈 경우 이전버튼이 생겨 각각의 화면의 페이지 첫번째 버튼으로 이동 하기 1. @PageableDefaualt @PageableDefaualt(sort={"id"}, size=10, direction=Sort.Direction.ASC - sort={"id"} : 해당 id를 기준으로 - size=10 : 한 화면에 10개 정보씩 - direction=Sort.Direction.ASC : 오름차순(내림차순) 정렬 2. Controller - (@PageableDefault(sort = { "id" }, size = 10, direction = Sort.Direction.ASC) Pageable p..

[Thymeleaf] header footer side 나누기 (타임리프 기반) [내부링크]

1. 타임리프와 레이아웃을 위한 Dependency gradle에 추가 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0' 2. 각각 footer.html, header.html, side.html 에 원하는 UI를 코딩 3. layout.html을 만들어 공통적으로 사용하는 레이아웃 만듬 -- : ~{경로 :: 템플릿조각 이름}와 같이 사용하면 된다. (ex) th:fragment="footerFragment" -> 템플릿조각이름 : footerFragment) -- 공통 레이아웃 : layout:f..

[Database] 인텔리제이IntelliJ AWS Database 설정 방법 [내부링크]

Name : 원하는 이름 설정 Host : aws 앤드포인트 포트 : aws 포트 User : 아이디 Password : 비밀번호 -> Test Connection 후 OK

[DataBase] 각 DataBase 각각 컬럼별 연결 [내부링크]

ex) < Faqboard라는 엔티티를 만들 때, Member에 있는 id를 가져오고 싶은 경우 > - Faqboard에 필드 생성시 이를 추가 @ManyToOne @JoinColumn(name = "member_id") private Member member; -> create table aaa.FAQBOARD ( BOARD_ID bigint not null primary key, CONTENT varchar(255) null, QUESTION_ANSWER_ID bigint null, READ_COUNT bigint null, SUBJECT varchar(255) null, WRITE_DATE varchar(255) null, MEMBER_ID bigint null, constraint FK2dsfds..

[JPA DataBase] JPA를 이용하여 테이블 만들기 (application.yml) [내부링크]

spring: jpa: show-sql: true #hibernate가 만들어준 SQL을 로그에서 보려면 true로 설정 defer-datasource-initialization: true #true로 세팅하면 하이버네이트 초기화 전에 쿼리가 실행되면서 데이터를 생성 generate-ddl: true #spring.jpa.hibernate.ddl-auto 속성을 사용할지 말지를 결정하는 옵션 #기본값이 false이기 JPA에 의한 자동초기화기능을 사용하려면 true로 바꾸고 사용 #true를 할 경우 실제 운영중인 디비에서는 테이블이 자동생성되어 다 덮어씌어져버려서 기존 테이블들을 없애거나 업데이트 시켜버림 hibernate: ddl-auto: none # update:기존의 스키마 유지하며 JPA에 의..

[DataBase] appliction.yml database 설정 방법 [내부링크]

spring: datasource: #해당 스키마 url: jdbc:mariadb://aws앤드포인트:aws포트/해당 스키마 username: 아이디 password: 비번 driver-class-name: org.mariadb.jdbc.Driver

[DataBase] @annotation, Lombok 어노테이션의 모든 것 [내부링크]

@Entity - JPA에서 엔티티란, DB 테이블에 대응하는 하나의 클래스라 생각 @Entity가 붙은 클래스는 JPA가 관리해주며, JPA를 사용해서 DB 테이블과 매핑할 클래스는 @Entity를 꼭 붙여야만 매핑가능 - @Entity(name = "Member") : JPA에서 사용할 엔티티의 이름을 지정 보통은 기본값인 클래스 이름을 사용하지만, 다른 패키지에 이름이 같은 엔티티 클래스가 있다면 이름을 지정해서 충돌하지 않도록 해야함 - @Entity를 사용할 때의 몇가지 주의사항 : 접근 제어자가 public 혹은 protected 인 기본 생성자가 필수입니다. : final 클래스, enum, interface, inner 클래스에는 사용이 불가능합니다 @Table @Table( name = ..

[DataBase 관련] BaseTimeEntity [내부링크]

기본적으로 예를 들면, createdDate -> Entity가 생성되어 저장될 때 시간이 자동 저장됨 modifiedDate -> 조회한 Entity 값을 변경할 때 시간이 자동 저장됨 각 엔티티들은 이 BaseTimeEntity를 extends(상속)

[Thymeleaf] 타임리프 란? [내부링크]

1. 타임리프 란? 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용됨 페이지가 어느정도 정적이로 빠른 생산성이 필요한 경우 백엔드 개발자가 개발해야하는 일이 생긱는데 이때 좋은 선택지 2. 사용법 Gradle - build.gradle implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' 또는 Maven - pom.xml org.springframework.boot spring-boot-starter-thymeleaf 타임리프를 사용할 html 파일에 다음과 같이 태그 수정 3. 문법 대부분의 html 속성을 th:xxx 로 변경 ex: th:text="${변수명}" 표현 설명 예제 @{ ... } URL 링크 표현식..

[JPA AJAX] CrudInterface를 통한 create, read, update, delete [내부링크]

"AJAX" : 새로고침하지 않고 서버로 데이터를 주고 받는 방법 1. CrudInterface 2. CrudController implements CrudInterface 3. entity, request, response 4. 페이지 컨트롤러, api 컨트롤러 extends CrudController 1) 출력 - findAll : 모든 정보 출력 - findById : 특정 아이디의 정보 출력하고 싶을때 -> AJAX 이용 : id를 받아 그 아이디 응답 결과 출력(response) 2) 등록 - create : 계정등록, 권한 등록 후 리턴 -> AJAX 이용 : Request 요청한 data 넘겨줘서 응답받음(response) 3) 수정/추가 - update : 특정 아이디로 데이터 가져와서 수..

[JPA Security Login] 시큐리티 로그인 필수 설정 [내부링크]

"시큐리티 로그인" 이란 ? -> 사람이 비밀번호를 입력하면 서버에는 평문으로 넘어오는데, 그 평문을 스프링이 자동으로 암호화하고, 이미(회원가입시) 암호화되서 들어가 있는 디비의 패스워드와 비교하여 로그인하는 것 1. JpaConfig - jpa를 사용한다면 무조건 2. NamingStrategy - 명명전략 3. UserUtils - 로그인 상태 제어, 회원 권한 상태 제어 4. WebSecurityConfig - password암호화 - 자동 로그인 - 권한별 페이지 제어 설정 5. UserLogin - 엔티티 설정 (username,password,rememberme 등) 6. CustomLoginFilter - UserLogin에 요청하는 값 저장 7. UserSecurityService - e..

[SourceTree 소스트리] 갑자기 실행 안됨 [내부링크]

C:\Users\{$사용자}\AppData\Local\Atlassian\SourceTree.exe_Url_{$암호화}\{$버전} 이이 중에서 Composition.cache 파일을 삭제 후 소스트리를 다시 실행

[JavaScript 자바스크립트] - 현재 날짜, 시간 가져오기 [내부링크]

1. Date 객체 생성 const date = new Date(); console.log('Date.toString(): ' + date.toString()); console.log('Date.toUTCString(): ' + date.toUTCString()); //Date.toString(): Sat Apr 02 2022 09:58:09 GMT+0900 (Korean Standard Time) //Date.toUTCString(): Sat, 02 Apr 2022 00:58:09 GMT 1) Locale String 기본적으로 toString()은 영어로 출력하므로, 어떤 국가/언어에서 사용하는 형식으로 출력하고 싶을 때는 toLocaleString(Locale)으로 문자열을 출력 const date..

[WebSquare 웹스퀘어] 특정 그리드뷰 행 disabled 처리 [내부링크]

" 전체 그리드뷰 disabled 하지 않고 원하는 행만 disabled 처리 하고 싶다면 ? " 그리드뷰ID.setRowDisabled(rowIndex, true); => 이렇게 하면 해당 그리드뷰의 rowIndex에 해당하는 행들이 disabled 처리된다.

[WebSquare 웹스퀘어] 마스킹(Masking) 처리 후 튤팁(tooltip) [내부링크]

" 마스킹 처리된 전화번호 보이게 한 후 mouseover 시 튤팁 현상으로 나타내는 법 " 1) 마스킹 처리 된 전화번호, 마스킹되지 않은 전화번호 둘다 select SELECT 핸드폰 AS mobile, replace(핸드폰, substr(핸드폰,-4), '****') AS mask FROM 번호; 2) 화면에 마스킹 된 전화번호 바인딩 (mask) 3) 자바스크립트 onbodymouseover 이벤트 사용 scwin.***_onbodymouseover = function(info) { var mobile = dtl_searchSmsSort.getCellData(info.rowIndex, "mobile"); if (info.colIndex == 8) { //해당 튤팁 컬럼 열번호 $p.$("#그리드뷰..

[WebSquare 웹스퀘어] Multi SelectBox (멀티 셀렉트박스) [내부링크]

이와같이, 2개 이상의 셀렉트 박스가 필요하다면 ,, 예시 selectbox1 : 전체 / 과일 / 물건 selectbox2 :전체 / 과일 - 사과, 바나나, 수박 / 물건 - 책상, 의자 selectbox1 1) DataCollection입력 후 BindItemSet부분 지정 2) DataCollection의 "use data" 체크 후 직접 이용 NodeSet : DataCollection 이름 Label : 화면에 보일 컬럼명 Value : return 받을 값 selectbox2 1) selectbox1과 같이 지정 2) 쿼리 이용 3) 쿼리를 작성 한 후 Submission의 submitdone 이용 scwin.submission명_submitdone = function(e) { NodeSet..

[JavaScript 자바스크립트] let, const, var의 모든 것 [내부링크]

let , const 공통점 - 블럭, 밖에서 안으로, 중첩 호출 가능 차이점 - let 은 변수에 재할당이 가능 - const 는 변수 재선언, 변수 재할당 모두 불가능 (상수) 1) 블럭 { const name = 'Kim'; console.log(name); //kim } console.log(name); //name is not defined //error 2) 밖에서 안으로 let age = 37; { age++; console.log(age); //38 } console.log(age); //38 3) 중첩 let age = 38; { { { console.log(age); //38 } } } var 1) var "함수" 스코프 var "함수" 에서는 안에서 밖으로 호출이 되지 않는다 var ..

[JavaScript 자바스크립트] 일정 시간 뒤 함수 실행 setTimeout() [내부링크]

setTimeout() 이란 ? 일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수 예제 1초 후 함수 실행 setTimeout(function() { console.log('1초 후 함수 실행'); }, 1000); setTimeout() 활용 접속 후 몇 초 후에 팝업 또는 배너창 띄우기 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우 두 개의 입력값을 받은 후 동시에 두 개의 입력값을 계산하고 싶은 경우

[JavaScript 자바스크립트] indexOf 란 ? [내부링크]

string.indexOf(searchvalue, position) - 문자열(string)에서 특정 문자열(searchvalue )을 찾고, 검색된 문자열이 첫번째로 나타나는 위치 index를 리턴(posiotion) - 파라미터 searchvalue : 필수 입력값, 찾을 문자열 posiotion : 기본값은 0, string에서 searchvalue를 찾기 시작할 위치 - 찾는 문자열이 없으면 -1을 리턴 - 문자열을 찾을 때 대소문자 구분 기본 예제 1) 문자열 'abab'에서 'ab'가 처음으로 나타나는 위치의 인덱스 값을 리턴 2) 문자열 'abab'에서 'ba'가 처음으로 나타나는 위치의 인덱스 값을 리턴 3) 문자열 'abab'에는 'abc'라는 문자열이 없으므로 숫자 -1을 리턴 4) i..

[JavaScript 자바스크립트] querySelector / querySelectorAll / getElementById란 ? [내부링크]

1. querySelector 메소드 - 선택자를 받아서 선택자와 일치하는 문서 안의 첫번째 요소 반환 - 일치하는 요소만 반환할 수 있으므로, 일치하는 요소가 없으면 null 반환 - css 선택자 요구 document.querySelector ("a"); // a 태그 선택 document.querySelector ("#abc"); // id 요소 선택 document.querySelector (".abc"); // class 요소 선택 document.querySelector(".abc > nobr"); // abc 클래스의 nobr태그 선택 2. querySelectorAll 메소드 - 특정 css 선택자를 가진 모든 요소 선택 - 여러 요소 한번에 가져올 수 있음 document.querySel..

[WebSquare 웹스퀘어-JavaScript 자바스크립트] 검색 기능 만들기 [내부링크]

< input 박스에 원하는 단어 입력 후 조회하여 추출하는 법 > 방법 1 - 크롬 개발자 모드로 클래스명과 구조 파악 - 대소문자를 구분하지 않고 가져오기 위해 toUpperCase()로 모두 대문자로 변환해 변수에 담기 - 제외할 리스트가 있다면 classList이용 - 목록을 for문으로 돌려 tr[i]의 td[j] 번째를 이용하여 값을 가져옴 -비교를 위해 cell의 값도 대문자로 바꿔준 후 .indexOf()로 검색한 값이 있는지 없는지 확인 (값이 없을 경우 -1로 반환) - 검색된 건수를 확인하기 위해 count를 이용 [JavaScript 자바스크립트] classList 사용 - 여러개의 클래스 중 특정 클래스 추출 여러개의 클래스 중 특정 부분만 찾아서 값을 제어하고 싶다면.. let ..

[JavaScript 자바스크립트] classList 사용 - 여러개의 클래스 중 특정 클래스 추출 [내부링크]

여러개의 클래스 중 특정 부분만 찾아서 값을 제어하고 싶다면.. let isExist = tr[i].classList.contains("w2grid_hidedRow"); -> 이렇게 하면, 여러개의 클래스 중 w2grid_hidedRow에 대한 값만 추출 < classList - Methods > add(String) 지정한 클래스 값을 추가 만약 추가하려는 클래스가 이미 존재한다면 무시. remove(String) 지정한 클래스 값을 제거한다. 존재하지 않는 클래스라면? 에러 발생 X contains(String) 지정한 클래스 값이 존재하는지 확인. true, false 값을 반환. replace(old, new) old class를 new class로 대체 item(Number) 인덱스 값을 활용하..

[WebSquare 웹스퀘어] 그리드뷰(GridView) 행 "수" 세기 [내부링크]

"그리드 뷰" 에서 출력되는 "행의 갯수" 세는 방법 scwin.(해당 Submission)_submitdone = function(e) { var totalCnt = (그리드뷰 바인딩한 DataCollection).getTotalRow(); (보이고자하는 span 아이디).setValue(totalCnt); }

[WebSquare 웹스퀘어] 웹스퀘어 상에서 focusout은 어떻게 쓸까 ? [내부링크]

- JQuery focusout focusout() 포커스 아웃 이벤트는 요소(또는 하위요소)가 포커스를 잃을때 발생 $('#해당아이디').focusout(function() { // input 창안에 focus가 들어올때 event }) - WebSquare focusout jquery에서 사용하던 focusout 이벤트는 웹스퀘어 상에서 찾아볼 수 없다 이는 아래와 같이 사용하면 jquery와 같은 focusout 이벤트가 사용된다 scwin.해당아이디_onchange = function(e) { // input 창안에 focus가 들어올때 event };

[WebSquare 웹스퀘어] 그리드뷰(GridView)에서 자동으로 순번 생성 하기 [내부링크]

1. 그리드뷰(GridView) Component(구성요소) Group -> GridView -> GridViewCaption -> GridViewHeader( -> GridViewRow->Colubmn 존재) -> GridViewBody 로 이루어져 있다 2. 예시 위와같은 사진의 Colubnm은 두개 밖에 존재하지 않고 "순번"은 자동 생성되어 있는 것이다 어떻게 자동으로 "순번"을 추가 할 수 있을까 ? 3. 자동으로 순번 생성 하기 해당 그리드뷰를 선택한 후 Property 에 rowNumVisible = ture rowNumHeaderVaule = 순번 이렇게 작성하면 자동으로 생기게 된다

[WebSquare 웹스퀘어] Tab키 이용하여 Import하기 [내부링크]

1. Tab키의 Component(구성요소) TabControl -> Tabs1 -> content1 로 구성되어 있다 2. 예제/문제 Tabs1의 키는 content에 내용이 담겨져 있고 Tabs2의 키에는 content에 직접적인 내용이 담겨져 있지않고 파일을 import하는 방식으로 사용하려고 한다. 어떻게 import 할 수 있을까 ? 3. import 하는 방법/해결 Content에 Group의 Wframe이라는 것을 사용하여 배치한다. 그 후, 전체적인 TabContol에 _onchange라는 함수를 사용한다. scwin.tabCon_onchange = function(tabID,idx,userTabID) { try { switch (idx) { case 0 : { } break; case 1..

[Server Tomcat Error] Server Tomcat v9.0 Server at localhost failed to start [내부링크]

현상 서버를 시작할 때, 이와같이 당혹스러운 에러가 나타난다. 해결 첫번째 ! mybatis mapper xml에서 자신이 작성한 쿼리 문제일 수 있다. 정상적인 쿼리인지 데이터베이스 툴에서 먼저 확인 두번째 ! @Service @Controller와 같은 어노테이션이 잘 쓰여져 있는지 확인 세번째 ! 첫번쨰, 두번쨰 방법을 해도 실행되지 않는 다면, 톰켓 실행 경로에서 발생하는 충돌에러로 판단 됨으로 톰켓을 삭제하고 다시 깐다 -- 톰켓 지우는 법 -- 1 Window -> Preferences 클릭 2 Server탭 -> Runtime Environments -> 기존에 있는 톰캣 서버 Remove -- 톰켓 까는 법 -- 1 Window -> Preferences 2 상단 Server -> Runt..

[MyBatis mapper xml Error] Document root element "mapper", must match DOCTYPE root "null" [내부링크]

Document root element "mapper", must match DOCTYPE root "null" 해결 mybatis mapper xml을 쓸때 상단에 이와같이 잘 선언되어 있는지 확인

[Spring Mybatis] insert, update, delete return을 int로 하는 이유 [내부링크]

현상 insert를 하면 당연히 반환 값이 없기 때문에 return type은 void 이다. 문제없이 작동하지만 편한 기능을 사용하지 못하게 된다 Mybatis에서는 기본적으로 쿼리가 돌고 나면 업데이트 한 행의 개수를 리턴해준다 예를 들어, insert 구문을 성공시켜서 1 행의 데이터를 입력했다면 return 1을 반환해준다. 이걸 이용해서 쿼리가 성공적으로 돌았는지 그렇지 않았는지를 판단할 수 있다. 그렇게 되면 후속 작업(자바스크립트를 쓸때 등) 을 할때 도움이 된다. 이용 MyBatis 유효성 검사 INSERT 1 ( 다중 insert도 1) null 일 때 cnt = 1로 변경후 cnt == 1 UPDATE update된 행의 갯수 반환(없으면 0) 반환값 cnt로 받고 cnt > 0 DEL..

[WebSquare(웹스퀘어) Oracle(오라클) Error] ORA-00001 : 유일성(무결성) 제약조건에 위배됩니다 [내부링크]

[Oracle] ORA-00001 : 유일성(무결성) 제약조건에 위배됩니다 오류원인 UPDATE 및 INSERT 구문 실행 시 중복되는 기본키 값을 삽입하려 할 때 발생하는 에러 테이블 내 기본키(PK)의 데이터는 중복될 수 없기 때문 해결 해당 기본키가 무엇인지 파악 후 하나만 사용(중복x)

[WebSquare(웹스퀘어) Oracle(오라클) Error] ORA-01400 : NULL을 ("DB명"."테이블명"."칼럼") 삽입할 수 없습니다 [내부링크]

ORA-01400 : NULL을 ("DB명"."테이블명"."칼럼") 삽입할 수 없습니다 오류원인 cannot insert NULL into ("eai"."test_table"."name") 데이터를 insert 할 때, eai.test_table 의 name 컬럼의 속성이 not null (nullable이 no) 인데 컬럼을 사용하고 있지 않거나, 데이터를 넣지 않아서 발생 해결 데이터를 insert 하기 전에 not null 컬럼을 확인하여 해당 컬럼추가 및 데이터를 필수적으로 입력

[WebSquare(웹스퀘어) , Oracle(오라클) Error] ora-01481 : 숫자 형식 모델이 부적합합니다 [내부링크]

ora-01481 : 숫자 형식 모델이 부적합합니다 오류 원인 오류 : TO_CHAR( 날짜 , 'yymmdd') 데이터 타입이 맞지 않아서 발생 TO_CHAR에 문자열 형식의 데이터를 인자로 넘겼지만, 이를 문자로 인식하지 않고 숫자로 인식하여 발생하는 오류 해결 TO_CHAR(TO_DATE(날짜, 'yymmdd') )

[Eclipses 이클립스] "UTF-8" 인코딩(Encoding) 설정 [내부링크]

1. 이클립스(Eclipse)에서 UTF-8 설정 방법 상단의 Windows → Preference 를 클릭 1) Content Types 를 선택해서 Java Class File과 Text를 각각 선택해서 하단의 Default encoding 입력란에 UTF-8을 입력하고 Update 버튼을 클릭 2) Workspace 를 선택하고 Other를 UTF-8로 변경 3) CSS Files, HTML Files, JSP Files, XML Files 를 각각 선택해서 UTF-8ISO 10646/Unicode(UTF-8) 로 변경 4) General → Editors → Text Editors → Spelling을 선택해서 Other를 UTF-8로 변경 2. 프로젝트(Project) UTF-8 설정 방법 인코..

[Api] 주소 API [내부링크]

1. jsp 2. js //주소 api window.onload = function(){ document.getElementById("id값입력").addEventListener("click", function(){ //주소입력칸을 클릭하면 //카카오 지도 발생 new daum.Postcode({ oncomplete: function(data) { //선택시 입력값 세팅 document.getElementById("id값입력").value = data.address; // 주소 넣기 document.querySelector("input[name=name값입력]").focus(); //상세입력 포커싱 } }).open(); }); }

[JavaScript 자바스크립트] 뒤로가기, 앞으로가기 [내부링크]

- 태그에 함수 사용 뒤로가기 앞으로가기 - 태그에서 호출하는 방법 // 뒤로가기 // 앞으로가기

[Html] <button /> 버튼에 링크걸기 [내부링크]

- 버튼에 링크를 걸려면 을 쓰면 안된다 ! - 버튼 태그안에 onclick = "location.href = '#' "넣기 ! 회원가입

[Spring] 와일드 카드 이용 tiles [내부링크]

로직 - 서로 다른 tiles 두 개 필요 - tilew.xml을 views 아래에 위치 - 와일드 카드 이용하여 단순화 (웬만하면 최대 {3}까지만 작성) value="/WEB-INF/views/{1}.jsp" -> views아래 첫번째 파일 까지 value="/WEB-INF/views/{1}/{2}.jsp" -> views 아래 두번째 파일 까지 value="/WEB-INF/views/{1}/{2}/{3}.jsp" -> views 아래 세 번째 파일 까지

[CSS] 클래스 중복 사용으로 인한 불필요한 화면 지우기 [내부링크]

현상 css가 겹치거나 tiles 설정으로 인하여 불필요한 화면이 나타날 수 있다. 로직 - 크롬 브라우저(F12)로 해당 클래스 확인 - 지우고 싶은 화면에

[JavaScript 자바스크립트] 회원가입 약관동의 "자세히" 창 나타내기 [내부링크]

1. 코드 관리 쉽게 새로운 jsp 만들기 2. controller에서 화면 매핑 @RequestMapping("privacyAgree") public String privacyAgree() { return "top/agree/privacyAgree"; } @RequestMapping("dbelleAgree") public String dbelleAgree() { return "top/agree/dbelleAgree"; } @RequestMapping("marketingAgree") public String marketingAgree() { return "top/agree/marketingAgree"; } 3. 회원가입.jsp "onclick="javascript:openWin1()" 기반으로 js 코드..

[JavaScript 자바스크립트] 회원가입 약관동의 [내부링크]

로직 1) 체크박스 전체 선택 2) 체크박스 전체 해제 3) 체크박스 전체 선택 후 하나만 해제했을 시 전체 선택도 해제 4) 체크박스 개별로 전체 선택 되었을 경우 전체 선택 체크 jsp 약관 전체 동의하기 [필수] 개인정보 수집 및 이용 동의 자세히 [필수] dbelleArt, dbelleArt 스토어 이용 악관 자세히 [선택] 마케팅 활용 및 광고성 정보 수신 동의 자세히 JS 1) 체크박스 전체 선택 2) 체크박스 전체 해제 $(this).is(":checked") : 체크된 상태면 true 아니면 false를 반환 .is(":checked") : checked 상태를 가져오는 함수 .prop("checked", false); : "ckecked"는 값을 set $(".form-floa..

[Ajax] 이메일 중복확인 [내부링크]

로직 - '이미' 정규식 표현을 사용하여 이메일 유효성검사가 되어 있는 태그에 중복확인 로직 추가 - Ajax를 이용 - cnt가 0 이면 사용 가능한 이메일, 1이면 이미 존재하는 이메일 - ajax 통신은 유효성이 검사된 이메일에만 불러오기 코드 - Mapper.java email이 존재하면 1이 출력, email이 존재하지 않으면 0이 출력 @Select("select COUNT(email) from dbelle.user where email=#{email}") int emailCheck(String email); - Service.java email이 존재하면 cnt : 1 email이 존재하지 않으면 cnt : 0 public int emailCheck(String email) { int cnt..

[Spring Error] Java.lang.IllegalArgumentException No converter found for return value of type class [내부링크]

문제점 ! Controller에서 객체 반환시 Json으로 반환되지 않는 경우 해결 ! pom.xml com.fasterxml.jackson.core jackson-databind 2.9.2

[JavaScript 자바스크립트] 모든 현상에 submit되는 것 막기 [내부링크]

현상 ? form 태그 안에 어떤 태그든지(input, button ..) type="submit"이 있던 없던 submit은 서버랑 통신하는 태그라서 버튼 누르면 무조건 서버로 데이터가 넘어간다. 예를 들어서, js 또는 @valid를 사용하여 유효성 검사를 하고 싶을 시 무조건 서버로 데이터가 넘어가지 않도록 제어를 해주어야 한다. 그렇다면 어떤 코드를 써서 제어를 해주어야 할까 ? 해결 ! - JS 1. - onsubmit="return false" 추가 2. - form.submit(); 추가 서버로 데이터를 넘기고 싶은 부분의 코드에 form.submit(); 추가

[SQL Error] Incorrect table definition; there can be only one auto column and it must be defined as a key [내부링크]

- 테이블 생성시 이와 같은 에러가 나는이유 -> primaryKey로 지정하였나 확인 !! Incorrect table definition; there can be only one auto column and it must be defined as a key AUTO_INCREMENT는 항상 기본키(primary key)로 지정되어야 한다 -> not null은 없어도 문법적 오류를 발생시키지 않지만 primary key가 없으면 문법적 오류를 발생시킨다. 예시1) create table user( idx int not null AUTO_INCREMENT PRIMARY KEY (idx) ); 예시2) create table user( idx int not null AUTO_INCREMENT PRIMAR..

[Sourcetree Error] remote: Invalid username or password. [내부링크]

- 소스트리에서 push할 경우 나오는 에러메세지 ( 소스트리에서 예전에 발급한 토큰이 만료되었을 시 재설정 해야함 ) remote: Invalid username or password. ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. GITHUB => 임시 토큰 발급 하는 법 ! ! 1) github 접속 -> 오른쪽 상단 동그라미 리스트 팝업에서Settings 클릭 -> 왼쪽 사이드바 메뉴의 맨밑 Developer Settings 로 이동 2) 왼쪽 사이드바..

[SQL] MyBatis 에서 insert 시 자동 생성키 - MySQL [내부링크]

1. table 구조 create table user( userIdx int not null AUTO_INCREMENT, name varchar(10) not null, email varchar(50) not null, pw varchar(50) not null, pwCheck varchar(50) not null, tel int not null, address varchar(500) not null, checkAll boolean not null, PRIMARY KEY (userIdx) ); 2. 사용법 - repository @Insert("INSERT INTO dbelle.user (name, email, pw, pwCheck, tel, address, checkAll) VALUES (#{name}..

[WebSquare 웹스퀘어] 목록성 컴포넌트 표현 3가지 [내부링크]

1) 하드코딩(SelectBox) : selectBox 더블클릭하여 직접 입력 2) 스크립트에서 동적으로 만들기 (Radio) : ui_gender.addItem(value, label, index); -> scwin.onpageload = function() { ui_gender.addItem("M", 남자); ui_gender.addItem("F", 여자); }; 3) 데이터컬렉션 (CheckBox) 이름 만들고, id/name/dataType쓰고, 해당 박스 더블클릭하여 Nodeset,label, value 작성 -> Data로 들어가 값을 쓰고 use data 체크

[WebSquare 웹스퀘어] Submission(통신) 속성 [내부링크]

1) Reference -> DataCollection -> Id선택 -> 추가 전달 하는 파라미터 값 입력 2) Target (결과물) -> DataCollection -> Id선택 -> 추가 전달받아 보내는 값 입력 3) URL Action 서블릿 정보 기재 (Controller에서 작성한 매핑 주소 입력) 4) Process Message 조회중입니다... (이러한 문구 적음-통신하는 동안 계속 보여줌) 5) Submit 통신들어가기 직전에 처리 6) Submit-done 서블릿이 완벽하게 끝 난 후 제일 먼저 처리 되는 곳 7) Submit-error 통신을 수행하다가 에러가 발생했을때 처리하는 곳 ** Script에 작성하여 통신 ** com.executeSubmission ( submissio..

[WebSquare 웹스퀘어] GridView 속성 [내부링크]

1 브라우저 크기 조정 법 : autoFit =lastColumn - 화면 크기에 따라 마지막 컬럼 크키만 조절 =allColumn - 화면 크기에 따라 모든 컬럼 크기 조절 2 컬럼 원하는 위치로 이동 coulunMove=ture 3 컬럼 더블클릭시 sortable=true 첫번쨰클릭:오름차순 두번째클릭:내림차순 세번째클릭:sort해제 4 해당컬럼 필터 적용 해당컬럼 클릭 후 usefilter=true -- usefilterlist =true 시 체크박시 형식 리시트 추출 5 클릭 할 때마다 편집 모드 변경 editModeEvent=onclick 6 Tab으로 focus 이동 시 편집모드 keyMoveEditMode=ture 7 해당 바디 클릭 -- inputType = select, calendar ..

[WebSquare] GridView 이벤트 [내부링크]

1) '이름'컬럼을 지웠을 시 '이름'컬럼이 다시 생기고 다른 컬럼은 지워짐 -- DataCollection DataList선택시 이벤트 출력 scwin.dc_userInfoList_onbeforecelldatachange = function(info) { if(info.colID == "EMP_NM"){ if(info.newValue == ""){ return false; } } }; 2) 건수 나타내기 -- DataCollection DataList선택시 이벤트 출력 scwin.setTotalNum = function(){ //스크롤 id 확인(ui_totRowCount) ui_totRowCount.setValue(dc_userInfoList.getRowCount()); }; //전체 건수를 나타낸다..

[WebSquare] GridView 란? [내부링크]

- gridview를 생성하면 column갯수, header, body, footer 등 설정 - 생성된 gridview의 행과 열 추가/삭제/병합/해제 등의 편집 : 스튜디오 상단 버튼 활용 - girdview 생성법 1) Palette에서 GridView 생성 2) DataCollection을 이용하여 Binding 드래그 -- 신규생성 : datalist기준으로 모든 컬럼 새로 생성 -- 헤더만 업데이트 : 헤더부분만 적용한 name 매핑 -- 바디만 업데이트 : 바디부분만 적용한 id 매핑 -- 모두 업데이트 : id, name 각각 매핑

[WebSquare 웹스퀘어] WebSquare란? [내부링크]

1. html보다 WebSquare 가 더 가지는 것 => model영역 (dataCollection(값 처리), workflowCollection, submission(통신)) 2. 새로운 페이지 만드는 방법 WebSqueare Page -> .xml 3. 구성 더보기 Design -> 브라우저에서 눈으로 보여지는 곳 (body태그), 컴포넌트로 그림 (왼쪽Palette) Script -> 로직제어 (자바스크립트 함수) onpageload: 브라우저에 화면 그려지고 나서 제일 먼저 수행 되는 함수(초기값... , inti함수와 같음) onpageunload:브라우저가 닫히기 직전에 제일 마지막에 수행되는 함수(로그 남기거나 ...) DataCollection -> 모델영역, 내가 만들 객체 정의 - D..

[WebSquare 웹스퀘어] 단건 다건 차이 [내부링크]

1) 단건 (ex) 클릭시, 한번에 한사람의 데이터만 보는 것) - inputBox에 각각 바인딩 하기 { "dc_userInfo": { "ZIP_CD": "700251", "ASSIGNED_TASK": null, "GENDER_CD": "M", "JOIN_DATE": "20041008", "DUTY_CD": "04", "UPDATED_DATE": "2016-12-07", "ADDRESS2": " ", "CREATED_DATE": "2016-12-07", "EMP_CD": 10000004, "ADDRESS1": "대구 중구 서문로1가", "ROLE_CD": "03", "POSITION_CD": "04", "EMP_NM": "미길동", "EMAIL": "[email protected]" }, "ms..

[WebSquare 웹스퀘어] 컴포넌트 이용 - CheckBox [내부링크]

1. DataCollection의 DataList와 더블클릭 이용 1) DataCollection의 DataList 작성 --> use data 이용 2) CheckBox 더블클릭 --> BindItemSet 지정 2. DataCollection의 DataList와 Script 이용 1) DataList 위와같이 설정 2) Script (CheckBox id=ui_role) scwin.onpageload = function() { var jsonData = [{"code" : "01", "name": "총괄"}, {"code" : "02", "name": "부서담당"}, {"code" : "03", "name": "공통"}, {"code" : "04", "name": "개발"}, {"code" : "05..

[WebSquare 웹스퀘어] Data 조회하기 - 초기값 세팅 [내부링크]

1. 초기값 세팅 (해당 초기값만 출력) 1) DataCollection 창 이용 - 해당 id 와 초기값 세팅 후 use data 체크 또는, 2) defaultValue 이용 - DataCollecion창 열고 -> Property -> 속성 -> defaultValue 값 지정 또는, 3) Submission의 Submit이용 - Submission -> Submit -> script -> //초기값 세팅 scwin.sub_serach_submit = function(e) { dc_reqUserInfo.set("EMP_CD","10000001"); }; 2. Spinner로 모든 데이터 출력 1 -- Palette의 Spinner이용 Spinner 추가 후 Property -> 속성에서 id(필수)..

중복된 포트 번호 삭제하기 [내부링크]

1. 명령프롬포트 (관리자 권한으로 실행) 2. netstat -ano 해당 로컬주소 찾고 로컬주소에 해당하는 PID 기억 3. taskkill /F /PID 해당PID번호 입력

[Spring] 한글깨짐 방지 - servlet.xml (Eclipse) [내부링크]

- 한글깨짐 방지 text/html;charset=UTF-8

[Spring] Annotation 어노테이션 - @Component [내부링크]

@Component @Component는 @Controller, @Service, @Repository의 의미를 담고 있음 따라서 좀 더 명확하기 위해선 셋 중 해당 어노테이션 사용하는 것이 바람직함 위 중 하나의 어노테이션을 사용할 시 서블릿.xml에 사용 @Service 사용 @RequestMapping위해 사용

[Spring] Annotation 어노테이션 설정 [내부링크]

- 자바 APP -> xml -> @(annotation) - 서블릿 설정 1) beans 추가 2) 어노테이션을 사용하였다면 서블릿.xml에 를 올려주고 는 삭제해준다. -> -> 어노테이션 사용하기위함(context:component-scan사용하면 쓸 필요 없다) ->

[Spring] 서블릿 분리 & 환경설정 [내부링크]

/WEB-INF/아래 dispatcher-servlet.xml 을 => /WEB-INF/아래 spring 폴더 만들어서 security-context.xml service-context.xml servlet-context.xml 로 나눔 - web..xml에서 환경설정 org.springframework.web.context.ContextLoaderListener contextConfigLocation /WEB-INF/spring/service-context.xml /WEB-INF/spring/security-context.xml dispatcher org.springframework.web.servlet.DispatcherServlet contextConfigLocation /WEB-INF/spring..

[Spring] 오라클(Oracle) 연동 (Eclipse) [내부링크]

1. pom.xml com.oracle.database.jdbc ojdbc10 19.7.0.0 org.springframework spring-jdbc 5.2.9.RELEASE 2. Service 분리 -JDBCNoticeService.java -JPANoticeService.java -NoticeService.java (interface) 3. Controller package com.newlecture.web.controller.notice; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.bea..

[Spring] tiles ViewResolver 설정하기 [내부링크]

- ViewResolver 이란 ? Controller가 넘긴 view 이름을 통해 알맞은 view를 찾는 역할 View 이름으로부터 사용할 View Object를 매핑하는 역할 ① Controller는 ModelAndview 객체에 응달할 view이름을 넣어 리턴 ② DispachServlet은 ViewResolver에게 응답할 view를 요청한다 ③ ViewResolver는 View 이름을 이용해 알맞은 view 객체를 찾아 DispatcherServlet에게 전달 1. tile ViewResolver 추가 tiles.xml과 그 안에서 view에 맞는 해당 definition을 찾아줄 tile ViewResolver 추가 2. dispatcher-servlet.xml Tiles세팅인 UrlBased..

[Spring] tiles 지시서 작성하기2 (와일드카드이용) [내부링크]

1. 세션 나누기 2. Contoller - indexController.java package com.newlecture.web.controller; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.mvc.Controller; import org.springframework.web.servlet.view.InternalResourceViewResolver; public class indexController implement..

[Spring] tiles 지시서 작성하기1 (Eclipse) [내부링크]

1. 세션 나누기 2. Controller - DetailController.java package com.newlecture.web.controller.notice; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.mvc.Controller; public class DetailController implements Controller { @Override public ModelAndView handleRequest(HttpS..

[Spring] tiles 사용법 (Eclipse) [내부링크]

-- tiles 참고 페이지 -- https://tiles.apache.org/

[Spring] DataSource 이용 [내부링크]

DataSource DB와 관계된 커넥션 정보를 담고있으며 빈으로 등록하여 인자로 넘겨준다. → 이 과정을 통해 Spring은 DataSource로 DB와의 연결을 획득한다 DB 서버와의 연결을 해준다. DB Connetion pooling기능 위치변경시 재배포 컴파일 .. 불합당 -->dispatcher-servlet.xml DAO커넥션이 //Class.forName(driver); //Connection con = DriverManager.getConnection(Url,Id,Password); 이런식으로 되어있다면 Connection con = dataSource.getConnection(); 이렇게 바꿈 1) DAO //private String Url = ""; //private String ..

[SpringBoot JSP] 게시판목록을 메인화면에연결 [내부링크]

1. Controller (indexController.java) @RequestMapping(path = {""}) public ModelAndView index(Principal principal, @RequestParam(value = "logout", defaultValue = "false") Boolean logout) { //문의하기 /*page:1 -> page가 1페이지인것 출력, page:2 -> page가 2페이지인것*/ List contents = noticeService.appearNoticeInfo(2); //리뷰하기 PageInfo pageInfo = new PageInfo(1, 7); pageInfo.setItemCountTatal(noticeRepository.getPageC..

[SpringBoot JSP] 게시판-페이징 처리/방법 2 [내부링크]

1. domin 작성 (PageInfo.java) package com.example.crud.domain; import lombok.Getter; import lombok.Setter; import javax.lang.model.type.IntersectionType; @Getter @Setter public class PageInfo { private int currentPage = 1; private int pageTotal; //페이지 전체 갯수 private int startPageIndex; //현재 보여지는 페이지의 첫번째 인덱스(1부터 시작) private int endPageIndex; //현재 보여지는 페이지의 마지막 인덱스(1부터 시작) private int blockPage = 5;..

[SpringBoot JSP] 게시판-페이징 처리/방법 1 [내부링크]

1. domin 작성 (Page.java) 1) 필드 생성 - 최소 페이지 번호 min - 최대 페이지 번호 max - 이전 버튼의 페이지 번호 prevPage - 다음 버튼의 페이지 번호 nextPage - 전체 페이지 개수 pageCnt - 현재 페이지 번호 currentPage 2) 생성자 생성 contentCnt : 전체글 개수, currentPage : 현재 페이지 번호, contentPageCnt : 페이지당 글의 개수, paginationCnt : 페이지 버튼의 개수 public Page(int contentCnt, int currentPage, int contentPageCnt, int paginationCnt){ } 3) 생성자 = 선언과 동시에 초기화하여 사용할 수 있으므로 생성자 안 ..

[SpringBoot JSP]- 게시판 (공통 뷰 해결 법) [내부링크]

> 1. 공통을 사용하는 뷰 컨트롤러에 올려주고 ( write-base ) 인덱스 번호가 없는 새로운 뷰 컨트롤러에 올려줌 ( questions-write-form-new ) @RequestMapping(path = "write-base") public ModelAndView writeBase() { return new ModelAndView("notice/write_base"); } //새로운 글 작성 뷰 보이기 @RequestMapping(path = "questions-write-form-new") public ModelAndView questionsWriteForm() { return new ModelAndView("/notice/questions_write_form"); } @RequestMap..

이클립스(Eclipse) 다운(Downloads) 방법 [내부링크]

1. JDK 설치 (( java 언어를 사용하기 위해 무조건 설치해야하는 것 )) sun사가 자바를 개발했지만 현재 오라클사가 sun사를 인수했으므로 오라클 사에 접속해 jdk를 다운받는다. 1) 링크 : https://www.oracle.com/downloads/ 2) Java -> JavaSE -> java11, java14권장 2. Eclipse 설치 1)링크 : https://www.eclipse.org/downloads/ Eclipse Downloads | The Eclipse Foundation The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 415 open source projec..

[Linux 리눅스] 명령어 기본 정리 [내부링크]

1. ls (List segments) : 현재 위치의 파일 목록 조회 ls -l : 파일의 상세정보 ls -a : 숨김 파일 표시 ls -t : 파일들을 생성시간순(제일 최신 것부터)으로 표시 ls -rt : 파일들을 생성시간순(제일 오래된 것부터)으로 표시 ls -f : 파일 표시 시 마지막 유형에 나타내는 파일명을 끝에 표시('/' : 디렉터리, '*' : 실행파일, '@' : 링크 등등,,,) 2. cd (Change directory) : 디렉터리 이동 cd [디렉터리 경로] : 이동하려는 디렉터리로 이동 (경로 입력 시 '[', ']'부분은 빼고 입력!) cd ~ : 홈 디렉터리로 이동 cd / : 최상위 디렉터리로 이동 cd . : 현재 디렉터리 cd .. : 상위 디렉터리로 이동 cd - ..

[SpringBoot JSP] 라이브러리 없이 - header, footer 나누기 [내부링크]

index에 사용되는 header,footer를 나누어 사용 1. header.jsp 첫 내용 ~ header 코드 2. fooer.jsp footer 코드 ~ 3. index.jsp ~ index 코드 ----- 자바스크립트에 대한 내용----- 안에 있어야 하므로 footer코드 코드 전에 넣어준다. -----경로----- login에 footer.jsp 넣으려면 login에서 위로 올라가서 찾고 해당 layout찾으면 밑으로 내려간다.

[SpringBoot JSP] - xml 설정(Intellij) [내부링크]

1) application.properties mybatis.mapper-locations = mybatis.config-location = mybatis.type-aliases-package = 2) classpath는 원래 설정되어 있는 resource해당하니 1) 에 맞춰 파일 생성 3) bulid.gradle implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.1' 4) xml사용시, 안에 내용 맞춰서 설정

[SpringBoot JSP] - DB 설정(Intellij) [내부링크]

1) View -> Database->aws에서 가져와야함 2)일단, application.properties spring.datasource.url= spring.datasource.username = spring.datasource.password = spring.datasource.driver-class-name = 3) + -> Data Source -> MySQL 에 위에꺼 설정 4) bulid.gradle implementation 'org.springframework.boot:spring-boot-starter-jdbc' runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'

[SpringBoot jsp] - Intellij jsp사용할 수 있도록 SpringBoot 설정(Intellij) [내부링크]

1. jps사용할 수 있도록 스프링 부트 설정 1) application.properties spring.mvc.view.prefix=/WEB-INF/views/ spring.mvc.view.suffix=.jsp 2) bulid.gradle implementation "org.apache.tomcat.embed:tomcat-embed-jasper" implementation 'org.springframework.boot:spring-boot-devtools' 3) main에 webapp만들기 webapp에 WEB-INF만들기 WEB-INF에 views 만들기

[SpringBoot JSP] OPEN API (KaKao Login) [내부링크]

1. 회원가입 https://developers.kakao.com/ 2. 내 애플리케이션 - 애플리케이션 추가하기 3. 카카오 로그인을 사용할 url을 등록 ( http://localhost:8181 ) 4. web 활성화 설정 5. 제품 설정에서 카카오 로그인- 동의 항목 - 동의 항목 설정 (원하는 정보 받고 싶은 것 필수 동의 또는 선택동의) 6. JavaScript 키 받아오기 7. 해당 코드를 사용하고자 하는 html페이지나 jsp페이지에 붙여놓습니다. 8. 카카오 로그인, 로그아웃 로직 Kakao.init('발급받은 키 중 javascript키를 사용'); kakaoLogout(); // 로그인 페이지 접속시 로그아웃 시켜준다 9. 카카오아이디와 이메일을 받기 위한 ajax 로직 10. aja..

[SpringBoot JSP] - gmail 보내기 & 설정 (Intellij) [내부링크]

1. Google 홈페이지 > Google 계정 관리(우측상단) 2. 보안 > 앱 비밀번호 .. 3. 메일, Windows 컴퓨터 4. 앱 비밀번호 저장 (smtp 설정에 사용될 예정) 5. 빠른 설정(우측상단 톱니바퀴) → 모든 설정 보기 6. 전달 및 POP/IMAP(탭) -> 모든 메일에 POP사용하기 -> IMP사용 -> 변경사항 저장 7. gradle 방식 -> bulid.gradle implementation 'org.springframework.boot:spring-boot-starter-mail:2.6.3' maven 방식 -> pom.xml org.springframwork.boot spring-boot-starter-mail 8. SMTP 설정 application.properties ..

[SpringBoot JSP] - ajax로 이메일 보내기 & 설정 (Intellij) [내부링크]

1. jsp 2. java script 3. ajax 통신 4. MailDto 작성 @Builder @Data @RequiredArgsConstructor @AllArgsConstructor public class MailDto { private String email; private String subject; private String contents; } 5. MailConfig 작성(설정) package com.example.crud.config; import org.springframework.core.io.ClassPathResource; import org.springframework.core.io.FileSystemResource; import org.springframework.mail...

실시간 검색어