개인 자료 정리 홈페이지 입니다.

Note > 자바스크립트 관련Template literals/console.log

By a3040, Published on Invalid Date

Template literals - JavaScript | MDN (mozilla.org)


이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다.

보통 키보드 가장 왼쪽상단 1 숫자키 옆 또는 esc키 아래에 있는 물결문자 넣을때 사용하는 키를 그냥 누르면 나타납니다.``

``안에  ${}안에 변수나 표현식을 넣어서 문자열 안에서 동적으로 값을 표현할 수 있습니다.


여러줄인 경우도


//따옴표인경우
console.log("string text line 1\n"+  
"string text line 2");

//백틱인경우
console.log(`string text line 1
string text line 2`);


console.log

개발자 도구의 콘솔(console)에 로그를 출력하는 메소드입니다. 주로 디버깅용으로 사용됩니다.


개발자 도구의 콘솔(console) <-- PC브라우저 사용시 F12 키 누른 후 콘솔탭


문자열 출력

console.log('Hello, world!');


변수 값 출력

const myVar = 42;

console.log(myVar);


객체 출력

const myObj = { name: 'John', age: 30 };

console.log(myObj);


변수 값과 문자열 조합 출력

const myVar = 'world';

console.log(`Hello, ${myVar}!`);


로그의 스타일 지정

console.log('%cHello, world!', 'color: blue; font-size: 20px;');



let num1 = 10;
let num2 = 20;
let str = "hello";

console.log(num1, num2, str);



let obj = { name: "John", age: 30 };
console.log(`My name is ${obj.name} and I'm ${obj.age} years old.`);



const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
console.log(`Person: ${JSON.stringify(person)}`);

console.log(`Age: {}`, person);

console.log(`hello:%s, im %d`, 'xx', 20);




Note > thymeleaf템플릿에 변수 전달하기 th:with="onevar=${value1},twovar=${value2}

By a3040, Published on Invalid Date

<div th:replace="~{::frag}" th:with="onevar=${value1},twovar=${value2}">
<div th:replace="~{::frag (onevar=${value1},twovar=${value2})}">


Tutorial: Using Thymeleaf


공통 템플릿 페이징을 만들 경우

list에서는 members 라는 페이징이 들어간 변수를 사용하게 되고, paging 템플릿에서는 page라는 변수를 사용하게 된는 경우가 있습니다.

이렇게 변수명을 변경해서 전달할 경우나 변수추가가 필요한 경우 사용됩니다.


contorller

    @GetMapping(value={"/aman/member/list", "/aman/member"})
    public String getMembers(HttpServletRequest request, Model model, @RequestParam(defaultValue = "1") int page) {
        Page<Member> members = memberService.getAllMembers(page);
        model.addAttribute("members", members); //페이징 정보가 들어가 멤버들
        return "aman/member/list";
    }


타임리프 aman/member/list에서

<body  class="container mx-auto">
    <div th:replace="~{fragments/header :: header}"></div> 
    <div th:replace="~{member/list :: list}"></div> 
    <div th:replace="~{common/paging :: nav(page=${members},twovar=${value2})}"></div> 
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>


paging 템플릿 에서

<nav th:if="${page.totalPages > 1}">
    <info th:text="${#ctx.springRequestContext.requestUri}"></info>
    <ul class="pagination">
        <li class="page-item" th:classappend="${page.first ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=1)}">First</a>
        </li>
        <li class="page-item" th:classappend="${page.first ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.number - 1})}">Previous</a>
        </li>
        <li class="page-item" th:each="i : ${#numbers.sequence(1, page.totalPages)}"
            th:classappend="${page.number+1 == i ? 'active' : ''}">
            <a class="page-link" th:href="@{${url}(page=${i})}" th:text="${i}"></a>
        </li>
        <li class="page-item" th:classappend="${page.last ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.number + 1})}">Next</a>
        </li>
        <li class="page-item" th:classappend="${page.last ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.totalPages})}">Last</a>
        </li>
    </ul>
</nav>
Note > 자바스크립트 관련html_javascript_dom 관계

By a3040, Published on Invalid Date

HTML(Hyper Text Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어입니다. HTML 문서는 브라우저에 의해 해석되어 웹 페이지의 구조와 내용이 표시됩니다.


DOM(Document Object Model)은 HTML 문서를 계층 구조로 표현하는 모델입니다. DOM은 HTML 문서의 모든 요소를 객체로 표현하며, 이를 통해 JavaScript와 같은 스크립트 언어로 HTML 문서의 구조와 내용을 동적으로 조작할 수 있습니다.


JavaScript는 1995년에 브렌던 아이크(Brendan Eich)가 개발한 스크립트 언어입니다. 처음에는 브라우저에서 간단한 검증 기능을 수행하는 데에 주로 사용되었습니다.하지만 현재 웹 페이지의 동적인 기능을 구현하는 데에 필수적인 언어로 성장했습니다. 또한 OS단에서 동작하는 javscript 런타임 Node.js의 등장으로 서버 측에서도 활용될 수 있는 범용적인 프로그래밍 언어로 성장하였습니다.


- 핵심 언어(ECMAScript)

- DOM(Document Object Model)을 포함한 Web API


HTML, DOM, Javscript의 서로간의 관계는, 

HTML 문서를 로드하면 브라우저는 문서의 구조를 DOM으로 변환합니다. 이후 JavaScript를 사용하여 DOM에 접근하고 조작할 수 있습니다. 이를 통해, 웹 페이지를 동적으로 변경하거나 이벤트 처리를 수행하는 등의 작업을 수행할 수 있습니다.


1. HTML 문서와 해당 문서의 DOM으로 변환 예시

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
 <meta></meta>
</head>
<body>
	<header>
		<h1>Welcome to My Website</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>About Us</h2>
			<p>...</p>
		</section>
	</main>
	<footer>
		<p>&copy; My Website</p>
	</footer>
</body>
</html>


위의 HTML 문서를 브라우저가 해석한 결과 DOM은 다음과 같습니다.

HTML
├── HEAD
│   ├── TITLE
│   └── META
└── BODY
    ├── HEADER
    │   ├── H1
    │   └── NAV
    │       └── UL
    │           ├── LI
    │           ├── LI
    │           └── LI
    ├── MAIN
    │   └── SECTION
    │       ├── H2
    │       └── P
    └── FOOTER
        └── P


2. javscript의 DOM 사용


이렇게 변경된 DOM에 JavaScript를 사용하여 접근하고 조작할 수 있습니다. 

Javascript를 이용해서 DOM에 접근, 페이지의 제목을 변경하는 예시입니다.


document.querySelector('header h1').textContent = 'My New Website';


이후 변화된 내용은 브라우저를 통해 사용자가 확인할수 있게됩니다.