AWS, java, S3

1. 기존 메소드


AmazonS3 s3Client = new AmazonS3Client(new BasicAWSCredentials(accessKey, secretKey));

 - 해당 메소드 수석을 참고하면 아래와 같다.

/**
* Constructs a new Amazon S3 client using the specified AWS credentials to
* access Amazon S3.
*
* @param awsCredentials
* The AWS credentials to use when making requests to Amazon S3
* with this client.
*
* @see AmazonS3Client#AmazonS3Client()
* @see AmazonS3Client#AmazonS3Client(AWSCredentials, ClientConfiguration)
* @deprecated use {@link AmazonS3ClientBuilder#withCredentials(AWSCredentialsProvider)}
*/
@Deprecated
public AmazonS3Client(AWSCredentials awsCredentials) {
this(awsCredentials, configFactory.getConfig());
}


2. 변경된 메소드

BasicAWSCredentials creds = new BasicAWSCredentials(accessKey, secretKey);
AmazonS3 s3client = AmazonS3ClientBuilder.standard().withCredentials(new AWSStaticCredentialsProvider(creds)).build();


 - 리전을 추가할 경우

.withRegion(Regions.valueOf("AP_NORTHEAST_2"))


'프로그래밍 > JAVA' 카테고리의 다른 글

AWS s3 upload source Tip  (0) 2018.06.05
json schema validator 사용하기 - 02  (0) 2018.05.23
AmazonS3Client, deprecated!!!  (0) 2018.05.21
json schema validator 사용하기 - 01  (0) 2018.04.18
시스템 종료 후 File 삭제  (0) 2018.04.12
Java에서 Tuple 사용하기.  (0) 2018.04.11

1. safari 11.1 update

 - 기존 Safari (mac or ios)에서는 정상적으로 동작하던 ajax가 safari 11.1 버전 업데이트를 진행한 후로 오류가 발생함.

 - ajax 내 error 메시지가 다음과 같다

Failed to load resource: The operation couldn’t be completed. Protocol error

 - Chrome이나 Firefox 등 최신버전에서는 문제가 없었다.


2. 원인 

 - Webkit 버그!!!! (Webkit 빌드 r230963)

 - input[type=file] 또는 formData 내에 file 

<input type="file"/>

 - ajax 내 data에 빈 파일 필드가 전송되면 발생함.

 - (전 IOS 11.3에서 발생하여 수정 했습니다.)


3. 해결책

 - https://trac.webkit.org/changeset/230963/webkit : 수정됨.

 - 임시 해결책


frmData.delete("file"); //var frmData = new FormData() 를 사용할 경우

or

$("input[type=file]").each(function () {
var tmpValue = $(this).val();
if (tmpValue === undefined || tmpValue === "") {
$(this).remove();
}
});


'프로그래밍 > 삽질기...' 카테고리의 다른 글

Safari 11.1 업데이트 이후 ajax 버그  (0) 2018.05.17

그냥 평소에 자주 쓰는 툴 및 사이트 공유...


1. 웹사이트

 1) jwt.io

 - 바로가기

 - jwt 를 손쉽게 decoded 할 수 있는 곳


 2) jsonlint.com

 - 바로가기

 - JSON Validation 해주고, beautify 해준다.


2. Chrome Extension

 1) Css viewer

- 바로가기

- 웹페이지 내 css를 손쉽게 볼 수 있다.


 2) postman

- 바로가기

- 너무 유명한 Rest Client


 3) editthiscookie

- 바로가기

- 쿠키값을 조작하기 편한 extension


 4) JWT Analyzer & Inspector

- 바로가기

- 위에 웹사이트 탭에 있는 jwt.io처럼 jwt 값을 손쉽게 decoded 해주는 툴


 5) JSONView

- 바로가기

- Json 파일을 이쁘게 보여줌.


1. Job 정보 가지고 오기.

 - 개발하는 중에 ItemReader, ItemProcessor, ItemWriter 등에서 job정보를 가지고 와야 할 때가 있다.

 - 간단한 소스 추가로 사용 가능하다.


2. 소스

private Long jobId;

@BeforeStep
public void getInterstepData(StepExecution stepExecution) {
JobExecution jobExecution = stepExecution.getJobExecution();
this.jobId = jobExecution.getJobId();
}

 - 비슷한 방식으로 확장해서 사용 가능 할 듯.


* 참고 링크


1. --save

 - 응용 프로그램을 실행하는 데 필요한 패키지를 저장하는 데 사용

 - '-S'로 줄여 쓸 수 있음.

 - package.json 이 존재하면  dependencies 에 추가된다.


npm install [package_name] --save

or

npm install [package_name] -S


2. --save-dev

 - 개발 목적으로 패키지를 저장하는 데 사용

 - '-D'로 줄여 쓸 수 있다.

 - package.json 이 존재하면 devDependencies 에 추가된다.

 - mocha 등 unit test 등 추가할 때 사용...


npm install [package_name] -save-dev

or

npm install [package_name] -D


'프로그래밍 > Node.js' 카테고리의 다른 글

npm에서 --save, --save-dev 옵션  (0) 2018.05.02
Mongoose 사용하기.  (0) 2016.08.22

1. vue.js 내 v-show 를 사용해서 만들면 된다.

 - loader는 fontawesome를 사용했다.


오랜만에 쓰는듯.......


1. 풀스택개발자

 - 웹개발을 시작하면서, 내 프로젝트를 만들어보고 싶어서 Cafe24 호스팅부터 시작한 공부가 이제는 AWS, GCP 등 cloud까지 사용하고, 

 - 반복해서 html 만들고 jsp tag 쓰는게 귀찮아서 시작한 Front framework 공부!! 현재는 vue.js와 angular를 사용해보고, 개인프로젝트들을 진행.(vue는 사랑입니다.)

 - 음.... 이러다 보니

 - 평소 업무를 진행하면서 어떤 신규 프로젝트를 진행할 때, 음~ 이건 이런걸 쓰면 좋고, 저럴 때 저걸 쓰면 좋지~ 라는 생각이 든다. 그리고 좀 더 빠르게 프로젝트를 진행할 수 있는 듯 하다. (미리 개인 프로젝트로 어느정도 해봐서 ㅋㅋ)

 - 이제는 일인지 취미생활인지 잘 모르게 되었지만, 현재 이 생활이 난 재미나다.


2. 데이터분석

 - 최근 이곳 저곳 텍스트들을 모아서, 나름 의미있는 데이터를 뽑아보려고 노력중인데... 쉽지가 않다.

 - 일단 텍스트를 모으는것부터가 굉장히 힘들다.... 

 - 그래도 데이터를 가지고 노는게 참 재미나다. 

 - 이전에는 새로운 정보를 새로운 페이지로 보여주는게 재미있었다면, 이제는 무언가를 사용자가 원하는 형태로 가공해서 재미나게 보여주는걸 즐기는 듯 하다.


3. github

 - 개인용 vcs를 사용하다보니, github을 많이 방치하게 된다.

 - 어느정도 정리된 소스를 github에 push해서 삽질하시는 분들에게 아주 쬐금이라도... 도움을 드릴 수 있게~ 공유를 다시 시작해야겠다.

 - 100일 연속 커밋을 도전도... 해볼까... 싶다.


4. 블록체인

 - 책을 아주 잠깐 봤는데... 굉장히 매력적인 분야인듯.

 - 좀 더 깊게 공부해봐야겠다.

'개인 > 단상' 카테고리의 다른 글

2018-06-05 : Cloud Native Day in seoul  (0) 2018.06.05
2018-05-01  (0) 2018.05.01
Aws re:invent 2017! 후기  (0) 2017.12.02
2016-10-01  (0) 2016.10.01
2016-09-08  (0) 2016.09.08

1. javascript 버전.

<script>
function clearOnlyJavascript(eleName) {
var ele = document.getElementsByName(eleName);
for (var i = 0; i < ele.length; i++) {
ele[i].checked = false;
}
}
</script>

2. jquery 버전

 - jquery 버전에 따라 prop 의 옵션이 달라질 수 있습니다. 참고하세요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#clearBtnJquery").click(function () {
console.log($("input[name=\"radioButton\"]").prop("checked", false));
});
})
</script>


3. 풀소스


1. 프로젝트 생성하기(vue-cli)

 1) vue-cli 설치하기.

 - Global로 설치하기

npm install  -g vue-cli


 2) project 생성하기.

mkdir {PROJECT_NAME}


cd {PROJECT_NAME}


vue init webpack-simple


 - vue 명령어

 

 설명

 비고

 init

 generate a new project from a template

 vue init {project template type} {PROJECT_NAME}

 list

 list available official templates

 vue list <-- 아래 내용 참고

 build

 prototype a new project

 

 help

 display help for [cmd] 


 - vue template

 

 설명

비고 

 browserify

 A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

 

 browserify-simple

 A simple Browserify + vueify setup for quick prototyping.

 

 pwa

 PWA template for vue-cli based on the webpack template

 

 simple

 The simplest possible Vue setup in a single HTML file

 하나의 index.html 파일만 생성해줌.

 webpack

 A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

 

 webpack-simple

 A simple Webpack + vue-loader setup for quick prototyping.

 


2. 프로젝트 분석하기

 1) 기본 구조 설명


 2) 상세설명

  (1) main.js

- 프로젝트의 기본이 되는 파일입니다. 프로젝트의 Entry Point 이기도 하다.

  (2) App.vue

- Root 컴포넌트

- Vue를 로드하고 해당 파일을 로드하면서 어플리케이션을 초기화한다.

- 참고로 *.vue 파일은 "HTML 템플릿", 단일 vue 컴포넌트를 정의하는 javascript, 특정 스타일 css 의 조합이다.


  (3) assets

- 외부 자원들에 대한 폴더이다. image, css 등이 들어간다.


 3) 그외 설명

  (1) components

- vue 파일을 저장하는 곳.

- 입맛에 따라 알아서 변경해서 쓰면 된다.


  (2) route

-backend에서 제공하는 라우팅 기능을 제공함.

- index.js 관련해서는 추후 설명할 예정


3. 프로젝트 시작하기

 1) 위에서 생성한 프로젝트 내에서

 2) 우선 npm으로 라이브러리들을 설치해야한다.

npm install


 3) 개발버전으로 프로젝트를 시작하자.

  - compile, ESLint 를 진행하고, 로컬 서버를 동작시켜준다.

  - ESLint, hot-reload 동작(변경된 상태만 변경)

npm run dev


 4) 실서비스 시

  - webpack 설정등에 따라 달라지겠지만, /dist 폴더로 hash 값이 포함된 파일명으로 파일들이 생성됨.

npm run build



참고링크

 - https://medium.com/witinweb/vue-cli-%EB%A1%9C-vue-js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-browserify-webpack-22582202cd52

 - https://blog.storyg.co/vue-js-posts/todos-tutorial

1. Vue란?

 - front-end framework

 - 배우기 쉽다.

 - view에 최적화 되어 있다.

 - MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인


2. 간단하게 시작해보자.

 - index.html 파일을 만들고, 아래 링크를 포함한 페이지를 만들어보자.

https://unpkg.com/vue


or

https://cdn.jsdelivr.net/npm/vue


 1) index.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<p>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#root',
data: {
msg: 'Hello Vue.js!'
}
})
</script>
</body>
</html>

  - 결과


3. Declarative Rendering

  - 디렉티브는 vue에서 제공하는 속성, v- 로 접두어가 붙는다.


 1) v-if

  - 조건문 사용할 때 사용.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<div v-if="type === 'LOGIN'">로그인 되었습니다.</div>
<div v-else-if="type === 'LOGOUT'">로그아웃 되었습니다.</div>
<div v-else> 로그인이 필요합니다.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
type: "LOGOUT"
}
})
</script>
</body>
</html>


  - template 에도 사용가능

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<template v-if="type === 'LOGIN'">
<div>
로그인 되었습니다.
</div>
</template>
<template v-else-if="type === 'LOGOUT'">
<div>
로그아웃 되었습니다.
</div>
</template>
<template v-else>
<div>
로그인이 필요합니다.
</div>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
type: "LOGIN"
}
})
</script>
</body>
</html>




 2) v-show

  - 보여질지, 숨길지에 대해서 설정할 수 있는 값이다.

  - 일단 뷰 렌더링이 진행되고, css로 숨길지 나타낼지를 정한다.

  - 샘플코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<div v-show="visible">보이나?</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
visible: true
}
})
</script>
</body>
</html>

  - v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높다. 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장한다..

 - chrome 개발자 console 창에 'app.visible = false;'를 입력해보면 해당 div가 사라지는 걸 확인 할 수 있다.


 3) v-for

  - for loop

  - 목록 구현할때 많이 쓰이는 디렉티브

  - 샘플 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<ul>
<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#root',
data: {
fruits: ['apple', 'banana', 'orange']
}
})
</script>
</body>
</html>

  - 결과



 4) 기타

  - v-on, v-bind, v-model 등이 있다.



* 참고

 - https://vuejs.org/v2/guide/index.html , https://kr.vuejs.org/v2/guide/index.html

+ Recent posts