이전 글에서 만든 계산기를 액션 버젼으로 구현해볼것이다. 액션에 대한 설명은 다른 카테고리에 작성하겠다. MVC 패턴 구조는 아니지만 구성요소 간의 역할이 어느정도 분리되며 프로그램 요소를 JSP에서 제거했기 때문에 비교적 깔끔한 코드구조를 가지게된다. 이제 코딩을 시작하겠다. 1️⃣ 계산기 화면 구현 webapp 폴더에 ch07 폴더를 만든후 ch06의 calcForm.html을 복붙해주자. 그리고 다음과 같이 코드를 수정해주자. 계산기-useBean + - * / 2️⃣ 자바 빈 객체 생성 계산기 기능 구현을 위해서 2개의 숫자를 입력받아 계산하는 기능이 필요한데 이 기능을 JSP나 서블릿으로 구현하지 않고 별도의 클래스로 독립해서 구현한다. [src/main/java] 에서 [ch07] 패키지를 생..

1️⃣ 계산기 화면 구현 이번에 만들 계산기는 2개의 숫자와 연산자를 선택 후 계산 버튼을 누르면 입력값을 JSP로 전달한다. JSP는 브라우저로부터 전달된 입력값을 가져와 계산후 결과를 포함한 화면을 출력하는 구조이다. 입력 파라미터 n1, n2 : 숫자 입력으로 HTML 으로 구현 op : 연산자 선택 드롭다운 리스트로 HTML 로 구현되며 연산자 종류는 [ +, -. *, / ] 로 구성됨. 우선 ch05 폴더의 calcForm.html 파일을 복사해 ch06에 붙여 넣자. 그리고 다음과 같이 10번째 줄을 수정해주자. 2️⃣ 계산기 JSP 구현 계산기 기본 코드는 서블릿과 동일하다. 따라서 CalcServlet.java의 서블릿 계산기 구현부분인 doGet() 메서드의 내용을 스크립트릿 영역에 넣..

JSP의 기본 구성요소인 지시어와 주석, 스크립트 요소를 실습해보며 익숙해지기 위한 종합예제이다. 이글에선 다음 요소를 다룬다. 주석 선언과 참조 include 지시어 스크립트릿 1️⃣ JSP 생성 webapp 우클릭 후 ch06 폴더를 생성한 다음 JSP 파일을 생성해주자. 생성이름은 jspTotal 이다. 생성된 코드는 아래와 같다. 주석 작성 내부에 아래의 코드를 작성해주자. 선언과 참조 일반변수 선언은 스크립트릿에서 가능하지만 멤버 변수 / 함수 선언은 스크립트릿에서 불가능하다. 따라서 선언문을 이용해 배열과 함수를 선언하자. 일단 태그의 위에서 작성한 위에 아래의 코드를 작성해주자. 배열로 4명의 이름 저장. num1 변수를 10으로 초기화. calc() 메서드는 인자로 받은 숫자를 num1과 ..

1️⃣ 계산기 화면구현 2개의 숫자와 연산자를 선택하고 실행 버튼을누르면 입력값을 서블릿으로 전달하고, 브라우저로부터 전달된 입력값을 가져와 계산후 결과를 출력하는 구조로 만들것이다. webapp 폴더에서 ch05 폴더를 만들고 calclForm.html을 생성해주자. 최초 생성 코드는 다음과 같다. 코드를 다음과 같이 수정해주자. 계산기 서블릿 + - * / 결과 화면이 다음과 같으면 성공 2️⃣ 계산기 서블릿 구현 계산기 서블릿은 지난번의 HelloWorld 서블릿 생성과 똑같다. CalcServlet으로 서블릿을 생성해주자. 이클립스 기준으로 다음과 같이 옵션을 설정하면된다. Java Package : ch05 Class name : CalcServlet Url mapping : /calc 코드는 ..

① 서블릿 생성 src > main 에서 우클릭후 Directory를 선택해주자. java를 눌러주자. 그럼 아래와 같이 java 폴더가 생긴다. 이제 메이븐에서 servlet을 다운해주자. 프로젝트 우클릭 후 Open Module Setting을 눌러주자. 모듈 > Dependencies > + > Jars or Directories 톰캣이 설치된 폴더의 lib내부에 servlet-api.jar이 있다. 추가해주자. + servlet-api.jar 파일뿐 아니라 jsp-api.jar 파일도 추가해주자. 서블릿이 추가됬는지 확인 후 OK. 이후 New Servlet 만들기를 진행해주자. 여기 까지 완료했다면 서블릿 생성 메뉴가 생긴다. 생성된 코드는 아래와 같다. import javax.servlet.*..

① HTML 기본 문서 구조 작성 폴더[ch03]에 todoapp.html을 만들어주자. 최초생성 코드는 아래와 같다. 코드를 아래와 같이 수정해주자 My ToDo App 할일 추가 실행 결과는 다음과 같다. ② 부트스트랩을 이용한 디자인 적용 부트스트랩 홈페이지에 접속해주자. Copy버튼을 눌러 html태그를 복사후 My ToDo App 할일 추가 ③ 자바스크립트 구현 현재까지 스프링작성한 글중에서 처음으로 자바스크립트를 사용하게됬다. 시작에 앞서 아래의 기본 개념을 미리 숙지하길 바란다. 자바 스크립트 변수 개념 var 함수범위, 이미 만들어진 변수 재선언 가능 let 블록범위, 이미 만들어진 변수 재선언 불가능, 재할당 가능. const 블록범위, 이미 만들어진 변수 재선언 불가능, 재할당 불가능...

① HTML 기본 문서 구조 작성 이전 글에서 생성한 jwbook프로젝트로 들어간다. 프로젝트 > src > main > webapp 폴더를 우클릭 후 [ch03] 폴더를 생성하자. 폴더를 생성했다면 regform.html 을 만들어주자 html파일을 만들었다면 기본값은 다음과 같을것이다. 다음과 같이 수정해주자. 회원 가입 이름 이메일 가입 html 작성을 완료했다면 프로젝트 내부의 html파일을 직접 실행해보자. 이렇게 뜨면 성공이다. ② CSS를 통한 디자인 정의 head 태그 내부에 아래와 같이 그리고 html파일을 직접 실행해보자. border-radius 박스 모서리 둥글게 설정 text-align 텍스트 가운데 정렬 padding 박스 높이 지정 및 수직 중앙부 정렬 #regform padd..

동적 웹 프로젝트 생성 New Project > Maven Archetype을 누르고 아래와 같이 설정한다. 아키타입엔 org.apache.maven.archetypes:maven-archetype-webapp 를 입력해주자. Advanced Settings를 클릭하여 바꿀 사항이 있으면 바꾼다. 필자는 기본으로 냅두고 Create를 하였다. 톰캣 연동 Create를 하고 기다리고 있으면 인텔리제이가 구성요소를 다운로드를 한다. 다운로드가 완료되었으면 톰캣 설정을 시작한다. 상단의 [Run] > Edit Configurations에 들어가주자. + 혹은 Add new를 눌러주자 [Tomcat Server] > Local을 눌러주자 [Configure]을 눌러 구성요소를 설정해주자. 필자는 포트를 8081..