관심쟁이 영호

오늘은 Thymeleaf에서 템플릿 조각, 레이아웃 나누기 기능을 공부해볼 예정이다. 목차 부트스트랩 템플릿 구하기 템플릿 조각 나누기 레이아웃 생성 템플릿 조각과 레이아웃이란? 먼저 적용을 하고, 무엇인지 알아보자. 부트스트랩 템플릿 구하기 부트스트랩에서 템플릿을 구해서 가져올 것이다. 먼저 아래의 링크로 가서 템플릿을 가져오자. https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutori..

오늘은 내가 개발 공부를 하면서 가장 많이 사용했던 입력 폼 처리에 대해서 공부를 할 것이다. 목차 입력 폼 처리란 입력 폼 적용 입력 폼 처리란? 웹 개발공부를 하면서 Form 형태로 data를 주고받는 경우를 자주 볼 수 있다. Thymeleaf는 해당 폼 데이터를 주고받을 때, 많은 도움을 준다. 입력 폼 적용 다음의 코드를 보자. 상품명 가격 수량 위 코드를 보면 1개의 폼을 볼 수 있다. 태그를 1개씩 살펴보자. th:object : 객체를 지정한다. *{~} : th:object에서 지정한 객체에 접근한다. *{itemName}이라고 하면 item.itemName이다. th:field : HTML 태그의 id, name, value 속성을 자동 처리해준다. 는 다음과 같이 렌더링 된다.

이번에는 UserState에 대해서 공부를 해보자! 먼저 아래의 코드를 보자. let number = 1; const add = () =>{ number++; console.log('add', number); } return ( 숫자 : {number} 더하기 ); local:3000 으로 접속해서 "더하기" 버튼을 클릭하면 console로 number 값을 확인할 수 있다. 하지만 숫자: {number}인데 number 값을 +1을 해주어도 "숫자 : 1" 에서 1이 바뀌지 않는다 왜그럴까? 상태 값이 변경되었다는 신호를 보내야 한다. 리액트는 아무 변수나 상태 값으로 생각하지않는다. 그래서 "이 변수를 상태 값으로 설정할게!" 라고 해주어야 한다. 그리고 값이 변하면 "상태 값이 변경되었어!" 라고 ..

이번 포스팅에서는 concat, filter, map, slice, 스프레드(전개) 연산자에 대해서 살펴볼 것이다. 스프레드 연산자 스프레드 연산자는 깊은 복사를 실시하는 연산자이다. 아래 코드를 보자. const a = [1,2,3] const b = [...a]; b.push(4); // a??? 이렇게 했을 때, a의 값은 어떻게 될까? 정답은 [1,2,3] 그대로다. 이것이 깊은 복사이다. a의 모든 값을 복사하여 새로운 메모리를 할당한 배열 b에 저장한다. 그래서 b에 새로운 값을 푸쉬해도 a에는 아무런 영향을 주지 않는다. concat concat 함수는 추가하는 함수라고 생각하면 된다. 아래 코드를 보자. const a = [1,2,3]; const b = a.concat(4); // b??..

이번 시간은 JSX 문법을 익혀볼 것이다. React의 기본만 다루는 것이 목표기 때문에, 자세히 들여다보진 말자. JS문법에 HTML 문법을 넣을 수 있다. return ( 안녕 ); 일반적으로 JS문법에서는 " 안녕 " 이렇게 "" 사이에 html 구문을 입력한다. JSX에서는 ""를 표시할 필요가 없다. ※ return이 무엇인지 모르는 사람이 있을 수 있다. 리액트는 설정에서 index.js를 실행하도록 설정이 되어있다. index.js는 아래의 코드가 있다. ReactDOM.render( , document.getElementById('root') ); 는 App.js의 function App()을 실행하라는 것이다. document.getElementById('root')는 index.html..

웹 개발에 관심이 있는 사람이라면, "리액트"라는 단어를 한번쯤은 보았을 것이다. 이 단어가 왜 많은 사람들에게서 언급이 되는 것일까? 오늘의 포스팅에서는 리액트의 전반적인 개요를 둘러볼 예정이다. 리액트란? 내가 이해한 수준에서 명쾌하게 말을 하자면, 리액트는 싱글 페이지 어플리케이션을 개발하는데 도움을 주는 프레임워크라고 생각이 된다. 그렇다면 싱글 페이지 어플리케이션이란 무엇인가? 싱글 페이지 어플리케이션? 싱글 페이지 어플리케이션이란, html 파일은 1개 뿐이다. 필요한 부분의 View만 새롭게 그린다. 통째로 html을 받아올 필요가 없다. 개발되기 전에 웹 개발 상황을 살펴보자. 클라이언트가 서버에게 웹 페이지를 요청한다. 서버는 클라이언트에게 HTML 화면 통째로 보내준다. 클라이언트가 화..