계란 블로그

순수 html로 Vue 만들어보자 웹팩, 바벨(Babel)이 없어도 html 만으로도 가능하다. Vue 환경 설정 링크에서 node를 다운 받는다. https://nodejs.org/ko/download VS code를 다운받고 작업하려는 폴더에서 VS code 터미널을 연다. npm install -g@vue/cli 입력 다운 완료 입력해서 로컬에서 실행해준다. npm run local 로컬에서 실행이 되면 다음과 같이 뜬다. 웹 페이지가 뜨면 실행 완료! vue 라이브러리를 사용하기 위한 source를 넣는다. 이 소스를 넣어주면 좋아요 페이지의 내용을 뷰의 컴포넌트 또는 템플릿으로 전환한다. html 좋아요 el 에다가 통제할 대상의 속성 이름인 root를 넣어준다. Vue가 root 영역을 통제할..

Vue.js 2 에서 Vue.js 3로 바꾸기 CDN 라이브러리가 달라진다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Note) 실행 결과 라이브러리만 바꿨는데 다음과 같이 오류가 난다. Vue는 더이상 생성자가 아니라는 오류가 난다. 기존 Vue 2 Vue 3 createApp() 안에 기존 옵션들을 집어 넣는다. mount()를 이용해서 view의 ele를 넣어준다. methods{}는 동일하게 작성하지만 data{}를 넣었던 부분이 다음과 같이 바뀐다. Ex) 변경하기 new Vue => createApp() ele 는 맨 뒷부분으로 빠진다. data 가 메서드로 바뀐다. 반환값을 넣어준다. 적용하고난 코드 Vue.createApp(..

Vue 코드의 기본 구조 Model을 심어준다. section을 "calc-app"이라는 이름으로 범위를 설정한다. 위 사진의 왼쪽은 new Vue()는 Vue 2에 해당한다. 중괄호 안에 객체(Options API)를 담아서 전달한다. 이러한 형식이 약속된 방식이므로 인터페이스와도 같다. Ex) Vue 2를 이용한 계산기 프로그래밍 지난 포스팅에서 Vue 없이 페이지를 만든것과 다르게 이번에는 뷰를 적용하려고 한다. HTML 페이지는 동일하며 JavaScript 코드만 바뀐다. Vue 사이트에서 라이브러리를 가져온다. https://v2.vuejs.org/v2/guide/ html 페이지 만들기 기존 자바스크립트 파일의 내용을 아래와 같이 모두 지운다. 그리고 기존에 있던 new Vue({ el: "#..

OkHttp 구현 방법 OkUtils 클래스 안에 개발자가 직접 정의한 GET 메서드를 활용해서 사용자가 굳이 url을 입력하지 않아도 개발자가 원하는 때에 수신 서버에 대한 특정 Http 요청이 실행되게끔 구현 가능하다. Ex) OkHttp POST 구현 OkHttpUtil Util 클래스의 post() 안에서 HTTP Request 를 보내고 상대방 서버에서 보낸 Response를 바로 받을 수 있다. 서버에서 WorkflowId를 @PathVariable로 받을 수 있도록 URL에 넣어서 보내준다. MediaType은 json 형태로 주고 받으니까 body에 다음과 같이 세팅한다. 아래 코드는 URL이 {POST 요청하는 서버 IP 주소} : port 번호/{workflowId} 인 경우에 POST..

1.1 DAO DAO(Data Access Object): DB를 사용해서 데이터를 조회하거나 조작하는 기능만 하도록 만드는 오브젝트을 말한다. 1.1.1 User public class User { String id; String name; String password; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setP..

Spring이란 무엇인가? Java Enterprise application 개발에 사용되는 프레임워크를 말한다. 애플리케이션의 바탕이 되는 틀과 공통 프로그래밍 모델, API를 제공한다. 애플리케이션의 바탕이 되는 틀(Spring Container): 스프링 컨테이너 또는 ApplicationContext 라고 불리는 스프링 런타임 엔진을 제공한다. 독립적 동작할 수도 있고 보통 웹 모듈에서 동작하는 서비스나 서블릿으로 등록해서 사용한다. 공통 프로그래밍 모델: IoC/DI, 서비스 추상화, AOP 1) 스프링은 유연하고 확장성있는 코드를 만들 수 있도록 도와주는 객체지향 설계 원칙, 디자인 패턴의 핵심원리를 담고 있는 IoC, DI를 근간으로 한다. IoC, DI 방식을 따라 작성해서 스프링이 제공하..

에러 해결 제네릭 클래스에 의존성 주입이 가능한가? 오류: @Autowired - NullpointerException EaiEventListener (@Service) 에서 new MyThread 호출한다. MyThread (extends Thread)에서 ListenerService를 멤버 변수로 선언한다. 그런데 MyThread 클래스에 Service 생성자 주입이 되지 않는다. MyThread를 스프링 컨테이너에 등록해도 해결되지 않는다. (@Component, @NoArgsConstructor을 이용해도 오류가 난다.) @Autowired, @RequiredArgsConstroctor 둘다 적용이 되지 않는다. 원인 제네릭 클래스 MyThread는 생성자 주입이 불가능하므로 Nullpointer..

OkHttp Square 사에서 개발한 라이브러리 모바일 앱에서 사용하기에 최적화되어 있다. 단일 스레드 모델을 사용해서 비동기식으로 요청을 처리하는 게 특징이다. 이를 통해 네트워크 대역폭을 최대한 활용할 수 있고 성능이 좋다. RestTemplate Spring Framework에서 지원하는 라이브러리이다. Java EE 애플리케이션 개발에 적합하다. OkHttp vs RestTemplate 공통점 둘다 HTTP 클라이언트 라이브러리이다. RestFul API를 호출하는데 사용된다. 애플리케이션에서 HTTP 요청을 처리하고 응답을 분석하는데 사용 가능 차이점 성능 측면에서 OkHttp가 더 빠르고 최신 기술을 적극 활용한다. 개발자는 Spring Framework와의 연동성이 높기 때문에 RestTe..

의도 프록시 패턴은 다른 객체에 대한 대체 또는 자리 표시자를 제공할 수 있는 구조 디자인 패턴이다. 프록시 패턴은 어떤 객체에 대한 접근을 제어하기 위한 용도로 대리인이나 대변인에 해당하는 객체를 제공하는 패턴이다. 원래 객체에 대한 접근을 제어하므로 당신의 요청이 원래 객체에 전달되기 전 / 후에 무언가를 수행할 수 있도록 한다. 문제 상황 객체에 대한 접근을 제한하는 이유는 무엇일까? 방대한 양의 시스템 자원을 소비하는 거대한 자원이 있다고 가정하자. 이 객체는 필요할 때가 있기는 하지만 항상 필요한 것은 아니다. 필요할 때만 객체를 만들어서 초기화를 구현 가능하다. 그러면 객체의 모든 클라이언트들은 어떤 지연된 초기화 코드를 실행해야하는데 이는 많은 코드 중복을 초래한다. 이 코드를 객체의 클래스..

퍼사드 패턴(Facade pattern, Singletone Abstract Factory, 싱글톤 추상 팩토리) GOF에 따르면 퍼사드 패턴은 "하위 시스템의 인터페이스 세트에 일관된 인터페이스를 제공하는 것" 하위 시스템의 복잡도를 감추는 동시에 그 전체 기능을 사용하기 쉬운 인터페이스로 제공한다. 실생활에서 퍼사드 패턴의 예시 세탁기 찌든 때, 에벌 빨래 두 가지 모드가 있다. 두 모드에 따라 세탁 방법이 다른다. 세제 투입량, 물 온도, 탈수시간 등등 위와 같은 잡다한 정보를 인터페이스 내부에 두고 두 가지 세탁 모드만 제공한다. 사용자는 복잡한 생각 없이 모드만 선택하면된다. 퍼사드 패턴을 쓰는 경우 레거시 백 엔드 시스템에 단일 접근 창구를 제공한다. 클래스에 드라이버 같은 API를 만든다. ..