기록

팀 프로젝트는 팀원들과 함께 노션 워크스페이스를 이용해서 정리하기로 결정했습니다. 그래서 앞으로 프로젝트에 대한 내용들은 노션에 정리할 계획입니다.

◉ @Query ▪︎ JPA에서 직접 쿼리를 작성할 수 있게 해주는 애너테이션 ▪︎ JPA가 쿼리를 자동으로 생성해주지만, 상황에 따라 직접 쿼리를 작성할 필요가 생기기도 함 - 이럴 경우를 대비해, JPA에서 직접 쿼리를 작성할 수 있는 방법에 대해 알아보자 ◉ JPA에서 직접 쿼리 작성하는 방법 1. JPQL로 작성 2. 일반 SQL로 작성 ▪︎ JPQL : JPA의 일부분으로 정의된 플랫폼 독립적인 객체지향 쿼리 언어 일반 SQL : 데이터베이스를 보고 작성 / JPQL : 엔티티 클래스를 보고 작성 ▪︎ JPQL과 SQL 모두 직접 쿼리를 작성하는 방법은 동일하게 @Query 어노테이션 이용 - @Query 어노테이션의 nativeQuery 속성 이용하여 JPQL로 작성할지, SQL로 작성할지 결..

◉ 리액트 프로젝트 생성 시 폴더와 파일 구조 살펴보기 • public : create-react-app으로 개발할 React 프로젝트의 static 파일들(index.html)이 저장된 폴더 - public/index.html : 개발한 React 프로젝트가 표시될 파일 • src : 실제 React를 사용하여 개발을 할 때 사용하는 폴더 - src/index.js : 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일 - src/App.js : 기본적으로 제공되는 React 컴포넌트 예제 - src/App.css : App 컴포넌트에서 사용하는 CSS 파일 - src/App.test.js : App 컴포넌트를 테스트하기 위한 파일 - src/reportWebVitals...

◉ JSX(JavaScript XML) ▪︎ Javascript에 XML을 추가한 확장한 문법 ▪︎ JSX : 리액트로 프로젝트를 개발할 때 사용 → 공식적인 자바스크립트 문법은 아님 ▪︎ 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨 ▪︎ ( 참고 ) https://goddaehee.tistory.com/296 ◉ 리액트 ▪︎ 컴포넌트 방식으로 화면을 구성함 ▪︎ 무조건 하나 이상의 컴포넌트가 있어야 함 따로 생성하지 않을 경우, App.js가 생성됨 ▪︎ 컴포넌트란? - 화면에 보여지는 요소(부분)을 의미 - 다른 곳에서는 위젯 또는 컨트롤이라고 함 ◉ App.js 실습 1. App 컴포넌트에서 사용할 라이브러리 불러오기. ▪︎ ES6부터 라이브러리를 불러올 때, ..

6. 스프링 데이터 리포지터리에 쿼리 정의 - 쿼리 접두사 ( 예 : findBy )로 시작하고, 그 다음 쿼리에 이용할 엔티티 클래스 필드가 나와야 함 ▪︎ CarRepository 인터페이스 생성 ① 단일 조건으로 검색 public interface CarRepository extends CrudRepository{ // * // 단, PK 데이터 타입은 wrapper 클래스명으로 넘겨주어야 함 // ( long이 아닌 Long ) // * JPA에서는 일반적인 검색은 직접 구현하지 않음. 여기서는 선언만 함. // * 스프링 데이터 리포지토리에 다음 쿼리 정의 // 1. 단일 조건으로 검색 // 브랜드로 자동차 검색 List findByBrand(Str..

◉ 리액트 컴포넌트를 만드는 방법 ▪︎ 리액트 - UI를 위한 자바스크립트 라이브러리 - 독립적이고 재사용 가능한 컴포넌트를 기반으로 작동함 - 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트 - UI를 선택적으로 렌더링해서 효율을 높이기 위해 VDOM(Virtual Document Object Model)을 이용함 ▪︎ VDOM - 경량화된 DOM - 실제 DOM을 처리할 때보다 훨씬 빠르게 조작 가능 ▪︎ 리액트 컴포넌트 - 두 가지 방식으로 정의 가능 ① 자바스크립트 함수 이용 function App(){ return Hello World; ] ② ES6 클래스 이용 class App extends React.Component { render(){ return Hello World; } } - re..

◉ Node.js 설치 ▪︎ Node.js : 자바스크립트 기반의 오픈소스 서버 측 환경 ▪︎ 구글에 Node.js 검색 후, 사용 중인 운영체제에 맞는 LTS(Long Term Support) 버전 선택 ▪︎ 다운로드 받은 파일 풀고 클릭하면, 아래와 같이 화면 보임 - '계속' 클릭 - 설치 완료 ▪︎ 터미널 창에서 설치 확인하기 node --version npm --version ◎ npm : 자바스크립트용 패키지 관리자로, Node.js 설치하면 함께 설치됨 ◉ VS Cod 설치 - 코딩을 시작하도록 도와주는 코드 편집기 ▪︎ https://code.visualstudio.com/에서 다운로드 받기 ( 이미 설치한 상태이므로, 다운로드 과정 생략 ) ◉ VS Code 확장 1. React js c..

◉ 엔티티 클래스 생성 ▪︎ 엔티티 클래스 - JPA의 @Entity 어노테이션을 사용하는 자바 클래스 1. JPA와 H2 데이터베이스를 이용하기 위해 pom.xml 파일에 다음의 의존성 추가해야 함 - 라이브러리 추가 시, Gradle과 같이 업데이트 해주어야 함 ① pom.xml에서 오른쪽 클릭 - Maven - Update Project 클릭 ② 업데이트할 프로젝트 선택 : 현재 프로젝트 선택 2. domain 패키지에 Car 클래스 생성 @Entity public class Car { @Id @GeneratedValue(strategy = GenerationType.AUTO) // DB 종류에 따라 JPA가 기본키를 자동으로 생성함 private long id; private String bran..

◉ IDE 특징 - IntelliJ : 스프링 이니셜라이저 이용(spring.io)해서 프로젝트 생성 후. import - STS : 스프링 이니셜라이저 기능 내장되어 있음 - Apache Maven 소프트웨어 개발 프로세스를 간소화하는 소프트웨어 프로젝트 관리 툴이며, 개발 프로세스를 통합하는 기능 제공 ◉ 스프링 이니셜라이저 활용해 maven project 생성 1. 프로젝트 만들기 • Packaging name = Group명.Artifact명 • JSP : War 사용 권장 타임리프 : Jar 사용 권장 • 의존성 추가 - Spring Web / Lombok / Spring Boot Dev Tools • Generate - 압축파일 생성 • 압축파일 압축 푼 후, app/java 아래로 옮기기 2..

◉ 타임리프와 바닐라(순수) 자바스크립트를 활용한 Ajax 구현 ▪︎ AjaxExamController.java - 세 번째 'member 목록 요청' 클릭 시, 요청 처리 메서드 작성 // * /index.html에서 member 목록 요청 누를 경우 @GetMapping("ajax/member/all") public String getMemberList() { log.info("{}", "ajax/member/all 요청 중"); return "ajax/member/list"; } ▪︎ templates/member 에 list.html 생성 ① 타임리프 네임스페이스 선언 ② body 태그 안에 Ajax 호출 버튼 및 호출 후 받아온 데이터를 이용해 테이블을 그려 줄 memberTable 작성 - 태..