Entries by eastflag

코테에서 과테와 직무로, 개발자 포트폴리오 관리

개발자의 실력을 가장 객관적으로 보여줄 수 있는 방법은 컨트리뷰션일것이다. 실제 구글이나 페이스북과 같은 IT회사에서 컨트리뷰터는 그냥 채용한다고 유튜브 같은데서 들은바 있다. 요즘, 이런 추세가 우리나라에도 점점 도입이 되고 있는거 같다. 신규 채용에서도 자소설(자기소개서 + 소설) 에서 직무위주로 채용한다는 뉴스가 많이 나오고, 이직시 코딩테스트를 보는데, 알고리즘 사이트와 강의 등 너무 일반화되어서 이제 능력을 판별하는 기준이 희석되다보니 […]

또 다른 사이드잡 – 강의와 멘토링

현재, 상주 프로젝트와 지인들을 통한 사이드잡과 위시캣과 같은 개발 부업등에 비하면 학원 강의나 멘토링 같은 부업은 사실 돈을 벌기 위해서라기 보다 강의를 준비하면서 공부를 하게 되고 강의를 하면서도 또한 공부를 하게 된다는 측면. 그리고, 공자의 군자삼락에 세번째 즐거움과 마찬가지로 남을 가르치고 얻는 즐거움이 또한 크기 때문에 아직까지도 하는거 같다. 학원 강의 맨 처음 학원 강의를 […]

위시캣 후기 – 종합

기획자와 개발자를 연결해주는 아웃소싱 플랫폼은 위시캣과 프리모아, 이랜서 등 많이 있는데, 가입하고 자기 포트폴리오 등록을 각 사이트마다 하는게 너무 귀찮아서 첫번째 등록한 위시캣에서만 활동했습니다. 기획자는 기업보다 거의 1/2도 안되는 비용에 개발을 의뢰해서 좋고 개발자는 (물론 전업으로 하시는 분도 계시겠지만) 저처럼 부업을 할 수 있다는 점이 장점이라서 하게 되었습니다. 요즘은 상주와 도급이라고 카테고리가 아예 나눠져있더군요. 상주 […]

위시캣 후기 – 시작이 어렵다

상주 프로젝트를 하면서 실력도 쌓이고 여유가 늘면서 이제 부업 개발을 해봐야 겠다고 생각하고 여러가지 방법을 찾던 중에 위시캣을 접하게 되었습니다. 기획자와 개발자를 연결해 주는 플랫폼은 여러가지 사이트가 있었는데 그 중 위시캣 한군데만 선택해서 해보기로 했습니다. 먼저 로그인을 하고 그리고 프로파일을 등록했습니다. 그리고 프로젝트 찾기를 눌러서 제가 할만하다고 판단되는 프로젝트 몇개에 지원했습니다. 지원을 10개 정도 지원했는데 […]

개발자 프리랜서 – Q&A

개발자 프리랜서 관련해서 많이 하는 질문에 대해서 전적으로 제 개인적인 의견을 피력해보고자 합니다. 객관적인게 아니라 제 개인적인 의견이라는거를 명심하시기 바랍니다. Q. 프리랜서 일은 어디서 구하나요? A. 프리랜서라 함은 보통은 외주를 주는 갑회사에 상주를 하면서 프로제트를 수행하는 인원을 말합니다. 외주를 주는 회사는 주로 공기업 아니면 대기업인데 프리랜서가 대기업과 직접 계약을 맺을수는 없습니다. 왜냐하면 일하다가 갑자기 도망이라도 […]

개발자 프리랜서 경험 공유 3 – 상주와 비상주의 조화

지금까지는 프리랜서 파견업체를 통해서 프로젝트를 소개를 받았는데, 이번에는 프로젝트를 직접 수주받아서 일을 하는 개발업체와 직접 계약을 하게 되었습니다. LG cns와 프로젝트가 갑자기 종료가 되어서 다음 프로젝트를 구하기가 어려울것이라 생각했는데, 사람인, 잡코리아에 이력서를 올리자마자 연락이 와서 그 다음날부터 바로 출근을 했네요. 그런데 역시나 이렇게 급구하는 프로젝트는 먼가 있긴 있네요. 제 프로젝트 경력에 IOT를 적었는데 그걸 보고 […]

개발자 프리랜서 경험 공유 2 – 부업의 시작, MEAN 스택의 만남

첫번째 프로젝트가 종료되고, 또 첫번째 프로젝트를 소개시켜준 그 분이 두번째 프로젝트도 소개시켜주었습니다. 마찬가지로 LG CNS 프로젝트 였고 여기서는 홈 IOT 프로젝트를 수행하였습니다. LG CNS 에서 외주 받는 프로젝트가 아니라 내부에서 솔루션을 만드는 프로젝트라서 개발자가 많지는 않았습니다. 서버개발자 1명 그리고 안드로이드 개발자 1명 이렇게 두 명이였고 저는 안드로이드 개발을 처음에 했었고 나중에는 서버 개발까지 하게 되었습니다. […]

개발자 프리랜서 경험 공유 1 – 시작이 어렵다

제가 직장생활을 하다가 개발자 프리랜서를 시작하게 되었고 그리고 현재까지 오게되었는지의 경험을 공유하겠습니다. 물론 제가 겪은 프리랜서 경험과 생각이 주관적이니 저의 경험이 객관적인 프리랜서 생활이라고는 판단하시면 안되고 그냥 참고만 해주시기 바랍니다. 또한 제가 경험한 것을 좀 더 객관적으로 판단하는데 도움이 되도록 하기위해서 경험한 회사와 단가는 모두 실명으로 공개하도록 하겠습니다. 저는 첫직장이 KTF 였습니다. KTF에서 만 5년을 […]

window에 docker, mysql 설치

설치전 환경 설정

도커를 사용하기 위해서 가상화 기술인 Hyper-V를 활성화 시켜야 한다.

제어판 > 프로그램 설치 및 제거 > window 기능 켜기/끄기 > Hyper-V 체크 후 리부팅

만일, 윈도우 10 버전이 Home일 경우는 Hyper-V 가 보이지 않을것이다.  그럴 경우 아래 블로그를 참고하여 Home에서 Hyper-V를 활성화 시켜주어야 한다.

choco 로 설치

power shell을 관리자 권한으로 실행후 chocolatery 윈도우 패키지매니저를 사용해서 설치한다.

> choco install docker-desktop 

만일 choco 가 설치되어있지 않다면 여기를 참고해서 먼저 설치해야 한다.

2020년 5월에 윈도우 업데이트에 WSL2 (Window Subsystem for Linux 2)가 포함되었다. 이것은 윈도우에서 리눅스를 구동할 수 있도록 도와주는 기능이다. docker-desktop 도 wsl2  기반위에 동작시 리눅스기반 컨테이너와 윈도우 기반 컨테이너를 모두 구동할수  있으므로 WSL2를 설치하도록 하자.   WSL2 를 설치하는 방법은 단순 설치와 수동 설치 두가지 방법이 있다. 

최적의 환경을 갖추기 위해서 먼저 window terminal을 설치한다. MicroSoft 앱스토어에서 window terminal을 검색해서 설치할수도 있고 choco 명령어로 간단하게 설치할 수 있다.

> choco install microsoft-windows-terminal 

방금 설치한 window terminal을 관리자 권한으로 실행한다. WSL2를 설치하는 방법은 단순 설치와 수동 설치 두가지 방법이 있다.

단순 설치는 참가자 프로그램에 가입해야 해서 수동 설치하는게 낫다. 수동 설치는 6단계의 과정을 거쳐야 하는데, 다음을 참고하자. 

수동 설치가 끝나면 docker-desktop 의 세팅 메뉴에서 Use the WSL 2 based engine을 체크한다.

docker 실행

docker 실행시 “Docker desktop requires log out – need to log out of windows then your docker-users membership will be taken in account” 와 같은 에러 메시자가 나오면 현재 사용자가 docker-users 그룹에 있지 않기 때문이다.

현재 사용자가 admin 그룹일 경우 docker-users 그룹을 아래와 같이 추가로 등록해주어야 한다.

예를 들어 현재 사용자가 eastflag 이라고 하면 power shell에서 net localgroup [추가할 그룹] [사용자명] /add 와 같이 입력한다.

> net localgroup docker-users eastflag /add 

mysql 설치

power shell에서 mysql 이미지를 다운로드 받는다.

> docker pull mysql 

컨테이너 이름은 mysql_container 로 하고 내부와 외부포트는 동일하게 설정하고 실행한다. root 의 초기 비밀번호는 1234이다.

> docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=1234 --name mysql_container mysql 

docker 를 정지 하는 방법은  docker stop [컨테이너 이름]

> docker stop mysql_container 

컨테이너 삭제는  docker rm [컨테이너 이름]

> docker rm mysql_container 

oracle 11 xe설치

docker hub에서나 아니면 구글링해서 버전에 맞는 신뢰성있는 이미지를 먼저 검색한다. 11g xe 버전의 신뢰성있는 이미지는 jaspeen/oraclexe11g 로 검색되었다.  power shell에서 이미지를 다운로드 받는다.

> docker pull jaspeen/oracle-xe-11g 

컨테이너 이름은 oracle11g 로 하고 내부와 외부포트는 동일하게 1521로 설정하고 실행한다. 

> docker run -d -p 1521:1521 --name oracle11g jaspeen/oracle-xe-11g 

데몬이 실행되면 sqlplus로 접속할 수 있다. oracle 이 로컬컴퓨터에 설치된게 아니라 가상 리눅스가 설치되어있고 그 위에 oracle이 설치되었으므로 먼저 리눅스에 접속후 sqlplus 명령을 내려야한다.

> docker exec -it oracle11g sqlplus 

sql developer라든지 datagrip과 같은 별도의 개발툴을 이용해서 접속할려면 아래 정보로 접속한다.

host: localhost

port: 1521

SID: XE

user: system

passowrd: oracle

SPA 프레임워크 정의

서버사이드 렌더링과 페이지 방식 호출

asp, php, jsp 와 같은 전통적인  웹페이지는 페이지를 요청하고 받는 서버사이드 렌더링 방식이다. 즉, 아래와 같은 방식으로 호출된다.

브라우저가 hello.php라는 페이지를 요청하면 서버는 데이터베이스를 쿼리하여 그 결과를 받아서 서버에서 html페이지를 만들어서 리턴하면 브라우저는 단순히 해당 html을 렌더링해서 보여주는 방식이다. 렌더링이 서버에서 되어거 렌더링된 결과인 html + css + javascript 코드가 리턴되기 때문에 이런 방식을 서버사이드 렌더링이라고 한다. 또한 asp, php, jsp 와 같은 언어를 서버사이드 언어라고 부를수 있다.

asp, jsp 개발자 모두 마찬가지이지만, php 개발자라면 hello.php라는 화일에 html 과 css, javascript 를 모두 섞어 사용하고 <% ~ /%> 라는 php 코드를 중간 중간 섞어서 개발할 것이다. 이 php 코드는 모두 서버에서 렌더링 되고 렌더링 된 결과는 html + css + javascript 언어가 되므로 브라우저가 이것을 파싱해서 동작하게 된다.

그런데, 모바일이 등장하면서 이 페이지 방식의 문제점이 부각되게 된다. 첫번째 페이지를 로딩후에 다시 두번째 페이지를 로딩하게 되면 두번째 페이지에 포함된 css 화일들과 javascript 화일들이 또 다시 로딩되게 된다. 보통 큰 프로젝트라면 하나의 페이지에 수십개의 css 화일과 javascript 화일들이 포함될 것인데, 페이지를 이동시 마다 이 화일들이 다시 로딩되므로 모바일에서는 로딩 속도로 인해서 적합하지 않게 된 것이다.

서버와 클라이언트의 분리 - RESTful 서비스

모바일의 등장으로 페이지 단위 호출 방식은 로딩 속도가 저하된다고 했지만 그것보다 더 중요한 점은 서버사이드 렌더링이 가진 한계점이다. 아이폰과 안드로이드라는 네이티브 앱을 개발하기 위해서는 네이티브에서 제공되는 UI 를 사용해서 개발을 해야 한다. 그런데, 서버에서 렌더링이 되어서 html이 리턴된다면 더이상 UI를 렌더링 할 수 가 없게 되는 것이다. 

그래서 서버는 RESTful 서비스만 제공해주도록 역할이 축소가 되었다. REST란 Representational State Transfer 의 약자로 리소스만 xml 혹은 json 형태로 제공해준다는 것이다. 

게시판을 예를 들어보자. 게시판을 안드로이드 앱으로 개발한다면, 안드로이드에서는 서버에 API만 호출해서 데이터를 받은 후에 받은 데이터를 안드로이드의 고유 UI를 사용해서 네이티브 앱을 개발하게 된다. 아이폰도 마찬가지이다. 

게시판의 내용을 가져오기 위해서는 HTTP의 GET 메서드를 게시판을 작성시에는 HTTP의 POST 메서드, 게시판 내용을 수정할때는 HTTP 의 PUT 메서드, 게시판 내용을 삭제할때는 DELETE 메서드를 사용하게 되면 CRUD를 모두 구현할 수 있으므로 서버와 클라이언트가 분리되게 되었다.

클라이언트는 REST API를 호출해서 데이터만 수신한다. 수신한 데이터를 가지고 안드로이드는 안드로이드 앱을 아이폰은 아이폰 네이티브 앱을 구현할 수 있다. 게시판의 경우라면 아래와 같이 REST api를 만들수 있다.

클라이언트 사이드 렌더링과 SPA

이제 모바일이 아닌 웹의 경우를 보자. 서버는 RESTful 서비스를 이용해서 데이터를 제공받을 수 있으므로, 이 데이터를 클라이언트가 가공해서, 즉, 클라이언트 사이드 렌더링을 이용해서 하나의 페이지에서 제공해 줄 수 있다.

물론 SPA를 가능하게 해준 가장 큰 공은 webpack과 같은 모듈 번들러 툴이다. 여러개의 페이지에서 사용되는 자바스크립트 css html을 컴파일 및 압축하여 하나의 페이지로 제공해주는 것이 가능하다. 하나의 페이지이므로 첫번째 페이지 접속시에 javascript, CSS를 가져온 후에 더 이상 다른 페이지에 접속하기 위해서 서버에 접근하지 않는다. 이것이 어떻게 가능한지 아래 그림을 보자.

예를 들어, 메뉴3개로 구성된 페이지라고 하면 메뉴1에 해당하는 페이지를 선택시에는 메뉴1 ~ 메뉴3 의 전체 페이지에서 메뉴1에 해당하는 화면만 보여주게 된다. html 속성중에 id 속성을 사용하게 되면 해당 아이디에 접근하기 위해서는 해쉬를 앞에 붙여서 접근할수 있다는 것을 알고 있을 것이다. !menu1 이라는 id 속성을 부여하고 이 메뉴만 보여주고 다른 메뉴는 안보여주는 것이다. 메뉴2를 선택하면 마찬가지로 !menu2 의 id 속성만 보여주고 나머지 메뉴는 보여주지 않게 된다. 이런식으로 다수의 페이지를 하나의 페이지인 Single Page Application으로 보여줄 수가 있다.

그런데 #!라는 유알엘이 그렇게 익숙하지 않으므로 #!를 / 로 바꿔주게 되면 /menu1, /menu2, /menu3 이렇게 보여줄수 있다. #! 된 것을 해쉬 모드라고 부르고 /로 된 것을 히스토리모드라고 한다. 리액트 라우터에서는 이것을 해쉬 라우터 와 브라우저 라우터로 각각 부르고 있다.

그리고 각각의 메뉴에서는 REST api를 호출해서 화면을 구성하게 된다. 그러면 이런 질문을 할 수 있을것이다. jquery 사용시에도 Ajax를 이용해서 비동기 통신이 가능했는데 그것과 차이점이 없지 않나요?  있다. 그것은 브라우저가 해당 메뉴를 히스토리에 저장한다는 것이다. 그러므로 뒤로 가기를 한다거나, 즐겨찾기가 가능해준다.

SPA에서의 라우팅과 SEO 문제점

SPA는 모든 페이지를 포함한 정적인 화일들을 가져와서 단 하나의 페이지로 렌더링하게 된다. 그리고 페이지 사이의 이동은 id 태그를 사용하여 한 페이지 내에서 특정 메뉴를 보였다 안보였다 하도록 처리한다. 이것을 그림으로 나타내면 다음과 같다. 

html과 css, javascript 와 같은 화일들은 크기가 변하지 않는 정적인 화일들이므로 캐시가 가능하도록 보통 nginx 같은 웹서버로 구성한다. 그래서 처음 접속시 nginx 같은 웹서버에서 모든 페이지를 모두 가져오게 된다. 그리고 메뉴간의 이동시에는 서버를 통하지 않고 클라이언트 사이드 렌더링을 통해서 처리하게 된다. 그리고 해당 메뉴에서 필요한 동적인 데이터들은 REST API를 구성한 backend 서버를 통해서 가져오게 된다.

기존 jquery 방식의 ajax 와 비슷하지 않느냐고 생각할 수 있겠지만 id 태그를 통해서 메뉴를 이동하기 때문에 브라우저는 해시모드일때는 #!menu1 혹은 히스토리 모드일 경우는 /memu1 의 유알엘은 브라우저가 히스토리에 저장이 가능하다. 따라서 즐겨찾기 기능과 뒤로가기가 가능해진다.

그런데 SPA 방식에서는 결정적인 단점 하나가 존재한다. 바로 SEO가 불가능하다는 것이다. SEO란 Seach Engine Optimization으로 페이지 방식일 경우에는 페이지마다 이동시 html 헤더의 meta 태그에 페이지의 메타 정보를 입력해서 검색시에 해당 페이지로 갈수 있도록 해주는 기능이다.
SPA는 페이지가 하나밖에 없으므로 당연히 html 헤더는 최초에 한번만 지정이 가능하고 id별로 페이지를 처리하므로 SEO를 구현할 수가 없다.

그래서 SPA에서 SEO를 구현하기 위해서 angular 에서는 angular university 라는것이 등장했고, react는 next 라는 프레임웍이, vue에서는 nuxt 라는 프레임웍이 등장하였다. 요즘은 이런 프레임웍을 사용하지 않고도 특정 모듈만 사용해서 이것을 구현하는 것도 가능해졌다. 예를 들어 react에서 Helmet 이라는 모듈을 사용하면 SPA 방식으로 라우팅 시에도 페이지마다 메타 태그를 바꿀수 있게 되었다.

SPA 프레임웍 비교

SPA 프레임웍은 구글이 2010년 초반에 Angular 1.x 를 발표하면서 엄청난 호응을 얻었다. Angular 라는 이름도 기존 jquery와 같은 DOM 방식이 아니라 완전히 새로운 개념이라서 등장한 이름이다. 그렇지만 시간이 지나면서 모바일에서 성능 문제를 드러내면서 페이스북에서 만든 React가 각광받기 시작했다.  그리고 그 이후에 Vue가 Angular 1.x 의  장점과 React의 장점을 흡수하여 View에만 집중해서 개발을 할 수 있도록 하면서 호응을 얻게 되었다. 그리고 React 의 발표시기에 구글에서는 Angular 1.x의 성능상의 문제점을 인식하고 계속 Angular 2.x의 베타버전을 만들고 있었다. 그러다가 2016년에 angular 2.x를 발표하였는데 기존 angular 1.x 방식과는 방식이 전혀 다르고 호환이 안되기 때문에 angular 1.x는 AngularJS라 부르고 angular 2.x를 그냥 Angular 라고 부른다.  사이트도 angularjs.io 사이트는 Angular 1.x 개발 사이트이며 이며 angular 2.x는 JS를 빼고 그냥 angular.io 사이트로 접속해야 한다.

Vue React Angular 2.x
Learning Curve
Binding
Virtual DOM
Virtual DOM
ngZone
컴포넌트간 통신
emit-on, event bus
Vuex
status, props
event
react-redux
Service
ReactiveX의 Observable, Subject
프레임워크 유무
라이브러리
라이브러리
프레임워크
라우터
vue-router
react-router-dom
angular 패키지에 포함
네이티브개발
ionic - vue
React Native
Ionic react
Ionic

learning curve

learning curve는 만일 자바스크립트를 잘알고 있다면 react가 가장 쉬울것이다. 왜냐하면 react는 JSX와 JSX expression을 제외하고 특별하게 배워야할 템플릿 언어는 없고 순수하게 자바스크립트만 사용하기 때문이다. Vue는 angular에서 가져온 ng-for 같은 반복문, ng-if 같은 조건문 등 화면을 만들기 편리한 템플릿 언어가 많이 갖춰져 있다. angular는 리액트와 뷰와 다르게  웹을 만들기 위해서 필요한 모든것이 갖춰진 프레임웍이다 보니 배워야 할게 많다.  특히 ReactiveX 라이브러리리인 RxJS가 기본 내장되어있다 보니 angular를 배우기 위해서는 반드시 이 라이브러리를 이해해야 한다. 어쩌면 angular 보다 RxJS가 더 어려울수 있으나, 이 고비를 넘기면 디바운싱 기법 등 RxJS를 이용해서 많은 것을 할 수 있다.

binding

react 와 vue 는 one way binding 방식으로 virtual DOM이라는 모델 데이터를 변경하면 이 모델 데이터와 바인딩 되어있는 실제 view가 변경되는 방식이다. angular 는 two way 바인딩 방식으로 모델 데이터를 변경하면 view 도 변경되며 view를 변경하면 모델 데이터도 변경되는 방식이다.

* 컴포넌트 통신방식

뷰는 props를 통한 기본적인 통신 방식과 emit, event bus , $parent, $children 등 많은 통신 방식이 혼재하고 있다. 리액트는 부모가 자식과 통신하기 위해서 props 를 사용하고 자기 자신의 상태를 표현하기 위해서 state를 사용한다. angular도 부모와 자식간에 통신하는 방법이 있지만 보통 서비스라는 컴포넌트를 사용하여 통신하게 된다. 

글로벌 스토어로 vue는 Vuex를 사용하는게 일반적이고 리액트는 외부 라이브러리인 redux, mobx를 사용하게 된다. angular는 이미 ReactiveX라는 훌륭한 라이브러리를 이용해서 자체적으로 publish subscribe를 구현할수 있기 때문에 외부 라이브러리가 필요하지 않다.

* 네이티브 개발

네이티브 개발이란 웹으로 개발해서 안드로이드, 아이폰 네이티브 코드로 변환하는것을 말한다.

Ionic 은 초기에는 angular만 지원하였지만 최근에는 vue, react를 모두 지원한다. 리액트는 리액트 네이티브로 네이티브 개발을 또한 할 수 있다.

* PWA 지원

뷰, 리액트, 앵규러 모두 기본적으로 PWA를 지원한다. PWA는 Progressive Web Application 의 약자로 네이티브 앱처럼 만들어 준다. manifest.json 에 설치 아이콘을 지정하면 웹으로 개발을 하더라도 스마트폰 바탕화면에 론칭 아이콘을 설치하여 아이콘을 클릭하여 진입할수 있다. service worker를 사용하여 웹을 종료를 하더라도 이 서비스 워커가 계속 살아 있어서 푸쉬서비스를 받아서 노티피케이션을 구성할 수 있다.