2월, 2017의 게시물 표시

개발팀장이 되면서 겪게된 점들 1

이미지
                                                         <팀원을 모집하기 위해 고군분투하는 모습이다. > 첫 한달  개발팀장을 맡다 2021년 5월 , 기존에 있던 CTO분이 휴직(개인사)을 하게 되면서    개발에 대한 모든 권한을 내게 일임하였다.   개발에 대한 모든 의사결정을 전부 내게 맡긴 것으로 ,   어느 정도 규모가 있는 회사의 의사결정권한을 갖게 된 것은 그만큼 내게 큰 신뢰가 있었음을   알수 있게해주는 대목이었다. 그러나 전혀 예측하지 않았던 상황이기에 준비가 되어있지 않았던만큼 처음에는 삐걱거렸다. 가장 첫번째로 어려움을 겪었던 것은 업무의 배분이었다.   관리자가 되니까 해야할일은 업무를 만들고 또 그것을 팀원들에게 분배하고 잘 되고있는지 취합하고 관리감독을 하는것이었다.   군 시절 장교로 복무하면서 겪어봤던 일이긴 했지만, 군복무 당시에도 그닥 잘 하지는 않았던 것 같다.   그럼에도 어쨌든 전반적인 시스템을 이해하고 있었고, 어떻게 구현해야할지에 대해서는 어느정도 경험이 쌓여있었기때문에 큰 문제가 없을 줄 알았다.   실무자로 일을 할 때에도 항상 업무를 받아서 하지는 않았다. 스스로 돌이켜보건대, 나는 주어진 업무가 없으면 스스로 만들어서 제안하고 기획하여 업무를 진행했다.  조그마한 스타트업이었던 첫 회사에서부터  내가 할일은 내가 만들어서 곧 잘했다. 어떤 큰 방향만 정해져있다면 그건 큰 어려움은 아니었다. 나에게 일은 항상 있었다.   매니저가되면서 달라진게있다면 내가 할일만 만드는 것은 아니라는 점이다 . 남이 할 일도 만들어줘야했다.  다행히 팀원들에 대한 면담을 실시한 결과,(팀원을 맡게되자마자 했던 부분)   마이크로 매니징을 원하지는 않았기때문에 큰 그림을 그리는 정도만 준비하면 됐었다.   문제는 내 실무를 동시에 진행하면서 팀원들의 업무 방향도 설정해야했기때문에 시간이 배로 들게 되었다는 점이다. 물론 두배로 일하지는 않았다. 대신에 내 실무시간을 줄였고

iframe 보안 문제 우회 및 해결법 2

이미지
iframe 보안 이슈를 우회하여 다른 여러 사이트를 화면에 표시하는 방법을 소개한다. 크롬에만 국한적인 방법이기때문에 정당한 해결책이라고 할 수는 없지만 이거라도 찾아낸 게 어딘가 싶다.  - 해결책 = Chrome extension 크롬 확장프로그램이 바로 그 해결책이었다. 해결책의 시초는 다음 확장 프로그램이었다.  Split screen 이라는 프로그램이다.  화면 분할이 되어지는 모습 처음 우리가 기획했던 기능이 화면분할이었는데, 이 프로그램이 구현하고 있었다.  iframe을 쓰는 것은 동일했는데, 이 확장프로그램은 어떤 도메인이던 들어갈 수가 있던 반면에  내가 만든 iframe에서는 자꾸만 SOP에 걸렸다. 도대체 무엇이 그 차이를 만들어내는 건지에 대해 구글링하고 탐색해보았다.  그러다가 발견한 것이, 저 프로그램이 켜진 상태에서는 내 페이지에서도 어떤 웹사이트던 볼 수 있더라는 것이다.  크롬 확장프로그램에 그 해답이 있다는 것을 알게된 것은 오래 걸리지 않았다. chrome 브라우저에서 제공하는 chrome 객체에는 webRequest라는 멤버가 있었다.  이 멤버는 http 요청에 관여할 수 있는 객체였는데,  https://developer.chrome.com/extensions/webRequest  이곳에 가면 자세한 API를 살펴볼 수 있다. onHeaderRecived 를 통해 리스너를 입혀주기만 하면 문제는 해결되는 것이었다. onHeaderRecived는 응답헤더를 받을때의 시점이다. SOP를 해결하기위해 서버에서 온 응답http 헤더를 조작해주었다.  x-content-security-options', 'x-webkit-csp', 'content-security-policy', 'x-frame-options 과 같은 보안 정책들에 관한 header들이 포함된

iframe 보안 문제 우회 및 해결법 1

이미지
주제 : iframe, http header 이해과정의 서술 (보안에 대해 쬐금 알게 된것도 ㅎㅎ) 목적: 힘들게 알아보았던 과정을 다시 잊어버리지 않기위한 복기 및 다른 사람들에게 알리는 것 현재 진행하고 있는 프로젝트의 가장 핵심이라고 볼 수 있는 기능을 구현함에 있어 어려움에 부딪혔다. 그 기능은 바로 iframe으로 띄운 다른 웹사이트의 내용을 현재 페이지에 그대로 드래그 할 수 있게 해주는 것이었다. 기능을 구현하기 위해 공부 했던 것들과 그로 인한 결론을 차례대로 서술해가기로 했다. 1. iframe 의 역사 (제약 사항이 나타나게 된 것을 위주로)  -XSS 로 인한 제약사항 발생 2. iframe 제약사항 극복하기 위한 방법   -JSONP   -PROXY 3. 보안 문제를 우회하는 해결책. 1. iframe 의 역사 iframe의 기능은 현재 페이지에 또다른 페이지를 포함하도록 해준다. 비슷한 분야에서 embed 태그라던가 object 태그가 있지만 iframe이 가장 많이 쓰이지 않나 조심히 추측해본다(실제로 iframe을 위주로 보아 왔다. 특히 Youtube가 iframe으로 지원하기때문에...) iframe은 inline frame의 약자로써, 바로바로 쓸 수 있는 프레임이라는 뉘앙스를 가지고 있다. 과거 html 4.01 명세서에는 frame 태그가 존재했었다. 이 frame 태그는 body 태그 대신 frameset 태그와 같이 쓰이면서 페이지의 구조를 잡고 분할 하는 것을 쉽게 해주었었다. 하지만 html 5에 와서는 obsolete 되어버리는데 일단 로딩하는데 많은 시간을 잡아먹을 뿐더러, 동작, 보안 등의 분야에서 많은 문제점이 발견되었기 때문이다. { 태그의 역사에 대해서는 잘 정리한 다음 사이트를 참고하시기를 http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-histor

'16.7.21 전역후 생각

이미지
다음은 2016년 7월의 생각이다. 군대 전역을 하고 정치적 제약에서 자유로워졌으니 할말을 해야 겠다. 대한민국이라는 나라에 소속 되어있음을 절실히 느끼면서 요즘 정치적인 문제에 대해 많은 생각을 한다. 먼저, 과거의 나는 나름 소수 엘리트들에 의해서 정치가 진행되는 엘리트주의를 선호한다고 주장한 바가 있는데 다시 생각이 바뀌고 있다. 그 원인으로는 내가 이 나라의 복지적 혜택을 몸소 받았음이다.  경제적으로 독립하기 전까지는 내 스스로가 세금을 내지도 않았을 뿐더러, 그 세금으로 국정이 어떻게 운영되는지 관심도 없었고, 영향도 덜 받았다고 '느꼈다'. 내가 진로를 결정함에 있어, 나라가 내게 큰 도움을 주고 있고 그 나라가 그렇게 운영되는 것이 바로 나와 내 이웃, 동포들의 세금으로 이루어짐을 직접 피부로 느끼게 되었다.  하지만 돌이켜 보니, 나는 대한민국이란 나라에서 얼마나 많은 혜택을 받고 있었던가. 과연 부패한 독재, 엘리트 사회에서라면 나는 그들이 쥐어주는 혜택을 받을 수 있었을까? 나혼자 자수성가해서 잘 성장했다면 몰라도, 애초에 그런 기회조차 주지 않았다면 나는 어떻게 되었을까. 이러한 것들을 생각해보게 되었다. 우매한 대중들에 의한 민주주의를 싫어했었다. 알려고 하지도 않고, 행동조차 하지 않으려하면서 자신들의 이익만 챙기는 막연한 대중들을 비난하면서 정작 나는 나를 비추는 거울을 외면하고 있었던 것이다. 나 역시 내가 비난 하던 대중들과 다를 바 없었는데... 이상적으로라면 독재, 엘리트 주의를 찬성한다. 그런 훌륭한 사람들이 있다면야  정말 플라톤이 말하는 철인이 등장한다면 민주주의 보다는 더 나을 것임은 지금도 자신한다. 그러나 현실이 그렇지 않다. 현실적으로 인간들은 굉장히 이기적이고 탐욕적이다. 그렇지 않은 사람들도 존재하지만  이건 별 의미기 없는 것이다. 이기적이고 탐욕적인 그 본능이 이

[Angular2 with TypeScript] 7. angular-cli.json 파일 활용

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

[Angular2 with TypeScript] 6. Google Login API

이미지
이번 포스트에서는 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에 특정 값들을 설정할 수가 있다. 보는 바와 같이 클라이언트 아이디와 쿠키정책, 그 범위

나의 업

이미지
판교의 스타트업 캠퍼스 존재를 알게 되었고, 16주간의 교육을 받고자 지원을 했었다. 같이 공부하고 있는 동생에게도 이야기해서 둘이 같이 지원을 했는데, 나는 떨어지고 동생은 붙었다. 내심 갈 수 있을 것 같은 기대심을 가지고 있었는데 뚝 떨어져 버리니 아쉬웠다. 동생이라도 잘 되어서 많은 것을 배웠으면 한다. 2안으로 삼았던 스타트업 인턴을 지원하기 위해 포트폴리오를 완벽하게 끝내고 3월달 쯤에 지원할 예정이다.  이번 스타트업 캠퍼스 지원에서는, 각 문항당 400자(굉장히 짧다) 짜리 5개 문항을 적는것이 지원서의 전부였는데 하나하나 적기가 굉장히 어려웠다. 나는 내가 창업을 굉장히 하고싶어해서 잘 적을 줄 알았는데, 프로그래밍 공부에만 열중하다보니 정작 궁극적인 고민을 하지 않았었나보다. 한 문장 한 문장 적히지를 않았다. 비록 떨어지긴 했지만 다시금 방향성을 잡아주는데 큰 도움이 되었다. 특히 나의 글쓰기 실력이 얼마나 형편없는지를 깨닫는 계기가 되었다. 같이 지원했던 동생과 서로 지원서를 읽어보았는데, 썩 잘썼던 동생의 글에 비해 내 글은 정작 글을 쓴 나도 알아보기가 힘들었다.  무엇보다 비문이 무척 많았다. 나의 한국어 능력이 그리 높지 않다는 것을 이제서야 알게 되다니... 고등학생때 언어영역은 못봐야 2등급이었다. 따로 공부를 하지 않는데 점수가 잘나오는 것으로 봐서 나는 국어를 썩 잘 하는줄 알았는데, 그게 아니었다. 블로그를 운영하는 이상 문서를 쓰는 작업은 평생 이뤄질 것 므로,  한번 읽었던 적이 있던 [대통령의 글쓰기]라는 책을 책장에 꽂아두었다. 나는 왜 창업한다고 했을까? 지원서를 잘 적지 못함을 반성하면서 생각을 다시 정리해본다. 마지막에는 무엇을 창업할 것인지에 대해 정립해본다. 나의 진로를 진지하게 고민하기 시작한 때는 2013년 말, 대학교 4학년의 마지막을 달리고 있을 때였다. 아무런 목표도 없이 점심에 일어나서 시간을 어떻게 때우는가에만 몰두했던 것 같다. 무

[Angular2 with TypeScript] 5. js 라이브러리 사용하기

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