2023/04 8

[04월 4주차] 프론트엔드 디버깅 방법, PostgreSQL 필드 변경 시 MySQL 과 문법상 차이점

ToDoList VS code 리팩토링 방법 알아보기 Note 미리 저장해둔 데이터를 for문으로 콤보 박스에 보여주기 데이터베이스에는 어떤 모델의 상태 코드가 있다. ex) 생성(COD_0000, "CREATED")과 같은 형태로 데이터가 저장되어 있는데 관리자 서버에서 데이터 가져오는 API를 만들어두고 필요할 때마다 Http 요청을 보내서 정보를 가져온다. SearchForm (자식 컴포넌트) 뷰 안에 있는 컴포넌트 emit: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달한다. 컴포넌트가 발생시킬 수 있는 이벤트를 명시적으로 선언해서 부모 컴포넌트에서 사용 가능한 이벤트를 결정한다. List (부모 컴포넌트) 앞에서 자식 컴포넌트(SearchForm)에서 만든 이벤트 searchPretreatme..

[04월 3주차] Vue.js 3 과 Spring

Note Vuex 란? Vuex: Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리이다. Vue 개발에서 상태를 관리해주는 기능을 제공한다. 상태 관리 패턴이자 라이브러리이다. 상태 관리: 애플리케이션의 데이터를 중앙에서 관리하고 컴포넌트 간에 공유할 수 있도록하는 것을 말한다. Vue의 공식 툴이며 ES2015 문법을 기준으로 한다. Vuex가 없다면 컴포넌트 간의 데이터(상태)를 주고 받기 위해 부모는 자식에서 props를 통해 전달하고 자식은 부모에게 Emit event 방식을 사용해서 처리해야한다. 데이터를 Store를 통해 관리하고 프로젝트에 존재하는 모든 컴포넌트들이 이 store를 사용한다. Vuex의 구성 요소 State(데이터 객체, 상태): 애플리케이션 전역에서 공유되는 데이터 ..

[04월 2주차] JPA, Vue.js 3 기본 명령어

에러 해결 오류: 페이징 에러 원인: 메서드 실행 순서 오류 해결: 실행 순서를 바꾼다. cf) BeanUtils.copyProperties(A, B): 값이 같은 필드에 대해서만 A를 B에 복사한다. 문제 코드 페이징 인스턴스를 만들고 조건에 맞는 데이터가 몇 개인지 카운트한다. 결과값을 page에 세팅한 다음 model 정보를 paging 인스턴스에 카피해준다. 그런데, 이렇게 하고나서 검색 조회를 하면 페이지 개수가 totalPage 개수로 설정이 되서 조회하는 데이터를 보여줄 페이지가 2개인 경우에도 페이지가 (전체 목록를 보여줄 수 있는) 4까지 조회된다. (3, 4를 누르면 데이터가 없다고 나오기는 한다. ) 문제점: paging 인스턴스와 model 인스턴스 간에 searchedModelCo..

Chapter 04. 반응 속도 체크 게임

반응 속도 체크와 webpack watch 자바스크립트가 아닌 무언가가 추가될 때마다 config 파일의 rules에 loader를 추가한다. 그러면 웹팩이 알아서 자바스크립트로 바꿔준다. ex) .vue로 끝나는 파일은 자바스크립트가 아니지만 vue-loader가 자바스크립트 파일로 바꿔준다. 따라서 한 번에 자바스크립트 파일로 합칠 수 있다. 앞으로도 css, 이미지, html 같은 파일도 마찬가지이다. 그 때도 각각 맞는 로더를 사용하면 하나의 자바스크립트 파일로 합칠 수 있다는 것이 웹팩의 장점이다. entry, module, plugins, output 은 꼭 알아두기 Ex) 반응 속도 체크 게임 비동기 작업(set timeout?)과 뷰를 같이 쓰는 연습하려고 한다. 다음과 같이 새로운 폴더에..

Chapter 02. 기본 문법

QueryDSL vs JPQL Ex) member1 찾기 JPQL: Stiring 형태로 쿼리를 직접 작성하고 파라미터를 세팅한다. (setParameter()) QueryDSL: QMember라는 클래스가 있는데 이는 Member를 엔티티로 등록했기 때문에 자동으로 생성된 Q 클래스이다. QueryFactory 구문에서 FROM 절에서 테이블처럼 QMember 인스턴스를 쓸 수 있다. 파라미터를 바인딩 처리한다. @Test public void startJPQL() { String qlString = "SELECT m FROM Member m " + "WHERE m.username = :username"; Member findMember = em.createQuery(qlString, Member.cl..

Chapter 01. QueryDsl 프로젝트 생성 및 환경 설정

프로젝트 설정 dependency: Lombok, JPA, H2, starter 프로젝트 설정: 빌드 실행 배포 => 빌드 도구 => Gradle => 둘다 IntelliJ로 설정한다. 이렇게 해야 자바로 바로 실행할 수 있어서 속도가 빠르다. builde.gradle QueryDSL 사용하기 위해 다음과 같이 추가한다. gradle => clean gradle => compileQuerydsl 위 내용은 터미널로 다음과 같이 입력하는 것과 같다. ./gradlew clean compileQuerydsl 메이븐의 경우는 다음과 같이 clean 한 다음(target 폴더를 삭제), compile를 실행한다. 실행하고 나면 target 폴더가 생성되면서 Q클래스가 새롭게 생성된다. plugins { id '..

[04월 1주차] 페이징(Paging), QueryDSL, LocalDate와 String 변환 방법

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

[03월 5주차] Thread API 전체적인 흐름 파악하기, 고정 소수점과 부동 소수점

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