공부한것들을 정리하는 블로그 입니다.

현재 웹 페이지의 전체 URL을 가져와서 변수로 지정하려는 경우 다음 스크립트를 사용할 수 있습니다. window.location.href JavaScript Window Location 참고: window.location.href - 현재 페이지의 href (URL) 반환 window.location.hostname - 웹 호스트의 도메인 네임 반환 window.location.pathname - 현재 페이지의 경로와 파일 이름 반환 window.location.protocol - 사용하는 웹 프로토콜 반환 (http:// 혹은 https://) window.location.assign - 새 document 로드 // Source: w3schools 따라서 Javascript로 전체 URL 경로를 가..

1. React란 무엇인가? - Facebook 등에서 사용하는 (망할 일 없는) 인기있는 프론트엔드 라이브러리 / 프레임워크 이다 2. 프론트엔드 라이브러리 / 프레임워크란? - 단순히 정적 페이지를 만들려면 HTML과 CSS 만으로도 가능하다. (JavaScript나 프론트엔드 라이브러리 필요 x) - 만약 JavaScript를 더해주면 동적 페이지로 구현 가능하다. (유저의 행동흐름에 따르는 ; 동적페이지) - But, 요즘의 웹은 단순히 웹페이지가 아니라 웹 애플리케이션 이다. => 브라우저 상으로도 자연스러운 흐름으로 매우 많은 것들을 할 수 있다. 예를들어) 어떤 유저 인터페이스를 동적으로 나타내려면, 정말 수 많은 상태를 관리해줘야 한다. HTML Counter 0 + JavaScript v..

1.모듈이란? 2.모듈화 3.Node.js 4.라이브러리 5.라이브러리사용하기 1.모듈이란? 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. (아주 좋은 부품을 만들어서 사용한다 생각하면된다 ) 그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해서 얻을 수 있는 효과는 아래와 같다. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한번 다운로드된 모듈은 웹브라우저에 의해서..

그동안 자바 웹개발 및 백엔드 공부만 하다가, 지난달부터 프론트와 모바일(안드로이드 자바)쪽 업무도 맡게 되었습니다. 프론트엔드 공부를 했던것은 약 2년전쯤 코딩을 배울때가 마지막이였던 것 같습니다. 그나마도 JS문법 기본만 뗐고 DOM API는 거의 건너뛰었으며 JQuery도 그때그때 API Docs 찾아보거나 구글링을 하며 필요한것만 그때그때 익혔었습니다. 심도있는 공부없이 짧게 배웠던탓에 2년이 지난 지금, 프론트엔드는 여전히 어렵습니다. 그러나 최근들어 jQuery가 아닌 DOM API를 검색하는 횟수가 늘기 시작했고 우연히 지금의 상황에 맞는 좋은글을 발견하여 공유합니다. 출처 : http://jeonghwan-kim.github.io/2018/01/25/before-jquery.html jQu..

방법1. 999_test1.html before include 999_test2.html munu1 menu2 menu3 캡처 - 적용전 - 적용후 파일첨부 방법2. 998_test1.html Contents 998_test1.js function includeHtml() { $("include-html").each(function() { element = $(this); element.load(element.attr("target"), eval(element.attr("completed"))); }); } 998_test2.html Header 998_test3.html Footer 캡처 - 적용전 - 적용후 파일첨부

003drag.html 새로운소식 보낸이 오전 7:00장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.07 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.06 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.05 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.04 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.03 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.02 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.01 07:00:12장기보관 TO 제목 내용 새로운소식 보낸이 2019.07.31 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 ..

003drag.html 새로운소식 보낸이 오전 7:00장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.07 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.06 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.05 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.04 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.03 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.02 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 2019.08.01 07:00:12장기보관 TO 제목 내용 새로운소식 보낸이 2019.07.31 07:00:13장기보관 TO 제목 내용 새로운소식 보낸이 ..

무한스크롤과 Swipe/Flick 을 간단한 예제와 함께 다루어보도록 하겠습니다. 1. 무한 스크롤(Infinity Scrolling) 실습 2. 좌우로 화면을 밀어서 페이지이동(Swipe, Flick) 실습 3. 무한스크롤 + Swipe/Flick 구현 1. 무한 스크롤(Infinity Scrolling) 실습 - 뒤에 html이 append되는 단순기능 1.Infinity Scrolling.html Page 1 Page 2 출력화면 파일첨부 2. 좌우로 화면을 밀어서 페이지이동(Swipe, Flick) 실습 2.swipe flick.html jQuery Mobile 3 Page 1 Page 2 custom3.js /** 무한스크롤 * scrollHeight : 스크롤바 높이를 뺀 내용 전체의 높이 *..

웹개발 할때 필수 /.*jquery.*\.js$ 참고 : https://subicura.com/2018/02/14/javascript-debugging.html

eval 함수의 장점이자 단점은, 스크립트의 실행을 런타임에서 결정한다는 것입니다.(사실상 단점..) 이 함수는 임의의 문자열을 받아 자바스크립트 코드로 실행합니다. 만약 문제의 코드를 사전에 알 수 있다면(즉 런타임에 결정되는 게 아니라면) eval()을 쓸 필요가 없습니다. 코드가 런타임에 동적으로 생성된다면 대개 eval() 없이 목표를 달성할 수 있는 더 나은 방법이 존재합니다. 다음 예제는 eval() 은 그 자신의 바깥쪽 유효범위에 접근하고 수정을 가할 수 있는 반면, Function 은 그럴 수 없습니다.(Function 을 사용하는 것과 new Function 은 동일하다) 예제) 유효범위 오염 (function () { var local = 1; eval('local = 3; consol..

====================================================== 20190628 추가 게시판 조회수 중복 방지를 위해서는 쿠키, 세션, ip 3가지 방법이 있습니다. 실제 업무에서는 대개 쿠키를 이용합니다. 쿠키 - 조만간 관련글을 작성하도록 하겠습니다. 참조링크 : https://developersoo.tistory.com/14 세션 - 간략하게나마 최근 작성한 글의 링크(실습예제 소스코드 포함) : https://drsggg.tistory.com/216 7-4. 글 조회수 카운트, session을 이용한 조회수 중복 방지 처리(jsp) : BoardDAO.java, getBoard.jsp 게시판 조회수 중복 방지를 위해서는 쿠키, 세션, ip 3가지 방법이 있습니다...

Html 태그가 갯수가 몇 갠데 그 많은 태그를 어떻게 다 제거해? 게다가 태그 안에는 갖가지 속성들도 들어있는데 말이지.. 이렇게 생각을 하셨다면 아직 정규식의 위력을 모르시는 분일 가능성이 큽니다. 정규식 단 한줄이면 모든 Html 태그를 다 제거할 수가 있답니다. java나 jsp에서 아래 메소드를 만들어서 한번 사용해 보세요~ Html 태그 없는 내용만 추출하실 수 있습니다. 저는 엑셀다운로드할 때 웹에디터의 내용을 엑셀에 넣어야 하는 경우에 사용해 봤습니다. 엑셀에서는 Html 태그를 인식못하기 때문에 모두 제거하고 내용만 뿌려줘야 하거든요. ]*)?(\\s)*(/)?> /** * 모든 HTML 태그를 제거하고 반환한다. * * @param html * @throws Exception */ pu..

border 주기 -------------------------------------------------------------------------- 클래스(class) 선택자 위의 예에서 p {color:red}로 지정하면 모든 문단의 색깔이 붉은색으로 지정됩니다. 그럼 특정 문단의 색깔만 붉은색으로 지정할려면 어떻게 할까요? 클래스(class)를 이용하면 됩니다. 일반적인 문단입니다.red라는 이름의 클래스가 지정된 문단입니다. 위의 예에서 red라는 클래스는 문단에 적용시켰습니다. 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 됩니다. 소제목에도 red 클래스를 지정합니다.red라는 이름의 클래스가 지정된 문단입니다. 이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더..

id와 name은 모두 html element의 속성(attribute)으로 두 속성 모두 element를 식별(접근)하는 용도로 흔히 사용됩니다. id는 유일한 값으로, 문서 안에서 오직 하나만 존재해야 하지만name은 중복이 가능하다는 차이점이 있습니다. 많이 사용하는 함수인 getElementById() 와 getElementsByName() 를 보면id 는 getElement로 단수이고, name은 getElements로 복수 입니다.(결과도 마찬가지입니다) 추가하자면 id는 getElementById("id")방식으로 접근하고name은 document.form["name"']과 같은 방식으로도 접근 가능합니다. 예제) function getValue() { var x=document.getEle..