본문 바로가기
728x90
반응형

전체 글182

[javascript] JSON 합치기 Object.assign(a, b) Object.assign 함수를 이용하여 두 개의 JSON을 병합할 수 있습니다. ​ var d = {a:1, b:2}; var c = {c:3}; Object.assign(d, c); // {a:1, b:2, c:3} 단, 같은 key 값을 가지고 있으면 뒤에 오는 JSON의 value값이 적용됩니다. var d = {a:1, b:2}; var c = {a:3, c:3}; Object.assign(d, c); // {a:3, b:2, c:3} 하지만 IE에서만 해당 기능이 작동하지 않습니다. IE.... 이런 점을 고려해서 상황에 맞게 사용하면 좋겠습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Obje.. 2020. 10. 9.
[css] 효율적인 CSS 작성하기 효율적인 CSS 작성하는 방법입니다. Universal 규칙은 사용하지 않습니다. /** Universal 규칙 예제 */ [hidden="true"] { ... } * { ... } div > [type="number"] { ... } ​ ​ ID 규칙에 쓸모없는 태그나 클래스를 사용하지 않습니다. ID는 고유하므로 태그나 클래스를 붙이는 것은 매칭 작업을 더디게 만듭니다. (예외: 만약 여러가지 다른 스타일을 위해 ID가 지정된 엘리먼트의 class가 동적으로 바뀌고 이 class가 ID가 지정되지 않은 다른 엘리먼트와 공유될 경우에는 클래스 선택자가 필요합니다. ) button#btn { ... } button#btn.on { ... } table#tbl { ... } input#num[type=".. 2020. 10. 9.
[javascript] 뒤로가기 이벤트 onpopstate onpopstate (뒤로 가기) 이벤트를 적용하면 window.history.back(); 시에도 작동됩니다. 게시물 목록에서 게시물 상세 페이지로 이동 한 뒤, 뒤로 가기 버튼으로 페이징 값과 조회 조건을 가져가고 싶을 때 onpopstate 이벤트를 사용하면 값을 넘길 수 있습니다. /* detail.jsp */ window.onpopstate = function(event) { history.pushState({pageNum:3, searchDt:'2019-05-07'}, null, '/board/list'); location.reload(); } history.pushState(null, null, null); /* list.jsp */ console.log(history.state); // {.. 2020. 10. 9.
[css] 가변 값을 위한 함수 calc() calc는 반응형 웹 구축 시 유용한 css 함수입니다. 만약 전체 width에서 230px를 제외한 길이만큼 영역을 지정하고 싶다. 고정된 영역에서 230px를 더하고 빼는 것은 어렵지 않지만, 반응형 웹에서는 상대적인 영역을 사용하기 때문에 calc 함수를 사용합니다. .width-m230 { width: calc(100% - 230px); } 매우 간단한 방법으로 원하는 width를 사용할 수 있게 되었습니다. width 값 말고도 padding, margin, font-size 등에도 유용하게 쓸 수 있습니다. 유의할 점은 값과 연산자 사이에 띄어쓰기를 꼭 해야 한다는 점입니다. calc(값1 연산자 값2) 2020. 10. 9.
[script] foreach문을 이용하여 json 데이터 key, value 값 꺼내기 Javascript var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; for (key in json) { console.log('key:' + key + ' / ' + 'value:' + json[key]); } JQuery var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; $.each(json, function(key, value) { console.log('key:' + key + ' / ' + 'value:' + value); }); 2020. 10. 9.
[mybatis] insert/update 쿼리 실행 후 결과값 가져오기 (useGeneratedKeys, keyProperty, selectKey) insert/update 등을 실행하고서 결과를 확인해야 하는 상황이 생깁니다. 다음은 insert 되는 Auto Increment 값(mysql 등)이나 sequence 값(oracle 등)을 조회하는 방법입니다. useGeneratedKeys, keyProperty 옵션 사용하는 데이터베이스가 Mysql과 같이 자동생성 키를 지원한다면 useGeneratedKeys, keyProperty 옵션을 통해 insert 된 데이터의 key 값을 리턴 받을 수 있습니다. useGeneratedKeys : (insert, update에만 적용) 자동생성 키를 받을때 true로 설정한다. (default: false) keyProperty : 리턴 될 key property 설정. 여러개를 사용한다면 ,(콤마)를.. 2020. 10. 9.
[oracle] OVER (PARTION BY) ; 조건별 누계 (분석함수) 집계함수는 여러행 또는 테이블 전체 행으로부터 그룹별로 집계하여 결과를 반환(그룹별 1개의 행을 반환)하고, 분석함수는 집계 결과를 각 행마다보여줍니다. (+ 오라클 8.1.6 부터 분석함수 지원) SELECT ANALYTIC_FUNTION (arguments) OVER ( [ PARTITION BY 컬럼] [ ORDER BY 컬럼 ] [ WINDOWING 절 (Rows | Range Between) ] ) FROM TABLE_NAME ANALYTIC_FUNCTION : 분석함수명(입력인자) OVER : 분석함수임을 나타내는 키워드. PARTITION BY : 계산 대상 그룹을 정한다. ORDER BY : 대상 그룹에 대한 정렬을 수행한다. WINDOWING 절 : 분석함수의 계산 대상 범위를 지정한다... 2020. 10. 9.
[oracle] ROLLUP, CUBE, GROUPING SETS (집계함수) 집계함수는 여러행 또는 테이블 전체 행으로부터 그룹별로 집계하여 결과를 반환(그룹별 1개의 행을 반환)하고, 분석함수는 집계 결과를 각 행마다 보여줍니다. 1. ROLLUP() 그룹의 소계와 총계를 구한다. (순서가 중요하다. 제일 앞에 놓인 것에 대해서 소계를 구하게 된다.) GROUP BY ROLLUP(A, B) = GROUP BY A, B UNION ALL GROUP BY B UNION ALL 모든 집합 그룹 결과 2. CUBE() 각 그룹의 모든 경우의 수에 대한 소계와 총계를 구한다. GROUP BY CUBE(A, B) = GROUP BY A, B UNION ALL GROUP BY A UNION ALL GROUP BY B UNION ALL 모든 집합 그룹 결과 3. GROUPING SETS() .. 2020. 10. 8.
[mybatis] $ 와 # 의 차이 SQL SELECT * FROM test WHERE id = 'test' # ex) # 값으로 지정할때 많이쓰인다. SELECT * FROM test WHERE id = #{id} $ ex) $ 는 값으로 지정할때 '' (홑따옴표)를 써야한다. 쿼리문작성시 문자열 입력부분에는 가급적 사용되지 않는다. SELECT * FROM test WHERE id = ${id} 차이점 결론 : '(홑따옴표) 붙느냐 안붙느냐 의 차이 2020. 10. 8.
[SpringBoot] Intellij(인텔리제이)에 SpringBoot(스프링부트) 프로젝트 시작하기 Spring Boot 스프링부트(Spring Boot)는 스프링 프레임워크 기반 어플리케션(Data, Batch, Integration, Web, JDBC, Security 등)을 사용자가 더 빠르고 쉽게 개발 할 수 있게 해주는 오픈소스 프로젝트이다. 단독 실행이 가능한 수준의 스프링 어플리케이션 제적이 가능 내장된 Tomcat, Jetty, UnderTow 등의 서버를 이용해서 별도의 서버를 설치하지 않고 실행이 가능 최대한 자동화된 설정을 제공 XML 설정 없이 단순한 설정 방식을 제공 (https://spring.io/tools3/sts/all) IntelliJ IDE 인텔리제이(IntelliJ)는 JetBrain사에서 개발한 자바 IDE이다. 기존의 이클립스(Eclipse) IDE 보다 가볍고 .. 2020. 10. 8.
728x90
반응형

티스토리툴바