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

Note > 자바스크립트 프레임워크/라이브러리모음morgan Node.js 애플리케이션에서 로깅(logging)을 위한 미들웨어 패키지

By a3040, Published on Invalid Date

Node.js 애플리케이션에서 로깅(logging)을 위한 미들웨어 패키지


]# npm install morgan

import morgan from 'morgan'

  let app = express();


  const accessLogStream = fs.createWriteStream(path.join(__dirname, 'log/access.log'), { flags: 'a' });
  app.use(morgan('combined', { stream: accessLogStream }));//아파치 스타일 간단 로깅


expressjs/morgan: HTTP request logger middleware for node.js (github.com)

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>