CSS3? Cascading Style Sheets(CSS) 언어의 가장 최신 버전이고 CSS2.1 을 확장하며 모듈기반으로 개발중인 표준이다 . 다중열(multi columns), 유동적인 상자(flexible box), 격자 배치(grid layouts)뿐만 아니라 둥그런 모서리(rounded corners), 그림자(shadows) , 부드러운 색의 변이(gradients) , 변이(transitions), 움직임 (animations) 등 을 새로 지원 한다. CSS3에 추가된 속성 - Multi - columns - Flecible box - Grid layouts - Rounded corners - Shadows - Gradients - Transitions - Animations
css? Cascading Style Sheets 의 약자로 마크업 언어가 실제 표시되는 방법을 기술한 언어이다. HTML, XML 같은 마크업 언어 문서의 스타일을 꾸밀 때 사용하는 스타일 시트라고 할 수 있다. css 적용 방법 css는 기본적으로 3가지 import 방법이 있지만, 대부분의 경우 아래와 같이 프로젝트 내부에 생성해놓은 css 파일을 link 태그를 이용하여 import 하는 방식을 가장 많이 사용한다. css 선택자 선택자는 특정 요소를 선택하여 스타일을 적용할 수 있게 해준다. css 에서 스타일을 정의할 때 선택자를 이용하여 요소를 선택하고, 어떻게 표현할 지 선언하여 사용한다. - 전체 선택자 * : HTML 페이지 내부의 모든 태그를 선택 * { color: red; } - ..
지금까지 공부한 JSP, Servlet, DAO, DTO와 약간의 Javascript를 섞어서 모두 활용해보는 예제를 진행하려고 한다. 간단하게 구현해볼 기능은 다음과 같다. 1. 로그인 페이지에서 로그인, 회원가입 페이지로 이동 가능 2. 회원 가입 페이지에서 아이디의 중복을 확인하고, 비밀번호 & 비밀번호 확인이 일치하는 지 확인하여 회원 가입 진행 3. 회원 가입을 완료하면, 로그인 페이지에 방금 회원가입한 id가 입력된 상태로 이동된다. 4. 로그인을 수행하여 메인 페이지로 진입 가능 사용할 DB 테이블 모든 DB 조작 메서드는 DAO가 가지고 있으며, 위 테이블의 모든 속성을 변수로 갖는 DTO를 단 하나 사용하여 구성하였다. 각각의 기능을 수행할 Servlet의 구성 1. IdCheckServ..
이전 포스팅에서 Servlet의 간단한 개념과, DAO & DTO를 각각 어떻게 작성하는 지 알아봤으니, 이제 간단한 예제를 풀어 활용해보자. 예제는 이전에 구성했던 예제 코드를 각 기능별로, 1. View = JSP 2. Controller = Servlet 3. DataBase = DAO & DTO 위와 같이 나누어 좀 더 체계적으로 구현된 웹 프로젝트로 재구성하여 작성하였다. 우선, 구현할 기능과 데이터의 흐름은 다음과 같다. 1. UserInfoInitForm.jsp: 해당 페이지는 다음과 같은 기능을 수행한다. 1) 이름을 입력 받아 동일한 이름의 회원 정보 검색 (=> UserInfoViewer.jsp) 2) 회원가입 버튼을 눌러 회원가입 페이지로 이동 (=> UserInfoJoinForm.j..
DTO? DTO는 직전 포스팅에서도 언급했듯, 데이터베이스 레코드의 데이터를 맵핑하여 인스턴스로 사용하기 위해 존재하는 객체이다. 즉, 폼 필드의 이름을 그대로 가지고 있는 자바빈 객체를 맵핑하여 JSP가 사용할 수 있게끔 할 수 있도록 하는 객체. 이러한 객체를 DTO(Data Tranfer Object) 혹은 VO(Value Object) 패턴이라고 한다. DTO를 생성할 시 주의 사항: 1. JSP에서 사용하는 파라미터의 속성명 2. DTO 클래스의 멤버 변수명 3. 데이터베이스의 테이블 속성명 위 3가지가 모두 동일한 이름이여야 비즈니스 계층에서 쉽게 꺼내 사용할 수 있다. ◎DTO 객체 예시 코드 package com.choonham.dto; public class GoodsDTO { priva..
JSP나 Servlet을 사용하여 프로젝트를 진행할 때, 모든 객체를 전부 JSP에서 선언하여 사용하면 데이터를 따라가기 힘들 뿐더러 비효율적이다. 그래서 주로 사용하는 방식이 Java source 폴더에 원하는 데이터를 가지고 있는 객체를 생성하여 이를 모아두고, 데이터베이스에서 가져온 정보를 해당 객체에 저장하여 사용하는 방식이다. 이 때, DB 에서 꺼내온 데이터를 가질 객체들의 집합을 DTO(Data Transfer Object)라고 한다. 이번 포스팅에서는 이 DTO 를 어떻게 활용할 수 있는 지 알아보려고 한다. 간단하게, 저장된 정보를 가지고 있다가, 검색 내용이 들어오면 해당하는 데이터를 목록으로 내보내고, 목록을 클릭하면 상세 정보가 보이는 정도의 기능을 가지고 있는 도서 검색을 구현하여..
JSP(사용자) -> Servlet(서버) 간 데이터 전송은 이전에 다뤘던 JSP -> JSP 간 데이터 통신과 별반 다를 게 없다. form태그의 action속성 경로가 맵핑해놓은 url 주소 값이라는 것만 주의하면 거의 동일하다고 봐도 된다. ◎MethodServlet.java package unit02; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; ..
기초를 다루며 사용했던 doGet()은 서버에 요청이 들어올 때마다 호출되는 함수지만, 이번에 알아볼 init()과 destroy()는 각각 서버가 처음 실행되었을때, 서버가 종료되었을 때 사용되는 메서드이다. package unit01; import java.io.IOException; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSe..
직전 포스팅에서 Servlet의 간략한 개념과 클래스 생성까지 다뤘다면, 이번엔 servlet에 실제 코드를 어떻게 작성하는 지 아주 간단한 덧셈 예제로 알아보자. 사실 복잡할 거 없이, 그냥 JAVA 코드를 지정한 servlet 메서드 내에 작성하여 실행하면 끝이다. 주의할 점은 JSP와는 반대로 HTML 또한 servlet에서 작성해줄 수 있는데, 이때는 PrintWriter객체를 반드시 활용해야 한다. package unit01; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax...
Servlet? 최대한 간단하게 설명하면, Servlet은 웹에서 클라이언트의 요청에 대한 동적인 처리를 서버가 수행할 수 있게끔 해주는 JAVA API라고 할 수 있다. 즉, JAVA 코드로 작성되는 HTML 코드라고 할 수 있는데, JSP가 요청 결과를 VIEW 해주는 데 집중한다면, Servlet은 서버 내부에서 데이터의 처리(제어)에 집중한다고 볼 수 있다. 간단한 실습을 진행해면서 왜 Servlet 을 사용하는 것이 좋은지, 어떤 것이 단점인지 등등 자세히 알아보도록 하자. 기본적으로 servlet은 동적 웹 프로젝트에서 Java Resources - src 에 위치하며, new를 클릭하여 생성할 수 있다. 패키지명, 클래스명을 입력해주고, next를 눌러 넘어가면 다음과 같은 화면이 나오는데,..
- 정보보안기사 #실기 #정리
- react
- 파니노구스토
- 인천 구월동 이탈리안 맛집
- redux-thunk
- javascript
- Async
- react-native
- await
- 인천 구월동 맛집
- Promise
- 이탈리안 레스토랑
- redux
- AsyncStorage
- 맛집
- Total
- Today
- Yesterday