야훔의 저렴한 개발

Angluar를 코딩하거나 TypeScript에서 node-sass 패키지를 사용해야할 때 가끔 이런일이 터진다. 특히나 몇달전에 작업하고 이제와서 npm install을 시전하려니까 급 터지는 오류들에 멘탈이 붕괴되고 뒷목이 서늘하고 식은땀이 날거다. 위의 오류가 발생하는 이유는 일단 Windows환경에서 Python 2.x 로 빌드를 해야하는데 없어서 발생하는 오류란다. 그래서 몇가지 작업을 수행하면 위와 같은 거지같은!! gyp 에러는 피할 수 있다. 일단 윈도우 환경에서 PowerShell을 관리자 모드로 실행한다. 그리고 아래의 명령어를 입력한다. $ npm install -g --production windows-build-tools 이렇게 입력하면 위와같이 "All done!" 이라는 메시지..

지금 진행하는 프로젝트에서 아래와 같은 패턴으로 Promise ~ Then 방식이 구현되어있는 코드를 Await / Async로 전환하는 과정에서 매우 까다로와보여서 공유한다. this.fingerprint.isAvailable().then((value: any) => { // 생체인증 권한 획득 this.fingerprint.show( options ).then((value: any) => { // 생체인증 다이얼로그 표시 this.fingerprintSuccessHandler(); }).catch((error: any) => { // 생체인증 실패 this.fingerprintErrorHandler(); }); }).catch((reason: any) => { // 생체인증 권한 획득 실패 conso..

ES6 이후 버전부터 표준이 된 Await - Async 비동기 코딩에 대해서 알아보는 시간을 갖도록 하겠다. 일단 Await - Async 코딩에 대한 결론을 먼저 이야기 하면 굉장히 좋은 코딩 방식이다. Event Driven 방식의 코딩을 수십년간 이어온 Javascript에서 '오 맙소사 이게 이제야 나오다니' 라고 감탄사를 연발할 수 있도록 만들어준다. 일단 아주 간단한 코드를 보면서 결과를 살펴보자. 코드는 Angular 7을 기준으로 작성했다. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./ap..

안녕! 맨날 Django만 글을 쓰다가 잠깐 쉴겸 Angular에서 i18n 국제화 이슈를 해결하는 방법을 공유하려고 돌아왔다. Angular에서는 자체적으로 i18n을 제공하는 명령인 ng xi18n 이라는 명령이 있다는 것을 알기만하고 쓸일이 없어서 신경 안쓰다가 이번에 국제화 이슈가 터지면서 제대로 알아보기로 알아봤다. 결론부터 이야기하면 xi18n기능은 쓰지마라. 이건 사용하면 안되는 거다. 언어파일 갯수대로 프로젝트를 중복 생성시켜서 국제화 이슈를 해결하려는 악마의 프로그램이다. 무슨 이야긴지 자세히 풀어 설명하자면 xi18n은 HTML 내부에 태그에 붙어있는 i18n 이라는 directive를 감지해서 해당 코드를 언어별 xif 파일로 정리해 뽑아준다. 그리고 언어별로 번역한 뒤에 build ..

새해 복들 많이 받았길 바란다.(시간이 좀 늦긴 했지만) 코드 짜는 개발쟁이들이 복 마저 덜 받으면 한해가 고생이니 잘 챙겨서 받았기를 바란다. 오늘은 설연휴동안 포스팅 못한 Router와 관련된 페이지 이동과 관련한 심화 학습을 하려고 한다. 페이지 이동은 지난 시간에 잠깐 다뤘지만 하위 페이지 로딩을 어떻게 해야할지 잘 모를 수도 있겠다는 생각에 친절을 배풀어 알려주려고 하니 잘 보고 따라해보기를 바란다. 일단 페이지의 UI 구조는 지난번 코드를 참고하길 바란다. 우리가 만들려고 했던 페이지의 구조를 다시 한번 확인해보면 아래와 같다. 이 구조를 코드로 바꾸면 아래와 같이 코딩할 수 있다고 했다. export const ROUTES:Routes = [ { path: '', component: Inde..

Angular 4 Router 두번째 시간이 돌아왔다. 지난번의 Angular 이슈는 현재 정상으로 돌아간 것 같으니 다시 프로젝트를 생성하고 Router를 본격적으로 구성하는 방법들에 대해 이야기하는 시간을 가져보자. 일단 Router 라는 것은 결국 페이지 이동에 관련된 이야기를 하는 거다. 페이지를 이동하는 path를 설계하는 것을 두고 기획에선 IA를 설계한다고 하는데 IA(Information Architecture)는 결국 정보를 어떤 페이지에 보여줄 것인지 설계하는거라고 이해하면 간편하겠다. (기획에서는 이런 개념이랑은 조금 다르다고 하는데 뭐.. 개발자인 내눈엔 전부 도찐개찐이다) 오늘의 페이지 구조는 아래와 같은 구조로 구성할거다. 뭐 아주 간단한 형태의 개인 홈페이지와 공지사항 게시판,..

한국 시간으로 2018년 2월 8일 Angular4 CLI의 버전이 1.6.x 로 업데이트 되면서 오류가 발생했다. 이는 Node.js를 삭제하고, npm 전역 저장소를 삭제하고 다시 Angular CLI를 설치해도 동일한 오류를 발생시켰다. 이와 관련하여 몇가지 정보를 공유하면 나는 현재 Angular CLI 1.6.8 버전이고 위와 같은 오류로 인해 원래 포스팅하려고 했던 Router 관련 포스팅을 못하게 됐다. 아무튼 이 이슈로 인해 급하게 구글해본 결과 불과 두시간 전에야 해결 임시 해결방법이 올라왔다. 물론 해결이 된 사람도 있고 안된 사람도 있지만 나는 해결할 수 있었다. 망할 구글 놈들! 일 안하냐!!

일단 홈페이지를 만드는 작업을 할 때 프론트 앤드에서 기능해야할 몇가지 필수 요소들이 있는데 그것은 바로 Routing 기능이다.과거엔 태그에 그냥 링크를 걸어주면 다른 페이지로 이동할 수 있는 간단한 기능이지만 Angular.js 와 같은 프레임워크를 이용하면 이건 좀 다른 이야기가 된다. Angular.js에 대해 간단하게 설명하자면 프론트 앤드를 One Page Site로 개발이 가능한 프레임 워크다. 최초에 필요한 모듈과 필요한 서비스를 전부 들고 온 다음에 Routing 기능을 통해서 필요한 View 화면만을 불러와 기능하게 한다.이러한 형태는 최초 프론트 앤드 화면을 불러올때 많은 네트워크 트래픽을 발생시킬 수 있으나 페이지 이동간에 매우 빠르게 이동할 수 있게 되고 어차피 예전에도 inclu..

Angular를 다룬다는건 꽤 힘든일이다. 그도 그럴 것이 Angular라는 건 일단 TypeScript로 개발되었고 TypeScript는 ECMA Script(이하 ES)의 최신버전을 따라 만든 것이고 이건 기존의 ES5 버전의 javascript와는 판이하게 다른 언어로 보이기 때문이다. Class 개념과 함께 등장한 Abstract, Implements, Extends 등등의 기능부터 다양한 변수의 활용과 enum 객체의 등장과 심지어 Decoration 패턴도 구현되어있다.(Java에서는 Annotation이라고 하면 이해하겠지) 게다가 Javascript의 고질적인 문제라고 지적받았던 애매한 호이스팅 이슈(Hoisting Issue)도 let 이라는 변수 선언 방식 덕택에 많이 해소되었다. 이건..

내가 전에 올렸던 글에서 한가지 빼먹고 안 쓴 내용이 있었다.크롬 디버거 확장 프로그램이 기본인줄 알고 있었는데 아니었던 것..그래서 디버그 패널에서 구성을 추가하면 node 관련 항목 밖에 안나온다. 그래서 오늘은 크롬 디버거를 설치하는걸 소개할까한다. 일단 Visual Studio Code를 실행한다. 실행하고 우측에 보면 5번째 아이콘이 확장프로그램 설치하는 아이콘이다. 저걸 클릭해보자. 지금 나는 프로젝트를 위해 이미 몇가지 플러그인을 설치한 상태고 새로 설치하는 것을 보여주려고 Chrome Extension을 지운 상태다.이 상태에서 Chrome Debug Extension을 검색해보자. Chrome 이라고만 검색해도 가장 위에 Debugger for Chrome이라고 등장한다. 이 플러그인을 ..