티스토리

문자메일의 블로그

검색하기

블로그 홈

문자메일의 블로그

charactermail.tistory.com/m

문자메일 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

SQL 처리 과정과 I/O 1.1 - SQL 파싱과 최적화 SQL원하는 결과집합을 SQL 구문으로 구조적, 집합적으로 선언하지만 그 결과집합을 만드는 과정은 절차적일 수 밖에 없다.즉, 프로시저가 필요한데 그 프로시저를 만들어내는 DBMS 내부엔진이 바로 SQL 옵티마이저이다. 사용자 --SQL--> 옵티마이저 --실행계획--> 프로시저 SQL 최적화최적화 과정1. SQL 파싱, SQL 파서가 파싱을 진행한다.파싱트리 생성Syntax 체크 - 문법적 오류 체크Semantic 체크 - 의미상 오류 체크2. SQL 최적화옵티마이저가 그 역할을 맡는다.SQL 옵티마이저는 미리 수집한 시스템 및 오브젝트 통계 정보를 바탕으로 다양한 실행경로를 생성해서 비교한 후 가장 효율적인 하나를 선택한다.3. 로우소스 생성SQL 옵티마이저가 선택한.. 공감수 0 댓글수 0 2025. 2. 16.
컴포넌트 만드면 좋은 점 어떤걸 컴포넌트로 만들면 좋은가? 어떤걸 컴포넌트로 만들면 좋은가?1. 반복적인 html을 축약할 때2. 큰 페이지들3. 자주변경되는 것들 단점은?state 가져다쓸 때 문제생김 리액트 환경에서 동적인 UI 만드는 법 (ex: 모달창 만들기) [동적인 UI 만드는 3 step]1. html css로 미리 디자인완성2. UI의 현재 상태를 state로 저장3. 조건문으로 state에 따라 UI가 어떻게 보일지 작성 map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 [1, 2, 3].map(function () { console.log(1); }); 배열.map(콜백함수) 로 사용한다. map() 함수1. 왼쪽 array 자료만큼 내부코드 실행해준다.2. return 오른쪽.. 공감수 0 댓글수 0 2024. 10. 22.
타입스크립트 쓰는 이유 & 필수 문법 10분 정리 // 1. 간단한 변수 타입 지정// 아래 변수에는 string type만 들어올 수 있다.let 이름 :string = 'kim';// 아래는 에러 발생이름 = 123;// 2. array 타입지정// 이 변수엔 string 담긴 array만 들어올 수 있다.let 이름 :string[] = ["kim", "park"];// 아래는 에러 발생let 이름 :string[] = [123, 'park'];// 3. object 타입지정// 아래에서 name 뒤에 ? 붙이면, name이라는 속성이 들어올 수도, 안 들어올 수도 있다는 문법이다.let 이름 :{ name? : string } = { name : 'kim' }// 4. 다양한 타입이 들어올 수 있게 하려면 Union type// 아래 이름 변수는.. 공감수 0 댓글수 0 2024. 10. 22.
넥사크로 v14 관련 정보 넥사크로 문서, doc 있는 사이트 https://support.tobesoft.co.kr/Support/?menu=home TOBESOFT Technical Support:투비소프트 기술지원 사이트TOBESOFT Technical Support, 투비소프트 기술지원 사이트support.tobesoft.co.kr 넥사크로 혼자서 공부하기 http://demo.nexacro.com/nexacroSelfStudy/nexacroSelfStudy_Beginner/root_ko.html nexacro platform Self Study For Beginner ( naxacro platform을 처음 써 보는 사람들을 위한 nexacro platform 혼자서 demo.nexacro.com 넥사크로v14 오.. 공감수 0 댓글수 0 2024. 10. 19.
bizactor 정리 Data Table - Business Rule 서비스에 입력할 값을 담는 데이터 테이블 기존에 햇갈렸던 사항1. DA에도 Input Data 테이블이 있다.이 테이블도 Name이 있으며, DB SELECT 입력값을 Input, 결과값을 Output Data Table에 넣어주는 것 확인하였음. 2. BR에도 Input, Output 테이블이 있다.용도 :1. 다른 서비스의 Input값으로 넣을 값을 미리 테이블 정의하고 할당해 놓는다.2. 해당 BR들에 정의된 input/output table 값들 중, 호출할 서비스에 input/output 설정할 테이블 명들을 연결하는 작업이 필요하다. (Assigned DataTable에 할당한다.) # DA의 테이블 속성명과, BR의 테이블 속성명이 같아야 .. 공감수 0 댓글수 0 2024. 10. 19.
스프링 배치 Ch 01. Batch 프로그램 현업에서의 배치 프로그램 배치 프로그램?정해진 시간에 일괄적으로 작업을 처리한다. (대체로 대용량 데이터) 배치 프로그램은 보이지 않지만 늘 존재한다.서비스를 운영하는 관점에서 주기적으로 작업을 처리하려면 배치 프로그램을 사용해야 한다. 배치 프로그램이 필요한 상황1. 필요한 데이터를 모아서 처리해야 할 때 (ex : 월별 거래 명세서 생성 )2. 일부러 지연시켜 처리할 때 ( ex : 주문한 상품을 바로 배송 처리 하지 않고, 일정 시간 뒤 처리 )3. 자원을 효율적으로 활용하기 위해 ( ex : 트래픽이 적은 시간 대에 서버 리소스를 활용 ) 데이터 처리 배치 프로그램 살펴보기1. 각 서비스의 데이터를 데이터 웨어하우스에 저장할 때 ( ETL - Extract-Tr.. 공감수 0 댓글수 0 2024. 10. 9.
7-1. 메모장 프로젝트 소개 및 설계 공감수 0 댓글수 0 2024. 10. 8.
3-5. 스터디파이 강의 컴포넌트 만들기에서 사용한 css 리스트, 컴포넌트로 나눠본 것 CourseCard.css ul,li { list-style-type: none; margin: 0;}.CourseCard { max-width: 300px;}.cover { width: 100%;}.cover img { width: 100%; border-radius: 4px;}.tags { display: flex; font-size: 0.8rem; font-weight: 600; line-height: 1.47; padding: 3px 0 5px 0;}.tags .tag:not(:last-child):after { content: '·';}.name { margin: 0; padding: 6px 0;}.price { font-size: 0.9rem; font-weight.. 공감수 0 댓글수 0 2024. 10. 5.
섹션 6. 확장기능 사용자 정의 리포지토리 구현스프링 데이터 JPA 리포지토리는 인터페이스만 정의하고 구현체는 스프링이 자동 생성스프링 데이터 JPA가 제공하는 인터페이스를 직접 구현하면 구현해야 하는 기능이 너무 많다.다양한 이유로 인터페이스의 메서드를 직접 구현하고 싶다면?JPA 직접 사용 ('EntityManager')스프링 JDBC Template 사용MyBatis 사용데이터베이스 커넥션 직접 사용 등등..Querydsl 사용 커스텀 인터페이스 생성 커스텀 인터페이스 구현체 생성 기존 리포지토리에 커스텀 인터페이스 상속아래처럼 쓰면 spring data jpa가 구현체 알아서 찾아서 묶어준다고 한다. (단 구현 클래스 네이밍 규칙 등 맞춰야 함) 번외로 JpaRepository 같은 것 상속 없이 리포지토리 따로.. 공감수 0 댓글수 0 2024. 9. 30.
실전! 스프링 데이터 JPA - 5. 쿼리 메소드 기능 순수 JPA 페이징과 정렬 JPA에서 페이징을 어떻게 할 것인가? 다음 조건으로 페이징과 정렬을 사용하는 예제 코드를 보자 검색 조건 : 나이가 10살정렬 조건 : 이름으로 내림차순페이징 조건 : 첫 번째 페이지, 페이지당 보여줄 데이터는 3건 아래는 순수 JPA 페이징으로 정렬 MemberJpaRepository.javapublic List findByPage(int age, int offset, int limit){ return em.createQuery("select m from Member m where m.age = :age order by m.username desc") .setParameter("age", age) .setFirstResult(of.. 공감수 0 댓글수 0 2024. 9. 29.
실전! 스프링 데이터 JPA / 섹션 4. 공통 인터페이스 기능 강의 진행 방식 : 먼저 JPA에서 이렇게 동작하는데 Spring Data JPA를 쓰면 이렇게 편하게 사용할 수 있어요. 라는 식으로 진행될 예정. Spirng Data JPA는 결국 JPA 기술을 활용해서 편하게 사용하는게 핵심.그래서 강의 방식은 JPA를 이렇게 편하게 바꿔주는게 스프링 Data JPA가 제공하는 역할이란 것을 파악하는 과정 공통 인터페이스 기능순수 JPA 기반 리포지토리 만들기스프링 데이터 JPA 공통 인터페이스 소개스프링 데이터 JPA 공통 인터페이스 활용 순수 JPA 기반 리포지토리 만들기순수한 JPA 기반 리포지토리 만들기기본 CRUD저장변경 -> 변경감지 사용삭제전체 조회단건 조회카운트참고 : JPA에서 수정은 변경감지 기능을 사용하면 된다.트랜잭션 안에서 엔티티를 조회한 .. 공감수 0 댓글수 0 2024. 9. 27.
실전! 스프링 데이터 JPA / 3. 예제 도메인 모델 Spring Data JPA의 힘.- 인터페이스만 만들어주면 구현체를 Spring Data JPA가 다 만들어서 넣어준다. MemberRepository 코드랑 MemberJpaRepository 코드는 거의 동일하다.Spring Data JPA가 MemberJpaRepository_.java 에서 처럼 개발자가 직접 짜던 거를 Data JPA가 만들어서 넣어주는 것이라고 생각하면 된다. @ManyToOne(fetch = FetchType.LAZY) 어노테이션 부분에 외래키를 가질 엔티티의 'id' 값을 @JoinColumn 어노테이션으로 적어준다. ex : @JoinColumn(name = "team_id")Foreign Key가 없는 엔티티에(@OneToMany 부분) mappedBy.. 공감수 0 댓글수 0 2024. 9. 26.
최범균 Spring Data JPA 기초 Spring Data JPA 시작하기 https://www.youtube.com/watch?v=1Q3Qtd5HZy4 사용법 spring-boot-starter-data-jpa 의존스프링 부트 설정엔티티 단위로 Repository 인터페이스를 상속 받은 인터페이스 생성또는 그 하위 인터페이스지정한 규칙에 맞게 메서드 추가save(), findById(), delete() 등 규칙에 맞게 메서드 정의https://charactermail.tistory.com/441필요한 곳에 해당 인터페이스 타입을 주입해서 사용 Spring Data JPA 02 리포지터리 메서드 작성 규칙 식별자로 엔티티 조회 메서드findByIdT findById(ID id)없으면 nullOptional findById(ID id)없.. 공감수 0 댓글수 0 2024. 9. 25.
도커 컨테이너 VMWare, vbox나 같은 가상환경을 쓰지 않고, 도커 컨테이너를 사용하는 장점은? => 자바, 파이썬, 라이브러리, 버전 등등등 서로 다른 개발 환경의 프로젝트를 다른 컴퓨터에서 실행환경을 맞춰서 실행시키는데 어려움이 큰데 이것을 해결함. 일단 VMWare, VBox는 하이퍼바이저+OS를 설치하기 때문에 단점은 무겁다.도커 엔진이 들어가면 컨테이너를 만들어서 도커는 리눅스 탑제된 컨트롤 그룹(CGroups)을 사용해서 도커는 리눅스에서 가상화를 이뤄준다.윈도우에서는 하이퍼바이저를 사용한다. 도커는 리눅스 네임스페이스(Namespace)도 사용한다. 개발환경 모놀리식 구조의 단점1. 한 번 컴파일 할 때 굉장히 많은 시간이 걸린다. (작은 업데이트를 해도 다 빌드하고, 다 테스트 하고 해야 한다.).. 공감수 0 댓글수 0 2024. 9. 25.
2-2. mixin mixin이란?아래처럼 일반적인 vue 컴포넌트에서 export default 부분을 별도 자바스크립트로 만드는 것이라고 보면 된다 많이 중요하다고 생각하는 함수를 mixin 파일 javascript 파일로 만들어 놓으면, 중복적으로 component method를 만들 필요가 없어진다. 아래와 같은 사용법으로 하나로 병합해준다. (created는 created 끼리, mounted는 mounted)그리고 mixin 자바스크립트 먼저 실행된다. ---------------전역으로 설정하기 index.jsimport axios from 'axios'export default { methods: { async $get(url) { return await axios.get(url).. 공감수 0 댓글수 0 2024. 9. 21.
2-1. Custom Directive v-model, v-for, v-if, v-show 이런게 vue에서 지정해놓은 default directive 이다.그런데 custom directive라고 하는 것은, Vue에서 default로 만들어 놓은 디렉티브 외에도 개발자가 추가적인 디렉티브를 만들어서 선언해서 사용할 수 있게끔 제공을 해주는 것이다. 기본 사용법1. data를 아무것도 binding 안 해도 된다.아래에서 v-focus2. 하나의 값만 binding 해도 된다.아래에서 v-color3. key-value로 여러개 넣어도 된다.아래에서 v-demotemplate> div> div> label for="email" class="form-label">이메일주소label> input type="email.. 공감수 0 댓글수 0 2024. 9. 20.
1-13. provide와 inject 일반적으로 하위 컴포넌트에 값 전달할 때 아래처럼 전달한다.다만 이럴 경우 최하위 컴포넌트에서만 필요한 값인 경우, 그 모든 상위 컴포넌트에서 값을 전달만 해주는 부분을 추가해줘야 하기 때문에 복잡해진다.특정 하위 컴포넌트에서만 값이 필요한 경우 provide와 inject를 사용할 수 있다.(depth가 아무리 깊어도!!) https://vuejs.org/guide/components/provide-inject.html#prop-drilling 아래는 provide/inject 사용 예시 공감수 0 댓글수 0 2024. 9. 20.
DOM, BOM DOM 자바스크립트 - 웹문서를 제어하기 위해 개발된 언어 HTML 파일을 자바스크립트로 어떻게 제어할 수 있는가? 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다. 브라우저로 HTML 파일을 열게 되면 렌더링 엔진이 HTML로 작성된 문서를 한 줄 한 줄 해석한다. 해석이 끝나면 HTML 파일을 객체화 하여 자바스크립트로 접근할 수 있게 한다.-> 문서를 객체화 했다고 해서, 문서 객체 모델 (Document Object Model, DOM) 이라 한다. Dom은 Tree 구조를 가지고 있다. 브라우저 객체 모델 (BOM, Browser Object Model) 웹 브라우저를 객체화 한 것을 말한다.객체화 한 이유는, 브라우저를 스크립트 언어로 제어하기 위해서이다. https://w.. 공감수 0 댓글수 0 2024. 9. 13.
1-11. slot slot이란?특정 부분만 html 요소를 재정의해서 사용할 수 있게끔 해주는 방식을 slot 이라고 한다. SlotView.vuetemplate> div> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" > Show Modal button> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal2" > Show Modal button> slot-modal modalId="userModal"> temp.. 공감수 0 댓글수 0 2024. 9. 13.
1-10. 재사용 컴포넌트, 심플 그리드 ListViewtemplate> div class="container"> button class="btn btn-primary me-1" @click="doSearch">조회button> button class="btn btn-danger" @click="doDelete">삭제button> 제품코드 제품명 제품가격 {{ drink.drinkId }} {{ drink.drinkName }} {{ drink.price }} --> simple-grid :headers="he.. 공감수 0 댓글수 0 2024. 9. 13.
1-9. 재사용 컴포넌트, 부모<->자식 간 값 전달 template> h3>{{ title }}h3>template>script>export default { components: {}, props: { title: { type: String, default: '페이지 제목' } }, props에 정의되어 있는 데이터 변수들은 부모로부터 전달된 값들이다. 즉, props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다. ,custom event, emit, refs - 부모와 자식 컴포넌트간 값 전달을 위해 필요한 기능들 예제ParentView.vuetemplate> div> button @click="changeValue">변경button> child-com v-bind:str=".. 공감수 0 댓글수 0 2024. 9. 12.
1-8. 라이프사이클 훅 template> div> div>{{ sampleData }}div> div> label for="">태어난 도시는?label> select name="" id=""> option value="" :key="city.code" v-for="city in cities"> {{ city.title }} option> select> div> div>template>script>export default { components: {}, data() { return { sampleData: '', cities: [], fnInterval: null } }, props: {}, s.. 공감수 0 댓글수 0 2024. 9. 12.
1-7. computed와 watch computed computed는 data에 있는 key를 가지고, computed 안에 함수로 만들면 data 밑에 함수이름으로 있는 거랑 똑같은 효과를 가진다. watchcomputed와 유사한데, data에 선언되어 있는 key를 직접 감시하고 싶을 때 watch 사용하는 2가지 주요 이유특정 데이터 변수가 값이 변경이 발생했을 때, 특정 코드를 작성을 해서 실행을 해야 할 경우값의 변경사항을 계속 히스토리로 저장하고 싶을 때 공감수 0 댓글수 0 2024. 9. 10.
1-6. 렌더링 조건 (v-if, v-show) v-if, v-else-if, v-else div v-if="userRole === 'G'"> button>조회button> div> div v-else-if="userRole === 'M'"> button>조회button> button>생성button> div> div v-else> button>조회button> button>생성button> button>삭제button> div> 조회 조회 생성 조회 생성 삭제 조회 생성 삭제 조회 생성 .. 공감수 0 댓글수 0 2024. 9. 10.
1-5. 이벤트 클릭 이벤트button @click="increaseCounter">Add 1button> change 이벤트 select name="" id="" v-on:change="changeCity($event)" v-model="selectedCity" > ===도시선택=== {{ city.title }} {{ dong.dongTitle }} dong.cityCode === this.selectedCity )" > {{ dong.dongTitle }} keyup (ent.. 공감수 0 댓글수 0 2024. 9. 10.
1-4. 데이터 바인딩 문자열 단방향 바인딩 HTML String 단방향 바인딩 데이터 양방향 바인딩 (input, select)v-model input SELECT CHECKBOX RADIO v-bind: HTML 태그 attribute 바인딩 v-for : 반복문 사용 class 속성 바인딩div v-bind:class="{ 'text-red': hasError, active: isActive }"> style 바인딩 공감수 0 댓글수 0 2024. 9. 9.
1-3. 라우터 1. src/main.js - 라우터 사용 등록 2. src/router/index.js - 라우팅 설정 등록 3. App.vue - 라우팅 페이지 설정 4. 해당 라우팅 url 전달시 보여줄 페이지 컴포넌트 생성 공감수 0 댓글수 0 2024. 9. 9.
1-2. 설치, 프로젝트 생성 및 구조 이해하기 설치, 프로젝트 생성 및 구조 이해하기 Vue가 설치되어 있는지 확인vue --version Vue/Vue CLI 설치npm install -g vue // -g 옵션은 폴더 내에서만이 아니라, 컴퓨터 전체에서 사용하다록 글로벌로 설치하겠다는 옵션임npm install -g @vue/cli // Vue 버전 업데이트npm update -g @vue/cli Vue 개발 편의성 올려주는 추천 확장 프로그램 프로젝트 정보package.json main.js - npm run serve시 제일 먼저 실행되는 파일위 main.js 파일에서 createApp(App).mount('#app')은 App.vue 파일의 html을 index.html 에서 id가 app인 위치 아래 마운팅하겠다는 의미이다... 공감수 0 댓글수 0 2024. 9. 9.
16. Admin 리스트 페이지 구현 16-1. useSWR을 이용하여 API 연동 useSWR : 데이터 가져오기를 위한 React Hooks아래는 useSWR 공식 문서https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.app 설치 명령어 : npm install --save swr 캐시에 저장된 데이터가 실제 서버에서 변경이 생긴 경.. 공감수 0 댓글수 0 2024. 8. 27.
15. Admin 설계 15-2. 컴포넌트 구조 설계설문 조사 관리 페이지 설문 조사 빌더 페이지 15-3. 프로젝트 세팅 프로젝트 생성 명령 : npx create-react-app survey-pie-admin npm install --save-dev eslint-plugin-simple-import-sort 15-4. Ant Design 설치 15-5. 라우터 적용리액트 라우터 설치 명령 : npm install --save react-router-dom https://charactermail.tistory.com/758 http://example.com/detail 전통적인 방식의 웹 서비스에서 라우팅은, 서버에 요" data-og-host="charactermail.tistory.com" data-og-sou.. 공감수 0 댓글수 0 2024. 8. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.