Front-End/Web Views

Front-End/Web Views

[JSP] JSP, 자바 웹프로젝트 환경설정 (IntelliJ, gradle, Tomcat)

1. Tomcat 설치 1) 구글에 톰캣 검색 2) Download 3) 운영체제에 맞게 다운로드 이후에 IntelliJ에서 프로젝트 생성 시 Tomcat 다운로드 압축 푼 파일 위치를 지정하면 된다. 2. 프로젝트 생성 Jakartta EE ( Java Enterprise, Java EE와 같습니다.) Tomcat 설치 후 서버 설정 (Application server) Gradle 선택 JDK 선택 (1.8 또는 11 추천) (Next) Jakarta EE(Java EE) 버전 선택 디폴트 dependencies로 Servlet 만 선택되어 있음 3. UTF-8 설정, Annotation Processor 설정 File - Setting - Annotation Processor 검색 - Enable ..

Front-End/Web Views

[JSP] JSP 간단 정리

JSP란? JSP는 Java(Jakarta) Server Page로, HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹페이지를 생성하는 서버사이드 스크립트 언어이다. 스프링 MVC 구조에서 V(view) 역할을 담당한다. Thymeleaf라는 새로운 기술이 등장하며 Spring에서는 Thymeleaf 사용을 권장하지만 JSP가 이전에 사용되었던 기술이고, 쉽고 빠르다는 장점 때문에 아직도 많이 사용된다. JSP는 실행 시에 내부에서 자바 서블릿으로 변환되어 실행된다. HTML 표준에 몇 가지를 추가하여 HTML에서 자바 코드를 실행하고, 그 값을 이용할 수 있게 된다. JSP를 사용하려면. html이 아닌. jsp로 파일로 만들고, html처럼 사용하면 된다. 간단하게 사용법을 알아보자. JS..

Front-End/Web Views

[Thymeleaf] 기본 문법 (연산, 반복, if, 블록)

연산 1. 산술 연산 2. 비교 연산 > , gt (greater) = > ge (greater or equal) = >= lt (little) =

Front-End/Web Views

[Thymeleaf, html, bootstrap] 자주 사용하는 태그 모음

HTML 헤더 , 타임리프 사용 설정 - xmlns:th="http://www.thymeleaf.org" 부트스트랩 css파일 상대경로 - th:href="@{/css/bootstrap.min.css}" 태그 : 오류발생시 사용 전체 컨테이너 컨테이너 좌우 너비 최대 1000px로 고정 row, column row 지정 후 그 row 안을 두개의 column으로 지정 왼쪽부터 첫번째 column은 text-start로, 두번째 column은 text-end 로 지정 text-start / text-end / text-center : 해당 태그 내에 들어갈 요소의 위치 지정 py-1 : 해당 태그위 위 아래 여백설정 form의 에 작성한 내용을 아래에 type="submit"을 누르면 PO..

Front-End/Web Views

[Thymeleaf] 기본객체, 유틸리티 객체

1. 타임리프가 제공하는 기본 객체 타임리프가 제공하는 기본 객체 ${#request} - 스프링 부트 3.0부터 제공하지 않는다. ${#response} - 스프링 부트 3.0부터 제공하지 않는다. ${#session} - 스프링 부트 3.0부터 제공하지 않는다. ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다. ${#locale} @GetMapping("/basic-objects") public String basicObjects(HttpSession session){ session.setAttribute("sessionData", "Hello Session"); return "basic/basic-objects"; } @Component("helloBean") stati..

Front-End/Web Views

[Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴)

텍스트 - text, utext 1. 내용 변경 : th:text , [[…]] "th:text" 사용 : 텍스트 컨텐츠 안에서 직접 출력하기 : [[${data}]] 1) th:text 내용의 값을 th:text 의 값으로 변경한다. 여기서는 ‘텍스트’을 ${data} 의 값으로 변경한다. 2) [[…]] [[…]] 안에 있는 데이터를 직접 출력할 수 있다. 2. Escape 이스케이프(escape) : HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것 HTML 엔티티 : 웹 브라우저는 ‘spring! th:utext = Hello spring! [[...]] = Hello spring! [(...)] = Hello spring! (+) th:inline="no..

Front-End/Web Views

[Thymeleaf] 타임리프 란?

타임리프 핵심 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다. HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다. 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다. 서버 사이드 HTML 렌더링 (SSR) 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. 네츄럴 템플릿 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다. 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확..

HSRyuuu
'Front-End/Web Views' 카테고리의 글 목록