본문 바로가기
반응형

분류 전체보기158

Ajax, axios, fetch 의 차이점 및 장단점 그리고 사용법 Ajax, axios, fetch 웹 개발을 하면 필수적으로 클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하게 되는데 Ajax, axios, fetch는 모두 웹 개발에서 네트워크 요청을 처리하는 방법이다. Ajax (Asynchronous JavaScript and XML) Ajax는 웹 페이지에서 비동기적으로 서버와 데이터를 교환하는 기술을 의미합니다. XMLHttpRequest 객체를 사용하여 데이터를 요청하고 응답을 처리합니다. 비동기적으로 데이터를 받아와서 현재 페이지를 리로드하지 않고도 데이터를 업데이트할 수 있습니다. 장점 브라우저 내장 기술로 지원되며, 비교적 오래된 브라우저에서도 사용 가능 Error, Success, Complete의 상태를 통해 실행 흐름 조절.. 2023. 8. 1.
Vue.js - 단축 문법 v-bind 디렉티브 더보기 v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 chest 속성과 동기화된 상태로 유지되고 , 바인딩된 값이 null 또는 undefined이면 엘리먼트의 속성이 제거된 상태로 렌더링 문법 단축 문법 v-on 디렉티브 DOM 이벤트를 수신한다. click의 인자는 수신할 이벤트 이름 , v-on은 단축형으로 @를 대신 사용할 수 있다 ... ... 2023. 7. 31.
vue3-openlayers 설치 및 사용법 vue3-openlayers Vue3는 사용자 인터페이스 구축에 사용되는 JavaScript 프레임워크인 반면 OpenLayers는 웹에서 대화형 지도를 표시하기 위한 강력한 오픈 소스 라이브러리입니다. OpenLayers와 함께 Vue3를 사용할 때 맵 구성 요소를 생성하고 Vue 애플리케이션에 통합할 수 있습니다. 설치 npm install ol ol-ext ol-contextmenu # install the peerDependencies npm install vue3-openlayers # install this library Usage import { createApp } from "vue"; import App from "./App.vue"; import OpenLayersMap from "vu.. 2023. 7. 31.
vue-3 Prettier 설정 및 자동완성 정렬 Prettier란? Prettier는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 도와주는 도구 중 하나입니다. 이를 위해서는 Prettier 설정 파일인 .prettierrc 파일을 작성하여 사용할 수 있습니다. 1. vscode Marketplace 에서 Prettier 라이브러리 다운 2. prettierrc.json 파일 생성 3. prettierrc.json 파일 설정 가장 많이 사용되는 Prettier 설정은 다음과 같습니다. { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracket.. 2023. 7. 26.
Pinia 소개 피니아는 컴포지션 API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작 했고, Vue2 와 Vue3 모두 작동, API는 설치와 SSR을 제외하고 모두 동일 피니아 장점 피니아는 Vue의 스토어 라이브러리로 컴포넌트/페이지 간에 상태를 공유할 수 있다. Devtools 지원하며, actions, mutations를 추적하는 타임라인, 스토어는 사용되는 컴포넌트에 표시됨. 시간 추적 및 더 쉬운 디버깅 핫 모듈 교체 (HMR) 페이지를 새로고침하지 않고 스토어 수정하고, 개발하는 동안 기존 상태 유지 플러그인으로 피니아 기능 확장 TypeScript 지원 SSR 지원 왜 피니아인가? 피니아(pinia)는 스페인어 _pineapple_의 영어 발음과 가장 유사한 _piña_입니다. .. 2023. 5. 23.
JPA - 엔티티 패밍 Entity 매핑 객체와 테이블 매핑 : @Entity, @Table 필드와 컬럼 매핑 : @Column 기본키 매핑 : @Id 연관관계 매핑 : @ManyToOne, @JoinColumn @Entity @Entity가 붙은 클래스는 JPA가 관리, 엔티티라 한다. JPA를 사용해서 테이블과 매핑할 클래스는 @Entity 필수 기본 생성자 필수(파라미터가 없는 public 또는 protected 생성자) final 클래스, enum, interface, inner 클래스 사용X 저장할 필드에 final 사용 X 속성 name : JPA에서 사용할 엔티티 이름을 지정 클래스 이름을 그대로 사용, 같은 클래스 이름이 없으면 가급적 기본값을 사용 @Table name : 매핑할 테이블 이름, 기본값 엔티티 이.. 2023. 4. 28.
JPA - 영속성 컨텍스트 영속성 컨텍스트 엔티티를 영구 저장하는 환경 EntityManager.persist(entity) (DB 저장 x 영속성 컨텍스트에 저장 O) 엔티티 매니저를 통해 영속성 컨텍스트에 접근 엔티티의 생명주기 비영속 (new/transient) 영속성 컨텍스트와 전혀 관계가 없는 새로운 상태 영속(managed) 영속성 컨텍스트에 관리 되는 상태 준영속(detached) 영속성 컨텍스트에 저장되었다가 분리된 상태 삭제(removed), 삭제된 상태 비영속 Member member = new Member(); member.setId("member1"); member.setUsername("유저1"); 객체만 생성한 상태 JPA 랑 전혀 관계 없는 상태 이것을 비영속 상태라고 한다. 영속 Member membe.. 2023. 4. 26.
JPA - 기초 목차 1. 프로젝트 생성 2. 애플리케이션 개발 1. 프로젝트 생성 h2 데이터 베이스 설치 https://www.h2database.com/html/main.html H2 Database Engine H2 Database Engine Welcome to H2, the Java SQL database. The main features of H2 are: Very fast, open source, JDBC API Embedded and server modes; in-memory databases Browser based Console application Small footprint: around 2.5 MB jar file size Supp www.h2database.com 사이트 들어가서 아래 그림 압.. 2023. 4. 26.
JPA 란 ? JPA - java persistence APl - 자바 진영의 ORM 기술 표준 ORM - Object-relational mapping(객체 관계 매핑) - 객체는 객체대로 설계 - 관계형 데이터베이스는 관계형 데이터베이스대로 설계 - ORM 프레임워크가 중간에서 매핑 - 대중적인 언어에는 대부분 ORM 기술이 존재 애플리케이션과 JDBC 사이에서 동작 저장 조회 JPA 를 왜 사용해야 하는가? - sql 중심적인 개발에서 객체 중심으로 개발 - 생산성 - 유지보수 - 패러다임의 불일치 해결 - 성능 - 데이터 접근 추상화와 벤더 독립성 - 표준 지연 로딩과 즉시 로딩 - 지연로딩 : 객체가 실제 사용될 때 로딩 - 즉시 로딩 : JOIN SQL 로 한번에 연관된 객체까지 미리 조회 출저 : http.. 2023. 4. 26.
Git-flow 전략 Git Repository 구성 - Upstream Remote Repository(이하 Upstream Repository) : 개발자들이 공유하는 저장소로 최신 소스코드가 저장되어 있는 원격 저장소 - Origin Remote Repository(이하 Origin Repository) : Upstream Repository를 Fork한 원격 개인 저장소 - Local Repository : 내 컴퓨터에 저장되어 있는 개인 저장소 1. Local Repository에서 작업을 완료한 후 작업 브랜치을 Origin Repository에 push 2. Github에서 Origin Repository에 push한 브랜치를 Upstream Repository로 merge하는 Pull Request를 생성하고 .. 2023. 3. 22.
LIST

티스토리툴바