WEB개발이야기/Angular 2018. 7. 10.
Angular의 개요
Angular에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다. Angular란? 구글에서 만든 open-souce web application SPA(Single Page Application) 개발이 가능 다양한 플랫폼에 맞게 개발 가능 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 ) 아키텍쳐 Angular의 구성요소 Angular2를 구성하는 요소는 크게 4가지 입니다. 컴포넌트 (Component) 모듈 (Module) 서비스 (Service) 지시자 (Directive) 컴포넌트 (Component) Angular는 컴포넌트를 중심으로 개발함 컴포넌트는 화면을 구성하기 위한 하나의 단위로 봄 기본적으로 템플릿 + 지시자 + 클래스 조합으로 구성 템플릿..
WEB개발이야기/Angular 2018. 7. 10.
Angular의 개발환경
Angular의 개발환경 Angular를 개발하기위해서 일반적인 개발환경에 대해 포스팅 합니다. Nodejs 설치 타입스크립트 설치 Angular프로젝트 구성 Nodejs 설치 Angular의 기본적인 개발환경은 Nodejs입니다. Nodejs는 자바스크립트 기반으로 서버개발이 가능하고 NPM을 이용하여 패키지관리까지 가능하기 때문에 많이 사용하고 있습니다. 먼저 nodejs홈페이지에 접속하여 최신버전의 설치파일을 다운로드하여 설치 합니다. nodejs는 윈도우 환경 뿐만아니라 리눅스, macOS에서도 설치가 가능합니다. NPM으로 패키지 설치 Nodejs가 설치되었다면 패키지 매니저인 NPM(Node Package Manager)도 자동으로 설치가 되어 있을 것입니다. NPM의 설치된 패키지가 무엇무엇..
WEB개발이야기/Angular 2018. 7. 10.
Angular와 관련된 라이브러리들
Angular만 단독으로 사용하는 것도 가능하겠지만 개발시간을 단축할 수 있게 해주는 여러가지 라이브러리 들이 존재합니다. 먼저 Angular를 공부했다면 자신이 원하는 것을 개발하기 위해 라이브러리들을 활용할 필요가 있습니다. 그리고 이러한 라이브러리들은 대부분 무료로 사용할 수 있습니다. 관련 라이브러리 IONIC 프레임워크 : 모바일 개발용 프레임워크 네이티브 스크립트 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 리액트 네이티브 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 Angular 유니버셜 : Angular의 렌더링을 서버에서 처리하게 해줌(검색엔진최적화) 미티어(meteor) : 풀스텍 자바스크립트 플랫폼 Ng-bootstrap라이브러리 : Angular에서 사용가능한 Bootstrap라..
WEB개발이야기/Angular 2018. 7. 10.
Angular에서 사용되는 타입스크립트 문법
타입스크립트에 대한 간단한 문법을 정리하려고 합니다. 타입과 문자열 선언자 var : javascript에서 전통적으로 사용해온 선언자로 모든 타입을 허용 let : typescript에서 특화시킨 선언자로 타입을 지정해야 함 배열타입 배열의 타입을 아래와 같이 설정하며 배열에 값을 입력할때는 push()를 사용함 let fruits: string[] = ["바나나","사과","오렌지"]; let num1:Array = [1,2,3]; let num2:Array = new Array(); num2.push(1); num2.push(2); num2.push(3); 유니언타입 유니언 타입은 2개이상의 타입을 정의하고 그중에 맞는 것이 자동 설정이 되게 함 var unionX: string | number =..
WEB개발이야기/Angular 2018. 7. 10.
Angular CLI에서 사용하는 명령어 정리
CLI란 Command-Line Interface의 약자로 쉽게 설명하면 DOS창에서 명령어를 써서 실행시키는 것을 말합니다. Angular CLI 명령어 Angular에서 사용하는 명령어 정리 주요 명령어 명령어 내용 ng -help CLI 도움말 확인 ng new 프로젝트명 프로젝트 생성 ng test 단위 테스트 실행 ng build 개발용 빌드 ng build -prod 프로덕션용 빌드 ng e2e 종단 테스트(end to end test) ng serve 개발서버 실행 ng serve --port 4201 --live-reload-port 49153 서버포트는 4021번이고 라이브 리로드서버포트는 49153으로 실행 구성요소 추가 명령어 내용 예제 ng g component 컴포넌트명 컴포넌트 ..
WEB개발이야기/Angular 2018. 7. 10.
Angular에서 iframe사용시 unsafe value 에러 해결법
HTML에서 iframe을 사용할 경우 XSS(Cross Site Scripting) 공격에 대한 방어의 목적으로 SOP( Same Oringin Policy) 정책을 걸어놨습니다. iframe을 이용한 XSS공격은 간단히 설명하면 해커가 어떤 게시판에 글을 작성할때 iframe으로 해킹코드가 있는 문서를 불러오도록 해 놓을 경우 해당 게시물을 열어 보는 대부분의 사용자 정보를 탈취할 수 있게 되는 해킹 기법을 말합니다. 하지만 보안이 검증된 youtube 영상을 불러온다던가 하는 경우에는 일시적으로 SOP를 해제 시켜야 하는 경우가 생기는데요. 그 방법에 대해 Angular에서는 pipe를 이용하여 외부 iframe을 불러 올 수 있게 처리 할 수 있습니다. 에러 유형 보통 아래와 같은 에러메시지가 발..
