Tech

Tech/React

React-Hooks

❓ React-Hooks란? React에서 만든 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 하는 도구 쉽게 설명하면, Hooks가 있기 때문에 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신할 수 있다는 것이다. 대표적인 Hooks에는 useState, useEffect가 있다. 클래스형 // 클래스형 import { Component } from "react"; class New extends Component { constructor(props){ super(props) // 다른 컴포넌트한테 받은 데이터 this.state = {} // 컴포넌트 안에 보관해둘 데이터 } componentDidMount(){ // 컴포넌트가 최초 그려진 후 실행 } componentDi..

Tech/React

React 컴포넌트

❓ 컴포넌트란? 컴포넌트란 UI 또는 기능을 부품화해서 재사용이 가능하게 만드는 것이다. 동일한 UI를 재활용하므로, 원본만 변경하면 모두 적용되게 한다. 데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다. ✍️ 컴포넌트 작성 방법 클래스형 import { Component } from "react" class New extends Component { render(){ return 이것은 클래스형 컴포넌트 } } export default New 함수형 // 함수형 컴포넌트 작성법 1 function New(){ return 이것은 함수형 컴포넌트 } export default New // 함수형 컴포넌트 작성법 2 const New = () => 이것은 함수형 컴포넌트 export default ..

Tech/React

React란?

✍️ 정의 React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다. Component라는 부품을 만들어 큰 프로젝트에서 페이지를 만들 때, 갈아끼우는 방식으로 개발할 수 있다. 대표적인 서비스로 페이스북, 인스타그램, 에어비앤비 등이 있다. ❓ React를 배워야하는 이유 대표적인 프론트엔트 도구로 React, Angular, Vue 가 있다. 이중에서 React를 배워야하는 이유는 다음과 같다. 가장 많은 사용자 수 npm은 javascript로 만들어진 도구들을 다운로드 받을 수 있는 사이트인데, 이런 npm trends라는 npm에서 다운로드된 도구들의 다운로드 경향을 보여주는 사이트에서 다운로드 수가 가장 많다. React 하나를 배우면 웹, 안드로..

Tech/데이터 접근 기술

트랜잭션 매니저 선택

JPA, 스프링 데이터 JPA, Querydsl -> JpaTransactionManager JdbcTemplate, MyBatis -> DataSourceTransactionManager JpaTransactionManager DataSourceTransactionManager 가 제공하는 기능을 대부분 제공한다. JPA라는 기술도 결국 내부에서는 DataSource와 JDBC Connection 을 사용하기 때문이다. 결과적으로 JpaTransactionManager를 하나만 스프링 빈에 등록하면, JPA, JdbcTemplate, MyBatis 모두를 하나의 트랜잭션으로 묶어서 사용할 수 있다. JPA의 플러시 타이밍 JPA 호출이 끝난 시점에 JPA가 제공하는 플러시라는 기능을 사용해서 JPA의 ..

Tech/데이터 접근 기술

실용적인 구조

ItemRepository는 스프링 데이터 JPA의 기능을 제공하는 리포지토리 기본 CRUD와 단순 조회 ItemQueryRepository는 Querydsl을 사용해서 복잡한 쿼리 기능을 제공하는 리포지토리 복잡한 조회 쿼리

Tech/데이터 접근 기술

스프링 데이터 JPA 소개

주요 기능 스프링 데이터 JPA는 JPA를 편리하게 사용할 수 있도록 도와주는 라이브러리이다. 공통 인터페이스 기능 쿼리 메서드 기능 공통 인터페이스 기능 JpaRepository Interface 를 통해서 기본적인 CRUD 기능을 제공한다. 공통화 가능한 기능이 거의 모두 포함되어 있다. @Indexed public interface Repository { } package org.springframework.data.repository; @NoRepositoryBean public interface CrudRepository extends Repository { S save(S entity); Iterable saveAll(Iterable entities); Optional findById(ID i..

Tech/데이터 접근 기술

JPA 소개

스프링: DI 컨테이너를 포함한 애플리케이션 전반의 다양한 기능을 제공 JPA: ORM 데이터 접근 기술을 제공 JdbcTemplate, MyBatis 같은 SQL Mapper 기술은 SQL을 개발자가 직접 작성해야 한다. JPA를 사용하면 SQL도 JPA가 대신 작성하고 처리해준다. 스프링 데이터 JPA, Querydsl 라는 JPA를 편리하게 사용하도록 도와주는 기술을 함께 사용한다. 설정 spring-boot-starter-data-jpa 라이브러리를 사용 spring-boot-starter-jdbc 도 함께 포함한다. 다음과 같은 라이브러리가 추가됨 hibernate-core: JPA 구현체인 하이버네이트 라이브러리 jakarta.persistence-api: JPA Interface spring..

Tech/데이터 접근 기술

MyBatis 소개

장점 SQL을 XML에 편리하게 작성할 수 있고, 동적 쿼리를 매우 편리하게 작성할 수 있다. 단점 JdbcTemplate 은 스프링에 내장된 기능이고, 별도의 설정없이 사용할 수 있다. MyBatis는 약간의 설정이 필요한다. 설정 mybatis-spring-boot-starter 라이브러리를 사용하면 MyBatis를 스프링과 통합하고, 설정도 아주 간단히 할 수 있다. //MyBatis 추가 implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0' 스프링 부트가 버전을 관리해주는 공식 라이브러리가 아니기 때문에 버전 정보를 붙여야 한다. 라이브러리 mybatis-spring-boot-starter : MyBatis 를 스프링..

Tech/데이터 접근 기술

스프링 JdbcTemplate 소개

SQL을 직접 사용하는 경우에 JdbcTemplate은 JDBC를 매우 편리하게 사용할 수 있게 도와준다. 장점 설정의 편리함 spring-jdbc 라이브러리에 포함 반복 문제 해결 템플릿 콜백 패턴 사용 단점 동적 SQL 해결이 어려움 save INSERT, UPDATE, DELETE SQL에는 template.update() 메서드를 사용한다. 데이터 저장시 PK 생성시에 identity ( auto increment ) 방식을 사용한다. 따라서 데이터베이스가 PK인 ID를 대신 생성해준다. 데이터베이스에 INSERT가 완료되어야 생성된 PK ID 값을 확인할 수 있다. KeyHolder 와 connection.preparedStatement 을 사용해서 id를 지정해주면 INSERT 쿼리 실행 이후..

Tech/템플릿 엔진

타임리프 사용법

핵심 순수 HTML을 그대로 유지하면서 View Template 도 사용할 수 있는 Thymeleaf의 특징을 Natural Template 이라 한다. th: ~~~ 가 붙은 부분은 서버사이드에서 렌더링되고, 기존의 것을 대체한다. 이 부분이 없으면 기존 html의 ~~~ 속성이 그대로 사용된다. HTML을 파일로 직접 열었을 때, th: ~~~ 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다. 즉, 정적 HTML 리소스 파일 보기를 유지하면서 템플릿 기능도 할 수 있다. 사용 선언 변수 표현식 - ${ ... } 10000 모델(Model)에 포함된 값이나, 타임리프 변수로 선언한 값(itemId=${item.id})을 조회할 수 있다. Property 접근법을 사용한다. ( item...

kimjingyu
'Tech' 카테고리의 글 목록 (4 Page)