Web
-
웹 프로그래밍은 HTTP(Hypertext Transfer Protocol)을 기반으로 동작한다. 이번 포스트에서는 웹 프로그래밍을 위해 꼭 필요한 HTTP에 대해서 살펴보자. URL URL 구성 URL(Uniform Resource Locator는 인터넷에서 리소스의 위치를 나타내는 주소로 사용되며 다음의 구조를 갖는다. 요소 설명 프로토콜(protocol) 서버와 클라이언트 사이의 통신 규약 ex: HTTP, HTTPS, FTP 호스트(HOST) 리소스가 위치하는 서버의 도메인 이름이나 IP 주소 포트(Port) 리소스를 제공하는 서비스의 포트 번호로 일반적으로 HTTP는 80, HTTPS는 443을 기본으로 사용 경로(Path) 서버 내에서 리소스의 위치를 지정하는 디렉토리 경로나 파일 경로 쿼리스..
꼭 알아둬야 할 HTTP웹 프로그래밍은 HTTP(Hypertext Transfer Protocol)을 기반으로 동작한다. 이번 포스트에서는 웹 프로그래밍을 위해 꼭 필요한 HTTP에 대해서 살펴보자. URL URL 구성 URL(Uniform Resource Locator는 인터넷에서 리소스의 위치를 나타내는 주소로 사용되며 다음의 구조를 갖는다. 요소 설명 프로토콜(protocol) 서버와 클라이언트 사이의 통신 규약 ex: HTTP, HTTPS, FTP 호스트(HOST) 리소스가 위치하는 서버의 도메인 이름이나 IP 주소 포트(Port) 리소스를 제공하는 서비스의 포트 번호로 일반적으로 HTTP는 80, HTTPS는 443을 기본으로 사용 경로(Path) 서버 내에서 리소스의 위치를 지정하는 디렉토리 경로나 파일 경로 쿼리스..
2024.03.05 -
이번 포스트에서는 HTML 코드 작성시 코딩 속도에 날개를 달아줄 Emmet의 필수 사용법에 대해 알아보자. Emmet - the essential toolkit for web developers Emmet은 HTML 태그 작성을 매우 빠르게 할 수 있게 도와주는 도구이다. https://emmet.io/ Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like ab..
Emmet 필수 사용법이번 포스트에서는 HTML 코드 작성시 코딩 속도에 날개를 달아줄 Emmet의 필수 사용법에 대해 알아보자. Emmet - the essential toolkit for web developers Emmet은 HTML 태그 작성을 매우 빠르게 할 수 있게 도와주는 도구이다. https://emmet.io/ Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like ab..
2024.02.28 -
이번 포스트에서는 inline 형태로 Thymeleaf를 사용하는 방법에 대해 살펴보자. inline style inlie expression 기본적으로 Thyleleaf는 html 태그에 사용자 정의 속성을 이용해서 부가적인 기능을 추가한다. inline style은 사용자 정의 속성 없이 [[${...}]] 처럼 두 개의 대괄호 내에 표현식을 작성하는 방식이다. property 사용 attribute 사용 제목: [[#{home.title}]] 사용자: [[${user.name}]] 만약 [[]] 자체를 사용해야 하는 경우에는 th:inline="none"을 이용해서 escape 시켜줘야 한다. A double array looks like this: [[1, 2, 3], [4, 5]]! inline..
[Thymeleaf] 06. inline style이번 포스트에서는 inline 형태로 Thymeleaf를 사용하는 방법에 대해 살펴보자. inline style inlie expression 기본적으로 Thyleleaf는 html 태그에 사용자 정의 속성을 이용해서 부가적인 기능을 추가한다. inline style은 사용자 정의 속성 없이 [[${...}]] 처럼 두 개의 대괄호 내에 표현식을 작성하는 방식이다. property 사용 attribute 사용 제목: [[#{home.title}]] 사용자: [[${user.name}]] 만약 [[]] 자체를 사용해야 하는 경우에는 th:inline="none"을 이용해서 escape 시켜줘야 한다. A double array looks like this: [[1, 2, 3], [4, 5]]! inline..
2024.01.14 -
이번 포스트에서는 Thymeleaf에서 페이지의 레이아웃을 재사용하기 위한 thymeleaf-layout-dialect에 대해 살펴보자. 레이아웃 재사용 웹 페이지 레이아웃의 특징 Thymeleaf에서는 th:fragment, th:insert, th:replace를 이용해서 페이지마다 반복되는 뷰 부분(fragment)을 모듈화 하고 재사용할 수 있었다. 웹 페이지를 작성하다 보면 이런 fragment 만 복되드는 것이 아니라 레이아웃도 반복되는 것을 쉽게 알 수 있다. 위 그림을 보면 regist.html과 modify.html은 header+footer fragment에 각각의 content가 들어간 것을 알 수 있다. detail.html과 manage.html은 base-layout에 추가로 c..
[Thymeleaf] 05.레이아웃 재사용이번 포스트에서는 Thymeleaf에서 페이지의 레이아웃을 재사용하기 위한 thymeleaf-layout-dialect에 대해 살펴보자. 레이아웃 재사용 웹 페이지 레이아웃의 특징 Thymeleaf에서는 th:fragment, th:insert, th:replace를 이용해서 페이지마다 반복되는 뷰 부분(fragment)을 모듈화 하고 재사용할 수 있었다. 웹 페이지를 작성하다 보면 이런 fragment 만 복되드는 것이 아니라 레이아웃도 반복되는 것을 쉽게 알 수 있다. 위 그림을 보면 regist.html과 modify.html은 header+footer fragment에 각각의 content가 들어간 것을 알 수 있다. detail.html과 manage.html은 base-layout에 추가로 c..
2024.01.14 -
이번 포스트에서는 Thymeleaf에서의 layout 작성 방법에 대해 알아보자. Thymeleaf 레이아웃 th:fragment 일반적으로 웹 페이지들은 header, footer 등 반복적으로 등장하는 요소들을 가지며 이들을 매번 만들지 않고 fragment 같은 조각으로 만들어 놓고 재사용 한다. 이를 위해 Thymeleaf에서는 th:fragment를 사용한다. /src/main/resources/fragments 아래처럼 header.html과 footer.html을 만들어보자. header를 구성할 때는 각 페이지의 부제목(subtitle)을 파라미터로 전달받아서 사용하기 위해 header(subtitle)의 형태를 사용할 수 있다. Welcome To Thymeleaf Test Page 부제..
[Thymeleaf] 04. 레이아웃이번 포스트에서는 Thymeleaf에서의 layout 작성 방법에 대해 알아보자. Thymeleaf 레이아웃 th:fragment 일반적으로 웹 페이지들은 header, footer 등 반복적으로 등장하는 요소들을 가지며 이들을 매번 만들지 않고 fragment 같은 조각으로 만들어 놓고 재사용 한다. 이를 위해 Thymeleaf에서는 th:fragment를 사용한다. /src/main/resources/fragments 아래처럼 header.html과 footer.html을 만들어보자. header를 구성할 때는 각 페이지의 부제목(subtitle)을 파라미터로 전달받아서 사용하기 위해 header(subtitle)의 형태를 사용할 수 있다. Welcome To Thymeleaf Test Page 부제..
2023.12.14 -
이번 포스트에서는 Thymeleaf에서의 제어문에 대해 살펴보자. 반복문 th:each Thymeleaf에서 반복문을 사용하기 위해서는 th:each를 사용한다. 반복의 대상은 배열이나 Collection, Stream 등이 가능하다. 간단히 th:each="item, status: ${iterable}" 문장의 사용예를 보면서 사용법을 익혀보자. noidageaddr count name age addr th:each는 for-each 문장과 유사하게 iterable 한 요소를 하나씩 item으로 분리해서 사용한다. item은 다시 ctx의 속성으로 등록되므로 ${item} 형태로 사용할 수 있다. 상태 관리 옵션으로 사용되는 status는 반복도는 상황을 체크하기 위한 여러 속성이 제공된다. statu..
[Thymeleaf] 03. 제어문이번 포스트에서는 Thymeleaf에서의 제어문에 대해 살펴보자. 반복문 th:each Thymeleaf에서 반복문을 사용하기 위해서는 th:each를 사용한다. 반복의 대상은 배열이나 Collection, Stream 등이 가능하다. 간단히 th:each="item, status: ${iterable}" 문장의 사용예를 보면서 사용법을 익혀보자. noidageaddr count name age addr th:each는 for-each 문장과 유사하게 iterable 한 요소를 하나씩 item으로 분리해서 사용한다. item은 다시 ctx의 속성으로 등록되므로 ${item} 형태로 사용할 수 있다. 상태 관리 옵션으로 사용되는 status는 반복도는 상황을 체크하기 위한 여러 속성이 제공된다. statu..
2023.12.14 -
이번 포스트에서는 표준 표현식을 이용해서 값을 출력하는 방법에 대해 알아보자. 표준 표현식 th:text th:text는 메시지를 출력하기 위해 사용되는 속성이다. 표현식 설명 th:text="'some text'" 주어진 some text로 대체 th:text="#{property}" message source에 설정된 property를 활용하며 일반적으로 국제화(i18N)을 지원하기 위해 사용 th:text="${attribute}" request scope에 저장된 attribute를 출력 th:text와 유사하게 th:utext (utext: unescaped text)도 사용할 수 있다. text는 html 태그가 escape 처리되서 그냥 단순 문자열로 처리된다. 반면 utext는 html 태..
[Thymeleaf] 02. 표준 표현식이번 포스트에서는 표준 표현식을 이용해서 값을 출력하는 방법에 대해 알아보자. 표준 표현식 th:text th:text는 메시지를 출력하기 위해 사용되는 속성이다. 표현식 설명 th:text="'some text'" 주어진 some text로 대체 th:text="#{property}" message source에 설정된 property를 활용하며 일반적으로 국제화(i18N)을 지원하기 위해 사용 th:text="${attribute}" request scope에 저장된 attribute를 출력 th:text와 유사하게 th:utext (utext: unescaped text)도 사용할 수 있다. text는 html 태그가 escape 처리되서 그냥 단순 문자열로 처리된다. 반면 utext는 html 태..
2023.12.10 -
이번 포스트에서는 웹 프로그래밍이란 무엇인지 주요 특성에 대해 살펴보고 자바 기반의 웹 프로그래밍 개요에 대해 살펴보자. 웹 프로그래밍 웹 프로그램이란? 웹 프로그램이란 HTTP(Hyper Text Transfer Protocol) 통신 규약에 따라 서버와 클라이언트 컴퓨터 간 데이터를 주고받는 네트워크 기반 프로그램으로 통상 원격지의 서버에서 실행되는 프로그램을 말한다. 전통적으로 웹 프로그램의 클라이언트는 브라우저를 이야기한다. 브라우저에서는 일정 형식의 요청(request)를 생성해서 HTTP 프로토콜을 통해 원격지의 서버에 요청하게 되고 서버는 응답을 생성해서 html 형태로 응답(response)을 만들어 클라이언트에게 전달하면 브라우저가 이를 해석해서 화면에 보여주는 형태로 동작한다. 이런 ..
01. 웹 프로그래밍이번 포스트에서는 웹 프로그래밍이란 무엇인지 주요 특성에 대해 살펴보고 자바 기반의 웹 프로그래밍 개요에 대해 살펴보자. 웹 프로그래밍 웹 프로그램이란? 웹 프로그램이란 HTTP(Hyper Text Transfer Protocol) 통신 규약에 따라 서버와 클라이언트 컴퓨터 간 데이터를 주고받는 네트워크 기반 프로그램으로 통상 원격지의 서버에서 실행되는 프로그램을 말한다. 전통적으로 웹 프로그램의 클라이언트는 브라우저를 이야기한다. 브라우저에서는 일정 형식의 요청(request)를 생성해서 HTTP 프로토콜을 통해 원격지의 서버에 요청하게 되고 서버는 응답을 생성해서 html 형태로 응답(response)을 만들어 클라이언트에게 전달하면 브라우저가 이를 해석해서 화면에 보여주는 형태로 동작한다. 이런 ..
2023.12.09