dev in Serengeti

[VueJS] toRefs 사용하기        [toRefs: from export page to import page]// export pageimport {reactive, toRefs} from 'vue';export const useCount = () => { const state = reactive({ count: 0 }); return toRefs(state);}// import pageimport {useCount} from '@/components/';setup() { const {count} = useCount(); return { count, }}

[VueJS] 부모 자식 component 간의 연동 (props & emits)       component 관계: 현재창에서 다른창을 불러왔을 때, 현재창은 부모, 불려온 창은 자식 관계가 성립됨      [emits: 자식에서 부모로 보냄]// emit => 자식에서 부모로 보냄// 자식창에서,emits: ['emitName1', 'emitName2', ...]setup(props, { emit } ) context.emitemit('emitName1', {id: 'aabbcc', name: 'Neymar'});// 부모창에서," />const = (emitData) => { ... };        [props: 부모에서 자식으로 보냄]// props => 부모에서 자식으로 // 부모에서 변경된..

[Git] first commit 하기 & git ignore가 동작하지 않을 때(git cache 삭제)      프로젝트를 만들고 맨 처음 깃에다가 올려보자   [git first commit]$ git init . // .은 디렉토리의 모든 것을 포함한다는 의미$ git add .$ git commit -m "firstCommit"$ git status // 상태 확인 (생략가능)$ git remote add origin //=======계정 확인========$ git config --global user.name $ git config --global user.email /=======계정 확인========$ git push -u origin master(or develop)        ..

[DB] PK를 sequence로 잡는 이유 DB 설계 시, PK (Primary Key) 를 잡는데 있어서 sequence 로 할 지, 아니면 비즈니스 상 유니크 키(주민등록번호 등)나, 여러 키의 조합인 복합키를 PK로 잡을지 고민될 때가 많다. 결론은 sequence 로 잡는게 더 깔끔하다는 것이다. 왜 그런가? 유니크 키나 복합키로 PK를 잡을 경우 몇가지 난감한 상황이 종종 발생할 수 있는데, 아래와 같은 문제가 생길 수 있다. 1) FK를 맺을 때 다른 테이블에도 복합키 전부를 가지고 있거나, 굳이 불필요한 중간 테이블을 하나 더 둬야하는 상황이 발생 2) 인덱스에 좋은 영향을 줄 수 없다 3) 만약 유니크한 조건이 변경된 경우, PK 전체를 수정해야 하는 끔찍한 일이 발생 주민등록번호나, 복..

[JSP] JSP 에서 controller 로 데이터 보내기 form 을 사용한 submit 확인 // 스크립트로 submit 할 때는 // document.getElementById("login").submit(); form 의 method 는 GET/POST 등의 메소드를 지정한다. form 의 action 은 Spring controller 의 @GetMapping / @PostMapping 등과 연결된다. form 내부의 input 태그들의 name 은 Java Bean 의 필드명과 동일해야 한다. (DTO 객체 필드명과 동일) Query Parameter 를 이용한 데이터 passing => "?" 를 사용 get user details JSP 에서 다른 페이지로 redirect 할 때는 GET..

[넥사크로17] 넥사크로 데이터셋 메소드 정리 데이터셋에서 row 생성 (맨아래 row 로 생성) var row = this.ds.addRow(); 데이터셋에서 row 생성 (맨위에 row 로 생성) var row = this.ds.insertRow(); 데이터셋에서 row 삭제 this.ds.deleteRow(this.ds.rowposition); this.ds.deleteRow(rowIndex); 데이터셋에서 컬럼 가져오기 this.ds.getColumn(rowIndex, "columnName"); 데이터셋에서 특정컬럼 세팅하기 this.ds.setColumn(row, "columnName", value); 데이터셋에서 컬럼정보 가져오기 this.ds.getColumnInfo(columnIndex);..

[JAVA - Spring Boot] 스프링부트 기본구조 / 특징 Spring Boot 란? Spring Legacy 사용시의 환경설정 / 모듈 버전관리 / dependency 주입 등에 걸리는 시간을 최소화한 compact 버전의 스프링 프로젝트. 초기 설정 시에 필요한 모듈들을 (lombok 등) 선택만 해주면 자동으로 버전은 물론, dependency 주입까지 셋팅하여 바로 비지니스 로직 개발로 들어갈 수 있게 해준다. tomcat 또한 내장되어있어, 개발자가 환경설정에 할애하는 시간을 최소화해준다. [기본구조] src/main/java => 비지니스 로직이 들어가는 섹션. 초기 생성시, mainApplication.java 가 들어있는 곳이다. src/main/resources => 환경설정을 해..

[AngularJS] LazyLoadingModule - 필요한 파일만 로드하기 SPA 구조란? => SPA 는 Single Page Application 의 약자로, 하나의 페이지 안에서 사용자의 요청에 따른 UI/UX 변환이 이루어 지는 구조를 말한다. SPA 의 장점이자 단점? => 하나의 페이지 안에서 모든 것이 이루어지기위해 최초 한번 모든 리소스를 로드하는데 시간이 길다. 대신에, 한번 로드하고나면 동적 리소스만 받아 처리하므로 그만큼 빠르다 이처럼 최초 구동이 느리다는 단점을 보완하기 위해 lazyLoad, 즉 최초 모든 리소스를 전부 로드하지 말고, 필요한 때에 필요한 파일들을 불러오는 기능을 구현하고자 한다. ocLazyLoad 라이브러리의 자세한 사항은 readMe를 클릭하면 알아볼 수..

[AngularJS] AngulrJS 깊은복사 vs Javascript 로 깊은복사 깊은복사와 얕은복사의 차이점은 모두 안다고 가정하고, AngularJS 에서 깊은복사하는 법과 Plain Javascript 로 깊은복사하는 법만 간략히 정리해본다. [AngularJS 함수] var array = [1,2,3,4,5]; //angular.copy() var array2 = angular.copy(array); //깊은복사가 완료되었다 // array = [1,2,3,4,5] // array2 = [1,2,3,4,5] [Javascript 에서 깊은복사하기] var array = [1,2,3,4,5]; //JSON.parse() & JSON.stringify() var array2 = JSON.parse(..

[자바스크립트] page load 이후 script 실행하기 - onload() 와 ready() 사용하기 자바스크립트와 제이쿼리를 섞어쓰다보면 헷갈릴 때가 있다. 차이점과 사용법을 정리해보자 onload() 와 $.ready() 의 차이점은? onload() 는 페이지 내 모든 content 가 load 되면 실행된다 (DOM, image, script 등 모두를 포함) $.ready() 는 반면에 DOM (HTML Structure) 만 load 되면 실행된다 (image, script 등을 기다리지 않음) => 결과적으로 실행시점은 $.ready() 가 훨씬 빠르다 [사용법] 1) onload() window.onload = function() { //type your code alert('모든 c..