개발자의 재능기부 == 자기개발

개발자에게 재능기부란? 재능기부를 가장하여 기술 사용과 습득의 목마름을 해소한 경험(자기개발?)을 기록으로 남겨봅니다.

본 내용에서 최대한 기술적인 이야기를 빼려고 노력했습니다.

기술 사용과 습득의 목마름..

AWS

AWS를 다룰 줄 아는 것이 기술스택이 된 요즘에 개발자로서 AWS를 공부해야겠다는 생각을 많이들 하고 있을 것 입니다. 저도 오래 전부터 그런 생각을 가지고 세미나도 참여해보고, 관련 이론들도 찾아보고 했지만, 역시 개발자는 직접해보는 것이 최고라고 생각합니다!

그렇지만! EC2에 어플리케이션 한번 올려보고, S3에 파일 한번 올려보면 끝인 것일까요? 웹어플리케이션을 개발하며 localhost:8080을 띄우고 끝이라는 상황과 비슷하지 않을까요?

아쉽지만, 제 주변에는 AWS를 운용하고 있는 환경이 없었습니다.

재능기부의 발단

개발자로서 지인을 위해 해줄 수 있는 것이 무엇이 있을까요?

약 한달 전 가장 친한 친구 중 한명의 결혼 소식을 들려왔습니다! 결혼할 친구는 노래 잘 부르는 친구에게 축가를, 모델 일을 하고 있는 멋진 친구에게는 사회를 부탁했고

개발자 부심 넘치는 저는 "내가 웨딩 홈페이지 만들어줄게!" 로 친구를 위한 재능기부를 하게 되었습니다.

사실 친구를 위한 뿌듯한 마음보다는,

'AWS 써봐야지, Spring Boot 최신버전 써봐야지, Angularjs2도 써봐야지'

라는 생각으로 설레었습니다.

재능기부 시작

1. 디자인,마크업?

첫 번째 난관은 바로 디자인과 마크업입니다.

처음에는 대충 bootstrap이나 material design을 사용하면 될 것으로 생각했으나 국내 웨딩 홈페이지를 제공하는 업체가 제 생각 이상으로 높은 퀄리티의 웨딩 홈페이지를 제공하고 있었습니다.

그렇게 고민하던 중 찾은 것은 `테마 마켓 플레이스`입니다.

테마 마켓플레이스는 테마 상점의 일종이다. 보통의 테마 상점이 자신들이 직접 만든 테마만 판매하는 데 반해, 마켓플레이스는 디자이너와 개발자가 자신들의 테마를 가져와 팔고 마켓플레이스에 수수료를 내는 플랫폼이다.

webactually 워드프레스를 둘러싼 비즈니스 이야기 Part1 에서는 이런 종류의 테마 상점 중 가장 유명한 것은 엔바토(Envato)라는 대형 디자인 기업에서 만든 테마포레스트라고 소개했습니다.

다양한 종류의 무수히 많은 테마들이 올라와있고, 가격도 비교적 합리적이라고 생각이 들었습니다. 랜덤으로 유료 테마를 무료로 제공하는 이벤트도 있었고, 처음부터 무료로 등록된 테마가 많이 있습니다.

주의해야할 것은 `라이센스`입니다.

테마포레스트에는 Ragular 라이센스와 Extended 라이센스가 있습니다.

Ragular
구매자 본인이나 구매자의 고객 1인이 단 하나의 최종 제작물에 사용할 수 있으며, 이 최종 제작물은 사용자에게 비용을 받지 않아야 한다.
Extended
구매자 본인이나 구매자의 고객 1인이 단 하나의 최종 제작물에 사용할 수 있으며, 이 최종 제작물은 사용자에게 비용을 받고 팔아도 된다.

Extended 라이센스는 Rangular 라이센스보다 40~50배 비쌉니다. 친구를 위한 것이니, Rangular 라이센스면 되겠다고 생각이 듭니다.

Github 공유는 안됩니다!

열심히 검색으로 찾아본 결과 Rangular 라이센스로는 소스코드를 공개 저장소에 올릴 수 없다는 결론이 나왔습니다. 라이브러리 소스는 ignore 처리를..!

2. 어플리케이션 개발 및 환경 구축

해야할 것은!

신규 프로젝트 환경 셋팅(Spring + Angularjs2)
- 웨딩 페이지는 싱글 페이지 서버 템플릿 환경
- CMS는 SPA Angularjs2 환경
Spring, AWS 간 연동(S3 서버 통신, 리소스 등)
구매한 테마를 개발환경(Webpack)에 맞게 셋팅
AWS 환경 구축
- EC2
- RDS
- S3
- Cloudfront
- Route53

1. Spring Boot + Angularjs2 + Webpack 조합 개발

재능기부이지만 내 연습장 같은 프로젝트이기에, BackEnd는 Spring Framework를 연습해볼 수 있는 환경으로, FrontEnd는 전부터 꼭 해보고싶었던 Angularjs2를 선택했습니다.

Spring Framework와 Angularjs2를 단일 프로젝트 환경에서 사용하기 위하여 Webpack으로 번들링하여 사용하였습니다.(Angularjs2는 angular-cli를 권장하지만, angular-cli가 생성해주는 어플리케이션은 완전 독립된 프론트엔드 환경이라고 생각이 들어서)

Angularjs2 + Webpack 조합

1. Angularjs2와 Webpack을 함께 사용하기 위한 TypeScript의 설정

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

2. Webpack에서 Angularjs2 Reflect Scope 문제를 해결하기 위하여 Provide Plugin을 활용!

webpack.config.js

plugins: [
        ...
        new webpack.ProvidePlugin({
            ...
            Reflect: 'core-js/es7/reflect'
            ...
        })
        ...
      ]

3.Webpack과 TypeScript의 동시 watch 및 build를 위한 scripts와 dependency 환경!

package.json

{
  ...
  "scripts": {
    "typescript:watch": "tsc -w",
    "webpack:watch": "webpack --watch",
    "watch": "npm-run-all --parallel typescript:watch webpack:watch",
    "build": "tsc && webpack --progress"
  },
  ...
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.14",
    "npm-run-all": "^4.0.2",
    "typescript": "~2.0.0",
    "webpack": "~1.13.3"
  }
}

Angularjs2 사용 간단 후기

Angularjs1을 많이 사용했었는데, 느낌이 많이 비슷하여 이해하기는 쉬웠습니다.
TypeScript는 개발하면서 Java를 개발하는 느낌이였습니다. 굉장히 좋았습니다. 인텔리J의 자동완성 기능이 아주 잘 지원되어서 개발이 정말 Script스럽지않게 좋았습니다.

2. Spring + AWS 개발

웨딩 홈페이지에 당사자들이 앨범을 관리할 수 있도록 CMS를 제공해주려고 합니다. 그래서 서버통신으로 AWS S3에 파일을 업로드해야 합니다. 생각보다 간단했습니다.

AWS는 Java를 위한 AWS SDK를 제공해줄 뿐만아니라 AWS Docs에 매우 쉽고 간단하게 사용법이 정리가 되어있습니다.

AwsConfig.java

@Configuration
public class AwsConfig {
    @Value("${cloud.aws.credentials.accessKey}")
    private String accessKey;
    @Value("${cloud.aws.credentials.secretKey}")
    private String secretKey;

    @Bean
    public BasicAWSCredentials basicAWSCredentials() {
        return new BasicAWSCredentials(accessKey, secretKey);
    }
    @Bean
    public AmazonS3Client amazonS3Client(AWSCredentials awsCredentials) {
        AmazonS3Client amazonS3Client = new AmazonS3Client(awsCredentials);
        amazonS3Client.setRegion(Region.getRegion(Regions.AP_NORTHEAST_2));
        return amazonS3Client;
    }
}

인증 방식은 AccessKey와 SecretKey를 통한 일반적인 Client 인증 방식을 가지고 있으며, SDK가 제공해주는 AmazonS3Client를 통해 쉽게 기능을 사용할 수 있었습니다.

이 과정에서 AWS의 IAM 관련 권한 및 보안설정을 어느정도 이해할 수 있게 되었습니다!

제가 사용한 RDS 데이터베이스(MySql) 연동은 일반 데이터베이스 연동과 완전히 같았습니다!

3. AWS 환경 구성

처음에는 EC2에서 모든 것을 해결하려했습니다. 어차피 리눅스 서버이니 웹서버 올리고, DB올리고, 어플리케이션 올려야지 했습니다.

그러나 각각의 역할을 쉽게, 간단히 AWS에서 지원을 해주는데 EC2에서 모든 것을 하는 것이 약간 바보같다는 생각으로 생각이 바뀌었고, AWS를 많이 알고 싶어서도 여러가지 제품군을 써보고 싶었습니다.

~~가장 중요한 것은~~ 세 가지 제품의 free tier가 각 각 제품군마다 따로 잡혀서, 과금의 가능성을 줄여줄 수 있었습니다.

EC2는 서버, S3는 이미지 저장소, RDS는 앨범 정보 저장소로 사용했습니다. 아직 Cloudfront에 대한 설명을 하지 못했는데요, 이것은 바로 밑 비용을 줄이기 위한 노력에서 설명하겠습니다.

3. 비용을 줄이기 위한 노력들

이미지 최적화

웨딩 홈페이지인만큼 사진의 퀄리티가 중요했습니다. 그래서 원본 사진을 크기만 수정하여 올렸습니다. 단일 페이지 환경이며, 이미지를 굉장히 많이 사용하였습니다. 그런데 이미지 한개당 크기가.. 250~350kb.. 원래 이런가 해서, 다른 큰 이미지를 쓰는 여러 사이트를 돌아다녀보았지만, 정말 고해상도 이미지가 아니고서야 저런 이미지 크기를 사용하는 사람은 없었습니다.

구글링으로 알게 된 문제점은 이미지 최적화!

포토샵으로 이미지를 최적화(온라인 툴도 괜찬다고 합니다)하였더니 용량이 거의 60~70%가 감소했습니다.

그동안 그냥 받아서 쓰기만했습니다. 디자이너, 퍼블리셔님들 감사합니다.

AWS Cloudfront

웨딩 홈페이지가 어느정도의 트래픽이 들어올지 전혀 예상되지 않기 때문에, 수치로는 계산하기 힘들었으므로, 최대한 안전하게(나의 과금을) 하고 싶었습니다.

문제로 보였던 부분은 S3의 cache-control입니다. 모든 이미지들이 200 OK를 뱉고 있었습니다. 브라우저가 캐시를 해야하는데..! cache-control은 no-cache..!

구글링하면 분명 S3에 cache-control이 있는데.. 구글링된 자료와 현재의 AWS 모양이 많이 달랐습니다. 그리고 S3의 cache-control을 검색했는데 Cloudfront가 매우 많이 나왔습니다.

대충 찾아본 Cloudfront는 CDN 역할을 해준다는 글을 보고 다 읽지않고 다시 구글링을 계속 했습니다. 제가 필요한건 CDN과는 거리가 멀었기 때문입니다.

다들 그런 경험 많지않으신가요? 대체로 오랫동안 구글링에서 답을 찾지 못했던 문제는 처음 보았던 글이 답이였던..?

정확히 파악은 하지 못했지만, 이전 S3의 cache-control 기능이 Cloudfront 쪽으로 옮겨진 것이라고 생각됩니다.

결론으로는 S3와 Cloudfront를 연결하여 cache-control로 브라우저 캐시하게 할 수 있었다 입니다.

서버 메모리 캐시

데이터베이스를 매번 조회하지 않도록, 24시간에 한번씩 메모리에 캐시하도록 했습니다.

무료 서비스 이용

소셜 댓글 기능은 만들어놓은 것이 없기때문에, 다른 모든 작업보다 더 큰 작업이 될 수도 있으며, 저장소 또한 늘어날 수 있습니다. 그래서 소셜댓글 서비스인 Disqus를 그냥 붙였습니다.

비용과 시간을 절약할 수 있었습니다.

재능기부 후기

재능기부

친구는 예쁘고 깔끔한 웨딩 홈페이지가 나왔다고 좋아합니다. 그래서 일단 재능기부의 의미에서는 성공적이였습니다.

기술 사용과 습득의 목마름 해소

만들어야할 목표가 있고, 의미가 있었기에 기술을 사용하는 것의 범위가 명확하고 깊어질 수 있었던 것 같습니다.

웨딩 홈페이지라는 특성을 고려하여야 했고, 비용을 최소화할 수 있도록 여러가지 시도와 다양한 방법들을 찾아보고 직접 해볼 수 있었다는 것이, 로컬환경에서 구동하였던 개인 프로젝트와는 깊이가 달랐던 것 같습니다. 좋은 경험이였다고 자신합니다.

마무리

저와 같이 기술 사용이나 습득에 목말라있고, 서비스를 운영할만한 아이템이 없는 분들은 친한 주변 사람들에게 이런 재능기부를 강력 추천드립니다(기회가 있다면). 내가 가진 기술로 누군가를 만족시킬 수 있다는 일은 정말 기분 좋은 일인 것 같습니다.

'생각' 카테고리의 다른 글

[2019-02-03] 3년차 웹 개발자 (0)	2019.12.29
[2018-11-12] 프로젝트가 장난이야?! (0)	2019.12.29
버그 트래킹 일지(5) - 대망의 적용 배포 그리고 결론 (0)	2017.03.26
버그 트래킹 일지(4) - 의심하고 또 의심하자 (0)	2017.03.26
버그 트래킹 일지(3) - 임시방편보단 장기적으로 (1)	2017.03.26

kingbbode

개발자의 재능기부 == 자기개발

기술 사용과 습득의 목마름..

AWS

최신 프레임워크 & 라이브러리

재능기부의 발단

재능기부 시작

1. 디자인,마크업?

첫 번째 난관은 바로 디자인과 마크업입니다.

그렇게 고민하던 중 찾은 것은 `테마 마켓 플레이스`입니다.

주의해야할 것은 `라이센스`입니다.

Github 공유는 안됩니다!

2. 어플리케이션 개발 및 환경 구축

해야할 것은!

1. Spring Boot + Angularjs2 + Webpack 조합 개발

Angularjs2 + Webpack 조합

Angularjs2 사용 간단 후기

2. Spring + AWS 개발

3. AWS 환경 구성

3. 비용을 줄이기 위한 노력들

이미지 최적화

AWS Cloudfront

서버 메모리 캐시

무료 서비스 이용

재능기부 후기

재능기부

기술 사용과 습득의 목마름 해소

마무리

'생각' 카테고리의 다른 글

댓글

티스토리툴바

개발자의 재능기부 == 자기개발

기술 사용과 습득의 목마름..

AWS

최신 프레임워크 & 라이브러리

재능기부의 발단

재능기부 시작

1. 디자인,마크업?

첫 번째 난관은 바로 디자인과 마크업입니다.

그렇게 고민하던 중 찾은 것은 테마 마켓 플레이스입니다.

주의해야할 것은 라이센스입니다.

Github 공유는 안됩니다!

2. 어플리케이션 개발 및 환경 구축

해야할 것은!

1. Spring Boot + Angularjs2 + Webpack 조합 개발

Angularjs2 + Webpack 조합

Angularjs2 사용 간단 후기

2. Spring + AWS 개발

3. AWS 환경 구성

3. 비용을 줄이기 위한 노력들

이미지 최적화

AWS Cloudfront

서버 메모리 캐시

무료 서비스 이용

재능기부 후기

재능기부

기술 사용과 습득의 목마름 해소

마무리

'생각' 카테고리의 다른 글

관련글

댓글

티스토리툴바

그렇게 고민하던 중 찾은 것은 `테마 마켓 플레이스`입니다.

주의해야할 것은 `라이센스`입니다.