WEB
-
[Spring] Spring Shell과 profile로 분리하기WEB/back-end 2021. 3. 9. 23:30
Spring Shell 스프링 쉘은 스프링에서 커맨드 어플리케이션을 쉽게 만들 수 있도록 제공하고 있습니다. 특히 버전 2부터 스프링 부트에 적합하게 개선되어 저도 버전 2를 사용해서 구현했습니다. Dependency 추가 pom.xml에 의존성을 추가해서 간단하게 사용할 수 있습니다 :) org.springframework.shell spring-shell-starter 2.0.0.RELEASE 커맨드 작성하기 커맨드 메소드를 작성할 클래스에 @ShellComponent 어노테이션을 붙여주고, 메소드에는 @ShellMethod를 붙여줍니다. @ShellComponent 의 경우 어플리케이션 실행시 해당 어노케이션을 가진 객체의 메서드(@ShellMethod)가 커맨드로 등록됩니다. 메서드명이 입력하는 ..
-
웹 브라우저의 렌더링 과정WEB/front-end 2021. 2. 7. 23:16
항상 궁금하면서도 제대로 정리하지 못했던,브라우저에 HTML 문서가 렌더링 되는 과정을 간단하게 정리해보았다. 렌더링 (Rendering)브라우저에서 요청 받은 컨텐츠나 데이터를 화면에 그리는 과정을 말한다. 렌더링 엔진 (Rendering engine)브라우저는 사용자 인터페이스, 브라우저 엔진, 자바스크립트 해석기 등 다양한 구성요소를 갖고 있다. 그 중에서 렌더링 엔진은 이름 그대로 렌더링을 하는 역할이다. 즉, 요청한 HTML나 CSS를 파싱해서 화면을 그리는 과정을 담당한다. 브라우저마다 다른 렌더링 엔진을 사용하는데,파이어폭스는 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다. 따라서 렌더링 엔진마다 자세한 과정은 다를 수 있지만 기본적인 동작 과정은 아래..
-
[CSS] Flex(Flexible box) 사용 가이드WEB/front-end 2021. 2. 7. 21:00
본 게시물은 NHN 최민호 선임님과 김부승 전임님의 HTML/CSS 기초 강의와 MDN Web Docs를 참고하여 작성하였습니다. Flexible box란? flexible box는 아이템간 공간 배분과 정렬 기능을 제공하기 위한 기능으로서, HTML5의 새로운 display 속성이다. 성능면에서도 이전 레이아웃 모델과 비교해서 렌더링 시간이 빨라졌다. 주의할 점은 부모와 자식 모두에게 속성을 부여해야 적용된다. display: flex flex-direction: 중심축 설정 flexbox의 가장 강력한 기능은 수직(column, 위-아래)과 수평(row, 좌-우) 방향으로의 자유로운 정렬이다. 정렬 방향은 flex-direction 속성을 이용해 정렬될 방향으로 중심축을 설정할 수 있다. flex-d..