본문 바로가기

분류 전체보기

 (147)
타임리프(스프링 통합과 폼) 입력 폼 처리 th:object="${item}" -> 폼에서 사용할 객체를 지정. 그러면 item에 관한 프로퍼티를 *{...}으로 적용 가능 th:field는 id, name, value 속성을 모두 다 자동으로 만들어줌 -> 검증(Validation)에서 위력 체크 박스 html의 체크박스는 체크시에는 on(true)으로 넘어오고 비체크시에는 아무것도 넘어오지 않는다 -> -> 스프링 MVC는 히든 필드도 만들어서 해결함(스프링이 비체크시에는 false로 반환해줌) 타임리프는 히든 필드마저 생성해줌 ( 값이 참이면 내부 비교로직으로 checked까지 넣어줌 ) 체크 박스 - 멀티 @ModelAttribute의 또다른 기능 -> 아래처럼 쓰면 모든 뷰에서 모델에 regions가 넘어간다 @ModelA..
Thymeleaf(타임리프) 기본 텍스트 출력- th:text, th:utext 컨텐츠 안에서 직접 출력하기 = [[${data}]] HTML 엔티티 '' 같은것을 그대로 표현하기위함 HTML 엔티티로 변경하는것을 이스케이프라 하고 타임리프의 th:text나 [[...]] 은 디폴트로 제공 이스케이프 하지 않는법(unescape) th:text -> th:utext [[...]] -> [(...)] 변수-SpringEL -Object 접근 ${user.username} = userA ${user['username']} = userA ${user.getUsername()} = userA -List ${users[0].username} = userA ${users[0]['username']} = userA ${users[0].getUsern..
Thymeleaf(타임리프) 기초 타임리프의 핵심 th:x 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 치환함. th:x 가 없으면 기존 html의 속성 x가 그대로 사용됨 앞에 써줘야 사용가능 URL 링크 표현식(@{...}) @{/css/bootstrap.min.css} 리터럴 대체 문법( | | ) th:onclick="|location.href='@{/basic/items/add}'|" | | 안에다 넣으면 편리하게 한꺼번에 사용 가능 원래는 "'location.href=' + '\'' +@{/basic/items/add} + '\''" 이렇게 +와 이스케이프로 해야함 변수 표현식(${...}) 10000 모델에 넘어온 값이나 타임리프 변수로 선언한 값 조회 가능(프로퍼티 접근법) 내용 변경(th:text) 10000 ..
스프링 MVC(1) 원리 정리 프론트 컨트롤러 패턴 프론트 컨트롤러(수문장)가 하나로 클라이언트 요청에 맞는 컨트롤러를 찾아서 호출 공통 처리를 전담(나머지 컨트롤러는 서블릿 사용하지 않아도 됨) 스프링 MVC의 DispatcherServlet이 프론트 컨트롤러 패턴으로 구현되어 있음 어댑터 패턴 프론트 컨트롤러가 다양한 방식의 컨트롤러를 처리할수 있음 핸들러 어탭터: 프론트 컨트롤러와 컨트롤러(핸들러) 중간에 위치해서 어탭터 역할을 함 핸들러(컨트롤러): 컨트롤러인데 어댑터 덕분에 더 범주가 다양해짐 로그 출력(@Slf4j) SLF4J(인터페이스)의 구현체 Logback(구현체)를 사용 logging.level.hello.springmvc=debug (디폴트가 info) @RestController 원래 Controller는 뷰를 ..
웹 애플리케이션 이해 웹 서버 HTTP 기반 동작 정적 리소스 제공(HTML, CSS, JS, 이미지, 영상) 예) APACHE 웹 애플리케이션 서버(WAS - Web Application Server) HTTP 기반 동작 웹 서버 + 애플리케이션 로직(코드) 수행 동적 HTML, HTTP API(JSON) 서블릿, JSP, 스프링 MVC 예) Tomcat 웹 시스템 구성1 -WAS, DB 정적 리소스 때문에 핵심 비지니스 로직 수행이 어려울수 있음 웹 시스템 구성2 -WEB, WAS, DB 정적 리소스는 웹 서버가 처리 WAS는 비지니스 로직 전담 WAS나 DB 장애시 웹서버 에서 오류화면도 제고 가능 서블릿 WAS는 Request, Response 객체를 새로 만들어서 서블릿 객체 호출 또 Response 객체에 담겨있는..
JavaScript 기초 : javascript 사용 이벤트 (사용자와 상호작용) : 버튼 생성과 버튼 이름 hi 속성 onclick="자바스크립트 코드" : 클릭시 실행됨 -> 동적으로 자바스크립트 코드 삽입 가능 document.querySelector("#night_day").value = "night"; -> id를 통해 value값 접근및 수정 가능 리팩토링 태그를 자신을 가리킬때는 this를 쓰면 편함 (this.value) 자주 쓰이는 부분은 변수로 지정 var target = document.querySelector("#night_day").value; 함수에서 this 함수에서 this를 쓸경우 전역변수로 쓰인다 -> 따라서 함수에서 this를 self로 고치고 매개변수로 현재 태그의 this를 받아야 한다 객체..
CSS 기초 또는 CSS 이렇게 style 속성과 함께 씀 a -> selector {} -> declaration color(property) red(value) h1 { font-size: 55px; text-align: center; } -> 폰트 사이즈와 가운데 정렬 우선순위 id 선택자(#) > class 선택자(.) > 태그 선택자 동등한 우선순위일 경우 가장 마지막의 코드가 적용됨 박스 모델 h1{ border: 5px solid red; padding: 20px; margin: 20px; display: block; width: 100px; } grid (무색무취) : 그룹핑해서 grid를 사용하여 레이아웃을 하거나 아이디값 부여할때 주로 사용(줄바꿈) : 와 똑같으나 줄바꿈하지 않음 #grid { d..
HTML 기초 TAG는 설명 : 전체 html 코드를 감싸는 태그 : 본문을 설명하는 태크 : 웹페이지 제목 : utf-8로 html를 해석 : 본문 : 진하게 : 밑줄 쫙 : 줄바꿈 : 단락 줄바꿈(br과 비슷하지만 더 정보를 담고있음)

티스토리툴바