본문 바로가기

전체 글138

[React] JSX, props JSXReact에서 UI를 구성하기 위해 사용하는 문법으로 자바스크립트 코드 내에서 HTML과 유사한 구문을 사용할 수있도록 한다.이것이 가능한 이유는 브라우저에서 jsx 코드를 바벨을 사용해서 자바스크립트 형태의 코드로 변환해주기 때문이다.function Test() { return ( hello! );};export default Test;JSX는 HTML과 비슷한 구조를 가지고 있어 코드가 직관적이고 가독성이 좋음.JavaScript의 모든 기능을 사용할 수 있어 동적 UI 쉽게 구현 가능컴포넌트를 쉽게 정의하고 재사용할 수 있음. 특징1. JSX에서 {}를 사용하여 자바스크립트 표현식 사용 가능자바스크립트 표현식 → 삼항 연산자나, 변수의.. 2024. 12. 30.
[React] Critical Rendering Path, SPA Critical Rendering Path브라우저가 하나의 화면을 렌더링하는 과정HTML 파싱: 브라우저는 HTML 문서를 읽고 DOM을 생성. (HTML 요소를 트리 구조로 표현)CSS 파싱: CSS 파일이 로드되면, 브라우저는 이를 파싱하여 CSSOM(CSS Object Model)을 생성.Render Tree 생성: DOM과 CSSOM이 결합되어 Render Tree가 생성브라우저에 실제로 표시될 요소와 각 요소의 스타일 정보도 포함하는 웹페이지의 설계도 역할.Layout: Render Tree가 생성된 후, 브라우저가 각 요소의 크기와 위치를 계산하는 과정Painting: Layout이 완료되면, 브라우저는 화면에 요소를 실제로 그린다.여기서 자바스크립트가 DOM을 수정하면 업데이트가 발생한다.즉.. 2024. 12. 30.
[HTML, CSS, JS] 웹 개발 기초 HTML 태그 : 단락 : 제목(글자 크기에 맞춰 h1, h2, h3를 선택하는 것이 아님. 글자 크기는 css로 조절. h1은 한 페이지당 하나, h1,h2 없이 h3가 존재해선 안됨..)html 상용구 목록 요소 : 순서가 없는 리스트로 하위 요소는 로만 구성된다. hello1 hello2 hello3 hello4 : 순서가 있는 리스트로 하위 요소는 역시 hello1 hello2 hello3 hello4다음과 같이 중첩도 가능 hello1 hello_u1 hello_u2 hello2 hello2_u1 he.. 2024. 12. 30.
Docker MySQL + Spring boot 연동 MySQL 이미지를 설치docker pull mysql설치가 잘 되었는지 확인docker images다운받은 이미지로 MySQL 컨테이너 실행docker run --name mysql-container -e MYSQL_ROOT_PASSWORD= -d -p 3306:3306 mysql:latestdocker run: Docker에서 새로운 컨테이너를 생성하고 실행하는 명령어--name mysql-container: 생성할 컨테이너의 이름을 mysql-container로 지정-e MYSQL_ROOT_PASSWORD=: 환경 변수를 설정.여기서 MYSQL_ROOT_PASSWORD는 MySQL의 루트 사용자 비밀번호를 설정-d: 컨테이너를 백그라운드에서 실행하도록 지정. 즉, 터미널을 차지하지 않고 실행-p 3.. 2024. 12. 30.
[Querydsl] 적용 방법 //Querydsl 추가implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta'annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jakarta"annotationProcessor "jakarta.annotation:jakarta.annotation-api"annotationProcessor "jakarta.persistence:jakarta.persistence-api"clean { delete file('src/main/generated')}Gradle clean 작업이 실행될 때 src/main/gener.. 2024. 12. 30.
[Spring Data JPA] Projection Projection데이터베이스에서 필요한 속성만 조회하는 것을 projection 이라고 한다.예를 들면 필드 하나만 조회하거나 DTO로 조회를 하는 경우를 뜻한다.Spring Data JPA는 projection 기능을 어떻게 할까? 1. 인터페이스 기반 - 조회하고 싶은 필드를 getter 형식으로 지정public interface UsernameOnly { String getUsername();}public interface MemberRepository ... { List findProjectionsByUsername(String username);}메서드 이름은 자유롭게 지정해도 되며, Spring Data JPA는 반환 타입을 보고 인지한다.public interface Nested.. 2024. 12. 30.
[Spring Data JPA] 새로운 엔티티 구별 방법 JPA에서 제공하는 save() 메서드는 아래와 같이 동작한다.새로운 엔티티면 저장(persist)새로운 엔티티가 아니면 병합(merge)여기서 새로운 엔티티의 판단 기준은 다음과 같다.식별자가 객체이고 null일 경우식별자가 자바 기본타입이고 0일 경우Persistable 인터페이스만약 엔티티의 키 생성 전략이 자동 생성 전략이라면 save()가 호출될 때 식별자가 존재하지 않는다.이는 새로운 엔티티로 인식해서 persist로 동작하므로 문제가 발생하지 않는다.하지만 ID를 직접 할당하는 경우 이미 식별자가 존재하므로 새로운 엔티티가 아니라고 판단하고 merge를 하게 된다.merge()는 주로 준영속 상태의 엔티티를 영속 상태로 변경할 때 사용되는데, 동작 과정은 다음과 같다.merge(member).. 2024. 12. 30.
[Spring Data JPA] 도메인 클래스 컨버터 도메인 클래스 컨버터Spring Data Jpa에서 제공하는 컨버터로 엔티티의 Id를 엔티티로 변환하거나, 엔티티를 Id 로 변환하는 기능을 제공한다. 다음과 같은 컨트롤러가 있다고 하자./members/{id}로 요청이 오면 repository 에서 id를 통해 멤버를 조회 후 해당 멤버의 이름을 반환한다.@RestController@RequiredArgsConstructorpublic class MemberController { private final MemberRepository memberRepository; @GetMapping("/members/{id}") public String findMember(@PathVariable("id") Long id) { .. 2024. 12. 30.
[Spring Data JPA] Auditing AuditingJPA의 Auditing은 엔티티의 생성 및 수정 정보를 자동으로 기록하는 기능이다.이를 통해 데이터베이스의 변경 이력을 관리하고, 누가 언제 데이터를 수정했는 지를 추적할 수 있다.Spring Data JPA에서는 해당 기능을 쉽게 사용할 수 있도록 지원한다. 설정 방법1. 스프링 부트 설정 클래스에 @EnableJpaAuditing 어노테이션을 추가하여 Auditing 기능을 활성화@SpringBootApplication@EnableJpaAuditingpublic class MyApplication { public static void main(String[] args) { SpringApplication.run(MyApplication.class, args); .. 2024. 12. 30.

티스토리툴바