본문 바로가기

웹 개발40

타임리프의 표현식과 예제 타입리프에서는 다양한 표현식을 사용해서 동적인 데이터를 다루는데, 표현식을 HTML 태그의 속성에 삽입하여 서버 사이드에서 처리하게 한다. 변수 표현식 '${...}' >> 목적: 모델 속성이나 객체에 접근하기 위해 사용된다. 구문: '${변수명}' 또는 '${객체명.속성명}' 예시: Default Name 위 코드는 user 객체의 name 속성 값을 태그의 내용으로 설정한다. 만약 user.name 이 "홍길동" 이라면, 결과는 홍길동 이 된다. 선택 변수 표현식 '*{...}' 목적: 지역 변수에 접근하기 위해 사용된다. 주로 th:object 와 함께 사용된다. 구문: '*{변수명}' EHsms '*{객체명.속성명}' 예시: Default Name 위 코드는 th:object 로 설정된 user .. 2024. 3. 26.
타임리프(Thymeleaf)로 동적 웹 페이지 생성: 기본 설정 타임리프(Thymeleaf)는 HTML 내에서 직접 서버 사이드 로직을 실행할 수 있게 해주는 템플릿 엔진이며, 이를 통해 동적인 웹 페이지를 생성한다. HTML 파일이 그 자체로도 정적 콘텐츠로서의 기능을 유지할 수 있고, 서버 사이드 렌더링 없이도 웹 브라우저에서 직접 볼 수 있는 형태의 템플릿이다. (클라이언트와 서버 사이의 데이터 표현과 통합을 용이하게 해준다) 보통 스프링 부트와 함께 사용하는데, 스프링 부트에서 사용하려면 의존성을 추가해야 한다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' } src/main/resources/templates 디렉토리를 템플릿 파일의 기본 위치로 사.. 2024. 3. 26.
타입스크립트 타입 시스템 이해하기 타입스크립트의 타입 시스템은 코드의 안정성과 유지보수성을 향상시킨다. 다양한 타입들을 제공하여, 개발자가 더 명확하고 정확한 코드를 작성할 수 있도록 해준다. 기본 타입, 인터페이스, 열거형, 튜플, 유니언 및 인터섹션 타입 등이 있다. 기본 타입 >> 문자열(String) : 텍스트 데이터를 나타낸다. let name: string = "John"; 숫자(Number) : 정수 및 부동 소수점 숫자를 나타낸다. let age: number = 30; 불리언(Boolean) : 참(true) 또는 거짓(false) 값을 나타낸다. let isStudent: boolean = true; 배열(Array) : 동일한 타입의 값을 순차적으로 나열한다. let numbers: number[] = [1, 2, 3.. 2024. 3. 25.
React Router의 핵심 기능과 사용법 React Router 는 React 애플리케이션에서 라우팅을 관리하기 위한 표준 라이브러리다. (라우팅이란, 사용자가 다른 주소(URL)로 이동할 때 해당하는 페이지 또는 컴포넌트를 보여주는 기능) React Router의 기능 >> 동적 라우팅: 동적 라우팅을 통해 애플리케이션의 다른 부분에 있는 동안 특정 경로에 대한 컴포넌트가 마운트되고 언마운트된다. 예를 들어, 사용자가 '/products/1' 에서 '/products/2'로 이동할 때, 'Product' 컴포넌트는 다른 매개변수(props)를 가지고 재마운트된다. 위 예시에서 ':id'는 동적으로 변하는 URL 부분을 나타낸다. 사용자가 다른 ID를 가진 제품 페이지로 이동하면, 'Product' 컴포넌트는 새로운 'id' prop과 함께 재.. 2024. 3. 25.

티스토리툴바