Next.js: React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성을 지원하는 풀스택 웹 프레임워크 -공식사이트https://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org 왜써야하나? 주요 특징1. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원클라이언트 측 렌더링(CSR)만 지원하는 React의 한계를 넘어,Next.js는 서버에서 미리 HTML을 생성해 빠른 초기 로딩과 SEO(검색 엔진 최적화)에 최적화SSR (Server Side Rendering)사용자의 요청 시 서버에서 HTML을 생성하..

JPQL vs Querydsl테스트 기본 코드더보기package study.querydsl.entity;import com.querydsl.jpa.impl.JPAQueryFactory;import jakarta.persistence.EntityManager;import jakarta.transaction.Transactional;import org.assertj.core.api.Assertions;import org.junit.jupiter.api.BeforeEach;import org.junit.jupiter.api.Test;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.boot.test.c..

AnimatePresence컴포넌트가 사라질 때도 애니메이션을 실행하게 해주는 Framer Motion 컴포넌트 function MyComponent({ isVisible }) { return ( {isVisible && ( 🔥 )} );} ex. modal더보기const boxVariants = { initial : {scale: 0.5, opacity: 0}, animate : {scale: 1, opacity: 1}, exit : {scale: 0.5, opacity: 0},}function App() { const [isOpen,setIsOpen] = useState(false); const togg..

React 전용 고성능 애니메이션 라이브러리 https://motion.dev/ Motion (prev Framer Motion) — Animation made simple for React, JS and VueA fast and light animation library for React, JS and Vue. Powerful AI and VS Code developer tools. Motion uses browser APIs for a tiny filesize and superfast performance.motion.dev 설치npm install motion 사용 motion. 붙여야 함styled-components : const Box = styled(motion.div)``; Variant..

Specifications (명세)(안씀 편하게 보기)자바 코드로 동적 WHERE 조건을 조립할 수 있는 기능 술어(predicate)AND OR 같은 연산자로 조합해서 다양한 검색조건을 쉽게 생성(컴포지트 패턴)참 또는 거짓으로 평가예) 검색 조건 하나하나스프링 데이터 JPA는 org.springframework.data.jpa.domain.Specification클래스로 정의명세 기능 사용 방법-JpaSpecificationExecutor 인터페이스 상속public interface MemberRepository extends JpaRepository, JpaSpecificationExecutor {}-JpaSpecificationExecu..

스프링 데이터 JPA 구현체 분석스프링 데이터 JPA가 제공하는 공통 인터페이스의 구현체org.springframework.data.jpa.repository.support.SimpleJpaRepository@Repository@Transactional(readOnly = true)public class SimpleJpaRepository ...{ @Transactional public S save(S entity) { if (entityInformation.isNew(entity)) { em.persist(entity); return entity; } else { return em.merge(enti..

사용자 정의 리포지토리 구현스프링 데이터 JPA 리포지토리는 인터페이스만 정의하고 구현체는 스프링이 자동생성스프링 데이터 JPA가 제공하는 인터페이스를 직접 구현하면 구현해야 하는 기능이 너무 많음만약 인터페이스의 메서드를 직접 구현하고 싶다면?JPA 직접 사용(EntityManager)스프링 JDBC Template 사용MyBatis 사용데이터베이스 커넥션 직접 사용 등등Querydsl 사용 사용자 정의 인터페이스public interface MemberRepositoryCustom { List findMemberCustom();} 사용자 정의 인터페이스 구현 클래스@RequiredArgsConstructor //사용자 정의 인터페이스명 + 'Impl'public class MemberRepo..

페이징 및 정렬다음 조건으로 페이징, 정렬을 사용해보자검색 조건: 나이 10살정렬 조건: 이름 내림차순페이징 조건: 첫 번째 페이지, 페이지당 보여줄 데이터 3건 순수 JPA 페이징과 정렬-JPA 페이징 리포지토리public List findByPage(int age, int offset, int limit) { return em.createQuery("select m from Member m where m.age = :age order by m.username desc") .setParameter("age", age) .setFirstResult(offset) .setMaxResults(limit) .getResultL..

쿼리 메서드 기능메서드 이름만으로도 JPA 쿼리를 자동 생성해주는 Spring Data JPA의 핵심 기능 쿼리 메서드 기능 3가지메서드 이름으로 쿼리 생성메서드 이름으로 JPA NamedQuery 호출@Query어노테이션을 사용해서 리파지토리 인터페이스에 쿼리 직접 정의 1. 메서드 이름으로 쿼리 생성메서드 이름을 분석해서 JPQL 쿼리 실행 만약, 이름과 나이를 기준으로 회원을 조회하려면? - 순수 JPA 리포지토리public List findByUsernameAndAgeGreaterThan(String username, int age) { return em.createQuery("select m from Member m where m.username = :username and m.age ..

순수 JPA 기반 리포지토리비교 위해 먼저 보자-MemberJpaRepository@Repositorypublic class MemberJpaRepository { @PersistenceContext private EntityManager em; //추가 public Member save(Member member) { em.persist(member); return member; } //삭제 public void delete(Member member) { em.remove(member); } //전체 조회 public List findAll() { return em.createQuery("select ..