Practical Accumulation

1. 이 포스트는 Pipe를 생성하는 방법에 대한 내용이다. 2. 개발 방법 2-1 pipe 추가 2-2 app.module.ts에 추가 2-3 pipe.ts 작성 2-4 사용하기 3. Pipe추가하기 3-1 아래처럼 추가하면 convert.pipe.ts파일이 생성되고 내부에 클래스 template이 만들어 진다. $ ng generate pipe convert 3-2 기본적으로 만들어지는 template은 다음과 같다 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'convert' }) export class ConvertPipe implements PipeTransform { transform(value: unknown, .....

0. 이 포스트는 Angular의 많이 쓰는 파이프 몇 개를 언급한다. 0-1 아래 링크의 공홈에 가면 공통적으로 많이 쓰이는 built-in pipe이 나온다. Angular angular.io 1. DecimalPipe 1-1 숫자값을 지정된 포멧대로 표현해 준다. 1-2 지정은 digitsInfo에 패턴을 넣어준다. 포멧은 최소정수자리.최소소수자리수-최대소수점자리수 1-3 1.0-2 라고 지정하면 정수는 한자리 이상 표현되고 소수점은 2자리까지 표현된다. 1.0-3이 기본값이다. @Component({ selector: 'number-pipe', template: ` e (no formatting): {{e | number}} e (3.1-5): {{e | number:'3.1-5'}} e (4.5..

Flight Reservation Details Flight Information Operating Aline ${ flight.operatingAirlines } Departure City ${ flight.departureCity } Arrival City ${ flight.arrivalCity } Date Of Deaprture ${ flight.deteOfDeparture } Estimated Departure Time ${ flight.estimatedDepartureTime } Passenger Information First Name ${ passenger.firstName } Last Name ${ passenger.lastName } Email ${ passenger.email } Pho..

Locations ID Code Name Type Actions ${ location.id } ${ location.code } ${ location.name } ${ location.type } Delete | Edit Add Location

1. 개발용으로 귀찮아서 붙여 놓는다. 1-1 form:form을 사용 1-2 input text와 radio를 사용 Locations Code Name Type Urban Rural Add Location Edit Location View all locations 2. 사용자 등록화면 2-1 패스워드 검증 때문에 붙어 놓음 User Registration FirstName LastName Email Password Confirm Password

0. Grid layout은 부트스트랩의 기본적인 레이아웃 설계 도구이다. 0-1 grid layout은 무조건 .container안에 배치되어야 한다. 0-2 한 줄을 12로 나누어 필요한 만큼 배치를 한다. 0-3 값을 생략하면 나머지 공간을 공유하게 된다. 1. 기본적인 공간 설정 1-0 row, col class를 가지고 있다. 1-1 row는 하나의 행을 말하고 하나의 행안에 여러 개의 열이 배치된다. 1-2 열의 크기는 0번 항목의 12등분한 공간을 지정하여 설정한다. col-8 이면 8/12공간을 차지한다. 1-3 가장 기본적인 레이아웃의 예시는 아래와 같다. One of three columns One of three columns One of three columns 1-5 column의..

1. Responsive breakpoint는 부트스트랩에서 반응형 웹을 구현하기 위한 기본적인 도구이다. 1-1 5가지의 단계로 나누어져 있으며 xs, sm, md, lg, xl로 표현된다. 1-1-1 xs는 기본값이고 xs라고 쓰지 않는다. - 즉 0px이고 모든 경우에 다 적용된다. 1-1-2 sm은 576px 이상 1-1-3 md은 768px 이상 1-1-4 lg는 992px 이상 1-1-5 xl은 1200px 이상 1-2 위의 값은 언제 각 단계가 적용될지에 대한 min-width값이다. 즉 최소의 값들이다. 1-2-1 아래 값들은 모두 오버라이딩이되어 적용된다. 즉 현재 화면크기와 가장 가까운 미디어쿼리가 적용된다. body { background: red; } @media (min-width..

0. 나이가 들어가니 기억력이 떨어져서 이젠 뭐든지 적어놔야 한다. 1. Alert은 화면에 안내를 띄울 때 사용하면 편리하다. 2. x버튼을 우측 상단에 버치하여 수동으로 제거할 수도 있다. 2-1 alert-dismissible은 텍스트가 쓰여질 수 있는 범위를 우측에서 5rem정도 줄인다. 그곳에 close 버튼이 배치된다. 2-2 이거 쓰지 않아도 보기엔 별차이가 없는데, 이것 없이 킨 안내구문이 들어갈 경우 x를 덮어 써버린다. 2-3 fade, show는 쌍으로 다니고 사라지고 나타날 때 애니메이션 효과를 더해 준다. 2-4 data-dismiss 부분이 javascript를 작동하는 부분이라서 꼭 삽입해야 한다. 2-5 닫기 아이콘을 위한 버튼은 호환성을 위해 button 테그를 사용해야 한..