본문 바로가기

웹 프로그래밍 기초162

자바기반의 웹&앱 응용 SW개발자 양성과정 64일차 -96 이벤트 트리거 브라우저마다 파일을 입력하는 폼이 다르며 선택 상자를 직접적으로 컨트롤할 수 없기에 다른 버튼을 만들고 기능을 전달해주는 트리거가 존재합니다. 마우스 이벤트 객체를 만들어서 사용해야 합니다. triggerBtn.addEventListener("click", function () { let event = new MouseEvent("click", { 'view': window, 'bubbles': true, 'cancelable': true }); profileBtn.dispatchEvent(event) }) 또한 이미지를 올렸을 때 미리보기가 가능하도록 구현할 수 있습니다. let reader = new FileReader(); reader.onload = (readerEvent) => {.. 2020. 6. 12.
자바기반의 웹&앱 응용 SW개발자 양성과정 63일차 -95 필터는 클라이언트와 서버 사이에서 요청과 응답을 먼저 받아 처리해주도록 해주는 기능입니다. package com.newlecture.web.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servl.. 2020. 6. 11.
자바기반의 웹&앱 응용 SW개발자 양성과정 62일차 -94 노드 추가 : appendChild / append 노드 삽입 : insertBefore / insertAdjacentElement /insertAdjacentHTML insertAdjacentHTML("위치", 삽입할 HTML) 위치 beforebegin': targetElement 전. 'afterbegin': targetElement 첫 번째 자식 앞에. 'beforeend': targetElement 마지막 자식 다음에. 'afterend': targetElement 뒤. Javascript 드래그 앤 드롭 onmouse 이벤트를 사용한다. down , move , up을 사용한다. 마우스 이벤트들이 가지고 있는 속성 https://developer.mozilla.org/ko/docs/Web/AP.. 2020. 6. 3.
자바기반의 웹&앱 응용 SW개발자 양성과정 61일차 -93 MVC2 모델에서 service에서 트랜잭션을 처리하는 부분이다. 트랜잭션을 처리하기 위해선 conn.setAutoCommit(false);를 연결과 동시에 설정해주어야 하며 Exception이 발생하는 곳에서 conn.rollback()을 작성해주어야 한다. 또한 try~catch 구문에서 선언된 변수는 당연하게 지역변수로 처리되므로 구문 밖에다 null값으로 미리 선언해 두어야 한다. Connetion conn = null; PreparedStatement st = null; ResultSet rs =null; Connetion conn = null; try{ Connetion conn = DriverDriverManager.getConnection(); conn.setAutoCommit(false).. 2020. 6. 2.
자바기반의 웹&앱 응용 SW개발자 양성과정 60일차 -92 AJAX Fetch API , XMLhttpRequest 이용해 서버와 통신할 수 있다. XMLhttpRequest이 XML만 사용하는 것이 아닌 여러 데이터 전송방식을 사용할 수 있습니다. 공개 API를 만들 때 이름의 중요성을 느끼게 하는 부분입니다. XML을 사용하면 가독성이좋지않고 불필요한 태그들이 들어가 파일의 사이즈가 커진다. 대신 JSON을 많이 사용하는 추세입니다. JSON simlest data interchange format : 데이터를 주고받을 때 쓸 수 있는 가장 간단한 파일 포맷 lightweight text-based structure : 텍스트를 기반으로 한 가벼운 구조이며 easy to read : 가독성이 뛰어나며 key and value pairs : key값과 valu.. 2020. 6. 1.
HTML <link> tag link tag는 외부의 문서를 연결시키는 태그입니다. 예시로 google font , fontAwesome 같은 사이트를 이용할 때도 외부의 문서와 연결시키며, css 파일같은 스타일 시트를 연결할 수 있습니다. 우리는 link 태그를 영역 안에다 포함합니다. 그 이유는 문서를 읽는 순서에 있습니다. link 태그에는 여러 가지 속성이 존재합니다. 1. href 문서와 연결할 문서의 경로를 적어줍니다. 또한 주소는 상대 경로와/ 절대 경로 둘 다 가능합니다. 2.rel 현재 문서와 연결될 문서의 관계를 표시합니다. stylesheet : 스타일 시트로 연결하고자 할 경우 alternate : 문서의 대안 version(프린트나 번역 사이트)로 연결할 경우 author : 저작자로 연결할 경우 help .. 2020. 5. 29.
자바기반의 웹&앱 응용 SW개발자 양성과정 59일차 -91 웹 애플리케이션 이클립스에서 배포하기 만든 애플리케이션을 이클립스에서 배포하는 방법은 간단합니다 단지 Export버튼으로 간단히 war파일을 만들 수 있습니다. 또한 실제 서비스를 하기 위한 톰캣 서비스 서버를 다운로드 하아야 합니다. 먼저 톰캣의 실제 서비스를 하기 위한 서버를 다운로드합니다. Startup type 에서 윈도가 켜졌을 때 자동 실행할 것인지 test로 Manual 할 것인지 설정한 뒤 Start버튼을 눌러주면 됩니다. tistory.com Alias 별칭을 나타냅니다. 등록해준 주소로도 동일하게 접속할 수 있도록 도와줍니다. appBase 여러 가지 document상위의 있는 디렉터리입니다. 기본 경로는 톰캣이 설치된 경로입니다. cafe(실제로 다른 곳에 존재한다면 docBase를 .. 2020. 5. 28.
자바기반의 웹&앱 응용 SW개발자 양성과정 58일차 -90 Ajax(Asynchronous Javascript And XML) 원격에 있는 데이터를 요청을 해서 화면에 내용을 갱신하는 기술입니다. 웹 2.0(Web 2.0)이란 개방, 참여, 공유의 정신을 바탕으로 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다. 웹 1.0이 인터넷을 통해 일방적으로 정보를 보여주었다면, 웹 2.0은 사용자가 직접 콘텐츠를 생산하여 쌍방향으로 소통할 수 있다. 게시판, 댓글, 블로그, UCC, 지식백과 등이 있다. 단순한 웹사이트의 집합체를 웹 1.0으로 보고, 웹 애플리케이션을 제공하는 하나의 플랫폼으로의 발전을 웹 2.0이 데스크톱 컴퓨터의 응용 프로그램을 대체할 것으로 예견하고 있다. 사용자들의 참여, 공유, 개방을 유도 산출물을 공유하고, 외부에 개방할.. 2020. 5. 27.
자바기반의 웹&앱 응용 SW개발자 양성과정 57일차 -89 이클립스의 js파일과 vscode js파일 공유하기. 먼저 이클립스의 js폴더 경로를 복사합니다. vscode를 열어 복사된 경로로 파일을 열면 공유가 됩니다. concat() 메서드는 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환합니다. concat() 메서드보다 할당 연산자 (+, +=)를 사용하는게 더 좋습니다. 성능 테스트 결과에 따르면 할당 연산자의 속도가 몇 배 빠릅니다. 이벤트 핸들러 대입 방법 obj.onclick= handler; 이벤트 처리 함수를 대입 obj.addEventListenr("click", handler"); 이벤트 처리함수를 누적 obj.addEventListenr("click", handler", true); Capturing 과정에 이벤트 .. 2020. 5. 26.
자바기반의 웹&앱 응용 SW개발자 양성과정 57일차 -88 transform-origin 중심축을 정하는 방법 (right left top bottom) skew Transform x, y축 기준으로 비틀어지는데 열리는 효과를 낼 수 있다. transform-origin : right top 기준으로 skew -45 deg를 적용한 모습 transition에는 delay 값이 있는데 duration이 우선순위를 가지고 있다. delay는 효과가 변경되기 전 시간을 가진 뒤 실행하도록 한다. transition-property는 변경될 속성만 지정할 수 있습니다. 또한 움직일 수 있는 속성만 가능하며 여러 가지 속성을 사용할 때는 각 속성을 , 로 구분해주며 속성마다 시간을 별도로 지정해 줄 수 있습니다. window.addEventListener("load", .. 2020. 5. 26.

티스토리툴바