프론트엔드 65

[번역] 마이크로 서비스 보안을 위한 10가지 팁

이번 아티클은 원작자 Scott Matteson의 동의를 얻어서 “10 tips for securing microservice architecture” 글을 번역하였습니다. 참고적으로 10가지 tip 부분은 최대한 원래 의미를 가져가면서 의역을 하였습니다.원본 : http://www.techrepublic.com/article/10-tips-for-securing-microservice-architecture/10 tips for securing microservice architecture 마이크로 서비스는 소프트웨어 개발을 가속화하고 개선하는 혁신적인 방법입니다. 이 용어는 개별적으로 개발할 수 있고 종종 특정 기능에 초점을 맞추는 응용 프로그램 하위 구성 요소 (재료 고려)를 나타냅니다. 예를 들어..

프론트엔드 2017.04.12

Node.js 기초부터 튼튼히 (1) 시작하기

Node.js에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요. ▶ Node.js 기초부터 튼튼히 (2) 내장 모듈 ▶ Node.js 기초부터 튼튼히 (3) 이벤트 Node.js 기초부터 튼튼히 (1) 소개 Node.js는 서버 환경에서 작동하는 자바스크립트입니다. 자바스크립트 기반의 서버 개발 환경이라니? 사실, 자바스크립트를 통해 서버 개발 환경에서 활용하기에는 속도가 문제가 되었어요. 노드JS 는 flicker(온라인 사진 공유 커뮤니티)에서 개발/운영을 담당하였던 Joynent 라는 회사의 라이언 달(Ryan Dahl)이라는 개발자가 만든 기술입니다. 당시 플리커에서 사진을 업로드하게 되면 업로드 진행상황에 대하여 알려주는 기능이 있었는데 파일 업로드 진행 현황을 서버 쿼리에 ..

프론트엔드 2017.04.04

CSS vs JS Animation: Which is Faster?

이 글은velocity.js 라는 javascript 기반 라이브러리가 애니메이션 효과에 대해서 jquery 라이브러리나 css보다도 성능이 우수하다는 글입니다.css가 jquery 애니메이션보다는 빠르다는건 이해가 잘 되는데자바스크립트 라이브러리가 css보다 빠르다는건 솔깃할만한 이야기 입니다.영문으로 되어 있어 번역 해봅니다.출처는https://davidwalsh.name/css-js-animation입니다. 구글이나 어도비 같은 회사들이 모바일 페이지에서 native app 같은 페이지 성능을 내는 이유는 무엇일까요?이 글은 velocity.js, GSAP 같은 DOM 라이브러리를 소개합니다. 이들은 jquery animation이나 css보다 빠릅니다. 우선 jquery부터 살펴봅니다.jquery..

프론트엔드 2017.03.28

API Security - (RESTful) API 구현시 보안처리 방법

보안은 IT시스템 구축 시 지금까지 그랬고 앞으로도 가장 주요한 분야입니다. 아무리 새롭고 편한 아키텍쳐 및 솔루션이라고 하더라도 보안이 문제가 있다면 기업에 적용 이유는 사라집니다. 이번에는 API기반의 서비스 구축 시 고려되어야 할 API 보안관련 내용을 정리해 보았습니다. OWASP의 REST Security Cheat Sheet 를 참조하지만 해당 내용이 현실적인 문제점을 놓치는 부분이 많아서 추가적이 사례를 정리해 보았습니다. Session management RESTful web services (API Service)는 API Key 또는 POST 방식의 body 영역에 포함된 cookie를 통해 필요 시 session 관리를 해야 합니다. 또한 username 이나 패스워드 token 또는..

프론트엔드 2017.03.15

flexbox 사용법

안녕하세요flexbox사용법을 소개합니다.flexbox는 점점 대세가 되어갈 레이아웃을 잡는 방법입니다.기존에는 float left, right, display : table-cell 심지어 css에 *을 붙여 핵을 쓰기도 했었습니다.이제 반응형을 포함하여 모든 브라우저에 동일하게 레이아웃을 잡을 수 있습니다. 이제 flexbox 사용법과 관련 속성을 설명합니다부모태그에 display : flex;를 줍니다. (display : inline-flex;도 가능) bizXpresswebponent.parentNode {display: flex;} 여기에 부모에 줄수 있는 css 속성들이 몇가지 있습니다.flex-direction: row || column || row-reverse || column-reve..

프론트엔드 2017.02.28

마이크로서비스(Microservices) 기술 뉴스

이번달은 마이크로서비스 관련 기술뉴스를 준비해 보았습니다. 주로 3개월 내에 작성된 국외의 Microservices 관련 뉴스 및 아티클들을 주제별로 정리해 보았습니다. [2017년 향후 전망] 2017년은 기존 아키턱처에서 Microservices 롤 전환하기 위한 방법으로 API의 적극적인 활용을 언급하고 있습니다.즉 Microservices의 대규모 이동보다는 API 기술을 활용한 점진적인 변화를 예상하고 있는데요. 이와 관견된 솔루션이나 기술들을 각 기업의 IT관계자 분들은 관심을 가져야 할것 으로 보입니다. 또한 각 기업의 Cloud전환, 즉 PaaS의 전환을 마이크로서비스의 중요한 요인으로 보입니다.니다. 제가 알기로 자사의 IT 서비스를 PaaS 전환을 진행하는 기업이 많지 않다고 알고 있는..

프론트엔드 2017.02.08

html 5.1을 소개합니다.

html 5.1을 소개합니다.html 5.0에 비해 지원하는 브라우저의 제한이 있고 많은 변화가 있는 것은 아닙니다.하지만 html의 중요성이 커지고 있고w3c가 웹을 선도하는 만큼 변화를 미리미리 파악하는 것은 중요합니다. 6~7가지 정도의 변화를 소개하겠습니다. 1. 우클릭으로 menuitem(context) 설정하는 기능입니다. 태그가 하위에 태그를 가지며 type 속성에 checkbox, command(함수를 실행할수 있게 해줌), radio 속성을 주는 것입니다.현재 파이어 폭스 49이상 에서만 지원합니다. 테스트 체크박스 커맨드 체크박스 선택된 래디오 버튼 선택안된 래디오 버튼 Disabled 된 항목p { padding: 10px; color: black; display: inline-blo..

프론트엔드 2017.01.25

d3.js 를 이용하여 차트 그리기(easy)

D3.js? D3.js의 D3은 Data-Driven Documents 의 약자로 많은 양의 데이터와 이미지들을 비쥬얼적으로 표현해주는 자바스크립트 라이브러리 입니다. D3.js는 Slant(https://www.slant.co/)라는 최고의 제품을 추천해주는 외국 커뮤니티 사이트내에서 '베스트 자바스크립트 드로잉 라이브로리 1위', '최고의 비쥬얼 데이터(차트/그리드) 드로잉 라이브러리 1위' 등 드로잉 자바스크립트 관련하여 높은 랭킹을 차지하고 있습니다. 그만큼 D3.js 는 좋은 오픈소스 드로잉 라이브러리고 할 수 있죠. 그럼 어떠한 자바스크립트 라이브러리인지 같이 간단하게 알아보도록 하겠습니다. D3.js - 간단한 차트 그리기 세팅하기 공식사이트( https://d3js.org/ ) 또는 git..

프론트엔드 2017.01.09

Windows에서 Docker Web application 개발환경 구축

Docker 나 컨테이너 가상화는 무엇인지 굳이 설명을 하지 않아도 이제는 매우 일반적으로 쓰이는 IT 용어가 되었습니다. Hybrid 기반의 Cloud 환경 및 Microservices 가 앞으로 인프라 아키텍처로써 발전해 나가고 있는 시점에 컨테이너 기반 가상화의 대표주자인 Docker의 중요성은 다시 설명 드리지 않아도 될 만큼 개발자나 인프라 담당자가 꼭 알아두어야 할 시대가 된것 같습니다. 그래도 추가적인 대략적인 개념이 필요하시면 아래 글을 읽어보시면 도움이 되겠습니다. 참조 :컨테이너 기반의 가상화 (Docker) [링크] 이번 아티클에서는 대부분 개발자가 이용하고 있는 윈도우 환경에서 Docker 환경을 구축하고 Tomcat 기반의 web application (war)을 Docker im..

프론트엔드 2017.01.04

간단한 빌드시스템 GULP !

간단하여 사용하기 편리한 gulp에 대해 간략한 소개와 설치 및 플러그인 사용을 함께 해보고자 합니다. (위의 사진 클릭시, gulpjs.com 링크이동) What is 'GULP'? - 컴파일 없이 파일을 최적화하고 생산성 있게 만들어주는 자동화된 빌드 시스템 노드 스트림의 장점을 이용하여, 필요에 맞게 플러그인들을 연결해 사용할 수 있습니다.2000개 이상의 플러그인들이 있어 필요에 맞게 사용하시면 됩니다.배우기도 쉽고, 사용하기도 쉬운 도구로 프로젝트를 수월하게 진행하도록 도와줄 것입니다. GULP 설치( ※ Gulp 는 Nodejs의 스트림을 기반으로 하기에 Node.js 설치가 선행되어야 합니다. ) 1. npm을 이용하여 전역에 gulp를 설치합니다. $ npm install gulp -g 2..

프론트엔드 2016.11.14