Program Development

서론 Angular를 사용하면서 Router(이하 라우터)를 사용하지 않는 개발자는 없을 것이다. 물론 Router를 사용하지는 않을 수 있겠지만 그렇게 되면 성능상 손해를 보게 될 것이다. 그 이유는 라우터를 사용하지 않고 페이지를 전환하게 되면 Angular의 특성상 lazy 로딩이 설정 되어 있지 않은 모든 모듈 및 컴포넌트를 로딩 하게 되는데 이것이 성능에 큰 손해를 주게 된다. 이번 포스팅에서는 라우터를 사용 할 경우 URL에 있는 파라미터를 가져오는 방법에 대해서 설명하며 포스팅에서 사용한 Angular의 버전은 5버전이며 6버전 까지 나온 상태이다. 라우터를 사용한 값 전달 및 가져오기 예를 들어 value1이라는 값을 전달하고 할 때 라우터를 사용하여 값을 전달 할 수 있는 방법은 두가지가..

[서론] 나는 지금 참여하고 있는 플젝에서는 Backbone을 사용하고 있다. Backbone은 배포를 할 때 따로 빌드를 해주어서 배포를 하지 않는다. 그냥 javascript로 이루어 져있기 때문에 FTP를 이용해서 서버에 올려만 주면 된다. 하지만 Angular를 사용하여 Typescript로 Application을 만들게 되면 이야기는 틀려진다. 이번 포스팅에서는 Angular를 사용해서 서버에 배포하는 방법에 대해서 설명한다. 서버 환경은 ubuntu 17, apache이다. Angular는 5버전이다. [빌드하기] 먼저 Angular APP을 Typescript로 구현했다고 생각하고 진행한다. Angular를 개발하면 angular-cli를 사용하게 될텐데 (물론 안쓰고도 가능하다.) angu..

Mybatis를 사용하면서 하나의 statement에서 여러 테이블에 접근하여 insert나 update를 해야 하는 경우가 있다. Mybatis를 어느정도 사용해보았다면 하나의 또는 에 여러개의 insert 혹은 update쿼리를 적으면 동작할 것이라고 생각할 수 있다.하지만 실제로 저렇게 하면 문법오류를 계속해서 발생 시킨다. 왜그럴까?그것은 mysql jdbc 프로토콜에의 파라미터 값으로 몇가지 설정을 할 수 있는데 그중에 allowMultiQueries 값이 있다. 이것은 기본적으로 설정을 하지 않으면 false값으로 되어 있어서 한번에 다중 쿼리를 처리 하지 못하도록 하고 있다. 이값을 true로 지정 해주면 문법 오류 없이 제대로 동작하는 것을 확인 할 수 있다. ex) achieve.db.u..

[서론]최근 몇 년간 클라우드를 사용하여 서비스를 하는 회사들이 많아졌다. 대표적인 클라우드 회사로는 Amazone Web Services, Microsoft Azure, IBM Cloud Computing 그리고 Google Cloud Platform 이렇게 4개의 회사가 클라우드 회사로 유명한 회사들이다. 여기서 구글은 마지막에 위치한 것처럼 서비스 사용랭킹 4위에 마크되어 있었다.대부분의 많은 회사들은 AWS를 사용하겠지만 이번에 내가 속한 플젝에서 AWS냐 Google Cloud Platform이냐를 놓고 고민을 하였다. 긴 고민 끝에 내린 결정은 AWS보다 Google Cloud Platform의 사용이였다. 이유는 AWS는 아마존이라는 아주 큰 전자상거래 사이트를 운영하는 회사이며 이 사이트의..

[서론]8년전 C를 처음 접하고 그 과목 F를 맞고 펑펑 놀다가 4학년 즈음 부터는 java를 주로 사용하면서 C를 사용조차 안했다. 이번에 한 오픈소스를 보면서(아직.. 시작 단계) C를 접하게 되었는데 정확히는 C++이지만, 포인터 개념이 너무나도 기억이 나지 않아서 정리하기로 마음 먹었다.포인터는 처음 C를 접했을 때 상당히 이해하기 힘들었던 부분이 였다. 그 당시에는 malloc이 어떻게 동작하는지도 모르고 사용하고 포인터는 이해 조차 못한채 사용을 안했던거 같았는데 그래도 지금 보니까 이렇게 재밌는게 있을 수가 있나? 라는 생각이 든다. 이번 포스팅 에서는 간단하게 3줄의 포인터가 사용된 소스에 대해서 그림과 함께 쉽게 정리를 해놓을 것이다. [포인터 기초] #include int main(in..

[서론] 이번에는 두 개 영상의 시간 정보를 가지고 두 영상을 하나의 영상으로 합쳐주는 프로그램을 만들어보고 싶었다. 하나의 단일 프로그램이 아니라 서버에서 클라이언트로 부터 전달 받은 영상의 시간 정보를 가지고 새로운 영상을 생성하고 사용자는 그것을 클라이언트가 다운로드 받는 형태로 만들어보고자 했다. 영상을 직접 자르고 붙여서 하나의 파일로 만들어주는 것을 직접 구현하기 전에 사용할 수 있는 라이브러리 및 프로그램을 찾아 보았다. 그렇게 해서 찾은 프로그램이 FFMPEG이라는 영상 관련 프로그램이였는데 FFMPEG은 상당히 유명한 프로그램 이였다. FFMPEG에 대한 설명은 링크를 타고 가서 볼 수 있다. FFMPEG은 서버에 별도로 설치를 하고 터미널을 통해서 명령어를 받아서 동작을 하는데 서버에서..

[서론] 인터넷상에서 정보가 존재하는 위치는 URL을 사용하여 접근하게 된다. 접근하고자 하는 URL의 길이가 길어지게 되면 URL Shortener를 사용하여 줄여서 사용 할 수 있게 된다. URL Shortener API를 제공하는 곳은 많지만 이번 포스팅에서는 구글을 사용하여 포스팅을 진행 할 것이며, 이번 포스팅에서는 URL Shortener의 동작 원리와 사용법에 대해서 설명한다. [URL Shortener 원리] https://goo.gl/ 해당 URL에 접근하여 Short URL을 발급 받으면 https://goo.gl/UeyLrd 과 같은 형식의 짧은 URL을 받게 된다. 해당 URL은 나의 블로그로 연결 해놓았기 때문에 해당 URL로 접근하게 되면 해당 블로그로 접근하게 된다. 그렇다면 ..

[서론] 웹 사이트를 구축 하면 이미지를 사용한 작업은 무조건 발생하게 된다. Angular를 이용해서 간단한 웹사이트를 제작하던중 이미지에 접근 하려고 하는데 자꾸 404가 반환되었다. 이번 포스팅에서는 Angular CLI를 사용할 경우 이미지에 어떻게 접근할 수 있는지 알아보자. [기본 CLI 설정] Angular CLI를 사용해서 개발을 시작하면 .angular-cli.json이라는 파일이 만들어진다. 해당 파일에서는 index파일을 어떤 파일로 설정 할 것이며 style에 사용할 css경로 설정 등이 이루어진다. 여기서 이미지를 사용하기 위해 assets라는 설정이 있는데 해당 설정안에 선언된 위치의 파일에만 접근이 가능하게 된다. { "$schema": "./node_modules/@angul..

[서론]Angular는 Component(이하 컴포넌트)를 기반으로 개발을 진행하게 된다. 컴포넌트를 기반으로 개발을 하다 보면 컴포넌트들 간의 상하관계가 발생하고 이렇게 상하 관계가 발생 하게 되면 특정 컴포넌트의 이벤트에 의한 값이 자신이 포함 하고 있는 하위 컴포터넌트로 전달 되거나 혹은 그 반대로 자신이 포함하고 있는 하위 컴포터넌트의 이벤트 값을 받아서 처리 해야 할 수도 있다. 이번 포스티에서는 컴포넌트 간의 이벤트 전달에 대해서 설명한다. Angular에서는 컴포터넌트 들이 서로 데이터를 전달 받고 전달할 수 있도록 @Inputs(), @Output() 어노테이션으로 변수를 선언 할 수 있는데, @Input의 경우 하위 컴포넌트로 값을 전달 하기 위한 변수 설정이다. @Output같은 경우는..

[서론] Angular를 사용하면 guard(이하 가드)라는 용어를 볼 수 있다. 가드란 영어사전에서 찾아보면 경비, 보호, 수비 라는 뜻으로 사용된다. Angular에서 가드는 Router를 사용하면서 접하게 되는데 간단하게 설명하면 라우팅 시 해당 url에 대한 접근을 제어할 때 사용하는 녀석이다. 기본적으로 가드에는 4가지의 가드가 있다. 아래에는 4가지 가드에 대한 설명이다.CanActivate 가드 : 해당 가드는 라우터에 대해서 접근이 가능한지 불가능 한지 접근 권한을 체크 하는 기능을 한다. 해당 가드를 사용 하고자 한다면 구현하고자 하는 가드 클래스에 CanActivate 인터페이스 모듈을 구현 해야하며 해당 인터페이스에는 canActivate(route: ActivatedRouteSnap..