console.log("연록")

파라미터 바인딩 이름 기준 파라미터 파라미터를 이름으로 구분하는 방법 앞에 ' : ' 사용 String usernameParam = "User1"; TypedQuery query = em.createQuery("select m from Mmeber m where m.username = :username", Member.class); query.setParameter("username", usernameParam); List resultList = query.getResultList(); ':username' 이라는 이름 기준 파라미터를 정의하고 query.setParameter()에서 username이라는 이름으로 파라미터를 바인딩 위치 기준 파라미터 ' ? ' 다음에 위치 값을 주면 됨 위치 값은 1부..

JPQL이란? JPQL(Java Persistence Query Language)의 특징 엔티티 객체를 조회하는 객체지향 쿼리 → 테이블이 아니라 엔티티 객체를 대상으로 퀄 SQL을 추상화해서 특정 데이터베이스에 의존하지 않음 결국 SQL로 변환 JPQL의 장점 JPQL은 SQL을 추상화해서 특정 데이터베이스에 의존하지 않음 → 데이터베이스 방언만 변경하면 JPQL을 수정할 필요 없음 SQL보다 간결 → 엔티티 직접 조회, 묵시적 조인, 다형성 지원 실행한 JPQL select m from Member as m where m.username = 'kim' 실제 실행된 SQL select member.id as id, member.age as age, member.team_id as team, member..

https://angular.kr/start/start-data Angular 가이드 Angular 가이드 angular.kr 장바구니 서비스 정의하기 1. 장바구니 서비스 생성(Angular Generator → Service) app 폴더 아래에 'cart'라는 이름의 service를 추가하기 위한 명령어 사용 ng generate service cart 이렇게 두 개의 파일 생성 ~cart.service.ts 확인~ 2. CartService 클래스 안에 items 프로퍼티(장바구니에 담긴 상품을 저장하는 배열) 정의 3. 장바구니에 상품을 추가하는 메서드와 장바구니에 담긴 상품 목록을 반환하는 메서드, 장바구니를 비우는 메서드 정의 장바구니 서비스 활용하기 1. product-details.com..

https://angular.kr/start/start-routing Angular 가이드 Angular 가이드 angular.kr 브라우저 주소 표시줄에 URL을 입력하면 해당 제품 화면으로 이동 싱글 페이지 애플리케이션에서 링크를 클릭하면 화면을 전환 브라우저의 "뒤로 가기", "앞으로 가기" 버튼을 누르면 브라우저 히스토리를 기반으로 이동 URL 경로와 컴포넌트 연결 이 애플리케이션에는 이미 Angular Router를 사용해 ProductListComponent로 화면을 전환하는 기능이 있음 지금은 상품의 상세정보 화면이동하는 라우팅 규칙을 추가 1. 상품의 상세정보를 표시하는 컴포넌트를 명령어로 생성 ng generate component product-details 잘 진행됐다면 이렇게 폴더와..

프로젝트 설정 1. 새 프로젝트 생성 프로젝트 생성 명령어 ng new 프로젝트 이름 - Would you like to add Angular routing? y (찾아보니 Y를 누르면 Angular의 라우터가 자동으로 프로젝트에 라우팅을 해준다고 함) - Which stylesheet format would you like to use? CSS (잘 모르겠어서 그냥 가장 익숙한 CSS로) 설치 완료 ~작업 영역 확인~ 2. 프로젝트 구동 우선 명령어를 통해 프로젝트로 접근 cd 프로젝트명 나의 경우 프로젝트 이름이 my-store이기 때문에 'cd my-store' 입력 디렉토리가 프로젝트로 변경되었다면 명령어로 프로젝트 구동 ng serve 프로젝트명 만약 구동과 동시에 화면을 보고 싶다면 ng se..

https://angular.kr/start Angular 가이드 Angular 가이드 angular.kr 동일한 튜토리얼을 로컬에서 VSCODE로 진행해봅시다 귀찮아서 굳이 설명 안 하는 전제조건 1. Node.js 설치 2. VS CODE 설치 1. Angular 설치 터미널에 아래 명령어를 입력 npm install -g @angular/cli -g는 전역설치 2. 설치 확인 제대로 설치되었다면 터미널에 ng를 입력했을 때 아래와 같이 사용 가능한 명령어를 확인할 수 있음

https://angular.kr/start#%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0 Angular 가이드 Angular 가이드 angular.kr 자식 컴포넌트로 데이터 전달하기 ProductListComponent에 있는 상품 데이터를 활용해 알림 구현 → 상품의 가격이 $700 이상이면 Notify Me 버튼을 표시해 해당 상품이 세일 진행시 사용자에게 알림 부모 컴포넌트 ProductListComponent에서 데이터를 받는 자식 컴포넌트 ProductAlertsComponent를 만들기 1. app 폴더 우..

https://angular.kr/start Angular 가이드 Angular 가이드 angular.kr StackBliz에서 진행 (StackBlitz는 브라우저 기반의 개발 환경이기 때문에 웹 브라우저에서 바로 애플리케이션을 생성하고 저장할 수 있으며, 자유롭게 공유 가능) 사용할 컴포넌트 : 다른 컴포넌트를 띄울 수 있도록 제일 먼저 로딩되는 컴포넌트 : 온라인 샵의 이름과 주문 버튼을 표시 : 상품 목록을 표시 : 알림을 표시 예제 프로젝트 생성하기 StackBlitz에 이미 만들어져 있는 프로젝트에 접속 StackBlitz에 로그인 프로젝트를 포크 주기적으로 저장 이 튜토리얼을 진행하며 작업할 파일은 src 폴더 안에 있음 상품 목록 생성하기 products.ts 안의 상품 데이터 produc..

Angular 가이드 Angular 가이드 angular.kr Angular 로컬 환경에 설치 전 준비하기 Node.js npm 패키지 매니저 나는 이미 설치되어 있음 (확인 방법 : cmd 창에 node -v, npm -v 치기 -> 설치되어 있으면 버전이 나옴) Angular CLI 설치하기 cmd에 아래 명령 실행 npm install -g @angular/cli 여기까지 진행사항 워크스페이스, 기본 애플리케이션 생성 애플리케이션은 Angular 워크스페이스 영역에서 개발 1. Angular CLI ng new 명령 실행 - Angular CLI는 cmd창에서 ng 명령으로 실행 가능 - my-app을 이름으로 지정 ng new my-app 2. 기타 설정(내 마음대로 지정) - Would you ..

Angular *CLI Angular 애플리케이션을 가장 빠르고, 쉽고, 모범사례로 개발하는 방법 수많은 작업들을 간단히 처리 가능 ng build Angular 앱 컴파일 ng serve 애플리케이션을 빌드하고 개발서버로 서비스. 파일이 변경되면 바로 반영 ng generate 스키매틱에 정해진대로 Angular 구성요소를 생성, 수정 ng test 유닛 테스트 ng e2e 애플리케이션을 빌드하고 개발서버로 띄운 후에 엔드-투-앤드 테스트 실행 Angular CLI 설치법 npm 패키지 매니저로 명령 실행 ▼ npm install -g @angular/cli 👉🏻 Angular CLI 더 알아보기 *CLI(Command Line Interface) 명령 줄 인터페이스(CLI, Command line i..