본문 바로가기

전체 글

Backend 2020. 4. 29. Springboot (4) 웹 애플리케이션 - 2 1. 화면 구성 애플리케이션 화면 구성 시 JSP, Vue와 같은 템플릿 엔진을 사용한다. 템플릿 엔진이란 템플릿 양식과 데이터로 HTML을 구성하는 소프트웨어이다. 서버 템플릿 엔진(JSP, Freemaker)과 클라이언트 템플릿 엔진(React, Vue)이 있다. 서버 템플릿 엔진: 서버에서 처리 후 완성된 HTML을 전달하는 방식 클라이언트 템플릿 엔진: 서버에서는 Json/Xml 형태의 데이터만 전달하고 클라이언트에서 HTML로 조립하는 방식 A. Mustache Mustache라는 템플릿 엔진 사용하여 화면을 구현한다. 사용하는 언어에 따라 서버/클라이언트 템플릿 엔진으로 활용 가능하다. Handlebars/Mustache 플러그인 설치 후 build.gradle에 아래 의존성을 추가해준다. ...
Backend 2020. 4. 29. Springboot (3) 웹 애플리케이션 - 1 1. JPA 자바 표준 ORM(Object Relational Mapping: 객체 관계 매핑). 관계형 데이터베이스와 객체지향 프로그래밍 언어간의 패러다임 불일치를 해소해준다. 실제 동작하는 SQL은 JPA가 작성해주기 때문에 개발자는 객체지향적으로 데이터베이스를 다룰 수 있다. 2. Spring Data JPA JPA는 인터페이스이며, Hibernate와 같은 별도의 구현체가 필요하다. Spring에서는 이 구현체를 한 번 더 감싼 Spring Data JPA를 사용한다(JPA ← Hibernate ← SpringDataJPA). 이렇게 구성하게 되면 구현체, 데이터베이스와의 결합도가 낮아지게 되어 추후 구현체 교체와 저장소 교체가 수월해진다. 3. Spring 웹 계층 Web Layer: 외부 요청..
Frontend 2020. 4. 25. Vue.js (8) 뷰 프로젝트 1. 싱글 파일 컴포넌트 뷰 프로젝트는 싱글 파일 컴포넌트 체계를 사용한다. 싱글 파일 컴포넌트는 .vue 파일들로 프로젝트 구조를 구성하는 방식이며, [.vue = 컴포넌트 1개]이다. [.vue 기본 구조] {{ message }} 2. 뷰 CLI(Command Line Interface) 싱글 파일 컴포넌트를 사용하기 위해서는 Webpack이나 Browserify와 같은 도구(모듈 번들러)가 필요하며, 이는 뷰 CLI를 통해 간단하게 구성할 수 있다. 커맨드 라인에 다음 명령어를 입력하여 뷰 CLI 도구를 설치하자. (npm 명령은 node.js가 설치되어 있어야 한다.) > npm install vue-cli -global 아래 명령을 통해 뷰 CLI가 동작하는지 확인할 수 있다. > vue Us..
Frontend 2020. 4. 24. Vue.js (7) 뷰 템플릿 1. 뷰 템플릿 뷰 템플릿은 뷰 인스턴스에서 정의한 로직을 HTML과 연결하여 최종 HTML로 변환해주는 속성이다. 뷰 템플릿을 적용하는 방법은 다음 두 가지가 있다. - 뷰 인스턴스의 template 속성을 활용하는 방법(ES5) - 싱글 파일 컴포넌트 체계의 태그(ES6) 2. 뷰 템플릿의 주요 요소 A. 데이터 바인딩 HTML 화면 요소와 뷰 인스턴스의 데이터를 연결하는 것. {{}} 형태를 사용한다. {{}} 안에 자바 스크립트 표현식을 사용할 수 있다. 복잡한 로직처리는 불가하며, 연산이나 메소드호출과 같은 말 그대로 표현식만 사용 가능하다. 또한 표현식임에도 너무 복잡할 경우 computed 속성 사용을 권장한다. [사용 불가] {{ var a = 10; }} {{ if (true) { ret..
Frontend 2020. 4. 23. Vue.js (6) HTTP 통신 1. HTTP 통신 HTTP 통신을 통해 사용자 상호작용에 따라 화면의 변화를 줄 수 있다. 대표적으로 jQuery의 ajax가 있다. 2. Vue에서의 HTTP 통신 HTTP 통신 도구로 뷰 리소스와 액시오스가 있으며, 액시오스를 주로 사용한다. A. 액시오스 액시오스는 Promise 객체 기반의 API를 지원한다. Promise 객체는 비동기 방식으로 로직을 수행하는 자바스크립트 객체이다. 액시오스는 response data가 객체 형태로 리턴되어 별도의 parsing 처리가 필요 없다. [액시오스의 API 형식] API Description axios.get('...url...') .then() .catch(); get 요청을 실행한다. 정상 수신 시 then()을 실행하고, 오류 발생 시 catc..
Frontend 2020. 4. 21. Vue.js (5) 라우터 1. 라우터 개념 var routes = [ ... ] → 라우팅 정보 객체 var router = new VueRouter( ... ) → 라우터 객체 var app = new Vue( ... ) → 뷰 인스턴스 Vue( ... ).$mount() → $mount() API 2. 여러 컴포넌트로 화면 구성하기 A. 네스티드 라우터 상위 컴포넌트가 하위 컴포넌트를 포함하는 방식 최상위 ---라우터---> User컴포넌트 ---라우터---> Posts/Profile path, component, children 활용 B. 네임드 뷰 같은 레벨에서 여러 개의 컴포넌트를 동시에 표시하는 방식 최상위 ---라우터(header)----> Header ┣----라우터(default)----> Body ┗----라우..
Backend 2020. 4. 18. Springboot (2) 단위 테스트 1. 스프링 부트 스프링 부트는 내장 WAS를 사용한다. 이는 별도의 WAS를 사용 할 경우 발생하는 관리 및 작업 부담, 각 WAS 별 세부 설정 등의 업무 부담을 줄일 수 있다. 대규모 트래픽을 수용하는 실제 프로덕션 환경에서도 사용된다고 하니 성능 관련 이슈는 없다고 볼 수 있다. 2. 단위 테스트 사전에 작성 된 테스트 코드를 통해 기능을 검증한다. 불필요한 디버깅 코드 작성, WAS 실행/중지 행위를 최소화 하여 보다 효율적인 테스트/개발을 수행한다. 또한 잘 작성 된 테스트 코드는 변경 영향도를 파악하는 훌륭한 도구이자 문서가 된다. 3. xUnit 도구 - Java: Junit - DB: DBUnit - C++: CppUnit - .net: NUnit xUnit은 각종 단위 테스트 도구를 의..
Backend 2020. 4. 17. Springboot (1) 개발환경 설정 1. IntelliJ 설치 및 환경 구성 - Toolbox App 설치 - IntelliJ IDEA Community 설치 → 2019.2.4 버전으로 설치(책과 동일하게) → Maximum heap size 설정(2048MB) *IntelliJ의 작업 환경은 워크스페이스 단위가 아닌 프로젝트 단위이다. 한 화면에 하나의 프로젝트만 오픈 가능하다. 2. 프로젝트 생성 - Create New Project → Gradle > Java(1.8) → ArtifactId ~= 프로젝트 이름 3. Gradle 설정 buildscript { ext { springBootVersion = '2.1.7.RELEASE' } repositories { mavenCentral() jcenter() } dependencies..

티스토리툴바