웹/앱 개발자 블로그

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter08. 번들링과 배포 학습목표 : 1. 배포 달성을 위한 목적과 Webpack의 개념에 대해 설명할 수 있다. →배포를 달성하기 위한 목적은 다음과 같다. - 배포되는 웹 애플리케이션의 용량이 작아야 한다.- 브라우저에서 서버에 요청하는 HTTP 횟수가 적어야 한다. Webpack은 애플리케이션에서 사용하는 CSS 스타일이나 이미지를 모두 모아 한 파일로 번들링하며, 설정 방법도 간단하다. Web..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter07. 유닛 테스트 학습목표 : 1. 유닛 테스트와 엔드 투 엔드 테스트의 개념에 대해 설명할 수 있다. →유닛 테스트(Unit testing): 컴포넌트나 함수 단위의 작은 코드를 테스트하며, 입력하는 데이터를 바꿔가면서 원하는 동작을 실행하는지 검사하는 방식이다. 엔드 투 엔드 테스트(End-to-end testing): 애플리케이션 완전히 동작하는 상태에서 사용자의 행동에 따라 애플리케이션의..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter06. 서버와 데이터 주고받기 학습목표 : 1. 프로미스의 단점에 대해 설명할 수 있다. →프로미스의 단점은 다음과 같다. - 서버로 보낸 요청을 취소할 수 없다.- 프로미스의 작업이 성공하면 결과 데이터를 받고, 작업이 실패하면 에러 객체를 받겠지만, 두 경우 모두 데이터 하나를 처리한다. 프로미스에서는 연속적인 데이터를 처리하는 방법이 없다. 학습내용 : 이번 차시에서는 서버와 데이터 주고받기..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter05. 컴포넌트 통신과 폼 처리하기 학습목표 : 1. Angular의 프로젝션 사용 방법에 대해 설명할 수 있다. →Angular의 프로젝션에 대한 사용 방법은 다음과 같다. - 자식 컴포넌트 템플릿에 태그를 추가해서 부모 컴포넌트가 보내는 템플릿이 위치할 곳을 지정한다. 라우터를 사용할 때 을 지정하는 것과 비슷하다.- 부모 컴포넌트에서는 자식 컴포넌트 태그 안쪽에 원하는 내용을 넣는다. 자식 ..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter04. 바인딩, 옵저버블, 파이프 학습목표 : 1. 여러 가지 유형의 데이터 바인딩 사용 방법에 대해 설명할 수 있다. →이벤트 바인딩은 이벤트에 함수를 연결하고, 이벤트가 발생하면 이 함수를 실행한다. 어트리뷰트 바인딩은 HTML 엘리먼트 어트리뷰트에 있는 텍스트 값을 갱신할 때 실행한다. 프로퍼티 바인딩은 DOM 객체 프로퍼티에 있는 값을 갱신할 때 사용한다. 2. 옵저버블 스트림의 처리와 옵..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter03. 의존성 주입 학습목표 : 1. 디자인 패턴의 정의와 의존성 주입의 장점에 대해 설명할 수 있다. →비슷한 문제의 해결 방법을 재사용하기 좋은 형태로 정리한 것을 디자인 패턴이라고 하며, 사용하는 프로그래밍 언어나 플랫폼에 따라 다양하게 구현할 수 있다. Angular는 의존성으로 주입되는 객체를 미리 프로바이더에 등록하고, 필요할 때 인스턴스를 생성해서 제공하는 방식을 사용하는데, 의존성 ..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. Chapter02. 라우터로 내비게이션 구현하기 학습목표 : 1. Angular 라우터의 구성 요소에 대해 설명할 수 있다. →Router:라우터를 구현하는 객체다. 원하는 경로로 이동하려면 이 객체의 navigate() 함수와 navigateByUrl() 함수를 사용하거나, 라우터 객체의 path 프로퍼티 값을 변경하면 된다. 브라우저의 URL을 직접 수정해도 원하는 경로로 이동할 수 있다.RouterLin..

교재 : [Angular Development with TypeScript] 링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다. angular란? : Angular는 Google에서 주관하는 오픈 소스 프레임워크이며, 개발자들에게 큰 인기를 끌었던 AngularJS를 전반적으로 검토해서 새롭게 재구축된 프레임워크입니다. Angular 애플리케이션은 ECMAScript 5, 또는 6 버전의 JavaScript나 Dart, TypeScript를 사용해서 작성할 수 있습니다. 개발자가 코드를 적게 작성하도록 돕는 것이 좋은 프레임워크이며, ..

angular2에서 jquery 사용하기참고 : https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2STEP 1 - First things first// In the console // First install jQuery npm install --save jquery // and jQuery Definition npm install -D @types/jquery STEP 2 - IMPORT// Now, within any of the app files (ES2015 style) import * as $ from 'jquery'; // $('#elemId').width(); // OR // CommonJS style - ..