상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational): 요청이 수신되어 처리 중 2xx (Successful): 클라이언트의 요청을 성공적으로 정상 처리 3xx (Redirection): 요청을 완료하기 위해 유저 에이전트의 추가 행동(조치)이 필요 4xx (Client Error): 클라이언트 오류. 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류. 서버가 정상 요청을 처리하지 못함 1xx (Informational) 거의 사용하지 않는 상태 코드이다. 2xx (Successful) 200 OK 요청 성공 201 Created 요청이 성공해서 새로운 리소스가 생성됨 202 Accepted 요청이 접수되..
프리마커란? 정확히 말하자면 Apache FreeMarker로 자바에서 사용되는 템플릿 엔진, 자바 라이브러리이다. 템플릿과 데이터를 기반으로 텍스트 출력을 생성한다. 프리마커의 확장자는 ftl이다. FreeMarker Template File의 줄임말이다. 프리마커 문법은 아래 사이트에서 확인해볼 수 있다. Apache FreeMarker Manual freemarker.apache.org 스프링, 스프링 부트로 프로젝트 진행 시 템플릿 엔진 대신 JSP를 사용할 수 있지만, 더 이상 스프링 부트에서 JSP는 추천되지 않는다. Java EE에 종속적이라는 점이 큰 단점으로 다가오기 때문이다. 예로 인텔리제이 IDE에서는 스프링 부트 프로젝트에서 JSP를 사용하는 경우 패키징을 war로 선택해야 한다. ..
location.href에 타임 리프 변수 넣기 타임리프에서 GET 방식으로 필요한 파라미터를 집어넣을 때, 태그의 th:href에서는 무리 없이 값이 들어갔지만 th:onclick에서 location.href 사용 시에는 th:href처럼 동작하지 않았다. 그래서 조금 다르게 작성하였다. 쉬운 이해를 위해 두 가지 코드를 비교해본다. th:href View page url임을 명시할 때는 @{}를 사용한다. GET 방식으로 데이터를 전달하려면 @{} 안에 (key=value)를 넣어준다. 위 코드를 예시로 하였을 때 view는 이동할 페이지이고, uid는 key이며 ${data.uid}가 value이다. 만약 ${data.uid}에 들어가는 값이 1이라고 가정하고 위 태그를 클릭했을 때 url은 아래와..
데이터 바인딩(Data Binding) 데이터 바인딩은 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용된다. v-bind 디렉티브 값으로 들어가는 표현식은 문자열 외에도 객체 또는 배열을 사용할 수 있다. 클래스 지정 클래스를 동적으로 토글 하기 위해 v-bind:class에 객체를 전달할 수 있다. Error 태그에 v-bind 디렉티브를 사용했다. v-bind:class 값에 {warning: isError}라는 객체 값을 담는다. 만약 isError가 true인 경우 태그에 warning이라는 클래스가 지정될 것이다. 현재는 false로 설정해놓았기 때문에 단순 Error로만 출력될 것이다. Vue.js Devtools를 사용해서 isError 값을 true와 false로 번..
computed와 watch 속성 computed {{ num }} {{ doubleNum }} computed 속성 사용 시 데이터에 대한 의존성을 가진다. 그리고 기본적으로 getter 함수를 가지고 있다. vm.doubleNum 값은 vm.num 값에 의존하게 된다. doubleNum에 대한 로직이 실행될 때 기준이 되는 값이 num인 것이다. 따라서 num 값이 변경될 때마다 doubleNum 값도 변경된다. computed 속성 대신 methods 속성을 사용하여 doubleNum 값을 불러올 수도 있다. ..., methods: { doubleNum: function() { return this.num * 2; } } ... 이는 결과 값을 불러오는 데에 있어서는 똑같다. 그러나 의존성이라는 ..
Axios 뷰에서 권고하는 Promise 기반 HTTP 통신 라이브러리이다. CDN 방식 또는 NPM 방식을 통해 사용할 수 있다. 예제 get user {{ users }} https://jsonplaceholder.typicode.com JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com JSON 데이터를 불러올 때 시험하기 좋은 사이트이다..
뷰 라우터(Vue Router) 뷰 라이브러리를 사용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. 뷰 라우터를 사용하여 뷰로 만든 페이지 간 자유로운 이동이 가능하다. 뷰 라우터 사용을 위해서는 CDN 방식과 NPM 방식으로 사용할 수 있는데, 아래 예제에서는 CDN 방식을 사용한다. 뷰 라우터 구현은 와 태그를 사용한다. 페이지 표시 태그이다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다. 페이지 이동 태그이다. 화면 코드에서는 태그로 표시된다. 클릭하면 to에 지정한 URL로 이동한다. 이때 to는 태그의 href 속성과 같은 의미인 것이다. 예제 뷰 라우터 사용을 위해 VueRouter를 생성하여 router 변수에 저장하였다. VueRouter는 페이지의 라우팅 정보로, ..
컴포넌트(Component) 조합하여 화면을 구성할 수 있는 블록을 뜻한다. 화면 영역을 각각 Header, Content, Footer, Aside, Main으로 구분한 것이다. 이를 아래와 같은 트리 형태로 나타낼 수 있다. 트리 구조로 컴포넌트를 살펴보면 컴포넌트가 어떻게 구성되어있는지 더 알아보기 쉽다. Root는 화면 전체 영역을 의미한다. 화면 전체를 Header, Content, Footer 세 개의 컴포넌트로 분할하였다. 이후 Content 컴포넌트에서도 Aside, Main 두 개의 컴포넌트로 분할한다. Content를 부모 컴포넌트 또는 상위 컴포넌트라 하고, Aside, Main을 자식 컴포넌트 또는 하위 컴포넌트라 말한다. 이는 Root와 Header, Content, Footer ..
인스턴스(Instance) Vue에서 제공하는 API와 속성으로, 뷰로 개발하기 위하여 필수적으로 생성해야 한다. {{ message }} new Vue()로 뷰 인스턴스를 생성할 때의 Vue를 생성자라고 한다. (생성자 인자에는 객체가 들어간다.) 위 예제에서는 뷰 인스턴스 옵션 속성에 el 속성과 data 속성을 사용하였다. 이 외에 template, methods, created, watch 속성 등 여러 속성들이 뷰 인스턴스 옵션 속성으로 미리 정의되어 있다. el 속성 값을 지정해주어야 태그 안 Vue의 기능과 속성들이 유효해진다. el 속성으로 뷰 인스턴스가 그려질 지점을 설정하는 것이다. 참고로 el 속성 값에 html이나 body를 넣는 경우 콘솔 창에 아래와 같은 경고가 발생하고, 제대로..
참고 : https://vuejs.org/v2/guide/ Introduction | Vue.js vuejs.org Vue.js 기초 예제 Vue.js 는 따로 설치할 필요 없이 간단하게만 실행해보려면 html에 스크립트 코드만 한 줄 추가하면 된다. 위 스크립트는 개발 버전이기 때문에 콘솔 창에 경고, 로그 등을 출력해준다. 출력 {{ message }} Vue.js를 사용하여 화면에 message를 출력하였다. Vue.js를 사용하면 데이터와 DOM이 연결되며, 반응형으로 동작하기 때문에 콘솔 창에서 message 값을 변경하면 바로 화면에 변경된 내용이 적용된다. 콘솔 창에서 app.message를 출력하면 기존 new Vue({})에서 설정한 message 값이 들어가 있다. app.message..
MVVM 패턴 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴으로, 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식이다. MVVM 패턴을 사용해 개발하면 화면의 요소들을 제어하는 코드(프런트엔드 영역)와 데이터 제어 로직(백엔드 영역)을 분리하여 코드를 직관적으로 이해하기 쉬워진다. 유지 보수 또한 비교적 편해지는 편이다. Vue.js를 예시로 들어 보자면 MVVM 구조가 아래와 같이 이루어져 있다. 만약 HTML 문서가 변경이 된다면 DOM의 구성 요소도 변경될 것이다. View에서 DOM의 구성 요소가 변경되면(예를 들어 사용자가 다른 페이지로 이동하는 버튼을 클릭하여 화면에 보이는 내용이 달..
글 삭제 구현 지금까지 만든 게시판은 보안 요소가 전혀 없는 게시판이었습니다. 그래서 글 삭제 부분도 보안 요소는 없습니다(?) 글 삭제는 DELETE 쿼리만 실행하면 되기 때문에 엄청나게 간단합니다. Controller case "/deleteOk.do": command = new DeleteCommand(); command.execute(request, response); viewPage = "deleteOk.jsp"; break; } 삭제 기능은 write나 update 같은 입력 폼이 필요하지 않으므로 deleteOk.do 만 사용합니다. DeleteCommand package com.command; import java.sql.SQLException; import javax.servlet.htt..
