ki-sd 님의 블로그

오늘은 JSP의 기본 설정 방식인 지시자와, 클라이언트-서버 간 데이터 전송을 다루는 내장 객체(request)의 활용법을 정리했다. 아울러 웹 페이지의 공통 영역 분리(Include)와 예외 처리(Error Page), 그리고 CSS의 요소 배치 속성들을 실습했다. 1. JSP 지시자(Directive)와 페이지 모듈화 JSP 파일 상단에 정의되는 지시자의 종류와 세부 속성을 다루었다.page 지시자: * contentType: 브라우저가 응답을 어떻게 해석할지 지정한다. 일반적인 text/html 외에도 text/xml, text/plain(JSON 응답용) 형식으로 응답 타입을 변경하는 실습을 진행했다.import: 자바 라이브러리(java.util.*, java.sql.* 등)를 로드할 때 사용한..

오늘은 자바(Java) 코드로 웹 화면을 구성하는 서블릿(Servlet) 방식을 실습하고, 이를 개선하기 위해 등장한 JSP(JavaServer Pages)의 구조적 차이를 확인했다. 또한, 웹 페이지 요소의 배치를 제어하는 CSS position 속성의 특징을 정리했다. 1. Servlet의 동작 원리와 JSP의 특징서블릿(Servlet)의 한계: EmpList.java 실습을 통해 서블릿 클래스를 작성했다. DB에서 사원 정보를 가져와 브라우저에 출력할 때, out.println("...");처럼 HTML 코드를 일일이 문자열로 작성해야 하므로 화면 수정과 유지보수가 까다롭다는 점을 확인했다.JSP의 도입과 동작 사이클: 반면 JSP는 HTML 뼈대 안에 자바 코드를 삽입하는 방식이다. 클라이언트가 ..

오늘은 사용자가 직접 데이터를 생성(Create), 수정(Update), 삭제(Delete)하는 게시판 시스템을 처음부터 끝까지 구현해 냈다. 웹 애플리케이션의 핵심인 CRUD 아키텍처와 화면 이동(Redirection)의 메커니즘을 완벽히 이해한 뜻깊은 시간이었다. 1. 처리용 페이지(Process Page)의 도입과 화면 이동 로직보이지 않는 백엔드 로직 (_ok.jsp): 사용자가 boardInsert.jsp에서 폼(Form)을 작성해 전송하면, 이를 직접 화면에 그리지 않고 insert_ok.jsp라는 중간 처리용 페이지가 데이터를 받는다. 이 페이지는 자바 로직(DAO 호출)만을 순식간에 수행한 뒤 브라우저에게 "목록 페이지로 가라"고 지시한다.response.sendRedirect(): DB에..

오늘은 사용자가 입력한 조건에 따라 데이터를 동적으로 추출하는 JSP 검색 시스템의 완성도를 높이고, 웹 페이지의 시각적 완성도를 결정짓는 CSS 가시성(Visibility) 및 타이포그래피(Typography) 속성들을 심도 있게 해부했다. 데이터의 흐름(Data Flow)과 화면의 표현(Presentation)이 어떻게 유기적으로 연결되는지 그 메커니즘을 확립한 시간이었다. 1. JSP Form 데이터 처리와 동적 검색 로직 (DAO/VO) 사용자가 선택한 검색 조건(업체명, 주소, 음식종류)과 검색어를 서버로 전송하고 처리하는 전체 프로세스를 구축했다.Form 데이터 수신 (find.jsp): 클라이언트가 태그를 통해 전송한 col(검색 컬럼)과 fd(검색어)를 request.getParamete..

오늘은 그동안 단편적으로 학습해 온 자바 백엔드 로직(JDBC, DAO/VO)과 프론트엔드 화면(HTML/CSS)을 하나로 결합하는 JSP(JavaServer Pages)의 진수를 경험했다. 맛집 리스트를 페이징하여 출력하고, 특정 맛집 클릭 시 DB에 저장된 주소를 기반으로 동적 지도를 렌더링하는 풀스택(Full-stack) 웹 애플리케이션의 핵심 워크플로우를 완성했다. 1. DAO/VO 아키텍처와 서버 사이드 페이징 최적화데이터 캡슐화 (FoodVO): 오라클 테이블 스키마에 맞춰 맛집 번호(fno), 이름, 평점, 주소, 이미지 경로 등 10여 개의 속성을 묶어내는 Value Object를 설계했다.페이징 쿼리 (FoodDAO): 전체 데이터를 한 번에 가져오면 서버 메모리와 네트워크에 치명적인 부..

웹 디자인의 공간을 지배하는 'CSS 박스 모델(Box Model)'을 해부하고, 이를 기반으로 데이터베이스(오라클)에서 가져온 사원 정보를 웹 화면에 렌더링하는 실전 JSP 연동을 수행했다. 백엔드의 견고한 로직 위에 프론트엔드의 세련된 옷을 입히는 풀스택(Full-stack) 개발의 묘미를 경험한 시간이었다. 1. CSS 박스 모델: 화면 분할과 여백의 미학 모든 HTML 요소는 네모난 상자(Box)로 이루어져 있으며, 이를 감싸는 3겹의 보호막을 정밀하게 제어하는 기법을 실습했다.Margin (외부 여백): 요소와 요소 사이의 바깥 간격을 벌린다. 특히 margin: 0px auto;를 통한 화면 가운데 정렬 기법은 모든 웹사이트 레이아웃의 기본 뼈대가 됨을 확인했다.Padding (내부 여백): ..