You Lead!!

서비스를 올리니 css, js 등의 로딩이 느려서 화면이 로딩시 깨지는 현상이 발생했다. 이를 해결하기 위해 정적 컨텐츠를 AWS의 cloud Front 등의 CDN으로 url을 변경해 보았으나, 현상은 크게 나아지지 않았다. CDN보다 캐쉬 적용이 더 중요한 부분이었음. Cache Control : 스프링부트는 설정파일에 추가만으로 정적 컨텐츠의 cache Control 설정이 가능했다. spring: web: resources: cache: cachecontrol: max-age: 3600 ETag : http응답값에 파일의 해쉬값을 내려보내준다. 클라이언트는 요청시에 If-None-Match로 해쉬값을 다시 보내고, 파일이 변경되지 않았을 경우에는 파일을 다시 보내는 것이 아니라, 304 Not-M..

반응형 디자인(모바일, 태블릿, PC 등 사이즈가 다양한 단말에 맞게 화면 반응) 12분할을 하여 col-sm-4, col-sm-8과 같이 화면을 2분활 할 수 있다. sm으로 지정하면 sm이상 크기 단말에서는 2분활하고, 그 보다 작은 단말에서는 분활하지 않는다. None (auto) 540px 720px 960px 1140px .col- .col-sm- .col-md- .col-lg- .col-xl- 12분할 위와 같이 작성하면, 540px이상에서는 4개로 나뉘고, 그 이하에서는 3개로 나뉜다. flex 개념 flex박스 하위의 요소들(예를들어 div 등)을 flex박스 안에 배치한다. d-flex-row하면 가로로 여러개, d-flex-column하면 세로로 여러개 배치하는 형태. flex의 정렬 ..

input박스 구현 : 폼 구현시 th:value를 써도 되고, 수정등 화면에서는 th:filed 활용가능 아래와 같이 form action에 th:object 정의후 th:field 사용하면 id, name, value 등 자동으로 설정해줌 measuringScreenAreaX : 해당 Controller마다 반복적으로 필드값을 model에 넣어야 할 경우 : 아래처럼 @ModelAttribue로 구현하면 regions, itemTypes가 항상 내려간다. 체크박스나 라이오박스 구현시 th:each 등으로 사용 @ModelAttribute("regions") public Map regions() { Map regions = new LinkedHashMap(); regions.put("SEOUL", "서..

타임리프 사용 선언 http://www.thymeleaf.org"> 속성 변경 - th:href th:href="@{/css/bootstrap.min.css}" href="value1" 을 th:href="value2" 의 값으로 변경한다. 타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다. HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다. 대부분의 HTML 속성을 th:xxx 로 변경할 수 있다. 타임리프 핵심 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그..