티스토리

CheolCheol Dev Note

검색하기

블로그 홈

CheolCheol Dev Note

charlie-choi.tistory.com/m

철철22 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

글모음 Angular 6 듀토리얼 (유튜브) https://www.youtube.com/playlist?list=PLYxzS__5yYQlqCmHqDyW3yo5V79C7eaTe&fbclid=IwAR0Az1zbaeL9on06fhxutrGhkMQsZsa883CC08byWLCLvriYrkn8H3UzT4A Angular NativeScript (IONIC 아님) https://www.nativescript.org/?fbclid=IwAR1ss1muu4o_FJxAErYg22shyf5C56owZg-M2HkCKkVOuLpG34Woe9BBMz8 Google I/O 2018 new Angular 소개 1) 백만 개발자 돌파! (angular.io 활동 user 기준) 2) Angular 파트너 : 웹팩, RxjS, stackBli.. 공감수 0 댓글수 0 2018. 10. 18.
2018-09-14 개발일지 어제는 data를 화면에 뿌리는 것까지 성공했다.이번에 구현을 할것은 버튼 기능이다. 페이지네이션 검색 등 구현해야할 부분은 많은데 그 중에서 우선적으로 구현해야할 부분은 버튼기능인 것 같아먼저 구현을 한다. 어제 글을 다시 설명하면 현재 컴포넌트의 데이터 전달은 다음과 같으며 내가 구현하고 싶은 기능은 다음과 같다.하늘색은 사용자 화면단 부분이고녹색은 data-table 모듈이고노랑색은 사용자가 만들고자 하는 column을 설정하는 부분이다 그래서1. 사용자는 모듈에게 row data들을 주고2. column을 설정하는 부분(directive) 에게는 column 데이터를 주며3. directive에서 받은 column 데이타를 다시 모듈에게 데아터를 줘4. 화면단에 표시해준다. 이제 오늘은 이 부분을.. 공감수 0 댓글수 0 2018. 9. 14.
2018-09-13 개발일지 엊그제 어제 이후 계속 모듈 개발을 한다... 어제 View에 데이터를 뿌리는 것까지 개발을 완료를 했다.하지만 뿌리는것만이 아닌 기능들을 추가해야하는데 남은 기능 구현을 생각해 봤다. 1. Button기능 구현 2. Component 단위 구현 유효기간: yyyy:MM:dd~ yyyy:MM:dd %kmR$ 등등이 있다. 그 중에서 Button기능을 우선적으로 구현 하기로 한다.Button 기능은 수정 및 삭제를 할 수 있게 하는 popup component를 띄우는 것이다. 현재 데이터의 전달은 다음과 같이 된다. 하지만 내가 구현하고 싶은 기능은 다음과 같다. 하늘색은 사용자 화면단 부분이고녹색은 data-table 모듈이고노랑색은 사용자가 만들고자 하는 column을 설정하는 부분이다 그래서1. 사.. 공감수 0 댓글수 0 2018. 9. 13.
2018-09-12 개발일지 어제에 이어서 개발을 해본다. data table을 만든 후에 주소의 데이터가 나오질 않았다.주소 데이터의 typeof를 보니깐 [object Object]로 나왔다. 이것은 data 값이 json 형태이기 때문이다. 내가 실습을 하기위한 데이터의 형태는 다음과 같다. { "id": 0, "name": "Ramsey Cummings", "gender": "male", "age": 52, "address": { "state": "South Carolina", "city": "Glendale" } } 여기서 어제 만든 모듈을 사용하려면 다음과 같이 component의 형태를 사용했었다.여기서 주소 부분의 keyname을 보면 address.city 로 되어있는 것을 확인할 수 있다.모듈로 만들다 보니 사용자.. 공감수 0 댓글수 0 2018. 9. 12.
2018-09-11 개발일지 어제 작성했던 개발일지를 이어나간다.일단 angular에 적용해보기 위해 프로젝트를 하나 팠다. ng new tableModule프로젝트 폴더 뎁스는 다음과 같이 적용했다. apiService는 예제를 만들기 위해 json파일을 읽어드리는 service이다. 어제 글에 테이블을 만드는 소스였는데이 directive로 되어있는데 어떻게 사용하는지 이해가 가질 않았다. 그래서 angular 공식 홈페이지에서 directive에 대해 다시 한 번 알아보기로 했다. angular 공식홈페이지에서는 directive는 크게 Attribute Directive 와 Structural Directives가 있고 그 안에 짜잘하게 있는것 같다. Directive에 대해서는 google에 검색하면 친절한 글들이 많이 있.. 공감수 0 댓글수 0 2018. 9. 11.
2018-09-10 개발일지 요즘에 프로젝트를 진행하는 도중에 data grid module를 맡아서 개발을 진행하고 있다. SWIMLANE 샘플이나 데브익스트림 처럼 data가 있으면 자동으로 table을 만들어 주는 모듈을 만드는 것이다. 그 전에는 퍼플리셔 디자이너 분이 페이지 퍼플리싱을 해주시면 그 페이지를 복사해서 angular로 바꾸는 작업을 해왔었는데 이번 프로젝트에서는 그 작업 대신 예제 샘플처럼 데이타가 주어지면 모듈을 이용해 자동으로 생성되게 하는 작업을 맡게 된 것 이다. 어떻게 해야할지 감이 안잡혀서 일단 SWIMLANE 소스를 다운받아 분석 하기로 했다. 다음과 같은 component를 이용하면 다음의 table이 만들어진다. 안에 이라는 directive를 줘서 column을 설정하는 것 같다. compon.. 공감수 0 댓글수 0 2018. 9. 11.
ng-template 와 ng-container Angular를 사용하면서 ng-template와 ng-container를 쓰는일이 있습니다.그러다 문뜩 구체적으로 어떤 의미와 목적이 있는지 궁금해 공식 홈페이지에서 찾아봤습니다. ng-template는 HTML 랜더링을 하기위한 Angular 엘리먼트라고 합니다. 그리고 직접적으로 표현되지 않는다 하며, view에 랜더링 되기전에 와 내용에 대해서 주석처리 한다고 하는데 어떤 의미인지 살펴봐야겠습니다. 공식 홈페이지에 있는 예제는 다음과 같이 설명합니다. ng-template에 감싸진 부분이 structural directive 가 없으면 그 부분은 해당 엘리먼트가 사라집니다. structural directive 는 ngFor, ngIF, ngSwitch 등이 있습니다. Hip! Hip! Hoora.. 공감수 0 댓글수 0 2018. 8. 30.
Angular HTTP 인터셉터 Angular 4.3부터 추가된 HttpClientModule에는 http 요청에 인터셉터를 적용할 수 있다. 인터셉터를 간단히 설명하면 api나 특정 data를 요청 할 때 그 요청을 가로채는 역할을 한다. 인터셉터를 사용하기 위해서는 HttpInterceptor를 구현해야 한다. interface HttpInterceptor { // intercept의 첫번째 인자는 처리할 요청을 받고, 두번째는 다음 인터셉터를 가리키는 HTTP 핸들러다. intercept(req: HttpRequest, next: HttpHandler): Observable } ex) 서버에서 보내준 헤더 받기 export class HeaderInterceptor implements HttpInterceptor { interce.. 공감수 0 댓글수 0 2018. 8. 22.
Angular Data Chart 추천 Angular를 사용하다가 Data Chart를 표현해야할 때가 있었다. Google에서 Angular Data Chrart를 찾다가 좋은것을 찾아 공유한다. 모듈명은 NGX-CHARTS이다. 예제 여러가지 차트 및 스킨 옵션등을 제공한다. 기본적인 사용법은 NPM에서 모듈 추가 후에 임포트 해서 사용하는 것이다. npm install @swimlane/ngx-charts --save추가 후에 moudle.ts에 추가를 해준다. import { NgxChartsModule } from '@swimlane/ngx-charts'; @NgModule({ imports: [ RouterModule.forChild(routes), FormsModule, CommonModule, NgxChartsModule ], .. 공감수 0 댓글수 0 2018. 8. 20.
무료 템플릿 사이트 https://html5up.net https://w3layouts.com(반응형웹디자인테마다운) http://tedgoas.github.io/Cerberus/(이메일템플릿) 공감수 0 댓글수 0 2018. 8. 14.
FlexBox React Native는 그리드 시스템에 flexbox를 이용하는데그 기본에 대해 공부하고 정리해본다. 물론 웹에서 지원하는 flexbox와는 약간 다르지만그 기본에 대해 공부하는 것이다. Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다. Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다. Flexbox에서는 두가지 개념을 알면 좀 더 이해하기 쉽다. Flex container: {display: flex}를 설.. 공감수 0 댓글수 0 2018. 8. 14.
Angular Server Side Rendering EO는 Search Engine Optimization(검색 엔진 최적화)의 약어로 사이트를 구글, 네이버, 다음 등등의 검색엔진에 검색이 잘 되도록, 상위에 노출이 되도록 사이트를 수정하는 것을 말합니다. 사이트를 검색엔진에 등록해서 접속자를 늘려야 하는 경우에 필요하며, 그렇지 않는 경우에는 신경쓰지 않아도 됩니다.그런데 Angular사이트는 사이트의 컨탠츠가 검색엔진에서 아예 검색되지 않습니다. 그 이유는Angular가 SPA로 되어 있어 서버는index.html만 전달할 뿐 모든 컨탠츠가 사이트에 접속한 다음 생성되기 때문입니다. 검색엔진들은 서버에서 생성되는 파일을 수집하기 때문에Angular 사이트는 기본적으로SEO가 아예 불가능합니다. 그래서 해결책 => Server Side Renderin.. 공감수 0 댓글수 0 2018. 8. 13.
브라우저 CSS 지원확인 서비스 브라우저마다 CSS 지원되는게 달라서 확인해주는 사이트에서 확인을 해야한다. https://caniuse.com/#home 여기서 사용할 CSS를 적어주면 다음과 같이 브라우저마다 나온다. 공감수 0 댓글수 0 2018. 8. 9.
angular 파일업로드 웹 애플리케이션 파일 업로드는 크게 두가지의 방식이 있다. multipart/form-data FormData 객체를 사용하여 요소로 부터 취득한 file 정보를 append하여 서버로 전송하는 방식이다. applecation/x-www-urlencoded 클라이언트는 바이너리 파일을 Base64 인코딩하여 문자열화한 후, 서버로 전송하고 서버는 Base64 인코딩된 문자열을 디코딩하여 저장하는 방식이다. 인코딩으로 인한 성능 이슈가 발생할 수 있다. applecation/x-www-urlencoded 방식은 인코딩으로 인한 성능 이슈가 발생할 수 있다. multipart/form-data 방식을 사용하여 파일을 전송하는 예제를 작성하여 보자. view 이미지 추가 2. component onFileCh.. 공감수 1 댓글수 0 2018. 8. 8.
angular router popup 웹페이지를 만든다면 모달과 팝업을 만드는 일은 흔한일인것 같다. 나같은경우는 주로 팝업보다 모달을 생성을 많이 했는데 이게 개인적으로는 어렵게 느껴졌다. 여러가지 방법이야 있겠지만 나는 주로 부트스트랩을 이용해 모달을 띄우는 형식을 사용했었다. 부트스트랩을 이용한 방법은 다음과 같다. 1. bootstrap.js 또는 bootstrap.min.js 를 import 2. 모달을 띄우기 위한 이벤트를 주는 버튼에다가 data-toggle 및 data-target 지정 밑에는 예제 소스이다. Large modal ... 예제 모달 이걸 Angular에도 적용하는 법은 비슷하다. 1. bootstrap.js 또는 bootstrap.min.js 를 import 2. 하위 컴포넌트 지정 3. 상위 컴포넌트의 이벤트.. 공감수 2 댓글수 0 2018. 8. 7.
WARNING in Circular dependency detected Angular를 사용하다가 갑자기 다음과 같은 Circular dependency detected 경고문이 나왔다. Dependency import와 export를 잘못 사용해서 나오는 경고문이다. 제일 좋은 방법은 필요없는 import 및 export를 지우는 것인데너무 많아서 해결하기 힘들면 다음과 같이 사용해도 된다. WARNING in Circular dependency detected: src/app/_core/index.ts -> src/app/_shared/shared.module.ts -> src/app/_shared/component/goodssearch/goodssearch.component.ts -> src/app/_core/index.ts WARNING in Circular depe.. 공감수 0 댓글수 0 2018. 8. 6.
Textarea String으로 저장 Html Textarea에 있는 내용을 줄바꿈 까지 String으로 저장해 DB에 넣었다가나중에 불러오는 경우가 있다. 무조건적인 방법이 아니라 여러가지 방법중의 하나이다 예를들면 이런글을 DB에 넣고 싶다. // Client단이나 Server단 중 어디서 처리를 하든 자유 //textarea안에서 사용할 줄바꿈은 db에 저장할 때 치환을 해야한다 replaceAll이 없어 정규화로 대체 notice.content=notice.content.replace(/(?:\r\n|\r|\n)/g," "); //정규화를 통한 br태그를 textarea 안에서 사용할 \r\n으로 치환 this.selectedNotice.content = this.selectedNotice.content.replace(/ /g,"\r.. 공감수 0 댓글수 0 2018. 8. 2.
RxJS Angular RxJS 공부를 하다가 손찬욱님의 세미나 강의를 듣고 정리해본다. RxJS RxJS는 이벤트 스트림과 데이터를 쉽게 만들고 다룰 수 있도록 도우는 라이브러리다.복잡하지만 가독성이 좋은 비동기적 코드를 더 쉽게 작성할 수 있도록 도운다. RxJS는 일관된방식으로 안전하게 데이터 흐름을 처리하는 라이브러리 - 손찬욱 강좌 발췌 - RxJS는 비동기 처리, 데이터 전파, 데이터 처리를 담당한다. 모든 어플리케이션으로 궁극적으로 상태머신의 집합이라고 할 수 있다.대부분의 프로세서의 궁극적인 과정을 정리해주셨다.출처: http://sculove.github.io/blog/2017/10/21/shoulduserxjs/ 손찬욱님 블로그 여기에서 개발자가 처리하는 Input의 종류들은 다양하다배열, 함수.. 공감수 0 댓글수 0 2018. 7. 31.
localStroage에 json데이터 담기 Angular를 사용하면서 JSON으로 받은 데이터를 localStorage에 담을일이 생겼다. 처음에는 어떻게 해야하나 싶었는데 결국에는 JSON을 String으로 변환시킨 후에 나중에 사용할 때 파싱을 통해 JSON 데이터로 다시 변환시키면 된다. var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage , String 으로 데이터를 저장 localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage, 담겨져 있는 데이터 가져오기 const retrievedObject = localStorage.. 공감수 1 댓글수 0 2018. 7. 23.
RouterEvent의 Navigation Detect Anuglar에는 Component 생명주기라고 Life Cycle Hooks가 있다. 출처 : https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html Life Cycle Hooks 는 컴포넌트의 상태와 관련이 있는데 각 상태에 따른 기능을 사용하려면 core의 lifecycle_hooks.d.ts에 있는 메소드들을 implements받아서 사용해야한다. 하지만 이것은 컴포넌트의 상태에 따른 기능이고 이글은 Router의 상태에 따른 기능구현을 하는법에 대해 쓴다. Router events는 navigation마다 해당 이벤트를 감지하여 사용자가 원하는 로직을 추가할 수 있다. 공홈에는 Event와 관련된 함수들이 다음과 같다고 한다.Router.. 공감수 0 댓글수 0 2018. 7. 18.
Angular 쿼리파람 Angular든 다른 언어이든 파라미터를 보내는 방식들이 있다. 예를들어 1) http://localhost:8080/mydata/3 2) http://localhost:8080/mydata?sq=3 두가지의 url이 있다고 가정하면 1번의 경우 path로 data를 분류하는 방법이고 2번의 경우에는 key와 value의 형태로 데이터를 분류하는 방식이다. Java의 Spring은 @PathVariable과 @RequestParam의 차이라 할까? 1번의 경우 저번에 작성한 글을 참조하면 되고 이번에는 2번의 경우를 작성할 것이다. 2번의 경우를 Angular에서는 Query Parameter라고 불리는는데 위에 언급한 것처럼 라우터에 데이터를 보낼 때 path의 경로가 아닌 key 값으로 데이터를 보내.. 공감수 0 댓글수 0 2018. 7. 16.
Angular Router Guard + parameter Angular의 view의 전환으로 사용하는 router가 있다. 그리고 이 view의 접근제어를 할 수 있는 기능이 있는데 라우터 가드(Router Guard)가 있다. 라우터 guard에는 다음과 같은 인터페이스 들이 있다. CanActivate to mediate navigation to a route. CanActivateChild to mediate navigation to a child route.CanDeactivate to mediate navigation away from the current route. # 라우터의 접근권한을 검사Resolve to perform route data retrieval before route activation. # 라우터 변경시 호출되는 ㅂ라우트CanL.. 공감수 0 댓글수 0 2018. 7. 13.
양방향 바인딩 한글 짤리는 문제 사용자는 정확히 입력하였지만, 마지막글자가 반영되지 않는 것을 확인할수 있었습니다. 한글과 같은 조합형 문자의 경우 일반적으로 글자를 입력 후 스페이스나 엔터 등을 통하여 문자 입력을 완료한 시점에 compositioned라는 이벤트가 발생하고, 이 이벤트에 따라 Angular는 양방향 바인딩을 처리합니다. 작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경합니다. 프로젝트 전체에서 일괄반영하기 위해 app.module.ts 에서 valueProvider를 사용하여 주입시켜 주면 됩니다. import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core'; imp.. 공감수 1 댓글수 0 2018. 7. 10.
Angular Security - Sanitization string안에html tag가있고그것을화면에tag를적용하고싶으면 [innerHTML] 속성을사용하면된다. ex) Angular가innerHTML 속성을 이용해 출력한 결과는 불완전하다.왜냐하면 Angular가 이들 요소를 잠재적인 위험 요소로 판단해 새니티제이션을 적용했기 때문이다. 새티니제이션은데이터내의잠재된위험요소를제거하는기능이다. ! angular 에서 팝업 및 데이터가 수시로 바뀌는 innerHTMLdmf 사용하는 경우에 id 및 name에 대한 security에대한 경고가 콘솔에 나온다. 그럴경우 새티니제이션을 예외적으로 허용 해줘야하는데 그 메서드가 bypassSecurityTrustHtml(v)이다. import { Pipe, PipeTransform } from "@angular/core.. 공감수 0 댓글수 0 2018. 7. 9.
라우터 파라미터 Angular Router는 Angular의 핵심기능 중 하나인데 여기서 파라미터를 보내는 방법을 작성하겠다. 라우터를 선언하는 부분은 다음과 같이 가정하고 { path: 'move/:param', component: MoveComponent }, 하면 template나 component에서는 다음과 같이 사용할 것이다. template 이라하고 param값을 넣어주면 :param에 값이 전달되는 식이다. component this.router.navigate(['/move', param]); 그리고 받는쪽에서는 다음과 같이 사용할 것이다. (여러가지 방법이 있음 ) // 방법1this.activatedRoute.params.subscribe( params => { this.sq = params['par.. 공감수 0 댓글수 0 2018. 7. 4.
라우터 새로고침 SPA(Single Page Application) 인 Angular는 자신의 라우터링크를 누르면 아무 반응이 없는데 이 대신 새로고침으로 하게 하는 편법이 있다. import { Router, NavigationEnd } from '@angular/router'; ngOnInit(){ this.router.routeReuseStrategy.shouldReuseRoute = function(){ return false; }; this.router.events.subscribe((evt) => { if (evt instanceof NavigationEnd) { this.router.navigated = false; window.scrollTo(0, 0); } }); } 참조 : https://github... 공감수 0 댓글수 0 2018. 6. 26.
Angular select {{item.label}} 같이 사용 select 나 click이 아니라 change 이벤트 사용해야함 공감수 0 댓글수 0 2018. 6. 22.
scss 기존 CSS 문법에 SASS문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다 기본문법 – 셀렉터 지정 및 속성 작성SCSS의 기본문법은 기본적으로 CSS 기본 문법을 그대로 적용하고, 여기에 SASS 식의 치환가능한 요소들을 추가할 수 있다. 기본룰은 다음과 같다. 기본틀은 CSS 문법과 동일하다. 셀렉터를 쓰고 { .. } 블럭안에 속성:속성값; 의 형태로 속성들을 정의할 수 있다. nested block을 적용할 수 있다. //을 이용해서 라인단위로 주석처리를 할 수 있다. 셀렉터 네스팅특정 선택자 내에는 속성 정의만 들어오는 것이 아니라, nested된 속성 정의 블럭이 들어올 수 있다..entry-content { p { font-size: 9.814rem; } }// compi.. 공감수 0 댓글수 0 2018. 6. 22.
angular style angular에서bind로인해서맨처음dom이초기화되고그다음에component에서적용한css가먹혀서 가끔씩안먹히는경우가있다 예를들어다음과같이작성했는데 실제로는jquery로인해서밑처럼확장이된다. 보면 _ngcontent-c1 이게그경우인데 이런경우에styleUrls 이나style로css를적용하고싶은겅우에는 참고사이트처럼/deep/ 이나 >>> 를사용하면적용이된다.-> 라우터로이동시문제 ------------------- 수정------------------------------- 쉐도우dom 스타일이라고부름 이름사용법의미host:host현재컴포넌트에대한쉐도우dom 선택host-context:host-context템플릿외부엘리먼트의클래스조건에따라현재컴퓨넌트의엘리먼트를선택deep/deep/ | ::ng-deep.. 공감수 0 댓글수 0 2018. 6. 18.
VSCode로 Angular 디버깅하기 1. 확장에서 'Debugger for Chrome' 검색하여 설치 한다. 2. 디버그 화면으로 이동하여 구성추가를 누르면 launch.json 파일이 생성된다. 3. Launch.json 파일에 아래 설정을 추가 한다. . { "version": "0.2.0", "configurations": [ { "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:4200/home", "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] } 4. tsconfig.json 파일에서 "sourceMap": true 설정을 추가하거나 수정.. 공감수 0 댓글수 0 2018. 6. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.