계란 블로그

Query DSL Ex) 여러 개의 검색 필드(모델 ID, 모델명, 등)를 입력 받아서 해당 조건을 만족하는 엔티티를 불러오려고 한다. 그런데 검색의 특성상 콤보 박스에서 선택(null) 상태로 두고 검색 버튼을 누르는 경우가 있다. 그런 경우에는 해당 조건에 상관없이 모든 데이터를 보여주려고 한다. 예를 들어, 검색 필드 중에서 "모델 유형" 필드가 있을 때, 여기를 비운 상태로 검색을 누르면 모든 모델 유형에 대한 데이터를 가져오려고한다. @Generated("com.querydsl.codegen.EntitySerializer") public class QModel extends EntityPathBase { private static final long serialVersionUID = 161222..

Thread의 isAlive() 개발자가 커스텀스레드 생성하면 반드시 run()을 오버라이드해야한다. run() 메서드 안에서 실행 중이면 true를 반환한다. run() 메서드가 끝나거나 실행 전이면 false를 반환한다. Thread API 전체적인 흐름 회사에서 스레드를 컨트롤할 수 있는 API를 만들어서 이 내용을 되짚어보려고 한다. Listener 엔티티 카프카와 관련된 데이터(server IP 주소, port 번호, topic name, groupId 등등)가 들어가는 객체이다. 카프카 서버로부터 데이터를 받는 서버이면서 엔티티이기 때문에 Listener라는 이름이 붙은 걸로 예상 Kafka -> Listner server -> Executor server 이렇게 데이터를 전송한다. Liste..

초기 설정 웹팩을 쓰기 위해서는 먼저 node를 깔아야한다. node를 설치하면 npm이 같이 따라온다. npm은 다른 사람이 작성해둔 javascript 코드를 끌어다 쓸 수 있다. 결국 Vue도 남이 만들어둔 소스라고 볼 수 있다. node를 제대로 설치하면 다음과 같이 버전 확인이 가능하다. node -v npm -v npm init 터미널로 들어와서 npm init 입력하고 나면 다음과 같이 버전 및 여러 가지가 나오는데 package name만 다음과 같이 입력하고 나머지는 모두 넘긴다. 입력하고나면 다음과 같이 json 파일이 하나 생성된다. 내가 쓸 수 있는 다른 사람의 소스 코드가 정리된 파일이다. 정리하는 이유: 각 소스코드마다 버전이 있다. 내가 어떤 버전을 쓰고 있는지 버전관리하고 몇..

컴포넌트의 필요성 같은 코드의 중복을 없애고 간편하고 효율적으로 개발하기 위해 컴포넌트가 필요하다. 컴포넌트의 활용은 여러 번 사용하는 것을 전제로 한다. 지난 포스팅에서 살펴본 것과 다르게 여러 개의 끝말잇기를 한 페이지에 여러 개 진행하려면? Ex) 컴포넌트를 적용하지 않은 끝말잇기 게임 복사해서 여러 개의 submit 메서드를 만든다. {{word}} 입력! {{result}} {{word1}} 입력! {{result1}} {{word2}} 입력! {{result2}} Note) 실행 결과 아래와 같이 세 개의 끝말잇기를 만들었으나 중복되는 부분이 너무 많다. 이런 비효율성을 해결할 수 있는 것이 "컴포넌트"이다. 최소 단위를 재사용한다. 컴포넌트 적용하기 component() 안에는 파스칼, 케밥..

순수 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 방식을 따라 작성해서 스프링이 제공하..