전체 글18 [Vue.js] 부모-자식간의 데이터 전달 (Props) - Props : 부모가 가지고 있는 데이터를 자식컴포넌트에게 전달해줄 때 사용하는 Properties- v-bind : 부모에게서 전달하고자 하는 값 Given...1) 부모 컴포넌트 : User2) 자식 컴포넌트 : UserDetail, UserEdit - User.vue↓(부모) User 컴포넌트 이름: {{ name }} 이름 변경 // UserDetail 컴포넌트에 name 속성을 전달 //:NAME : props의 변수명, "name":어떤 값을 넣어줄거냐~ .. 2024. 6. 17. [vue3] Lifecycle -> onMounted() 에 대해 알아보자 ! 안녕하세요. 윾진입니다. 너무 덥네요.생명에 지장이 올 것 같은 더위입니다.그런 의미로 오늘은 생명주기와 그 중 onMounted 훅에 대해 살펴봅시다.몇번 뵀으니 이제 반모로 갑니다. 댓글도 반모로 쓰세요. (반말모드 라는 뜻 ㅋㅋ)Lifecycle Hooks각 vue 컴포넌트 인스턴스는 생성될 때 초기화 단계를 거친다.생명주기 순서를 간략하게 설명하자면 , 다음과 같다.vue2 와 vu3 의 차이는 위와 같다.reactive의 주요 특징객체 기반 반응형 상태 관리: reactive는 주로 객체 상태를 반응형으로 만들 때 사용한다.자동 추적 및 업데이트: reactive로 만든 상태는 Vue의 반응형 시스템에 의해 자동으로 추적되고, 관련 DOM이나 컴포넌트가 자동으로 업데이트된다.직관적: reacti.. 2024. 6. 16. [Spring Security] #1 기본 구조 "보안"이라는 용어는 분야를 막론하고 쉽게 접해보았을 것이다.그렇다면 우리가 보안을 신경 쓰는 이유가 무엇일까?바로 우리의 소중한 자산 혹은 정보를 지키기 위해서다. 마찬가지로 웹 상에서도 애플리케이션 자체와 우리의 소중한 자산과 정보를 지킬 필요가 있는데, 그러기 위해서 웹 보안을 직접 구현하기에는 말도 안 되게 복잡한 로직을 직접 작성해야 하는 어려움이 있다. 하지만 우리는 Spring Security라는 프레임워크의 도움으로, 강력하고 편리하게 웹 애플리케이션을 보호할 수 있다. 웹 애플리케이션을 보호하는 데에는 여러 가지 방법이 있겠지만, 여기에서는 앞서 언급한 Spring Security 프레임워크를 이용하고자 한다. 그중에서도 이번에는 Spring Security의 전반적인 구조와 기본 흐.. 2024. 6. 15. [vue3] Quasar CLI (with vite) 사용해보기 안녕하세요,날먹하고 싶은 윾진입니다.FE... 날먹할 순 없을지, 이리저리 살펴보다 Quasar를 발견했습니다.사실 나온지는 꽤 됐고, 유명하지만 나만 모름 ㅋㅋ암튼 Quasar 얼마나 쌈@뽕한지 한번 알아봅시다. QuasarQuasar 공식 문서vue.js 기반 MIT 라이선스 오프 소스 프레임워크.다양한 유형의 반응형 웹 , 앱을 빠르게 만들 수 있음.SPAs (싱글 페이지 앱)SSR (서버 측 렌더링 앱) (+ 선택적 PWA 클라이언트 takeover)PWAs (프로그레시브 웹 앱)BEX (브라우저 확장)모바일 앱 (Android, iOS, …) Cordova 나 Capacitor를 통해다중 플랫폼 데스크톱앱 (Electron 사용)이 모든걸 Quasar에서 지원한다고?완전 럭키퀘이사잖아 ? 🍀?.. 2024. 6. 13. [DevOps] AWS-ubuntu에서 도커로 젠킨스 실행하기 1. swap 메모리 설정# dd 명령을 통해 swap 메모리 생성/ of : swapfile 경로/ bs : Block 사이즈/ count : Block 개수sudo dd if=/dev/zero of=/swapfile bs=128M count=16# swapfile 읽기 쓰기 권한 업데이트sudo chmod 600 /swapfile# 리눅스 swap 영역 설정sudo mkswap /swapfile# 스왑 메모리를 활성화sudo swapon /swapfile# 절차가 성공했는지 확인sudo swapon -s# 파일 열기sudo vi /etc/fstab# 파일 가장 마지막에 다음을 추가하고 :wq로 저장하고 종료/swapfile swap swap defaults 0 0# swap 메모리 확인freet2.m.. 2024. 6. 12. [Spring Batch] Spring Scheduler 배치 작업하기 - 스케줄러 설정@EnableScheduling@EnableBatchProcessing(dataSourceRef = "batchDataSource", transactionManagerRef = "batchTransactionManager")@Import({BatchAutoConfiguration.class})@SpringBootApplicationpublic class SpringbatchApplication { public static void main(String[] args) { SpringApplication.run(SpringbatchApplication.class, args); }}@EnableScheduling를 붙여 Spring Scheduler를 활성화한다. - BatchControl.. 2024. 6. 10. [Vue.js] 컴포넌트 선언 방법 - 2가지 방법 컴포넌트를 등록하고 사용하기 - 2가지 방법1. 하나의 파일에서 컴포넌트 선언하는 방법2. 전역에서 컴포넌트를 사용할 수 있도록 선언해주는 방법 방법 1: 하나의 파일에서 컴포넌트를 선언하는 방법Given..) App.vue파일에서 Home.vue 파일 사용하고자 함. * App.vue ↓ {{ title }} {{ count }} 추가 * Home.vue ↓(App.vue파일과 동일 depth에서 생성) {{ homeTitle }} After...) App.vue ↓ {{ title }} {{ count }} 추가 => 코드 설명:import : 외부에 만들어져 있는 Vue파일을 안에 가져올 때HomeComponent: 파일명과 동일하.. 2024. 6. 10. [WebApp] PWA , Expo 활용 방법 안녕하세요 윾진입니다. 웹을 만들었는데 앱으로도 바로 만들기가 가능하다 ?이거 완전 럭키웹앱이잖아?🍀1. 웹앱(Web App)웹앱(Web Application) : 브라우저에서 실행되는 앱임.서버에서 데이터를 가져와서 화면에 보여주고, 사용자가 입력한 데이터를 서버로 보내는 방식임.보통 인터넷만 있으면 PC나 모바일 어디서나 접근 가능함.=> 웹앱 특접근성 좋음: 인터넷만 되면 브라우저에서 바로 사용 가능.배포 쉬움: URL만 알려주면 누구나 접속 가능, 스토어에 등록 필요 없음.유지보수 편함: 서버에서 업데이트하면 모든 사용자에게 바로 반영됨.=> 웹앱 단점 ㅠㅠ네이티브 기능 부족: 카메라, GPS, 푸시 알림 같은 기능 사용 어려움.오프라인 사용 어려움: 기본적으로 인터넷 연결이 필요함.2. PWA.. 2024. 6. 10. [Spring Batch] DB에서 데이터 읽고 DB에 쓰기 - DB 설정create database batch;show databases;use batch;show tables;-- 주문 테이블 생성CREATE TABLE `batch`.`orders` ( `id` INT NOT NULL AUTO_INCREMENT, `order_item` VARCHAR(45) NULL, `price` INT NULL, `order_date` DATE NULL, .. 2024. 6. 9. [Spring Batch] Spring Batch 구조 및 테스트 - Spring Batch 구조JobRepository : 배치가 수행될 때 수행되는 메타 데이터를 관리하고 시작 시간, 종료 시간, Job의 상태 등 배치 수행 관련 데이터들이 저장된다.JobLauncher : Job을 실행시키는 역할Job : 하나의 배치 작업을 의미한다.Step : 세부 작업 내용을 처리한다. 하나의 Job에 처리를 위한 1개 이상의 Step이 단계별로 실행될 수 있다.작업의 주 영역은 Job과 Step, Step 하위의 Reader, Processor, Writer에서 개발을 한다. - Spring Batch 설정build.gradle에 의존성 추가dependencies {implementation 'org.springframework.boot:spring-boot-starter-.. 2024. 6. 8. [Vue.js] 1. Vue.js란? 1. 대제목 : Vue.js란?1 - 1) MVVM 모델에서의 Vue1 - 2) 기존 웹 개발 방식(HTML, JavaScript)1 - 3) Reactivity 구현 1 - 1) Vue는 무엇인가? (Vue의 구동 원리에 대하여...)Vue : MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리MVVM 아키텍처Vue.js는 MVVM(Model-View-ViewModel) 아키텍처를 따름MVVM이란...↓Model: 애플리케이션의 데이터 상태를 나타냅니다.View: 사용자 인터페이스(UI)를 나타냅니다.ViewModel: View와 Model 사이의 중간 계층으로, 데이터 바인딩 및 DOM 업데이트를 관리합니다.그림으로 이해해보자 :3[그림 1] View : 브라우저에서 사용자에게 비춰지는 .. 2024. 6. 3. [JPA] JPA에서 On Delete Cascade 제약조건 사용하기 spring.jpa.hibernate.ddl-auto=[create|update|create-drop|validate|none] 위와 같이 Hibernate에서 제공해주는 DDL 자동 생성 기능을 통해, 개발 단계에서 테이블을 간편하게 생성할 수 있다.(비록 운영 단계에서는 validate 혹은 웬만하면 none 옵션을 사용하지만...) 하지만 부모테이블을 참조하는 자식 테이블이 있을 경우, 부모 테이블의 레코드가 삭제될 시에 해당 레코드를 참조하는 자식 테이블의 모든 레코드를 연쇄적으로 삭제하고 싶을 경우가 생길 수 있다. 예를 들어 SuccessCase라는 성공사례 게시판을 나타내는 부모 테이블이 있고, 이 게시글의 PK를 참조하는 Comment라는 댓글 테이블이 있다고 해보자.게시글이 사라지는 순간.. 2024. 6. 3. [UnitTest] JUnit과 Mockito 기반 Spring 단위테스트 윾진입니다.단위 테스트.. 막막하지만 해야하니까요.Spring 기반 웹 서비스에서의 테스트 작성법 같이 공부해요. 단위 테스트단위 테스트 : 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트하나의 모듈 : 각 계층에서 하나의 기능 또는 메소드한 줄 요약 : 하나의 기능이 올바르게 동작하는지 독립적으로 테스트 하는 것 단위 테스트 ? 왜 하는건데 .. 그거..일반적으로 테스트 코드를 작성한다고 하면 거의 단위 테스트를 의미통합 테스트는 실제 여러 컴포넌트들 간의 상호작용을 테스트통합 테스트는 구성 컴포넌트들이 많아질수록 통합 테스트를 위한 시간이 커짐단위 테스트는 독립적으로 테스트 하므로 해당 단위를 유지보수 , 리팩토링 해도 빠르게 문제 파악 가능 단위 테스트 한계단위 테스트는.. 2024. 5. 31. [JPA] 최신순으로 목록 조회 Controller/** 최신 순으로 상담 목록 조회 * * @return ResponseEntity> 상담 목록 * @author */ @GetMapping("/") public ResponseEntity> getAllCounseling() { List counselingList = counselingService.getAllCounseling(); return new ResponseEntity(counselingList, HttpStatus.OK); } Service/** 최신 순으로 상담 목록 조회 * * @return List 상담 목록 * @author */ @Override @Transactional(readOnly = true) public List getAllCou.. 2024. 5. 30. [Spring Security] 로그인한 사용자의 아이디와 권한(Role) 가져오기 로그인한 사용자 아이디String id = SecurityContextHolder.getContext().getAuthentication().getName(); 로그인한 사용자의 권한 구하기Authentication authentication = SecurityContextHolder.getContext().getAuthentication();Collection authorities = authentication.getAuthorities();Iterator iter = authorities.iterator();GrantedAuthority auth = iter.next();String role = auth.getAuthority(); 위 방식으로 로그인한 사용자가 쓴 글인지 일치여부를 확인할 수 있.. 2024. 5. 20. [JPA] 양방향 매핑 JpaMainpackage hellojpa;import jakarta.persistence.EntityManager;import jakarta.persistence.EntityManagerFactory;import jakarta.persistence.EntityTransaction;import jakarta.persistence.Persistence;import java.util.List;public class JpaMain { public static void main(String[] args) { EntityManagerFactory emf = Persistence.createEntityManagerFactory("hello"); EntityManager em = emf.. 2024. 5. 13. Code block test public class Test { public static void main (String[] args) { System.out.println("Welcome to KnowGet!"); }} 2024. 5. 13. 아자아자 아자잣 2024. 5. 13. 이전 1 다음
