잇!(IT) 블로그

document.getElementById("number").innerText = String(Math.floor(Math.random() * 1000000)).padStart(6,"0") 1. document.getElementById("number"): 이 부분은 문서 내에서 id가 "number"인 요소를 선택합니다. 즉, HTML에서 ...와 같이 해당 id를 가진 요소를 선택하게 됩니다. 2. .innerText = ...: 이 부분은 선택된 요소의 내부 텍스트를 변경합니다. 즉, 선택된 요소의 내부 텍스트를 다음에 나오는 값으로 설정하게 됩니다. 3. String(Math.floor(Math.random() * 1000000)): 이 부분은 0부터 999999 사이의 임의의 정수를 생성합니다...

- CSS란? - CSS란 cascading style sheet의 약자이다. - CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어다. - 특성 - 특성(property)에는 색, 크기, 정렬 등이 존재한다. div { color: red; color: rgb(255,0,0); /* RGB */ color: #FF0000; /* HEX 값 */ font-size: 20px; /* 글자크기 */ font-weight: 300; /* 글자두께 */ text-align: center; /* 가운데 정렬 */ font-family: arial; /* 글꼴 */ width: 300px; /* 넓이 */ height: 300px; /* 높이 */ background-color: red; /* 배경색..

- 웹 페이지는 HTML, CSS, Javascript로 구성 되어있으며, 브라우저는 세 언어 이외의 언어는 인식하지 못한다. 1. HTML 2. CSS 3. Javascript - HTML - HTML 이란? - HTML은 HyperText Markup Language로, 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계다. - HTML 언어의 본질은, 사용자간에 소통하기 위해 정해진 약속이다. - '태그'를 통해 웹페이지에서 보여질 내용을 나타낸다. - 태그란? - 하나의 약속된 명령어이며 고유한 기능을 가지고 있다. - 시작태그 + 내용 + 종료태그로 구성된 한줄을 HTML Element(요소)라고 부른다. - 안에 들어간 문법에 따라 고유의 기능을 가지고..

- ajax $.ajax 함수는 jQuery에서 제공하는 AJAX 호출을 수행하기 위한 함수입니다. 이 함수에 전달되는 옵션들은 HTTP 요청의 구성 요소입니다. 여기서 url, type, contentType 등의 옵션은 HTTP 요청을 정의하고 구성하는데 사용됩니다. url: AJAX 요청을 보낼 서버의 URL을 지정합니다. type: HTTP 요청 방식 (메소드)를 지정합니다. (예: "GET", "POST", "PUT", "DELETE" 등) contentType: 요청 본문의 MIME 타입을 지정합니다. 예를 들어, "application/json"은 요청 본문에 JSON 형식의 데이터가 포함될 것임을 나타냅니다. data: 서버로 전송할 데이터를 지정합니다. 이 데이터는 type 옵션에 따라 ..

- ResponseEntity - ResponseEntity는 HTTP 응답의 상태 코드, 헤더 및 본문 데이터를 함께 다루기 위해 사용되는 클래스이다. - @ResponseBody 어노테이션을 사용하면 메서드의 반환값이 자동으로 HTTP 응답의 본문으로 사용되므로, ResponseEntity를 사용하지 않아도 된다. ResponseEntity는 상태 코드나 헤더를 더 세밀하게 조작해야 할 때 사용하면 된다. - Principal - principal 객체는 Spring Security 프레임워크에서 현재 사용자의 정보를 나타내는 객체이다. Spring Security는 웹 애플리케이션의 보안을 관리하기 위한 프레임워크로, 사용자 인증(Authentication)과 권한 부여(Authorization)를..

- JPA 사용 시 장점 1. 특정 데이터베이스에 종속되지 않음 2. 객체지향적 프로그래밍 3. 생산성 향상 - JPA 사용 시 단점 1. 복잡한 쿼리 처리 2. 성능 저하 위험 3. 학습 시간 - ORM : Object Relational Mapping의 약자로 객체와 관계형 데이터베이스를 매핑해주는 것을 말한다. - 객체지향과 관계형 데이터베이스 간의 패러다임이 불일치하기 때문에 이를 해결하기 위해 나온 기술이 ORM이다. - 객체는 객체지향적으로, 데이터베이스는 데이터베이스 대로 설계를 한다. ORM은 중간에서 2개를 매핑하는 역할을 한다. - JPA 동작 방식 1. 엔티티 1.1. 데이터베이스의 테이블에 대응하는 클래스 1.2. @Entity가 붙은 클래스는 JPA에서 관리하며 엔티티라고 한다. ..

- 순수 JPA 리포지토리 @Repository public class MemberJpaRepository { private final EntityManager em; private final JPAQueryFactory queryFactory; public MemberJpaRepository(EntityManager em) { this.em = em; this.queryFactory = new JPAQueryFactory(em); } public void save(Member member) { em.persist(member); } public Optional findById(Long id) { Member findMember = em.find(Member.class, id); return Option..

- 쿼리 한번으로 대량 데이터 수정 - 수정, 삭제의 벌크 연산의 경우 영속성 컨텍스트를 통하는 것이 아닌 DB에 직접 쿼리를 날리는 것이기 때문에, 영속성 컨텍스트의 데이터와 불일치하는 상황이 발생한다. - 영속성 컨텍스트와 DB의 데이터를 일치시켜주지 않을 경우 데이터 일치성에 있어서 큰 문제가 발생 할 수 있다. @Test public void bulkUpdate() { queryFactory .update(member) .set(member.username, "비회원") .where(member.age.lt(28)) .execute(); - 위와 같이 코드를 작성하여 실행하게 되면 where문의 조건에 맞게 DB의 데이터들은 변경되지만 영속성 컨텍스트의 값은 해당 조건과 무관하게 변경되지 않는다...

- 동적 쿼리 1. BooleanBuilder 사용 2. where 다중 파라미터 사용 1. BooleanBuilder @Test public void dynamicQuery_BooleanBuilder() { String usernameParam = "member1"; // Integer ageParam = 10; Integer ageParam = null; List result = searchMember1(usernameParam, ageParam); assertThat(result.size()).isEqualTo(1); } private List searchMember1(String usernameParam, Integer ageParam) { BooleanBuilder builder = new Bo..