깍돌이

안녕하세요 깍돌이 입니당 

최근 너무 바쁘다는 핑계(?) 로 포스팅을 못하고 있습니다. 물론 진짜 바쁘기도하구..  

요즘에 영어를 시작했어요 토이 프로젝트도 시작했구요 QA와는 별개로 개발적인 자기개발을 위해서 였습니다.

포스팅 할 주제는 정말 많이 찾아 놨는데(평소에 궁금했던 것들 ) 

늦게까지 일하구 퇴근해서 영어 강의 듣고 

토이 프로젝트 (React 기반) 를 하려다보니 진짜 전혀 시간이 평일에 나지 않습니다. ㅜㅜ

ML도 해보고싶고 저것도 해보고싶고 그러고 싶은데 일단 눈앞에 해결해야될 일이 있기 때문입니다.(FE 자기개발)

벌써 5년찬데 나이도 이제 계란 한판이고 푸념은 아니고 어떻게 살아왔나에 대한 글을 남기고 싶어서 이렇게 

지금 남기게 됐습니다. 지금 남겨야 잘 남길수 있을 것 같아서 ㅎㅎㅎㅎ

학부생 시절 

많은 시간이 흘렀네요  26살에 졸업하자마자 구직 활동을 했고  학사 시절엔 나름 이것저것 다해봤었는데

C,C++,C# 배울때는  Visual Studio 에 있는 spy 툴(현재 최신버전엔 없습니다.) 도 만들어보고 이외에도

테트리스, 그림판(윈7 , 윈xp), 작업관리자, 캐치마인드, Battle City (2D 탱크게임), 자료구조 공부한다고

코레일 예약 시스템도 해보고 Kinect for Developer로 모션인식(동상) 도 만들어보고 

JAVA 때는 위에 만들어봤던거 훑어보고(자바로 다시 제작)

자전거 네비게이션도 만들고 교내에서 상도 받아 보고 (금상)

마지막 학기때는 SpringFramework 로 쇼핑몰 만들고 졸작도 하고 이것 저것 참 많이 만들었습니다.

고등학교때는 공부를 잘안했는데요 머리가 나쁘기 보다는 그냥 흥미가 없었던거 같아요 

(학교에선 평균점수 밑으로 매 타작을 했는데 해당 과목은 애초에 안맞으려고 90가까이 맞았었거든요)

대학교 가서 컴퓨터공학과를 전공하면서 처음으로 코드 짜느라고 30시간도 안자보고 빌드된 바이너리 실행시켜서 제출

할때 는 그렇게 세상을 다 가진것 같더군요  그러다 졸업 시기가 왔습니다. 이것저것 만들어 본게 많긴했는데

주력으로 했던것이 없던 상태였었죠 그래서 마지막 웹프로젝트를 해서 그런지 학교 선배 및 동기들은 웹 SI를 하러 다 

떠났죠 학교 인프라가 좋지 않아 대부분 작은기업에서 SI를 시작했고 저도 그럴거라 생각 했는데 

저에게 코딩을 가르쳐 주셨던 은사님께서 회사는 좀 큰곳이지만 QA로 가더라도 갔으면 좋겠다 라고 하셔서 현재 회사에

몸 담게 되었네요. 

QA 회사 입사 

입사 후 4년이 지났습니다.  앞선 1년 반은  웹쪽이 아니였지만요 

C++ 쪽  API 쪽 unit Test  사실 이때까지 만 해도 C++ 은 누구보다 자신있었는데 .. 지금은 많이 잊어버렸네요  

(표준도 점점 나오고있던데 ... (C++17))

그러던 어느날  사내에서 web-front-end-FrameWork 제품이 사내에서 개발되고 맡을 

QA를 사내에서 물색 하는 도중 저에게 문의가 왔습니다.

"우리팀에서 그나마 코딩에 대한 거는 너가 잘 할수있을 것 같아 내 생각엔 너가 했으면 좋겠어 "

맡기전 날 들은 이야기였어요  QA로 오면서 개발에 대한 열망은 계속 있었는데 1년간 거의 Unit Test 나 UI 위주의 테스

트 를 하던 저에게 눈이 떠지는 이야기였죠 당연히 하겠다고 했습니다.  사실 C++쪽 UI 도 자동화 하려구 openCV 관련

서적들도 사놓고 준비하긴 했는데 나중에 봐야지 라는 심정으로요

또한 팀장님 뿐 아니라 여러 직원들도 관련된 일은 저한테 질문하거나 저에게 일이 배정되거나 가 시작되었습니다.

그런데 해당 프레임워크에서 놀라운 점이 발견되었죠

SPA? , Router ? , Controller ? HTML5 ? CSR? 

SPA기반??? 학부생 시절 SpringFramework 밖에 몰랐던 저는 서버가 없이 화면을 만든다는거에 이해가되지않았고

web-front-end의 트렌드를 읽지 못했죠 처음엔 이렇게 쓰는거구나 이렇게 나와야되는구나 이렇게 동작해야 되는구나 로

시작했습니다. 남들과 같이..

QA 의 모토 설정 

남들과 같은 건 오래 가지 않았습니다. 좀 더 책임감 있는 QA 를 하고싶었고 제가 맡은 제품을 누군가 받아서 개발을 

한다는 책임감이 생겼기 때문이죠.  "남들은 필요한 기능만 쓰지만 나는 다 할줄 알아야겠다" QA 할 때 제 모토였습니다.

있는 기능 만들어진 기능들을 다 사용해 볼수 있어야 한다고 생각했고 프레임워크 뿐 아니라 브라우저에 대한 지식도

필요하다고 생각했죠. 개발자들 따라다니면서 수도없이 질문했습니다. 왜? 이렇게 만들었는가 왜? 왜

(물론 컨피던스같은 음료라도 한잔 주면서요 ㅎㅎ)

QA를 하기위해서 TC관리 Suite관리도 중요하고 배포 프로세스를 확립하는것도 중요합니다. 그전에 앞서 제품을 이해

하지 못한다면 이슈 분석이나 관리가 될까요 ?

일단 책부터 사서 읽기 시작했습니다.

인사이드 자바스크립트,모던 자바스크립트, Do it node.js ,MDN, W3C, HTTP 완벽 가이드,

node.js 교과서

사용하는 개발자들이 생겨나면서 같이 고민하여야 할 부분이 들어났고 프론트 관련 개인공부가 진행되다보니

프론트가 재밌더군요 3년 내내 부사수없이 사수없이 일했지만 재밌게 일했던거 같아요.

그리고 QA에 하면서 도달은 곳이 있죠 "자동화" 웹이라는 플랫폼이 제가 생각하기에 자동화가 어렵지 않은 부분이라고

생각 했고 단순한 몇개의 케이스만 하는 것은 생각보다 어렵진 않았습니다. 하지만 많은 케이스들에 대한 자동화가 

되어야 하고 이에 대한 리포팅까지 이루어짐을 고려하다 보니 디자인 패턴 및 자료구조도 자동적으로 공부하게 되더구

최근에는 거의 도달했다고 생각됩니다. (IE11쪽 트러블 슈팅만 좀 ... )

이것저것 새롭게 해보는 것을 좋아하는 편이라 

git을 써서 자동화 코드도 사내에서 관리하고 프레임워크로 만드는 코드도 관리가 필요했으면 해서 git도 쓰고

배포 도 자동화 해보고 싶어 jenkins도 사용하구요

개인 github도 관리하고싶은 욕심이 생겨 github에 잔디도 심고있습니다. ㅎㅎ 

https://github.com/lgance

몇년만에 저의 일을 대신해줄 친구들이 들어왔습니다. 저 혼자 달려왔던 고독했던(?) 길을 이 친구들은 좀더

편하게 달려갔으면 하는 바람이 있어 하나부터 열까지 다 알려주려고 하고있습니다.

부사수도 없고 사수도 없었기에 누군가에게 설명할 기회도 없었고 기술적인 이야기 도 나눌 기회가 없었습니다.

(이건 정말 하고싶었던건데요 ) 

코드리뷰도 마찬가지고 혼자만의 코드로 있어 오픈소스 코드들을 보며 적지않은 충격을  받았고 

현재는 점점 나아지고있다고 생각 합니다.

NAVER Boost Course

최근에는 NAVER Boost Course 에서 Front-End 코드 리뷰어로도 활동하고 있습니다.(이정돈 적어도 되겠죠?)

(다른 FE리뷰어분들이 리뷰 프로젝트가 뜨면 바로 가져가서 많이는 못하고있지만요 )

(NAVER Boost Course 의 코스 설계가 정말 좋습니다. 한번 가서 기본기를 다지는 것 도 좋아요 강의는 무료!)

https://www.edwith.org/boost-course/intro

수강생들에게 제가 알고있는 모든 것들에 대해서 한줄한줄 리뷰를 적을 때 마다 매우 기분이 좋았는데 

고마웠다는 답글 까지 받으니 매우 뿌듯 하더군요 하길 잘했다는 생각도 들었습니다. 보람찬 일이에요

후계자(?) 분들이 오시니 이제 다시 새로운 것에 대한 열망이 생기더군요  

이제는 QA가 아니라 web-front-end Developer 로써 직접 만들어서 운영 했으면 한다 라는

생각이 요즘에 들기 시작했습니다.  ( 그래서 사이드 프로젝트를 시작했습니다. )

더 많은 것을 경험하고 더 많은 문제와 직면 할수 있을 것 같기 때문입니다.

세상에 못할 것 없고 안되는 것 없습니다. 현재까지 살아오면서 한번도 쉽게 된적 없었고

앞으로도 그렇지 않을거라 생각 합니다. 

터닝포인트를 가지기 위해서 저를 한번 소개 해볼까 했는데 

지금회사가 첫 이력서 였고 입사를 해서 쭉 일하다 보니 저를 다시 소개할 기회가 없었습니다.

최근에 한번 영문으로 자기소개서를 작성해야 할 기회가 있어서 작성 하게되었는데

자기소개서를 5줄 정도로 짤막하게 작성해봤습니다. (언젠가 쓸일이 있겠죠?)

마지막에 적었던 글귀가 아직도 기억이 나서 지금 글을 작성하게 되었고  이 글에 해당 말머리는 남깁니다.

저는 어떠한 일을 하든 자부심을 가지고 일합니다. 

새로운 것에 대한 열망도 있고 물론 재미있거든요. 뭔가 시간이 갈수록  이해가 더 잘되는건 제 착각인지 모르겠지만 .ㅎ

QA업무를 하면서 R&D 와 Enginner 와 , CS 등 여러 사람들과의 

커뮤니케이션도 정말 많은 도움이 되었네요  처음에는 연락조차 힘들었는데 어느샌가 자연스러워졌습니다. ㅎㅎ

앞으로도 열심히 하겠습니다.

긴글 읽어주셔서 감사합니다.

감사합니다.

- Web-Front-End Framework QA  깍돌이 

나름 우선순위를 정해서 하나씩 빠르게 처리하는데

뭐랄까...

일이 단 기간 내에 갑자기 많아지니 뭘 먼저 해야될지 몰라서 멍..

[2018-10-22]

React에서 setState시에  여러번 setState를 호출할시에는

setState({ 형태가 아니라 

setState((state,props) =>{

});

형태처럼 함수로 던져야 한다.

// 공식 홈페이지 

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

[2018-10-20]

css 애니메이션에서는 하드한 작업을 하는 css 애니메이션과 그렇지 않은 애니메이션이 있다.

이에 앞서 기본적으로 브라우저 는 싱글스레드 기반이기 때문에 블로킹 로직 (for 문 ) 같은 경우가 있을 경우

UI 가 멈추는 현상이 발생한다. 이 그렇기 때문에 css animation 도중에도 블로킹 로직중 하나인 for문을 일정 이상 돌리

게 되면 애니메이션이 멈추는 현상이 같이 발생하게 된다.

하지만 모든 UI 가 멈추지는 않는다.

(브라우저 역시 C++기반으로 만들어졌고 OS 위에서 돌아가는 형태이기 때문에 js 만 JIT형태의 싱글스레드지 

브라우저 내부적으로는 싱글스레드 같은 형태를 사용할수가 있기 때문이다. Chrome에서는 이와같은 경우를 ServiceWorker로 해결하려고한다.

회사에서 일하다가 알게된건데 어떤 연구원이 직접 링크 해준 url이다.

@연구원님 감삼다

// 블로킹 로직을 취하여도 모든 UI가 멈추지 않는 현상 확인 

http://www.phpied.com/css-animations-off-the-ui-thread/

일부 애니메이션은 main thread 와 관계없이 실행되는 경우가 있다. 완전한 native 기반 (브라우저)

에 css 애니메이션은 main thread에서 도는것이 아니라 composite thread 에서 실행된다고 한다.(다른 스레드이기 때문

에 main thread에서 실행되는 블로킹 로직에 의해 ui 가 멈추는 현상이 발생하지 않는다. compositor thread에서 돌기 

떄문 (배움 노트이기 떄문에 배운거고.. 이에대해서는 따로 조사해봐야겠다)

대표적으로 공유 받은 내용에선

transform 과 opacity 의 경우에는 compositor thread에서 실행되기 때문에 블로킹 로직에 영향을 받지 않게 된다. 

background-color 같은 경우는 헤비한 동작으로 main thread에서 동작하게 된다.

// 관련 링크 공유

https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance#css-vs-javascript-performance

와 같은 형태로  ** keyframe에서는 !important 가 무시됩니다.

@-webkit-keyframes blink {

    0% {

        -webkit-transform: scale(1);

        opacity: 1;

    }

    100% {

        -webkit-transform: scale(0.5);

        opacity: 0;

    }

}

링크를 안가보실까봐 중요    부분 을 캡처 하였습니다.

의문이 드는점은 Chroem,FireFox,Opera 정도면 IE는 ???? 아직 국내 웹에선 IE를 빼놓을수가 없다.... 언제 ts를 하지

[2018-10-15]

리덕스 - 상태관리 lib 

직접 그려본 도식도 흠흠 

[2018-10-03]

&& 연산자 - 가드 연산자

|| 연산자 - 기본 연산자

ex:

npm package.json 에서

^(minor,patch 는 업데이트 가능)

~(patch 업데이트)

x.x.x  모든 숫자 가능

< > <= >=  그대로의 의미를 가짐

npm 설치

npm i module@version 명으로 버전 명 설정 가능

ex:)

npm i cookie-parser@1.4.2

npm 업데이트

npm update ( 전체 업데이트 ) ^~ x.x.x.x => 등의 형태에 맞게 package.json 에있는

또는 

npm 부분 업데이트

npm update cookie-parser (특정 모듈)

npm 삭제

npm remove cookie-parser

npm 상태 확인(업데이트 가능한 리스트 확인)

npm outdated

[2018-08-23] Promise.all ( 전부true를 받아야하기때문에 좋지않음)

수정하겠습니다. Promise.all 에 대한 이야기 

[2018-08-23] 미디어 쿼리 사용 (블로그 카카오 광고 )

min-width : 500px -> 500보다 위인 경우에 적용  ( 너비를 500까지 보장해준다 최소 )

max-width : 500px -> 500보다 아래인 경우 적용 ( 너비를 500까지 보장해준다 최대 )

결국 0~400 까지는 oragne (주황색)

400~1024까지는 red (빨간색)

1024이상은 lightblue(하늘색) 인 경우에 대한 미디어쿼리이다

	.myclass{
			width:500px;height:500px;
			background:lightblue;
		}

		@media (min-width :400px) and (max-width:1024px){
			.myclass{
				background:red;
			}
		}

		@media (max-width:400px){
			.myclass{
				background:orange;
			}
		}

[2018-08-22] Web 외부 라이브러리인 D3.js를 EUC-KR에서 사용시 발생한 이슈 

< 해당 euc-kr에서의 그리스 문자 이슈 >

D3.js 라이브러리에서는 내부 변수로 그리스 문자를 사용하고 있습니다.

-> 해당이슈는 회사에서 로마자로 변경

그런데 사용하는 머신에서 euc-kr 인코딩 환경을 쓰게 되면 해당 문자들이 읽히지 않게 되는 현상이 생겨서

라이브러리 에서 오류가 나게 됩니다. 

제우스8 에서 로그 확인법

$JEUS_HOME/domains/jeus_domain/servers/adminServer/logs 에서

tail -f JeusServer.log 로 실시간으로 확인한다.

[2018 - 08 - 21 ] async await 와 promise then 의 사용시 유의 

async await  

promise then 난 다 알고 있다고 생각했는데 전혀 아니였다 아직도 멀었다

해당 코드를 까보지 않는 이상 안다고 말하기도 애매하다

기존의 Promise 로 만들어져서 리턴되는 함수들은

async function(){

let temp = await target.PromiseFunction();

}

와 같이 받아서 사용하게되는데

반대로 async function 으로 만들어진 경우에 대해서 then 으로 받아 사용할때

target.PromiseFunction()

.then( ()=>{

// First async Function 

})

.then( ()=>{

// Second async Function 

})

.catch(()=>{

console.log("Error");

});

으로 사용하면 될줄 알았는데 then 의 순서가 뒤바뀌여 사용되는 경우가 있다.

잘못된 점은

async function 을 then  으로 받아서 쓸때는

then(()=>{

return target.PromiseFunction();

});

으로 주어야지 다음 then 으로 넘겨 주게 된다.

Promise 객체로 넘어온 배열에 대해서

.map 으로 순회시에는

Promise.all을 사용하여야 한다.

위의 map같은 경우는 문제가 없지만

불필요한 선회를 줄이기 위해서 some이나 every , find 등을 쓰고싶었지만 동작하지 않는다.

왜?

Promise.all은 반환 값을 Array 로 받아야하지만 some,every 는 boolean 이고 find는 Element 를 받기 때문이다.

-> for문으로 바꾸자 

수정 

뭔가 회사에서 QA로 써 해당 업무만을 수행(1인분) 만을 하면서 살아가기엔

내 나이도 젊고 자괴감 매너리즘 많은것이 빠지기에

파이썬을 시작하게 되었다.

2013년 비트컴퓨터 단기 과정에 들어가면서

C,C++ 자료구조 를 배우고 

2013년 하반기

winAPI,MFC, Socket , asp.net ado.net  C# 등등

2014년도 상,하반기

myBatis, Spring framework, html5 css Java Script jQuery JAVA JSP MongoDB, mariaDB 

파이썬이 나에게 뭘 가져다 줄진 모르겠지만

준비된자에게 기회가 온다.

마우스 진짜 별거 아니였는데 왜케 고생했지 결론부터 말하자면 

우클릭 메시지만 보내니까 안되는거였고 git 봐서 도움이 된건 .so 파일 lib 로 바꿔놓은 다음에

getopt stdarg 등으로 가져와서 dlsym 으로 메소드 사용한다는 정도와

까먹고 있었지만 마우스 우클릭후 다시 0으로 노말 로 한다는점

아 주업무는 테스팅이다보니 많은걸 까먹 었던것 같다.

이제  파이썬이랑 ffmpeg 으로 매끄러운 영상 재생에 대해 공부해볼까 

마우스는 해당 일 하라고 하면

우클릭 메서드 , 좌클릭, 더블 , x축이동 , y축 이동별로 나눠서 확인해봐야겠다 

아 마우스 제어하고 싶다. 대강 통신까지는 되는거같은데 내가 자유자재로 조절하고싶다. 

moused와 ioctl과 consolectl 몇개면 되는줄알았던 통신이 어느새 fd_set까지 와버렸다. 

make에 대한 지식이 없어서 일단 코드를 한곳에 때려박아서 작성중에 있다. 

절차 지향적인 이 C코드가 되는것을 확인한후에 

make 지식을 습득하고 모듈화를 진행해야겠다...

남을 진정으로 위하고 남이 잘될 수 있도록 '어떻게 도와줄까?' 고민하는,
그런 선한 마음은 나를 따뜻하고 행복하게 만들어줍니다.
잡념도 없어지고, 보약이 따로 없습니다.
오늘 기분이 나쁘다면 비록 작은 일이라도 
누군가를 도와줄 생각을 하십시오.

국내에서 QA는 그냥 테스트하는 조직이며 개발자 서포팅 느낌이지

절대 "주"가 될수없다고 생각 한다. 

그래서 그런가 QA로 들어왔던 사람들은 QA에서만 주구장창있거나 경력을 살리지못하고 다른일을 하던가 이다.

하지만 잘못된 생각이다. 분명히 QA도 이 위치에서 조금만더 테스트에 대한 생각과 고민을 한다면 개발자 못지 않는 

스킬 셋을 가질 수 있으며 이걸 나는 너무 늦게 깨달았지만 지금이라도 깨달았기 때문에 박터지게? 공부중이다.

하지만 QA는 컴파일러 언어 보다는 스크립트 언어가 조금 더 비중을 차지하는건 사실이다. 

요약

"재주는 곰이 넘고 돈은 왕서방이 받는다"

대한민국에서는 똑똑하고 착한 사람은 매우 "계산적"인 사람을 칭하는 것 같다.