YoungTae's Thoughts

블로그 이전했습니다~ 링크( https://steemit.com/@cicada0014 )  시작하며 Angular cli 툴을 써서 서버를 가동시키거나 빌드를 할때 터미널에 항상 뜨는 문구가 있다 webpack : Compiling... Angular를 처음 접했을때는 이것이 뭔지 몰랐다. 그냥 필요한거겠지 하고 넘겼었는데, 점차 프레임워크를 파고들고 이해하는 과정에서 꼭 알아야 하는 하나의 관문같은 존재였기에  면접을 준비하면서 제대로 파헤쳐보자는 생각으로 조사를 실시하였다.  나는 맥락을 좋아한다. 전체적인 큰 흐름을 보지 않으면 답답해지고 불안해지는 이상한 정신병을 앓고 있다.  이번에 소개하는 자바스크립트의 모듈화는 아주 거대한 서사시의 일부, 삼국지로 치면 삼고초려같은 하나의 에피소드같은 단편적인 부분이다.  자바스크립트의 허점과 그를 해결하기 위한 움직임  자바스크립트는 웹에서 간편하게 쓰일 수 있도록 설계되었다. 하지만 시간이 지남에 따라 기술이 발전하고, 구현하고자하는 것이 많아지면서 점점 코드의 복잡화가 일어나기 시작했다. 하지만 자바스크립트는 그런 복잡도를 예상하지 못했기때문에 허점이 자꾸 드러나게 되었다.  그 허점의 근간은 전역 스페이스이다. 자바스크립트는 암묵적 전역이라는 개념이 있다고한다. 명시적으로 var라는 키워드를 쓰지 않은 변수는 자연스럽게 전역변수로 인식된다는 것이다. 이 문제는 중첩의 문제로 발견된다.  내가 a라는 변수를 써서 코드를 짰다. 1년 뒤 프로그램이 상당히 복잡해졌을때, 새로운 코드를 짜다가 a라는 변수가 있는지를 모르고 같은 이름의 a변수를 써서 작업을 시작했다. 이렇게 함으로써 전에 쓰던 a라는 변수를 1년뒤에 쓴 a로 덮어써버리게 되었고, 기능상 큰 문제를 야기하게 되었다. 이런 문제점을 해결하기위해 여러가지 방법들이 도입이 된다. 즉시실행함수는 ...

개발을 진행하면서 여러 설정 파일들에 대한 의문점을 가지고 있었는데 angular-cli.json 파일의 활용법을 알아내었다.  더 많은 기능들이 있겠지만 설정의 초보적인 실마리를 잡는데기여를 한 발견이었다. 프로젝트 속성에는 이 프로젝트의 버전과 이름을 정해줄수가 있다. apps 속성은 많은 것들을 설정해줄 수가 있다.  index 의 경우 우리가 서버가 처음 실행될때 가장처음 실행시킬 파일의 이름을 정해줄수가 있다. main 은 메인으로 확인할 타입스크립트 파일을, 테스트는 말그대로 테스트용 타입스크립트를... 내가 가장 기쁘게 여겼던 발견은 styles와 scripts 속성이었다. index.html에 필요한 cdn들을 적어야 다른 라이브러리들을 쓸수가 있었는데, 어쩐 일인지 index.html에서는 node_module에 있는 파일들까지 접근이 되지 않았다.  결국 덕지덕지 index파일에 참조값들을 적어두었다. 참조값을 적는것까지는 좋은데 node_module 디렉토리까지 갈 방법이 없으니 npm으로 다운로드받은 라이브러리의 dist 파일을 하나하나 직접 복사해서 index 와 같은 디렉토리까지 복사를 해서 가져오다보니 그 구조가 점점더 더러워져갔다. 그러한 가운데 한곳에서 관리함은 물론이고 프로젝트 내부의 어떤 디렉토리든 참조 할 수 있는 이 설정 파일의 존재를 알게되었으니 그 기쁨이란 이루 말할 수 없었다.

이번 포스트에서는 Angular 에서 구글 로그인을 구현해보도록 한다. https://developers.google.com/identity/sign-in/web/sign-in 위 링크는 구글에서 제공하고 있는 로그인 API 이다. 내가 이 포스팅을 하는 이유는 자바스크립트에 대한 구글로그인 기능 구현은 아주 잘 나와있지만, 타입스크립트(앵귤라)에서 구현하는 것은 한국어 자료가 없기때문이다.  특히 오늘 중점으로 볼 것은 다른 것보다도 this(현재 컨텍스트)를 어떻게 잡아두느냐이다.  cannot read property 'router' of undefined 특히 인증과정을 거치고 라우터를 통해 인증관련 페이지로 보내려고하는데 저런 에러를 만난다면 이 포스트를 잘 찾아오셨다고 말씀드리고 싶다. ( 부족한 사람이 생각해낸 임시방편...이라도 도움이 된다면) 기본적인 구글로그인 기능구현은 위 문서에 잘 나와있으니 그것을 참고하도록 하자. 웹 어플리케이션을 위한 기본적인 클라이언트 아이디가 있다는 가정하에 바로 시작하도록 하겠다. 우리는 gapi라는 것을 통해 구글로그인을 구현 할 수가 있다. 물론 필수적으로 html 문서에는 ...! 87번째 줄과같이 구글 api에 대한 CDN이 들어가 있어야 사용할 수가 있을 것이다. gapi.load(name,callback) 를 통해 우리가 사용하고자하는 구글 api를 활성화 시켜야 한다.  첫번째 매개변수인 name은 여러 api중에 우리가 사용하고자하는 api이름을 기술하면 되고, 두번째 매개변수로 콜백함수를 넘겨주어야 한다. auth2는 우리가 로그인을 위한 인증 api를 쓰겠다는 의미이다.  콜백 함수는 우리가 사용하고자 하는 api를 init 해주는 메소드를 쓰면 된다 . gapi.auth2.init() 메소드는 사용하고자하는 인증 api에 특정 값들을 설정할 수가 있다. 보는 바와 같이 클라이언트 아이디와...

나의 앵귤러관련 포스트의 중점은 내가 이해한 것을 바탕으로 내가 어려웠던 점들을 기술하는데 있다. 실제로 프로젝트를 진행하면서 Angular에서 javascript 라이브러리를 가져다 쓰려고 하는데  그 방법을 알 수가 없어서 고생을 많이 했었다. 그 방법을 공유 하고자 한다. 두가지만 알면 된다.  라이브러리에서 쓰고자하는 함수나 변수를 가져오는 것. 타입스크립트로 사용하고자 하는 DOM객체에 접근 하는 법. 현재 진행중인 프로젝트는 Medium Editor라는 것을 기반으로 하고 있다.  이 라이브러리의 특징은 다음과 같다.  https://github.com/yabwe/medium-editor (해당 라이브러리의 깃헙 주소) 마지막 줄을 보면 vanilla Js를 이용해 작성되었으며 별다른 프레임워크를 도입하지 않았다고 한다. vanilla Js 는 쌩 자바스크립트이다.  2017년 현재를 기준으로 프론트에서 프레임워크는 춘추전국시대마냥 수많은 프레임워크들이 쏟아져 나오고 경쟁하고 있다. 이러한 기조에 반발해서 나온 것이 바닐라 자바스크립트인데, 순수 자바스크립트로만 개발을 하자는 취지의 운동이다. 필자는 이 에디터를 꼭 쓰고싶었는데 타입스크립트 안에 어떻게 적용해야 할지 막막했다.  타입스크립트는 자바스크립트를 확장한 언어이다. 다시 말하면 타입스크립트는 자바스크립트를 알아 볼 수 있으나 자바스크립트는 타입스크립트를 알아볼 수가 없다... 라고 하면 이해가 될려나? 쨌든 타입스크립트에 안에 자바스크립트를 쓸수 있는 방법은 여러가지가 있는 듯 한데, 가장 무난하게 쓸 수 있는 방법을 소개 한다. 6번째 줄을 먼저 보자.  declare 라는 키워드를 통해서 우리는 역참조라는 것을 할 수가 있다.  결국엔 타입스크립트는 자바스크립트로 변환되어서 우리가 작성하고자 하는 html 문서에 기록이 된다....

이번 포스트에서는 Directive,Component,Service(이하 지시자, 컴포넌트, 서비스) 3가지를 한번에 묶어서 소개하도록 하겠다. 공부를 하면서 이 3가지는 굉장히 닮아있다고 생각을 했기 때문이다.  1. 지시자, 컴포넌트, 서비스  먼저 다음 코드들을 살펴 본다. 내용은 무시하고 구성이 어떻게 되어있는지를 쭈욱 살펴보자.  @Component 장식자를 보면 알 수 있듯이 컴포넌트이다. 구성된 것을 보면 @Component 장식자안에 관련 메타데이터들을 넣고 아래쪽에 클래스를 가지고 있다. 이것은 지시자이다. 7번째줄을 보면 메타데이터에는 selector 속성만 있다. 클래스 이름이 떡하니 서비스이다. 이것은 서비스이다.  3가지 요소들은 어떤점이 닮아있고, 어떤 점이 다를까? 먼저 이 3가지는 클래스를 가지고 있다는 것이 닮았다. 아래쪽에 보면 export 로 시작해서 class가 있음을 알수있다. 하나의 클래스로 정의가 되기때문에 멤버를 가질 수 있고, 로직을 포함할 수 있다.  컴포넌트와 지시자에는 있고 서비스에는 없는 것이 있다. 무엇일까? 바로 selector 이다. selector로 지정된 이름은 실제 view를 담당하고 있는 곳에 적용되는 이름이다.  <custom/> 과 같이 태그형태로 나타낼수도있고, <element [directive] /> 와 같이 속성값으로도 들어 갈 수가 있다. 서비스는 selector를 지니고 있지 않다. view에 직접 표시될 길이 없고 단순히 로직만을 가지고 있다는 것을 알 수 있다. 컴포넌트만 가지고있고, 서비스와 지시자에서는 볼수 없는 것들이 있다.  template, style 등 이다.  앞서 컴포넌트와 지시자가 뷰에 관여한다고 이야기를 했는데,...

정신없는 설날 일정을 마치고 간만의 포스팅이다. 최근에, 나의 허접한 글을 보시는 분들이 있음을 알게되었다 (통계에 조금씩 방문자 수가 오르고 있더라 ㅎㅎ 허허벌판 구글의 블로거에 올리는 거라 나만 보게될줄 알았는데...!) 좀더 친절하고 가독성이 편하도록 노력해야겠다. 어떤 지식이던지 먼저 용어를 잘 알아야 한다. 언어 공부에 있어 단어공부가 가장 먼저 선행되어야 하는 것처럼 Angular도 먼저 지칭하는 단어가 어떤 것인지를 알아야 한다고 생각해서 이번 포스트를 준비해보았다. 필자가 느낀 앵귤러의 전체적인 모습을 그려본다면 다음 그림과 같다. (draw.io 라는 웹앱을 통해서 그린 이미지이다) 색깔이 다소 어지러울 수 있음에 양해를 구한다. 하나하나 뜯어보도록 하자. 1. Module Angular App은 모듈의 집합이다. 모듈 하나하나가 내용을 담고 있는 레고 블럭이라고 생각한다면 이해가 빠를 것 같다. 항공모함을 제작하는 과정도 이와 비슷하다고 한다. 항공모함을 만들기 위해 전기, 무기, 갑판 등등의 기술들이 한데 모여서 작업을 하는 것이 아니라 모듈을 개별로 각각 만들어 마지막에 해안가 근처에서 조립해서 바다로 보내는 것인데, 시간과 비용 모두 절감할수 있는 방법이라고 한다. 모듈하나를 만드는 기준은 무엇일까? 모듈을 만드는 것은 시간과 비용과 관련해서 중요한 문제이다. 모듈간의 관계성은 되도록이면 없도록 만드는 것이 제일 중요한 기준이라고 생각한다. 다시말해, 코드의 중복이 발생하지 않도록 하는 것이다. 동일한 기능이라면 하나의 모듈로 만든다는 생각으로 개발에 임하는 것이다. 하나의 모듈은 다른 모듈들은 물론이고, 컴포넌트, 제공자나 서비스들을 전부 포함할 수 있다. 항공모함을 만드는 것과 별반 다를게 없다. 실제 코드상에서 어떻게 나타나는 지 보자  요즘 필자가 작업중인 웹프로젝트의 루트모듈이다. 가장 위쪽에는 다른 곳으로부터 import 되어진 모듈들이 보인다. ...

npm start 명령어를 실행해서 서버를 가동시킬때 어떠한 과정을 거쳐 실행 되는것일까? 이제 막 6개월차 프로그래밍 공부를 하고 있는 나로서는 구체적인 동작은 설명할 수는 없으나 개략적으로  어떤 파일이 어떻게 사용되어지는지 알아보겠다. src 디렉토리 내부에있는 파일들이 실제 가동할때 쓰이는 것들인데 서버가 가동되기 시작하면 가장 먼저 바라보는 것이 main.ts 파일이다.  비쥬얼 스튜디오 코드를 통해 해당 파일 내부를 들여다 본다. 이것이 타입스크립트를 적용된 가장 첫번째로 살펴본 파일이다. 문법에 대해 설명하자면  import {} from '' ; 는 외부 라이브러리로 부터 중괄호 안에 있는 이름의  엘리먼트를 가져오겠다는 의미이다.  12번째 줄을 보면 platformBrowserDynamic().bootstrapModule(AppModule); 이 있다. 가장 먼저 실행되는 모듈로서 AppModule 이라는 것을 임포트해와서 부팅하겠다는 의미이다. AppModule은 위 임포트 구문에서보면 어디로부터 온것인지 알 수 있다. app/app.module app 디렉토리에 안에 app.module 이라는 이름의 파일로부터 가져온것을 알수가 있다. 모듈을 살펴보자. 원래 파일의 이름은 확장자가 ts인 app.module.ts 이다. 타입스크립트에서 임포트 구문에 쓸때는 확장자는 무시해도 상관없다고 한다.  1~4 : 아직은 알수 없지만 어떤 모듈들을 임포트 하고있다. 6: 실제 우리가 실행한 컴포넌트인 AppComponent를 가져온다. 컴포넌트에 대해서는 따로 설명할테니 지금은 그냥 넘어간다. 8~19: @NgModule() 은 이 파일이 모듈임을 명시적으로 알리고 그안에 설정할 메타데이터를 기록할 수 있는 곳이다. Json의 형태로 설정값들을 넣어...

블로그 이전했습니다~ 링크( https://steemit.com/@cicada0014 )  최근에 같은 팀을 하나 꾸려 웹프로젝트를 하게되었다. 제대로된 포트폴리오하나 만들어보자는 일념으로 시작하게 된 프로젝트인데, 맨 처음 구상했던건 사람들이 네티즌 수사대가 될 수 있는 플랫폼을 만들어보자는 생각이었다. 그런데 막상 시나리오를 짜보다보니, 정치라는 것이 좀 처럼 종잡을 수 있는 것이 아니었다. 워낙 스펙트럼이 넓었기에 예측이 되지 않았던 점이 첫번째, 플랫폼으로서 작동하기에 종종 알수 없는 행동들로 인한 피해가(예를들면 욕지거리의 글같은 것들) 예상 되는 것이 두번째 이유였다. 그래서 좀더 발전적으로 생각한 것이, 플랫폼으로서의 성격을 버리고 도구로서의 웹사이트에 집중하는 것이 어떻겠냐였다. 우리가 애초에 기획했던 것은 사람들이 네티즌 수사대로서 활동할 수 있도록 환경을 조성해주는 것인데, 방향을 바꾸어 그 인터넷 수사를 도와줄 수 있는 도구에 초점을 맞추고자 하였다. 심플하고, 빠르게 웹 리서칭을 도와줄 수 있는 웹앱을 만들려고 하고 있고, 프론트 기술에 관심이 많았던 나는 프론트를 하고싶다고 팀원들에게 이야기를 했다. 설계 단계에서 어울리는 프론트 프레임워크를 찾았다. 역시 가장 핫했던 것은 리액트와 앵귤러였다. 앵귤러는 두번째버전으로 16년 중반에 정식발매가 되었고, 가장 최신의 버전이었다. 기존 앵귤러의 단점을 보완해서 더 좋았다는 점도 참고할만한 했지만, 팀원들을 비롯하여 내가 가장 끌렸던 기술은 타입스크립트였다. 앵귤러2 팀은 타입스크립트를 주력언어로 삼겠다고 밝힌것을 조사하면서 알게 되었다. 앵귤러 2와 타입스크립트의 완벽한 조합은 객체지향, 관점지향으로서의 프로그래밍의 진가를 여실히 보여주는 듯하다. 우리 팀은 공부가 큰 목적이었기 때문에, 1주일에 한번씩은 자신이 공부한 내용에대해 세미나를 열기로 합의했다. 나는 팀원중에서 가장 먼저 앵귤러 프레임워크를 공부를 했기에 이 내용을 가지고 세미나강연을 했...