남산 아래 개발자들

안녕하세요. 남산돈가스 입니다. 오늘은 Spring Boot JPA를 이용하여 API 개발 시 간단하게 Pagination 와 Sorting을 처리할 수 있도록 도와주는 Pageable에 대해서 알아보려고 합니다. 웹 개발 시 Pagination 과 Sorting은 필수적이라 할 수 있지만, 실제 개별적으로 구현 시 번거로운 작업이 생기기 마련입니다. 또한 각 데이터베이스마다 페이징 쿼리가 다를 수 있다는 점에서 모든 요구조건을 만족하기 어려운 부분들이 존재하기 마련입니다. Spring Data JPA와 Pageable을 이용하면 이런 문제들을 아주 쉽게 해결할 수 있어 비즈니스 로직에 집중할 수 있게 도와줍니다. 우선 Pageable을 사용하여 얻을 수 있는 이점은 대표적으로 두 가지 입니다. 요건에 맞는 Pagination을 구현할 수 있다. 정렬이 필요한 데이터를 쉽게 Sorting 할 수 있다. 예제를 들어 설명하겠습니다. @Entity @Table (name= "post" ) @Getter public class Post extends Audity { @Id @GeneratedValue (strategy = GenerationType.IDENTITY) @Column (name= "id" ) private Long id; @Column (name= "title" ) private String title; @Column (length = 2000 , name= "content" ) private String content; @Column (length = 50 , name= "writer" ) private String writer; } 간단한 예제를 들기 위하여, "Post" 라는 Entity를 작성하였고, 예제를 위하여 약 20건...

안녕하세요 남산도서관 입니다. 퍼블릭 클라우드 서비스 관리를 위한 Web Console 서비스의 메인 계정이 해킹되는 경우 운영 중인 서비스에 발생되는 문제가 함께 악의적인 인스턴스 대량 생성을 통한 요금폭탄을 마주하실 수도 있습니다. 클라우드 서비스 제공 사업자들은 이러한 피해를 최소화 하기 위하여 다양한 보안 서비스를 제공하고 있는데요 이번 포스팅에서는 그중에서도 Naver Cloud Platform 에서 적용 가능한 Sub Account 생성 기능에 대해 알아보도록 하겠습니다. 우선 Ncloud 콘솔에 메인 계정으로 로그인은 진행합니다. 1. 접속페이지 URL 설정  좌측 Product & Service 메뉴 를 선택한 후 Management > Sub Account 항목을  선택하면 Dashboard 화면이 표시됩니다. 우선 접속페이지 설정 항목 에서 서브계정 접속 URL 을 설정합니다. https://www.ncloud.com/nsa/   뒤에 원하는 주소를 입력하면 해당 URL로 접속페이지가 설정됩니다. Sub Account Dashboard 화면 2. Sub Account 생성 좌측 메뉴에서 Dashboard 아래 Sub Account 메뉴를 선택 한 후 서브계정 생성 버튼을 선택 합니다. Sub Account 메뉴 3. Sub Account 정보 입력 Sub Account 생성 화면입니다. 로그인 아이디, 사용자 이름, 이메일 주소 및 비밀번호 입력 후 생성 버튼 을 선택하면 계정 생성이 완료 됩니다. 2차인증설정 을 필수로 선택하면 서브계정 로그인 시 이메일, SMS 를 통한 MFA 기능을 적용할 수 있습니다. Sub Account 정보입력 4. Sub Account 정책 할당 계정 생성이 완료 되었으면 이제 계정에 정책을 할당해주어야 합니다. 방금 생성된 계정을 선택하여...

안녕하세요. 명동섞어찌개 입니다. 오늘은 Angular 페이지에서 문서 (form) 작성 중 또는 무언가를 등록하다가, 저장하지 않고 브라우저 뒤로가기 버튼을 눌렀을 때 '저장하지 않은 파일이 있습니다. 페이지를 나가시겠습니까?'라고 묻는 알럿 띄우는 기능을 만들려고 합니다. 일반적으로 이런 기능은 javascript 에서는 popstate 이벤트 리스너를 사용해서 구현합니다. (모바일에서도 사용한 기억이 있습니다.) 1 2 3 window . addEventListener ( ' popstate ' , ( event ) => { console . log ( "location: " + document . location + ", state: " + JSON . stringify ( event . state )); }); 하지만 Angular 에서 window:popstate 로 아무리 구현해 봐도 원하는 기능이 작동하지를 않더군요. 아마도 popstate 는 페이지가 이동할 때 호출되는 이벤트인데, Angular 는 SPA(Single Page Application) 다 보니 하나의 페이지 안에서 component 끼리 routing 될 뿐이라서 저 이벤트가 호출되지 않는 듯 했습니다. (자세히 아시는 분은 댓글로 제보 부탁드립니다!!) 검색해보니 Angular 자체적으로 페이지를 나갈 때 처리해줄 수 있는 솔루션이 있더라구요. router 의 canDeactivate !!! canActivate 는 로그인하지 않은 사용자가 해당 페이지에 접근하지 못하게 막는 용도로 사용되는 경우를 많이 봤는데요, 페이지를 나갈 때 체크하는 용도로 canDeactivate 를 사용해 본 건 처음이었습니다. 시나리오를 말씀드리자면 1. CdnRegisterComponent 라는 페이지 컴포넌트에서 파일을 등록하다가 저장 버튼을 ...

안녕하세요. 명동섞어찌개입니다. 오늘은 Angular 를 이용한 파일 업로드 기능 개발 시 편리한 사용성을 위해 Drag and Drop 드래그 앤 드랍 기능을 추가하는 방법을 알아볼건데요, vanila javascript (순수 자바스크립트) 로 개발하면 익스플로러와 크롬 브라우저 등 브라우저 별 예외처리가 필요해서 시간이 꽤 걸리는 일이지만 (개인적으로 0 부터 시작해서 개발했을 때 다른 업무 처리하면서 일주일 정도 걸렸습니다..) Angular 는 directive 를 사용해서 간편하게 개발할 수 있더라구요. Angular Version: 8 결과화면 1. 먼저 drag-and-drop directive 를 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 import { Directive , EventEmitter , Host , HostBinding , HostListener , Input , Output } from ' @angular / core' ; @Directive ({ selector: ' [ appDragDrop ] ' }) export class DragDropDirective { @Output () onFileDropped = new EventEmitter < any >(); @Input ( 'draggable' ) public draggable = true ; @HostBinding ( 'hintLine' ) public deco = false ; @HostBinding ( 'style . b...

안녕하세요. 남산돈가스입니다. 이번 포스팅에서는 Angular 프로젝트 환경에서 API를 요청하실 경우, 가장 보편적으로 사용하시는 HttpClientModule에서 Http 요청을 가로채 특정 처리를 할 수 있도록 도와주는 HttpInterceptor 인터페이스에 대해서 작성해보겠습니다. 우선 HttpInterceptor는 Angular 4.3부터 추가 된 기능으로, 위에서 말한 것처럼, HttpClientModule을 이용한 API 호출 시 그 중간의 요청을 가로채어 특정 처리를 진행할 경우에 사용합니다. 저희 팀에서 Angular를 진행하는 프로젝트에서는 이 Interceptor를 API 호출 시 OAuth Token을 만료인지 유효한 지 검증하기 위한 용도로 사용되고 있습니다. 이번 포스팅에서 예제로 설명할 상황은 이렇습니다. 1. LocalStorage에 저장 된 OAuth Token을 가져온다. 2. OAuth Token을 요구하는 API를 HttpClient 모듈을 이용하여 호출한다. 3. HttpInterceptor에서 API  결과 응답이 Error이며, 401에러인 경우를 확인한다. 4. 상황이 3 과 같은 경우, 토큰 갱신 API를 호출한다. 5. 토큰 갱신 이후 정상 토큰을 가지고 위에서 호출해야하는 API 다시 요청한다. 6. 정상 응답을 확인한다. 예제 코드를 보면서 설명하겠습니다. import {Injectable} from '@angular/core' ; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http' ; import {Observable} from 'rxjs' ; @Injectable() export class TokenCheckInterceptor implements HttpInte...

AWS 클라우드 컨설팅 사례 - IBK기업은행 EXA IBK 기업은행은  성장 커뮤니티인  ‘사내벤처  EXA’ 서비스 운영을 위한 모바일 어플리케이션 및 콘텐츠 관리시스템 (CMS)을 최대한 빠른 시간 안에 구축 하기를 희망하였습니다. [도입과제] - 신속한 서비스 출시를 위한 인프라 도입 기간 및 개발기간 단축 - 사용자 증가시에 유연하게 대응가능한 안정적인 인프라 구축 - 도서정보 검색을 위한 외부 서비스 연동 필요 - 콘텐츠 관리를 위한 CMS 사이스 구성 필요 - 체계적인 인프라 모니터링 환경 필요 - 전문성을 보유한 인프라 운영인력 부재 [솔루션] - AWS 클라우드 도입을 통한 신속한 인프라 구축 및 IBK시스템 개발인력 지원 - 자동확장을 고려한 AutoScaling 서비스 도입 - 외부 데이터 연동을 위한 API 서비스 구성 및 검색 성능 향상을 위한 Elasticsearch 솔루션 도입 - 정적 웹사이트 구축을 위한 Simple Storage Service 와 CloudFront 구성 - CloudWatch 및 SNS 를 활용한 인프라 장애 모니터링 구성 - IBK 시스템 Cloud Management 서비스 이용 [인프라 설계] [도입효과] - IBK 시스템과의 협업을 통하여 클라우드 인프라 구축 및 서비스 개발을 진행 3개월 만에 콘텐츠 관리시스템 구축 및 모바일 어플리케이션 출시를 진행할 수 있었습니다. - IBK시스템 전문 인프라 운영 인력을 통해 안정적으로 서비스를 운영 및 모니터링을 진행하고 있습니다. http://exactu.net

안녕하세요. 명동교자입니다. 그 동안 IBK기업은행의 중소기업 경영지원 플랫폼 BOX 를 런칭하고 BOX 운영 안정화, 신입사원 면접, 주택금융공사 2단계 프로젝트 비대면 채널 팀빌딩을 지원하고 플랫폼사업팀을 새롭게 정비하느라 블로그를 신경쓰지 못했습니다. 죄송하단 말씀을 먼저 드립니다. 앞으로 블로그를 재 정비하여 사업을 통해 얻은 경험을 활발히(!) 포스팅하도록 하겠습니다. 오늘 블로그 마케팅에 대해서 배운 내용을 정리해서 공유드리겠습니다. 기업이 블로그를 운영하면서 잘못하고 있는 부분은 콘텐츠의 양만을 신경쓰기 때문입니다. 콘텐츠의 업데이트 주기나 양보다 더욱 중요한 것은 커뮤니케이션 이라고 합니다. 이러한 커뮤니케이션이 잘되고 있는지 확인 하는 방법에는 블로그 커뮤니케이션 활성화 지수(Blog Communication Power) 를 분석하는 방법이 있습니다. 이 활성화 지수는 어려운 것이 아니고 총 포스팅 수, 포스팅 1개당 댓글수, 포스팅 1개당 스크랩수, 포스틍 1개당 공유수 등을 분석해 보는 것입니다. 저희 남산 아래 개발자들의 Blog Communication Power를 분석해 보도록 하겠습니다. 총 포스팅 수: 284개 포스팅 1개당 댓글수: 73/284 = 0.25 포스팅 1개당 스크랩수: 0 팔로워: 0 포스팅 1개당 댓글수가 0.25라는 것은 포스팅 4개당 1개의 댓글이 달렸다는 것입니다. 나쁘지 않은 분석 결과인데 문제는 댓글에 대한 피드백이 1도 없었다는 점입니다. 회사 브랜드 블로그도 아니고 개발자를 위한 블로그임에도 커뮤니케이션에 전혀 신경쓰지 않았다는 것을 알 수 있습니다. 매우 반성해야할 부분입니다. 다시 한번 강조드리면 블로그가 홈페이지와 다른 점은 기업 관련 스토리를 다루면서 고객과의 커뮤니케이션 공간으로 활용 해야 한다는 점입니다. 홈페이지와 블로그는 톤과 느낌이 달라야 합니다.  끝으로 성공적인 블로그 커뮤...