back-end

[JS] querySelector vs getElement

1. getElementById, getElementsByClassName, getElementsByTagName✅ 장점성능이 빠름 (특히 getElementById)❌ 단점getElementsByClassName과 getElementsByTagName은 HTMLCollection을 반환 → 배열 같지만 실제 배열 아님 (Array methods 사용 불가)복잡한 CSS 선택자는 사용할 수 없음 2. querySelector, querySelectorAll✅ 장점CSS 선택자 문법 지원 → #id, .class, div > span, ul li.active 등 복잡한 선택 가능더 유연하고 강력함querySelector는 단일 요소, querySelectorAll은 NodeList 반환 → 반복문 가능 (..

Front Controller MVC 구조에서 함께 사용되는 디자인 패턴 중 하나로, 애플리케이션의 진입점(entry point) 역할을 수행하는 컨트롤러클라이언트가 보내는 모든 요청을 자신이 먼저 받게 되고, 이러한 요청들을 세부 컨트롤러에게 전달하는 역할을 수행한다.Dispatcher Servlet은 spring에서 Front Controller 패턴을 구현한 것이며, Filter와 Interceptor를 거친 후, DispatcherServlet에 도달하게 된다.Filter: 서블릿 스펙 기반, 보통 인증/로깅/인코딩 처리Interceptor: 스프링 기반, preHandle/postHandle/afterCompletion 으로 전후 처리 가능 📌 Front Controller 패턴클라이언트의 모..

HttpSession ≠ 세션 스토리지(Session Storage)  Session Storage (브라우저 Web Storage API)브라우저에서 제공하는 클라이언트 측 임시 저장소탭/창을 닫으면 자동 삭제됨 (지속성 없음)저장 위치: 사용자 브라우저 메모리 HttpSession서버가 사용자 정보를 일정 시간 유지하기 위해 사용하는 저장소사용자별로 하나씩 생성되고, 사용자 개별 데이터(예: 로그인 정보)를 저장하기 위해 사용속도: 세션 접근은 일반적으로 빠르지만, 많은 데이터를 저장하거나 많은 사용자가 있으면 속도 저하 가능메모리: 힙 메모리(Heap Memory)에 세션을 저장하며,  사용자 수가 많아질수록 메모리 사용량 급증사용자 수가 많아질수록 메모리 사용량 급증하기 때문에 요즘 웹은 Http..

앱 실행 시 Spring Boot가 @Configuration, @EnableWebSecurity에 의해 WebSecurityConfig 를 자동 실행1. corsConfigurationSource()CORS(Cross-Origin Resource Sharing) 설정출처(도메인, 포트, 프로토콜)를 기준으로 HTTP 요청을 보내는 것을 허용할지 제어하는 보안 메커니즘CSRF, XSS 같은 공격을 막기 위해 반드시 구현하여야 한다 2-1. authenticationManager()인증을 처리하는 매니저내부적으로 UserDetailsService를 통해 사용자 정보를 불러옴로그인 시 JwtAuthenticationFilter에서 authenticationManager를 사용해서 인증 처리함 JwtAutho..

서블릿(Servlet)자바에서 웹 애플리케이션을 개발하기 위한 클래스웹 서버(WAS, tomcat)와 연동되어 클라이언트(브라우저)의 요청을 받아 동적으로 응답을 생성보통 HttpServlet을 상속(extends) 받아 사용한다. ✅ 주요 객체HttpServletRequest request클라이언트의 요청 정보를 담고 있는 객체. 서버가 요청을 객체로 생성HttpServletResponse response서버가 클라이언트에게 응답을 보낼 때 사용하는 객체. 서버가 요청을 객체로 생성✅ Servlet vs JSPServlet자바 코드로 웹 로직을 처리하기에 적합UI 구성의 어려움 (HTML 작성이 복잡함)이후 JSP 출현JSP (Java Server Pages)HTML에 자바 코드를 삽입해 UI를 쉽게 ..

JSP(JavaServer Pages)Java 기반 웹 페이지 생성 기술로,HTML 코드 안에 Java 코드를 삽입할 수 있게 해주는 서버 사이드 웹 프로그래밍 기술이다.JSP는 Java EE(Jakarta EE)의 일부로, 웹 애플리케이션에서 동적인 HTML 페이지를 만들기 위해 사용되었지만,현재는 유지보수, 구조적 한계, 현대적 웹 개발 트렌드에 뒤처져 거의 사용되지 않는다.  JSP 작동 방식브라우저는 서버에 JSP 파일 요청 서버는 브라우저의 요청에 해당하는 JSP 파일이 서버측에 있는지 조회 후, 존재하면 서블릿(Servlet) 으로 변환서블릿 코드를 컴파일해서 .class 파일 생성서블릿이 실행되면서, HTML을 생성HTML을 클라이언트에게 전송즉, jsp 코드의 return 값은 HTML 코..

Bubbling, CapturingDOM(Document Object Model) 요소에 이벤트 발생 시, 그 이벤트가 어떻게 전달되는지를 정의하는 방식 이벤트 전파(Event Propagation)브라우저에서 이벤트 발생 시, 이벤트는 DOM 트리 상에서 여러 단계에 걸쳐 전파된다.Capturing Phase (캡처링 단계)이벤트가 상위 요소에서 하위 요소로 내려오면서 전파Target Phase (타깃 단계)이벤트가 실제로 발생한 요소(target) 에 도달Bubbling Phase (버블링 단계)이벤트가 타깃 요소에서 다시 상위 요소로 전파이벤트가 발생하면 해당 이벤트는 자식 요소에서 부모 요소로 전파되는 '버블링(bubbling)' 이 일어나게 된다.버블링 전파 시, 부모 요소에 등록된 이벤트 리스..

비동기란→ 코드 실행을 막지 않고, 오래 걸리는 작업을 기다리며 다음 작업을 먼저 실행하는 방식 보통 외부 API를 사용할 경우 비동기로 처리한다. 외부 API를 사용할 때 비동기를 쓰는 이유1. 응답을 기다리면 전체 앱이 멈추기 때문외부 API는 보통 네트워크를 통해 요청을 보낸 후, 응답을 받기까지 시간 걸린다동기 방식일 경우, 응답이 올 때까지 브라우저나 앱이 멈춘다사용자 입장에서는 버벅이거나 멈춘 것처럼 느껴짐2. 여러 작업 동시 처리 가능 비동기 방식일 경우API 응답을 기다리는 동안 다른 UI 렌더링, 이벤트 처리 가능네트워크 작업과 사용자 입력을 동시에 처리 가능  JS의 비동기 처리 방법AJAX (Asynchronous JavaScript and XML)서버와 비동기적으로 데이터를 주고받기..

JDBC API를 사용하여 DB와 연결하기 위해 Connection 객체를 생성하는 작업은 비용이 많이 드는 작업 중 하나이다.이러한 문제를 해결하기 위해 애플리케이션 로딩 시점에 Connection 객체를 미리 생성하고,애플리케이션에서 데이터베이스에 연결이 필요할 경우 미리 준비된 Connection 객체를 사용하여 애플리케이션의 성능을 향상하는 커넥션 풀 (Connection Pool)이 등장하였다.   Connection PoolJava에서 JDBC의 Connection Pooling을 관리하는 라이브러리빠르고 안정적인 성능으로 많은 Spring Boot 및 Java 기반 애플리케이션에서 사용된다  커넥션 풀이란 (Connection Pool)1) 커넥션 풀 (Connection Pool) (1) ..

Client사용자가 URL 입력 및 링크 클릭과 같은 여러 이벤트로 HTTPS(443) 요청한다요청은 Spring Boot 애플리케이션이 실행 중인 IP:PORT로 전송된다 WAS(Tomcat)Spring boot에는 내장 톰캣(Tomcat) 이 존재한다 Spring boot에서 클라이언트 HTTPS 요청은 Tomcat 내부의 Connecter가 수신한다Connecter는 암호화된 요청을 복호화하고, 서블릿 컨테이너에 요청을 전달한다서블릿 컨테이너는 DispatcherServlet 으로 요청 및 응답객체를 생성 후, 전달하며 호출한다Tomcat에서 받은 요청을 HttpServletRequest 객체로 생성응답 데이터를 담기 위한 비어 있는 HttpServletResponse 객체 생성Dispatcher..