Web Programming
-
AngularJS에서 CRUD 구현하기 #1Web Programming/Angular JS 2020. 9. 10. 19:12
이번 글에서는 AngularJS의 기본 구조를 이용하여 가벼운 게시판을 만들어 CRUD를 구현해보려한다. 게시물은 DB 연동 대신 JSON 배열(JavaScript Object Notation)을 활용한다. JSON의 활용법에 대해서는 다음 문서를 참고하자. 참고 : tcpschool.com/json/json_basic_structure 태그 내부에 다음과 같은 코드를 작성한다. 이를 통해 boardlist에 게시판의 정보가 저장된다.
-
Code BankWeb Programming 2020. 9. 10. 16:13
웹 애플리케이션 개발 시 필요한 코드들을 저장해놓는 공간 HTML 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절하고, 줌 레벨 조정 width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정 initial-scale : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용(0~10) minimum-scale : 줄일 수 있는 최소 크기를 지정(0 ~ 10) maximum-scale : 늘릴 수 있는 최대 크기를 지정(0~10) user-scalable : 사용자의 화면을 확대/축소 권한 지정(yes/no) JavaScript a.pop(); //배열의 마지막 요소 제거, 제거된 요소 리턴 a.push("3"); //배열의 마지막에 요소 추가, 배열의 크기 리턴 ..
-
프론트엔드 프레임워크(Front-End Framework) 란?Web Programming/Angular JS 2020. 9. 10. 11:27
참고 : 프레임워크(FrameWork) 란? 지난 글에서 프레임워크에 대한 글을 다뤄보았다. 이번 글에서는 그 중에서도 MVC Model2의 View에 해당하는 개발에 사용되는 Front-End 프레임워크에 대해 공부해보려한다. 모든 Front-End 프레임워크는 다음 3가지 특징을 갖고 있다. 1. 컴포넌트(Component) 컴포넌트란 '소프트웨어의 부품'이라고 할 수 있다. 표준으로 정의된 규약 하에서 우리는 이 모듈을 애플리케이션의 부품처럼 재사용할 수 있다. JavaScript 프레임워크에서는 JSX(JavaScript XML)이나 HTML 템플릿을 주로 사용한다. 2. 라우팅(Routing) 프레임워크는 Client-Side 라우팅을 생성하고 관리할 수 있는 API를 제공한다.* 3. 상태관리..
-
Angular JS 란?Web Programming/Angular JS 2020. 9. 10. 10:01
구글에서 만든 자바스크립트 기반의 프론트엔드 웹 애플리케이션 프레임워크 이번 글에서는 AngularJS에 대해 다뤄보려 한다. AngularJS는 SPA(Single Page Application : 단일 페이지 내에서 새로운 View를 동적으로 로드하여 사용) 프레임워크다. JavaScript 기반으로 MVVM(Model - View - View Model) 모델링이 가능하다. HTML에 다음과 같은 소스를 넣어 AngularJS 프레임워크를 사용할 수 있다. 왜 AngularJS인가? 유지보수가 쉽다. 개발속도가 빠르다 간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다. 코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다. SPA 개발에 최적화되어 있다. 기능적인 분리가 명확해 협업이 쉽다. ..
-
web.xml 과 servlet-context.xml 과 root-context.xmlWeb Programming/Spring4.0 2020. 9. 9. 16:08
Spring MVC Project를 만들었을 때 기본으로 추가되는 xml의 목록은 다음과 같다. pom.xml web.xml servlet-context.xml root-context.xml 이 중 pom.xml은 Maven Project 생성 시 모듈을 다운받기 위한 xml으로 알고있다. 나머지 3개의 xml은 Spring에서 사용되는 xml인데 그 구조를 파악하는 것이 쉽지 않다. 이번 글에서는 이 xml의 용도를 알아보기로 하자. (※ 각 코드는 개개인의 설정에 따라 얼마든지 달라질 수 있다.) web.xml contextConfigLocation /WEB-INF/spring/root-context.xml org.springframework.web.context.ContextLoaderListene..
-
MVC Model1 과 MVC Model2Web Programming/Spring4.0 2020. 9. 9. 12:29
MVC Model : Model + View + Controller 웹 애플리케이션 개발에서 각 기능에 따라 분리하여 개발하는 웹 애플리케이션 모델 MVC Model 1 View와 Controller를 모두 동일한 JSP에서 수행하도록 개발하는 방식이다. Model 즉, 데이터베이스와의 연동을 가능하게 해주는 DAO(Database Access Object) 클래스 기능을 제외한 모든 결과값 출력, 화면 구현까지 모두 JSP 내부에서 이루어진다. Model 1은 구조가 단순하여 개발자가 쉽게 접근할 수 있으나 웹 애플리케이션의 복잡도가 증가할수록 문제가 발생한다. 유지보수 문제 : 유지보수 시에 View 기능과 Controller 기능이 섞여 오류 발생 가능성↑ 재사용성 문제 : 결합도가 높아 다른 애플..
-
서블릿(Servlet) 이란?Web Programming/Spring4.0 2020. 9. 9. 11:18
'Server(서버) + Applet(작은 응용프로그램)' 웹프로그래밍에서 클라이언트의 요청을 처리하고 그 결과를 다시 클라이언트에게 전송하는 Servlet 클래스의 구현 규칙을 지킨 자바 프로그래밍 기술 JSP와 Servlet JSP HTML 코드 내부에 Java 코드 삽입 MVC Model2에서 View에 주로 사용 Servlet Java 코드 내부에 HTML 코드 삽입 MVC Model2에서 Controller에 주로 사용 기능은 동일, 역할은 상이
-
게시판 만들기 #4 스프링과 데이터베이스 연동Web Programming/Spring 게시판 프로젝트 2020. 9. 8. 18:45
데이터를 전달할 때 사용할 수 있는 방식은 3가지가 있다. 1. 메소드의 파라미터로 정의 후 전달 public void write(String title, String content) { ... } write("제목1","내용1"); 2. Map(혹은 HashMap)에 담아 이를 파라미터로 전달 public void write(Map param) { ... } Map param = new HashMap(); param.put("title","제목1"); param.put("content","내용1"); write(param); 3. VO(Value Object)에 담아 이를 파라미터로 전달 public class BoardVO { private String title; private String cont..