날아라쩡글이의 블로그입니다.

APP.vue template html컨텐츠에 해당한다. div로 감싸는 컨텐츠 하나만 인정한다. 두가지는 인정하지 않는다. view에 해당하는 html코드를 작성하는 영역이다. template의 태그 내부에는 모든 html코드를 감싸는 태그가 하나 존재해야한다. {{}} -->수염처럼 생겨서 불리는 mustache라이브러리를 사용할 수 있다. 표현식을 사용해서 modal혹은 data,props컴포넌트 객체의 데이터를 표현한다. script export default{} 다른곳에서 import를 사용해서 얻을 수 있다. name: '컴포넌트의 이름' components: { childcomponent1, childcomponent2 } 여러개를 작성할 수 있다. 이컴포넌트가 사용하는 다른 컴포넌트를 지정..

카카오 개발자 사이트에 가면 자바스크립트로 로그인 API가 작성되어있다. 앱 Key를 발급받았다는 전제하에 게시물을 작성할 예정이다. 현재 카카오개발자에 올라온 자바스크립트로 코드리뷰를 작성할 예정이다. //a태그로 버튼을 누르면 시행할 함수를 명시했다. //a태그 안에 이미지를 넣어놓아서 그 버튼이 클릭되게 만든다. kakaologin방식은 post로 controller에 전달할 수 있다 kakaologin동의 목적은 닉네임과 여러정보를 카카오에게 사져올 때 설정하는 것으로 플랫폼마다 다를 수 있다. 사용자가 창을 누르고 success:function시 엑세스 토큰, 리플레쉬토큰의 정보. 코튼2개와 완료시간 scope가 뜬다. scope의 경우 동의 항목에서 동의한 게 어떤 것인지 뜬다. 이 정보를 서..

우리는 이제까지 라이브러리와 프레임워크를 상용하여, 프론트 개발방법을 배웠다. MVC와 MVVM개발방법은 서버와 프론트가 나눠졌다는 점이다. 이전에는 백엔드는 Body부에서 책정보를 받아서 Data의 추가, 변경, 삭제등의 서비스를 제공했고, 주요동작의 경우 요청방식을 연결하여 필요정보를 /{값}/ 과 요청파라미터로 받고, JSON의 형태로 받게 되었다. 이는 서버에서 모든 것을 알아야하는 부분으로 작용했고, 단일책임의 원칙을 따르기 위하여 프론트쪽에서도 책임을 맞기로 진행했다. 그래서 처음으로 나온것이 MVC프레임워크인 앵귤러 JS를 구글에서 만들고, 양방향데이터로 사용을 많이 하게 되었다. 그러나 단점이 속도. 너무느리다는 것이다. 두번째로 일반 현재 우리가 사용하고 있는 앵귤러가 등장했다 많은 사람..

자바스크립트는 브라우져사의 엔진으로 ECMA스크립트의 언어를 수집하며 현재는 ECMA의 6버젼이 브라우져를 지원하던중 6버젼이 나오게 되었다. 5~6으로 변화를 도입하던중 리엑터 부터 사용하게 되었다. 2016년이 표준안으로 매년나오고 있다. let과 const(Constance의 약어)의 단어가 생성이 되었다. var를 사용하던 변수의 명을 let으로 변경하여 사용하였고, const라는 상수를 이용하게 되었다. var와 let의 차이점 let 변수란.. let은 변수 선언자로 선언된 변수는 변수 끌어올리기가 적용되지 않는다. let은 변수 선언자로 선언한 변수는 그 변수가 선언된 블록내에서만 사용할 수 있다. 그래서 요즘에는 let으로 선언한다고 이야기를 한다. 이제는 앞으로 변수는 let으로 사용할 ..

spring boot 에서 spring starter project를 선택한다. new에서 war로 선택한다. 적절한 package의 명을 작성한다. 총 5가지의 의존성을 선택한다 (타임리프트 작성시 타임리프트로 검색후 추가 ) spring web lombok spring DevTools myBatis Framwork Oracle Driver 나중에 추가가 가능하니까 finish web app가생성이 되면 serveltInitializer가 추가가된다. war로 packaging를 하면 Tomcat의 web.xml의 역할로 작동한다. webApp에 WEB-INF폴더를 생성한다. resources 폴더를 생성한다. 이제부터 여기에 Css와 JS파일, 외부 라이브러리 이미지를 폴더를 만들고 위치한다. jsp..

이것과 별개로 협업도 준비중이다. 현재 UI에 대한 회의는 완료되었고, 파이널은 조장보다는 조원으로써 활동을 하고 싶어서 조원으로 참여 중이다. 그래도 이렇게 내가 해당하는 부분에 대한 table을 제시하였고, 의견이 많이 반영되었다. 조장도 좋고 조원도 좋은 것 같다 hta 시네마! 완성도가 많은 작품을 만들것이다.

application property에 정의 먼저하기 mapper config의 설정 mapper파일 vo만들기 date에 모두 @JSONFormat 어노테이션 달아주기 JSON으로 보낼때 원래날짜로 입력되기 위해서 BookMapper만들기 Service만들기 web패키지 만들기 Controller @RestController json의 형태로 응답 주고 받는다. @slff4j logger를 확인할 수 있다. @CrossOrigin(Orgin="*") 정보를 가져가는 것에 대한 설정. 전체 경로 설정 @RequestMapping으로 설정(경로는 /api/으로) form insertForm dataFormat Criteria ->page, opt, value 값을 설정한다. model 응답으로 데이터를 내..

요청핸들러는 Book 응답데이터는 JSON 자바스크립트 jSON으로 응답을 받는다. Map map = new HashMap(); map.put("no",1); 이렇게 하나씩값을 주거나 List maps = new ArrayList(); map map1 = new Hashmap(); map map2 = new Hashmap(); List.add(map1); List.add(map2); 이렇게 기본자료형의 값과 문자열은 보여주면 된다. BookList컴포넌트 자식컴포넌트(List vue)를 사용한다. 자식컴포넌트에게 Books에 저장된 데이터를 전달한다. 자식컴포넌트에게는 BookList라는 props를 선언해서 전달받은 값을 저장해야한다. 이 컴포넌트가 사용하는 데이터는 data메소드가 반환하는 객체이다...

spring에서 @RestController로 JSON을 받았고 AJAX통신으로 vue.js에서 받을 예정이다. vue.js에서 npm -save install axios 설치 -->통신담당객체 package에 JSON에 axios가 추가된걸 확인할 수 있다. 서버와 통신하는 vue객체 만들기 : Service라고 되어있다. service폴더 생성하기 BookService 파일 생성 axios를 import한다 import axios from "axios"; axios를 초기화하기 그리고 반복적인 코딩은 싫으니까 http 상수 객체에 담아둔다. const http = axios.create({ //초기화하고 담는다. baseURL: 'http://localhost:8081/api', //기본적으로 받아올..

vue.js 현재 file들의 정보 이렇게 구성되어있다. 서로의 연관성 Root - App.vue 자식 - Header/content/footer content의 자식 router-view 경로설정 (view) home BookList 자식 searchform/list/pagnation ->3가지가 합쳐졌다. BookDetail router-view :동적으로 교체해라 import { createRouter, createWebHistory } from 'vue-router' //변수들은 vue-router에서 상속받는다. import Home from '../views/Home.vue'; import BookList from '../views/BookList.vue'; import BookDetail f..

vue은 main.js에서 app과 router을 연결하고, 데이터를 뿌리는 것은 spring Boot에서 Rest방식으로 가져올 수 있다. SpringBoot는 운영환경에서도 사용가능한 프로토타입으로 프로젝트를 만들 수 있는 것이다. 실행가능한 파일을 빨리 만드는 것이다. 설정을 최소화하고 의존성라이브러리를 적는 것이 아닌 spring boot에서 UI인 체크박스로 적용한다. spring은 설정파일이 존재하지 않고, 항상 정해진 이름이 있다. 임의로 정해지고, 이름을 알려줄 필요가 없다. COC라는 방식으로 개발을 한다. 설정 보단 관례 spring Application은 빠르게 움직인다. 먼저 lombok.jar를 다운받는다. Location에서 전자정부프레임워크에서 eclipse를 선택하고 inst..

Vue.js 개발환경 구축하기 node.js 설치 vue-cli설치 vue.js프로젝트 생성을 지원하는 프로그램 -npm install -g@vue/cli를 command창에 작성한다. view의 구조, 파일, 필요로하는 라이브러리의 셋팅을 완료하고 프로젝트를 생성한다. visul studio code설치 bootstrap 5 Quick anippets bracret pair colorizer2 EsLink vetur visul Studio Intellicode Dependency Analyics 확장프로그램을 6개를 깔아준다. Vue.js 프로젝트 생성하기 vue create 명령어로 프로젝트를 생성하기 vue create 프로젝트명 vue설정을 커맨드 창에서 고를 수 있다. vue GUI환경에서 프로..

사용자와 상호작용하는 웹페이지를 개발하기 위한 프로그레시브 프레임워크이다. 자바스크립트 프로그레시브 프레임 워크이다. 웹의 장점과 모바일의 장치를 모두 수용할 수 있는 개발장치이다. web의 장점 특별한 설치과정없이 webApplication개발을 하고 브라우져에서 이용가능하다. 접근성이 좋다. App의 장점 웹보다는 뛰어난 작용을 한다. 사진업로드, 촬영, 사용자의 경험을 제공한다. 향상된 사용자의 경험을 제공한다. 모두 가지고 있는 web App.Application을 개발할 수 있는 프레임워크이다. 사용자와 상호작용을 하는 프론트앤드 애플리케이션 개발을 위한 progressive Framwork이다. progressiveFramwork는 웹의 장점과 네이티브 앱의 장점을 모두 수용하는 애플리케이션을..

우리는 @Aspect을 만들면 된다. pom.xml에서 라이브러리를 추가한다. org.aspectj aspectjweaver 1.9.7 org.aspectj aspectjrt 1.9.7 관점지향 프로그래밍을 지원하는 라이브러리 의존성을 추가한다. aspectjrt와 aspectRutime을 다운받아준다. sample package로 aop파일을 만들어준다. package를 만들고 context-root에 등록해준다. namespace에서 aop를 체크하고 라는 위빙을 이용해서 proxy객체로 변경해주는 작업을 선언하고 다음 bean class로 aop를 선언해주면 된다. aop를 선언할 때 Aspect는 what, where, when을 설정해주면 된다. loggin모든 실행전후로 실행하고 싶다면 일단 ..

관점지향 프로그래밍 객체-객체-메소드 -값전달 객체지향 프로그래밍은 메소드로 대화하고 하나의 설계도로 여러개를 만들고 다양한 속성이 존재한다. 관점지향프로그래밍은 소스코드를 크게 2가지로 바라본다. 코드를 핵심기능과 공통기능으로 바라보는 시각이 존재한다. 핵심기능 - 학사관리, 교직원 관리에 특별하게 존재하는 기능 공통기능 - 로그출력, 인증/권한체크, 트랜잭션기능 반복적인 업무를 수행하는 것은 공통기능으로, 특별한 기능은 핵심기능으로 정의한다. 모든 class는 공통기능과 핵심기능으로 조합이 되어 있다. 업무로직메소드에서 핵심기능은 다르지만, 공통기능은 비슷하다 공통기능은 중복이 엄청많고, 핵심과 공통기능이 섞여서 구분이 어렵다. 공통과 핵심기능이 섞여있으면 공통기능변경을 하거나 추가를 할 때 반복적인..

트랜잭션이란 은행업무를 볼때 계좌이체를 진행하면 상대방계좌 증액, 내 계좌 감액이 이뤄지는데, 중간에 에러가 났을 때 이 두가지의 업무 진행이 한꺼면에 All or Not으로 진행이 되거나 취소가 되는 것을 의미한다. Service에서 엄청난 여러 작업들이 존재하며 DB Access가 이뤄진다. inser, update, delete의 작업이 이뤄지고, 업무로직 처리하거나 클라이언트의 요청을 처리할 때 All or Nothing 경우 외에는 없어야한다는 원칙이다. 전부 완벽하게 저장하거나 하나도 적용되지 않는것이다. DB Access의 작업이 바로 반영되지 않고, 작업이 완료되어야 commit이 이뤄지고 중간에 error가 발생하게 되면 rollback이 이뤄지는것이다. spring에서는 선언적 트랜잭션..

요청파라미터의 경우 폼입력값을 담는다. 그러나 @LoginUser는 요청파라미터가 새로 만든게 아니고, 원래 있던것을 사용할 것이기 때문에 어노테이션@LoginUser로 생성한다. argument로 만드는 것은 힘들지만, 한번 만들어두면 편하다는 장점이 존재한다. 인터셉터 만들기 인터셉터란 컨트롤러의 요청 핸들러 메소드 실행 전처리/후처리를 구현하는 객체이다. interceptor을 담을 패키지를 설정한다. 클래스를 생성한다. LoginCheckInterceptor으로 설정한다. HandlerInterCeptor를 상속받는다. 그리고 메소드 재정의를 진행하는데, default값으로 되어있기 때문에 강제적으로 나오지 않는다 preHandler, postHandler , afterHandler의 메소드를 재..

지금까지 코딩의 모습을 보면 @GetMapping("/add.do") public ResponseDto add,int bookNo) { User user = (User)(SessionUtils.getAttribute("LOGIN_USER")); if(user == null) { throw new CartErrorException("장바구니 아이템 추가는 로그인 후 가능합니다"); } } 이렇게 User의 객체를 SessionUtils에서 뽑아서 확인하는 방법을 이용했다. 그러나 이런 반복적인 업무를 이제는 spring의 어노테이션으로 등록하여, SessionUtils의 User을 생성하게 만들고 객체의 획득을 이용해서 사용하고, 제공받길 원한다. 그것을 AgumentResolve를 이용하여 획득하는 것이..

지금까지의 우리는 예외를 try-catch문으로 감싸서 처리를 하였다. 그러나 그렇게 되면 messge는 출력만 하게 되고 시스템에서의 예외처리는 페이지로 보여줄 수 없다는 단점이 존재한다. 그래서 우리는 예외처리하는 방법을 2가지를 배울 예정이다. 1. web.xml처리방법 2.ControllerAdvice로 ExceptionController를 감싸서 한번에 처리하는 부분을 만들기 (패키지) web.xml 처리방법 에러페이지 설정하기 HTTP 응답코드 에러페이지 경로 및 파일 명 500 /WEB-INF/jsp/error/serverError.jsp HTTP의 응답코드 404, 500,으로 응답코드를 확인하여 원하는 페이지를 확인할 수 있게하는 것이다. 예외클래스의 패키지를 포함한 전체 경로 에러페이지..

먼저 파일 업로드를 지원하는 라이브러리 의존성을 추가한다. maven에서 commons을 검색한다. fileupload의 의존성을 다운받고, pom.xml에 추가한다. commons-fileupload commons-fileupload 1.4 DispatcherServlet에서 Bean_name은 마음대로 설정해도 되지만 sping MVC가 사용할 수 있게 이름을 설정해두는 것이 몇가지가 존재한다. spring에서는 해당이름이 맞지 않으면 다른걸 bean으로 등록하기 때문에 마음대로 변경해서는 안된다. id를 꼭 잘 지정해야한다. 1. 파일업로드 multipartResolver 2. 국제화처리 localResolver 3.HandlerAdapter 4.HandlerMapping context-web에 첨..