sharingStorage

현재 BC카드사에서 위챗페이X BC카드 결제시스템 처리 프로그램의 백오피스를 JQuery로 구현중에 있다. 프론트 로직을 90%이상 작업을 마친 와중에 BC에서는 IE와 엣지가 주 사용 브라우저라는 얘기를 듣고 막판에 IE로의 호환성 검사를 시작했는데 아니나 다를까 로그인 화면부터 말썽이였다. 구글링을 해본 결과 IE에서 ajax GET방식으로 cache가 남으면 화면 오류가 날 수 있다고 한다. 별도의 세팅이 없는 IE의 경우 ajax로 호출하는 URL이 동일하고 파라미터가 없을 경우 재호출시에도 서버에 요청을 안하고 Cache를 이용하여 기존값을 보내주기 때문에 문제가 생긴다. 이런 경우 jQuery 옵션 중 cache항목을 이용하면되는데 이 옵션은 default가 true이기 때문에 해당옵션을 fa..

메뉴에 route를 구성해주어도 라우팅된 메뉴를 한번 더 크릭하면 아무일도 일어나지 않습니다. load(href: string) { this.router.navigateByUrl('/blank-for-reload', { skipLocationChange: true, }).then( () => { this.router.navigateByUrl(href); } ); } 많은 분들이 사용하는 방법이 blank한 페이지를 한번 띄워주고 다시 의도한 페이지를 띄우는 것인데 이는 새로고침과 같은 효과를 볼 수 있습니다. 메뉴를 클릭하면 직접 router에 navigateByUrl을 부르지 않고 위처럼 한번 감싼 load메소드를 호출함으로서 메뉴에서 버튼을 누르면 빈화면으로 갔다가 의도한 패스로 가는 것입니다. 주의..

JSON이란? JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용된다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧이다. 특히 네트워크(http 통신)를 통해 서로 다른 시스템들이 데이터를 주고받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다. 자바스크립트에서는 JSON 포멧의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있으며 JSON 내장 객체는 자바스크립트와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다. JSON.stringfy(); JSON.stringfy() 메서드는 자바스크립..

리액트를 살짝, 앵귤러를 많이 접하고나서 느낀점은 '기본기의 부족' 이였다. 성격상 모든걸 완벽하게 마치고 다음 단계로 나아가고 싶지만 js, html, css를 완벽하게 깨우치고 웹 프레임워크를 배운다는건 말도 안되는 얘기라는 것도 깨달았다. 두번 째는 기억력의 한계이다. 내 뇌용량은 한계가 있고 개발자의 세계는 너무나도 깊다는 것을 깨닳았다. 분명 기초적인 css, js지식임에도 구글링을 해야하고 이제는 내 머리를 믿지 않고 내 몸이 기억해야한다. 손이 기억하고 나중에 한번 더 보고 눈이 기억하도록... 간단한 문법서(?)지만 바이블이라는 얘기도 들었고 명칭은 정확히 기억나지 않지만 다른 주니어 개발자분이 매주 블로그에 책을 읽고 정리해 놓는것이 기억나서 이렇게 시작해본다. 여태껏 딱딱한 말투로 정보..

CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. static : 모든 태그들은 default값이 static이다. 태그들은 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. relative: static에서 위치를 살짝 변경하고 싶을 때 사용 top, bottom, left, right 속성을 사용해 위치 조절 가능. static일 때를 기준으로 태그들이 움직임. 같은 position이면 나중에 나온 태그가 위에 배치된다. z-index는 겹칠 때 어떤 태그가 위로 올라갈지 정한다. absolute: absolute는 position:static 속성을 가지고 있지 않은 조상을 기준으로 움직임. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없으면 b..

Angular Directive Angular에는 DOM모양이나 동작을 지시하기 위한 명령인 Directive가 있다. HTML에 Angular가 간섭할 부분을 표시한다고 이해하면 쉽습니다. 앵귤러의 Directive에는 -Component Directive : 템플릿과 함께 사용하는 디렉티브 같이 selector가 app-root인 app.component를 표출해달라는 뜻 -Attribute Directive : element나 component, 또다른 directive의 모양을 변경시키는 디렉티브 -Structure Directive : DOM element를 더하거나 빼서 DOM을 변화시키는 디렉티브. ngIf, ngFor, ngSwitch등이 있다. -Costomer Directive : 사용..

@NgModule NgModule이란 @NgModule 데코레이터가 지정된 클래스이며 이것은 모듈에 있는 컴포넌트 템플릿이 어떻게 컴파일 되는지 인젝터를 어떻게 생성할지 등을 설정한다. angular 애플리케이션이 모두 하나 이상 가지고 있으며 Angular 프레임워크가 제공하는 기능을 불러와서 사용할 수 있게 하는 것들을 말한다. Angular 프로젝트에서 app.module.ts는 Component를 관리해주는 역할을 한다고 볼 수 있다. declarations - 이 모듈에서 사용 가능한 뷰 클래스를 정의한다. angular에서는 component, directive, pipe 세 종류가 존재한다. 모듈에 선언된 구성요소는 모듈 내에서만 사용가능 exports - 다른 모듈이나 컴포넌트에서 접근할 ..

이번에는 Angular의 생명주기 훅을 다뤄보려고한다. 생명주기 훅은 constructor와 비슷한 역할을 한다. consturctor는 angular의 기능이 아니라 클래스 자체의 기능(자바스크립트 엔진)이여서 constructor가 호출되는 시점에는 Angular의 제어의 바깥에 있다. 따라서 앵귤러가 컴포넌트를 초기화 했는지 알기에는 적합하지 않다. 생명주기 훅을 만든 후 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한차례 실행할 수 있게 되었다. ngOnInit 앵굴러가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재하며 바인딩한 값을 읽을 수 있다고 보장할 수 있는 상황에서 호출된다. constructor는 최소한으로 초기화해야한다. 일반적으로 컴포넌트는 가볍고 ..

부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기 + @Input(), @Output 구조 알아보기. 이런 구조가 있다고하면 parent-component는 child-component의 컨텍스트를 제공하는 역할을 한다. @Input(), @Output() 데코레이터를 활용하면 자식컴포넌트가 부모 컴포넌트와 통신할 수 있다. input은 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 output은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 @Input() import {Input} from '@angular/core'; Input 심볼을 로드해야한다. typescript 파일에서 html파일로 바인딩하려면 {{}} 이 문법 사용하면 되는데 ts파일끼리 데이터를 주고받으려면 데이터를 받..

What? Angular란 google에서 만든 SPA방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크이다. Angular는 Angular JS와 완전히 다른데 쉽게 생각하면 Angular 1버전을 Angular JS, Angular 2버전 이상을 Angular라고 부른다. (Angular JS는 11년만인 21년 12월31일 EOL에 도달하였으며 서드 파티지원만 가능하다고 한다.) Why Angular의 장점 - 컴포넌트기반 Angular를 이용한 프론트엔드 웹 개발은 DI의 강력한 지원을 통해 기능에 따라 코드를 분리하고 재사용이 용이하다. 기능을 담은 Service 클래스와 HTML 컴포넌트를 담당하는 Component클래스가 명확히 구분되고 이로인해 Service클래스는 여러 Component..