프론트엔드 개발19 타임리프를 활용한 웹 페이지 레이아웃과 디자인 타임리프에서 레이아웃과 디자인 관리는 웹 페이지의 일관성과 재사용성을 높이는 데 중요하다. 공통 레이아웃의 재사용을 통해 개발 시간을 단축시키고, 동적으로 디자인을 조정함으로써 사용자 경험을 향상시킨다. (즉, 웹 애플리케이션의 유지보수성과 확장성을 향상시킨다) 공통 레이아웃 생성 >> 여러 페이지에 걸쳐 공통적으로 사용되는 레이아웃(예: 헤더, 푸터, 사이드바)을 만든다. 별도의 HTML 파일로 공통 레이아웃을 작성한 후, 다른 페이지에서 재사용하면 된다. 웹사이트 헤더 사이드바 추가 정보 디자인 속성(th:class, th:style) >> 조건에 따라 HTML 요소에 CSS 클래스나 스타일을 동적으로 적용한다. th:class 는 조건에 따라 클래스를 적용한다. th:style 은 조건에 따라 인라.. 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의 폼 관리: 제어 컴포넌트, 비제어 컴포넌트 React의 폼 관리는 주로 컴포넌트의 상태(state)를 이용하여 사용자 입력을 처리하는 방식으로 되어 있다. 기본적으로 두 가지 방식이 있다: 제어 컴포넌트, 비제어 컴포넌트 제어 컴포넌트 >> 제어 컴포넌트에서는, React 컴포넌트가 폼 데이터를 관리한다. (폼의 각 입력 필드의 값(value)이 컴포넌트의 상태(state)에 의해 제어된다는 것) import React, { useState } from 'react'; function Form() { const [value, setValue] = useState(''); function handleChange(event) { setValue(event.target.value); } function handleSubmit(event) { alert.. 2024. 3. 24. React의 리스트 렌더링과 키 관리 React에서 리스트와 키는 컬렉션을 효율적으로 렌더링하고 관리하는데 중요한 개념이다. 리스트와 키를 올바르게 사용하면 React 애플리케이션의 성능을 크게 향상시키고, 더욱 효율적인 데이터 렌더링 및 관리가 가능해진다. 리스트는 여러 데이터 항목을 표시할 때 사용되며, 각 항목에는 고유한 키가 필요하다. 리스트를 렌더링하기 위해, React에서는 map() 함수를 자주 사용한다. 이 함수는 배열의 각 요소에 대해 함수를 실행하고, 결과를 새 배열로 반환한다. React에서는 이 패턴을 사용하여 데이터 배열을 컴포넌트 배열로 변환할 수 있다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); retu.. 2024. 3. 24. 이전 1 2 3 4 5 다음
