본문 바로가기

전체 글

(121)
Spring Boot @Async Callback 비동기처리 기본적으로 Spring은 동기식 처리 모델이기 때문에 메소드를 호출하면 이후의 작업들은 Blocking되어 수행하지 않아요. Spring Boot에서는 @Async라는 어노테이션을 지원하여 상황에 따라 비동기 처리가 가능하도록 하고 있어요. @Async를 어떻게 사용하면 되는지에 대해서 알아볼게요. 설정 파일을 하나 추가해줄게요. @EnableAsync는 서버에서 비동기 처리를 할 수 있도록 기능을 ON하였다라고 보면되요. 또한, AsyncConfigurerSupport를 상속받아서 Thread Pool을 커스텀해볼게요. corePoolSize : 미리 스레드를 만들어 놓아 요청이 들어오면 바로 수행 maxPoolSize : 쓰레드 풀의 최대 사이즈 queueCapacity : corePoolSize가 ..
Spring Boot Scheduler @Scheduled 사용 스프링 부트에서 스케줄러를 돌려서 일정 시간마다 혹은 일정 시간에 로직을 수행하는 방법을 알아볼게요. 설정 파일 스프링 부트에서 스케줄러 기능을 사용하기 위해 @EnableScheduling 설정을 해줄게요. @Configuration @EnableScheduling public class ScheduledConfig { @Bean public TaskScheduler scheduler() { ThreadPoolTaskScheduler scheduler = new ThreadPoolTaskScheduler(); scheduler.setPoolSize(4); return scheduler; } } 스케줄러 구현 스케줄러 컴포넌트를 만들어서 메서드를 구현하고 @Scheduled 설정을 해주면 끝이에요. 1초..
NVM 설치, Node 버전 관리 (Windows / Mac) NVM이란? (Node Version Manager) 말그대로 노드 버전 관리자에요. 마땅히 설명할게 없네요. 어떠한 도구로 개발하다보면 버전을 교체하거나 여러 버전을 관리해야 하는 경우가 생겨요. node도 마찬가지에요. nvm을 활용하여 node를 버전 별로 설치하고 관리하는 방법을 알아보겠습니다. for Windows ...더보기 https://github.com/coreybutler/nvm-windows/releases coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 1. 위의 URL로 접속하면 아래의 ..
HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성) 실제 배열에 영향을 주지 않는 css는 html 태그에 박아버렸어요. div를 가로로 나열해볼게요. 기본적으로 div는 display: block; 속성이여서 자동적으로 줄바꿈이 됩니다. 가로 3등분 이걸 가로로 배열시켜 볼게요. 우선, 상위 div를 만들어줄거에요. 그다음 flex 속성을 이용해서 가로로 배열시킬건데요. 상위 div에는 display: flex; 를 주고 배열하고자하는 하위 div는 flex 속성의 값으로 유동적으로 각각의 비율을 맞출 수 있어요. 이 예제에서는 모두 간격을 똑같이 할거라 모두 동일하게 flex: 1;로 설정할게요. .parent { display: flex; } .child { flex: 1; } 양옆 배치 태그를 하나 빼버리면 두개로 나란히 배치가 될거에요. 너비를 ..
HTML/CSS 이미지 둥글게 원 모양 (프로필) 네모난 이미지를 동그랗게 보여주는 방법에 대해서 알아볼거에요. 보통 프로필을 보여줄 때 많이 하죠. 예시 이미지는 이걸루 할게요. 가로가 좀더 기네요. 세로가 더 길어도 괜찬아요. 이해를 돕기 위해 직접적인 처리와 무관한 속성은 html 태그에 넣었어요. .box { width: 150px; height: 150px; border-radius: 70%; overflow: hidden; } .profile { width: 100%; height: 100%; object-fit: cover; } 테두리에 border-radius: 70%를 주면 div가 원이 되요. overflow: hidden; 속성으로 넘치는 부분은 지워줬어요. object-fit 속성으로 이미지와 같은 오브젝트를 받아서 비율은 그대로 ..
HTML/CSS 한 줄 텍스트 넘칠 때 숨기기... 생략 HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄) 바로 예제를 통해 확인해보도록 하죠. 실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.) 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 아래 사진처럼 보일거에요. 우리는 한정된 빨간 박스 안에 텍스트를 한 줄로 줄여놔야해요. 이쁘게 정리해볼게요. overflow는 div 내에 컨텐츠가 초과되었을 때 어떻게 하겠냐는 속성이에요. hidden으로 설..
HTML/CSS 여러 줄 텍스트 넘칠 때 숨기기... 생략 HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄) 바로 예제를 통해 확인해보도록 하죠. 실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.) 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 아래 사진처럼 보일거에요. 우리는 한정된 빨간 박스 안에 텍스트를 미리보기 형태로 줄여놔야해요. 이쁘게 정리해볼게요. height는 위에서 적었지만 이해를 돕기 위해 다시 한 번 적을게요. height가 200p..
HTML/CSS div 수직 가운데 정렬 (Vertical Align) HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요. 수직 정렬은 까다로워서 거의 억지로 하는 것 같아요. 아래 html 태그는 실험 대상이에요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 파란색 div를 수직으로 정렬해볼게요. html은 건드리지 않을거에요. 1. 테이블 parent div 태그를 테이블처럼 만들어서 vertical-align 속성을 사용할 수 있게 하는 방법이에요. .parent { display: table-cell; vertical-align: middle; } 2. 포지션 직접 조정 child div 태그의 위치를 직접 가운데로 조정하는 방법이에요. ( p..