본문 바로가기

웹 프로그래밍 기초162

자바기반의 웹&앱 응용 SW개발자 양성과정 67일차 -101 다오를 인터페이스로 구현합니다. public interface NoticeDao { List getList() throws ClassNotFoundException, SQLException; Notice get(int id); int insert(Notice notice); int update(Notice notice); int delete(int id); } JDBC를 이용해 데이터베이스를 관리하다 Mybatis로 변경할 일이 생겼습니다. 그럼 Service를 구현하는 곳에서 Dao 객체를 변경해야 합니다. 프로젝트의 크기가 거대하다면 소스코드의 변경에 대한 작업이 상당히 큰 비중을 차지할 수 돼있습니다. 그러하기에 변경될 수 있는 부품들을 외부 설정으로 변경할 수 있도록 코드를 작성합니다. packa.. 2020. 6. 17.
자바기반의 웹&앱 응용 SW개발자 양성과정 67일차 -100 application.properties는 스프링 부트에서 지원하는 Map컬렉션과 비슷한 역할을 합니다. 기본 설정 파일이므로 Key.Value값으로 설정해주면 알아서 적용됩니다. 만약 기본 설정파일을 설정하지 않을 경우에는 controller의 return값으로 경로를 포함한 view페이지를 적어주어야 합니다. spring.mvc.view.prefix=/WEB-INF/view/ spring.mvc.view.suffix=.jsp return "/WEB-INF/view/index.jsp"; JSP, 서블릿을 통해서 자바 코드, JSP파일을 수정한 경우 우리는 서버를 재시작하는 일이 많았습니다. 그러한 불편한 점은 Spring boot에서는 라이브러리를 의존함으로써 자동 재시작하도록 해줍니다. org.spr.. 2020. 6. 17.
자바기반의 웹&앱 응용 SW개발자 양성과정 67일차 -99 스프링 부트 스프링 MVC를 이용해서 DB 연동이 필요한 간단한 웹 애플리케이션을 만들 때에도 준비해야 할 것이 많습니다. MVC설정을 하고 DB 연동에 필요한 DataSource설정 , 트랜잭션 설정 등을 해야 합니다. 메이븐을 사용하면 드라이버 , 모듈을 버전에 알맞게 찾아 의존 추가도 해야 합니다. 스프링 템플릿인 스프링 부트는 최소한의 작업으로 스프링 프로젝트를 시작할 수 있도록 돕는다. 톰캣과 같은 서버를 설치하지 않아도 내장 서버를 이용해 웹 애플리케이션을 바로 실행할 수 있으며 모니터링을 위한 기능도 제공한다. 스프링 부트를 이용해 간단하게 웹 어플리케이션을 만들어 보자. 이클립스에서 Spring Starter Project를 클릭하면 다음과 같은 창이 나옵니다. 각종 사용자에 맞게 아티팩트.. 2020. 6. 17.
자바기반의 웹&앱 응용 SW개발자 양성과정 66일차 -98 Maven 프로젝트의 기본 디렉터리 구조 archetype:generate 골이 성공적으로 실행되면 artifactId에 입력한 값과 동일한 이름의 폴더가 생성된다. 다음에는 프로젝트 명 즉 artifactId를 javaprj로 이클립스를 이용해 만든 파일 구성이다 연습용이므로 skip archetype seletion 체크박스를 클릭했다. 기본적으로 생성되는 폴더를 포함한 Maven 프로젝트의 주요 폴더는 다음과 같다. src/main/java - 자바 소스 파일이 위치한다. src/main/resources - 프로퍼티나 XML 등 리소스 파일이 위치한다. 클래스 패스에 포함된다. src/main/webapp - 웹 애플리케이션 관련 파일이 위치한다. (WEB-INF 폴더, JSP 파일 등) src/.. 2020. 6. 16.
[CSS] 속성 선택자 속성 선택자 속성 선택자는 태그 , 클래스 이름, ID이름으로 선택한 뒤 스타일을 적용하는 방법 말고 태그 안에서 사용되는 속성들의 값에따라 스타일을 지정할 수 있습니다. 속성 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다. [] 대괄호 사이에 찾으려는 속성을 지정하면 됩니다. 1 2 3 4 이중 href속성이 존재하는 a태그만을 찾기 위해선 a[href]{ } 이 처럼 작성해 찾을 수 있습니다. [속성 = 값] 선택자 속성의 존재유무로만 찾는 것이 아닌 속성의 값에 따라서도 선택할 수 있습니다. 대괄호 안에 속성과 속성값을 넣고 사이에 부등호를 넣습니다. 이중 type값이 text인 input만 찾고 싶다면 input[type="text"]{ } 으로 찾을 수 있습니다. [속성 |=값] .. 2020. 6. 15.
[CSS] 선택자 하위 선택자 지정한 모든 하위 요소에 스타일을 적용합니다. 부모 요소에 포함된 하위 요소 모두에 스타일이 적용됩니다. CSS에서 작성할 때는 부모 요소 하위 요소라는 문법을 사용합니다. 하위 요소 contanier의 ul손자요소입니다 html 문서구조에서 container의 모든 ul하위 요소를 선택하고 싶다면 .container ul{ } 이렇게 작성하면됩니다. 속해있는 모든 하위 ul이 선택됩니다. 자식 선택자 만약 손자를 제외하고 자식만 선택하고 싶다면 어떻게 css선택자를 작성해야 할까요? .container > ul{ } 자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 부등호 >를 표시해 부모 요소와 자식 요소를 구분합니다. 인접 형제 선택자(adjacent selecter) 인접 형제 .. 2020. 6. 15.
<HTML5> 시맨틱 태그 웹 문서의 레이아웃을 만들 때 시맨틱 태그를 이용하지 않더라도 시맨틱 태그로 만들어진 웹 문서와 동일한 웹 문서를 만들 수 있습니다. 하지만 웹 브라우저에서 문서를 처리할 때는 큰 차이가 존재합니다. HTML5의 시맨틱 태그로 작성한 소스를 보면 각 부분의 대한 내용을 쉽게 알 수 가있습니다. 또한 개발자 자신을 위해서라도 시맨틱 태그를 이용해야 합니다. HTML 소스를 무분별한 DIV태그로 구조를 잡았다면 나중에 유지 보수하는데 상당히 힘들 수 있습니다. ● 태그 특정 부분의 머리말에 해당됩니다. 보통 문서의 상단에 위치합니다. 네이버와 같이 태그를 사용해 검색 창을 넣거나 태그를 이용해 사이트의 메뉴창을 보여줍니다. ● 태그 내비게이션이라 불리는 태그는 동일한 사이트 안에서 다른 사이트의 문서로 연결.. 2020. 6. 15.
자바기반의 웹&앱 응용 SW개발자 양성과정 65일차 -97 파일 업로드 비동기식 window.addEventListener("load", function(){ var editor = document.querySelector(".editor"); var htmlArea = editor.querySelector(".html-area"); var boldButton = editor.querySelector(".btn-bold"); var italicButton = editor.querySelector(".btn-italic"); var imgButton = editor.querySelector(".btn-img"); var fileButton = editor.querySelector(".btn-file"); fileButton.oninput = function(e){.. 2020. 6. 14.
<HTML> <a>태그의 target 속성 , 앵커 링크를 클릭할 경우 문서가 있던 현재 브라우저 창에 연결된 문서가 나타납니다. 하지만 target 속성을 사용하면 현재 화면뿐만 아니라 새로운 화면에서도 링크를 열 수 있습니다. 속성 설명 _blank 링크 내용이 새창이나 새탭에서 열립니다. _self target 속성의 기본 값으로 링크가 있는 화면에서 열립니다. _parent 프레임을 사용한경우 부모 프레임에 표시됩니다. _top 프레임을 벗어나 링크 내용을 전체화면에 표시합니다. 네이버 앵커는 한 페이지 내에서도 링크를 하고 각 태그로 이동되는 것을 말합니다. 웹문서상의 내용이 길때 사용하면 편리할 것 같습니다. 문법은 내용 눌렀을 때 id로 매핑된 곳으로 이동 내용 2020. 6. 12.
<HTML> <figure> , <figcaption> 태그 는 설명 글이 필요한 멀티미디어 파일을 비롯해 사진이나, 표, 소스코드 등 한 단위가 되는 요소를 묶어줄 때 사용합니다. 즉 설명 글을 붙일 대상을 지정할 때 사용합니다. 실제로 설명할 글을 붙입니다. 글을 붙일 수 있는 대상은 이미지, 오디오, 비디오같은 미디어 파일도 가능하며 텍스트 단락, 표가 될 수도 있으며 여러 개의 이미지나 미디어 파일에 하나의 설명글을 표시할 수 있습니다. html 로고 사진 이미지와 이미지 설명이 태그로 묶여 있기 때문에 이미지 위치를 옮기면 설명도 함께 옮겨집니다. 2020. 6. 12.

티스토리툴바