Web
-
이번 포스트에서는 Thymeleaf의 특성과 기본적인 개발 환경설정에 대해 알아보자. Thymeleaf란? Good Bye JSP~ 그동안 자바 진영에서 Dynamic Web Application을 만들 때에는 MVC 디자인 패턴에서 Controller를 Servlet이 담당하고 View를 JSP가 담당하는 구조가 상당히 장기간 유지 되었다. Servlet의 위치는 여전히 확고하지만 JSP의 위치는 예전만 못하다. 대부분 웹 애플리케이션이 가뜩이나 CSR 기반의 SpringBoot 앱으로 개발되는 과정에서 그렇잖아도 SSR용 템플릿 엔진의 사용이 줄어드는 추세인데 JSP가 SpringBoot의 추천 템플릿 엔진에서 제외되면서 이젠 쓰면 안되나보다 하는 인식이 점점 강해지게 되었다. JSP는 안되고 Th..
[Thymeleaf] 01. Hello Thymeleaf이번 포스트에서는 Thymeleaf의 특성과 기본적인 개발 환경설정에 대해 알아보자. Thymeleaf란? Good Bye JSP~ 그동안 자바 진영에서 Dynamic Web Application을 만들 때에는 MVC 디자인 패턴에서 Controller를 Servlet이 담당하고 View를 JSP가 담당하는 구조가 상당히 장기간 유지 되었다. Servlet의 위치는 여전히 확고하지만 JSP의 위치는 예전만 못하다. 대부분 웹 애플리케이션이 가뜩이나 CSR 기반의 SpringBoot 앱으로 개발되는 과정에서 그렇잖아도 SSR용 템플릿 엔진의 사용이 줄어드는 추세인데 JSP가 SpringBoot의 추천 템플릿 엔진에서 제외되면서 이젠 쓰면 안되나보다 하는 인식이 점점 강해지게 되었다. JSP는 안되고 Th..
2023.12.09 -
이번 포스트에서는 Redis를 이용한 세션 관리에 대해 살펴보자. scale up / scale out 인프라 업그레이드 열심히 프로젝트를 진행하고 결과물이 잘 서비스되는 것을 바라보는 것은 매우 흐믓한 일이다. 그러다 사이트 이용자가 점점 많아지다 보면 한 번 씩 렉이 걸리기도 하고 처리에 시간이 걸리는 모습을 보다보면 숨이 턱턱 막힌다. 이럴 때 우리는 인프라의 업그레이드를 고민하게 된다. 인프라를 업그레이드하는 방법은 scale up 과 scale out 방식 두 개로 나룰 수 있다. scale up scale up은 보다 좋은 사양으로 대체하는 것이다. 기존의 장비에 CPU도 좋은 걸로 바꾸고 램도 추가하고 HDD도 더 큰걸로 달아준다. 이 방법은 성능을 증가시킴에 따라 상대적으로 큰 비용이 들게..
세션 관리이번 포스트에서는 Redis를 이용한 세션 관리에 대해 살펴보자. scale up / scale out 인프라 업그레이드 열심히 프로젝트를 진행하고 결과물이 잘 서비스되는 것을 바라보는 것은 매우 흐믓한 일이다. 그러다 사이트 이용자가 점점 많아지다 보면 한 번 씩 렉이 걸리기도 하고 처리에 시간이 걸리는 모습을 보다보면 숨이 턱턱 막힌다. 이럴 때 우리는 인프라의 업그레이드를 고민하게 된다. 인프라를 업그레이드하는 방법은 scale up 과 scale out 방식 두 개로 나룰 수 있다. scale up scale up은 보다 좋은 사양으로 대체하는 것이다. 기존의 장비에 CPU도 좋은 걸로 바꾸고 램도 추가하고 HDD도 더 큰걸로 달아준다. 이 방법은 성능을 증가시킴에 따라 상대적으로 큰 비용이 들게..
2023.11.15 -
이번 포스트에서는 CSS 선택자 level 4에 소개된 :not()과 :has() 선택자를 사용해보자. :not(x) https://developer.mozilla.org/en-US/docs/Web/CSS/:not 의미와 사용법 :not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다. p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다. 브라우저 호환성 :not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다. :has(x) https://developer.mozilla.o..
[css]css 가상 클래스 선택자: :not()과 :has()이번 포스트에서는 CSS 선택자 level 4에 소개된 :not()과 :has() 선택자를 사용해보자. :not(x) https://developer.mozilla.org/en-US/docs/Web/CSS/:not 의미와 사용법 :not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다. p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다. 브라우저 호환성 :not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다. :has(x) https://developer.mozilla.o..
2023.03.05 -
마지막으로 살펴볼 @rule은 @forward이다. @forward @forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??) @use vs @forward 기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까? @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다. @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다. 주요 목적은 @use를 편하게 하기..
[SCSS] 05. At-Rules -06.@forward마지막으로 살펴볼 @rule은 @forward이다. @forward @forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??) @use vs @forward 기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까? @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다. @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다. 주요 목적은 @use를 편하게 하기..
2022.11.10 -
이번 포스트에서는 모듈의 재사용을 위한 @use 룰의 사용법에 대해 알아보자. @use는 크게 2가지 용법으로 사용된다. 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용할 때 @use의 첫 번째 용도는 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용하는 경우이다. basic 경로에 미리 작성된 _code.scss와 _lists.scss 파일이 있다고 생각해보자. 그리고 이 2개의 파일은 06_use.scss에서 사용하려는 경우 @use가 사용된다. _code.scss와 _lists.scss는 모두 순수하게 css 로만 구성되어있다. 이를 가져오는 use.scss의 결과는 다음과 같다. code { padding: 0.25em; line-height: 0; } ul,ol {..
[SCSS] 05. At-Rules -05.@use이번 포스트에서는 모듈의 재사용을 위한 @use 룰의 사용법에 대해 알아보자. @use는 크게 2가지 용법으로 사용된다. 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용할 때 @use의 첫 번째 용도는 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용하는 경우이다. basic 경로에 미리 작성된 _code.scss와 _lists.scss 파일이 있다고 생각해보자. 그리고 이 2개의 파일은 06_use.scss에서 사용하려는 경우 @use가 사용된다. _code.scss와 _lists.scss는 모두 순수하게 css 로만 구성되어있다. 이를 가져오는 use.scss의 결과는 다음과 같다. code { padding: 0.25em; line-height: 0; } ul,ol {..
2022.11.10 -
평소에 잘 사용하던 mustache에서 갑자기 한글이 깨지는 증상이 발생했다. 이 경우 설정 파일에서 server.servlet.encoding.force 옵션을 설정하면 해결된다. server.servlet.encoding.force=true
[mustache]한글 깨짐평소에 잘 사용하던 mustache에서 갑자기 한글이 깨지는 증상이 발생했다. 이 경우 설정 파일에서 server.servlet.encoding.force 옵션을 설정하면 해결된다. server.servlet.encoding.force=true
2022.11.02 -
이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @function에 대해 살펴보자. 사용자 정의 함수의 작성 @function @function은 사용자 정의의 기능을 모듈화하여 재사용하기 위한 용도로 사용된다. 기본적인 작성법은 아래와 같다. @function () { // 실행문 작성 @return value; } 일반적을 sass의 @function은 함수 동작의 결과를 받아서 사용하는 용도로 많이 사용되는데 함수에서 값을 반환하는 경우는 @return을 사용한다. @function pow($base, $exponent) { $result: 1; @for $i from 1 through $exponent { $result: $result * $base; } @return $resul..
[SCSS] 05. At-Rules -04. 사용자 정의 함수이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @function에 대해 살펴보자. 사용자 정의 함수의 작성 @function @function은 사용자 정의의 기능을 모듈화하여 재사용하기 위한 용도로 사용된다. 기본적인 작성법은 아래와 같다. @function () { // 실행문 작성 @return value; } 일반적을 sass의 @function은 함수 동작의 결과를 받아서 사용하는 용도로 많이 사용되는데 함수에서 값을 반환하는 경우는 @return을 사용한다. @function pow($base, $exponent) { $result: 1; @for $i from 1 through $exponent { $result: $result * $base; } @return $resul..
2022.10.18 -
이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 조건문 SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. @if @else if @else @if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다. @if
[SCSS] 05. At-Rules -03. 제어문이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 조건문 SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. @if @else if @else @if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다. @if
2022.10.06