본문 바로가기

Language

 (102)
[Javascript] DOM (Document Object Model)의 개념 DOM (Document Object Model)HTML 문서를 Javascript로 조작하기 위한 모델HTML, XML 문서의 프로그래밍 인터페이스이며, 문서의 구조를 계층적인 노드로 나타냄W3C(World Wide Web Consortium) 표준 DOM의 구성 요소 문서 노드 (Document) : 최상위 노드로 HTML 문서 전체를 대표요소 노드 (Element) : HTML 태그를 나타냄속성 노드 (Attribute) : 요소의 속성을 나타냄텍스트 노드 (Text) : 요소 안의 텍스트를 나타냄주석 노드 (Comment) : HTML 주석을 나타냄  DOM의 특징트리 구조부모-자식 관계로 구성된 계층적 구조이며, 이를 DOM 트리라고 함부모, 자식, 형제 노드 간의 관계를 통해 문서를 탐색하거나..
[Javascript] 비동기 프로그래밍 [Callback, Promise, async/await] Callback의 개념동기적 콜백콜백 함수가 즉시 호출되어 실행 결과를 기다린 뒤 이후 명령이 수행되는 방식호출한 함수가 끝나기 전에 콜백이 실행되고 종료비동기적 콜백콜백 함수가 호출한 함수의 실행이 완전히 끝난 뒤, 또는 특정 시점 이후 실행되는 방식주로 타이머, 이벤트 핸들러, 네트워크 요청과 같은 비동기 작업에서 사용호출한 함수는 콜백의 실행 결과를 기다리지 않고 다음 명령을 바로 수행코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해놓은 후 어떠한 이벤트가 발생(addEventListener 등)했거나 특정 시점(setTimeout 등)에 도달했을 때 시스템에서 호출하는 함수를 의미파라미터로 함수를 전달받아 함수의 내부에서 실행동기적 콜백function greet(name, callba..
[Javascript] Javascript 동작 원리 [동기, 비동기] Javascript 동작 원리싱글 스레드로 동작하는 언어자바스크립트의 V8 엔진은 싱글 스레드를 가지고 있어 단 하나의 stack을 가짐V8 엔진 자바스크립트 코드를 실행하는 엔진으로 싱글 스레드에서 동작자바스크립트 코드를 바이트코드로 컴파일한 후 실행→ Java의 JVM과 비슷한 역할콜 스택과 메모리 힙을 이용해 코드 실행을 관리 싱글 스레드 하나의 스레드만을 사용해 코드가 실행된다는 의미이 스레드는 메인 스레드라 불리며, 하나의 콜 스택(call stack)에서 실행 단일 호출 스택 (Call Stack)자바스크립트 엔진은 하나의 메모리 힙과 단일 호출 스택을 가짐 → 즉, 엔진 구조 상 하나의 함수만 동기적으로 실행 가능 자바스크립트 엔진이 실행하는 코드는 콜스택에 쌓이고 콜스택은 Stack과 같..
[Javascript] 객체(Object)와 배열(Array) 객체 (Object)중괄호( { } )로 묶어서 표현var zero = { firstName: 'Zero', lastName: 'Cho'}; 속성 (Property)객체의 속성은 Java의 Map처럼 Key와 Value로 이루어짐Key(속성의 이름) → firstName, lastNameValue(속성의 값) → Zero, ChoKey는 문자열 또는 심볼만 가능하며, 따옴표('')로 감싸주지 않아도 됨단, Key 값에 공백(띄어쓰기)가 들어간 경우에는 따옴표로 감싸주어야 함Value 값은 문자열, 정수, 객체, 함수 무엇이든 상관 없음var wrap = { 'ex ample': 'wrap' }; 속성 접근 방법위의 zero 변수(객체) 안의 속성에 접근하기 위해서는 온점( . ) 또는 대괄호( [ ]..
[SQL Mapper] Mybatis 개념 및 구조 MybatisSQL Mapper로 SQL 중심의 프로젝트에 적합 → 객체 중심의 설계라면 JPA(Hibernate)가 더 적합객체와 SQL 쿼리 사이의 매핑을 처리하는 도구ORM처럼 객체를 자동으로 매핑하지 않고, 개발자가 직접 SQL 쿼리를 작성하고 SQL 결과를 자바 객체와 수동으로 매핑하는 방식을 사용→ 수동이긴 하지만 객체와 데이터베이스 테이블 간의 매핑을 다룬다는 점에서 마치 ORM 처럼 사용되긴 하지만 실질적으로는 SQL MapperSQL 쿼리의 세밀한 제어가 필요할 때 유용하고, SQL의 최적화와 복잡한 쿼리 작성에서 강점을 보임Mybatis 등장 배경 복잡한 SQL 쿼리 관리의 어려움 기존의 JDBC를 사용했을 때는 개발자가 직접 SQL 쿼리를 작성하고, 쿼리 실행 결과를 Java 객체로 ..
[JSP] 기본 문법 / 내장 객체 / 태그 템플릿 데이터, JSP 전용 태그, 내장 객체 템플릿 데이터 : 클라이언트로 출력되는 콘텐츠 Ex) HTML, Javascript, stylesheet, JSON, XML, 일반 텍스트 JSP 전용 태그 : 서블릿 생성 시 특정 자바 코드로 바뀌는 태그 Directives :  Scriptlet Elements :  Declartions :  Expressions :  JSP Action :  JSP 내장 객체 : JSP 기술 사양서에 정의된 필수적인 9개 객체, 별도 선언 없이 사용 가능 Ex) request, response, pageContext, session, application, config, out, page, exception템플릿 데이터클라이언트로 출력되는 콘텐츠 서블릿 코드를 생성할 ..
[JPA] N+1 문제 N+1 문제란?ORM 기술에서 특정 객체를 대상으로 수행한 쿼리가 해당 객체가 가지고 있는 연관관계 엔티티를 조회하게 되면서 N번의 추가적인 쿼리가 발생하는 문제 N+1 문제 발생 상황 예시Owner Entity : 고양이 집사는 여러 마리의 고양이를 키움Cat Entity : 고양이는 한 명의 집사에게 종속@Entity@Getter@Setter@NoArgsConstructorpublic class Owner { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int id; private String name; @OneToMany(mappedBy = "owner", fetch = FetchType.EAGER) ..
[JPA] 엔티티 관계의 로딩 전략 - 즉시 로딩 / 지연 로딩 즉시 로딩 (Eager Loading)정의연관된 엔티티를 함께 로딩하는 방식기본 엔티티를 조회할 때 연관된 엔티티도 즉시 데이터베이스에서 조회동작 원리엔티티 조회 시 연관된 엔티티도 함께 쿼리를 실행JPQL 또는 SQL에서 JOIN을 사용하여 데이터를 한 번에 가져옴장점연관된 데이터를 미리 로딩하므로 추가적인 데이터베이스 호출을 방지Lazy Loading의 LazyInitializationException과 같은 문제를 방지단점연관된 엔티티를 항상 로딩하므로 불필요한 데이터가 로드되어 메모리와 성능에 영향을 줄 수 있음복잡한 관계에서는 쿼리가 비대해지고 성능이 저하될 수 있음사용 사례연관된 엔티티를 자주 사용하거나 함께 필요한 경우Ex) User와 UserProfile 관계에서 사용자 정보와 프로필 정보..

티스토리툴바