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

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

Spring과 Angular2 연동해서 실행하기






새해를 맞이하여 가장 큰 난제를 만났고 해결했다.

기본 지식이 풍부한 분들이라면 너무나도 쉬운 문제였겠지만,

내게는 한없이 어려운 문제였고, 아무리 구글링을 해도 만족할만한 답을 얻지 못하였다.

혹여나 같은 문제로 고생하고 있을 분들을 위해 블로그에 남겨야 겠다!

실은 연동해서 실행한다는 말조차도 맞는건지 모르겠다.

그냥 Angular를 서버단에 배포한다는 말이 더 어울릴 듯하다.


(17.3.18 추가)
실제로 Angular는 프론트 엔드의 프레임워크이다. 스프링은 서버를 다룬다.
결국 Angular와 spring의 연동이라는 것은 스프링으로 짜여진 서버에 페이지를 요청했을때에
Angular로 빌드된 SPA를 응답한다는 의미이다. 
Angular Es...


1. 먼저 Angular cli가 있어야 한다.
Angular cli 는 개발자가 Angular 개발에만 집중할 수 있도록 지원해주는 아주아주 편리한 도구라고 생각하면 되겠다.

설치하는 방법은 간단하다
앵귤러를 쓰려는 분들은 기본적으로 node.js 와 npm이 깔려있다는 전제하에 바로 소개하겠다

$ npm install -g angular-cli

를 통해 전역으로 설치하여준다. 이 도구가 설치되면 터미널에서 ng 명령어를 사용할수 있게된다.


2. 프로젝트 생성

앞서 이야기하였듯이 이제는 ng 명령어를 사용할 수가 있다. 이걸 이용해서 프로젝트를 생성한다.
$ ng new 프로젝트이름



참 필자는 현재 Mac 환경에서 쓰고 있다.

//테스트를 해본답시고 프로젝트 이름을 Test로 작성하게 되면 저
렇게 사용할수 없다는 오류가 발생하니 참고.





프로젝트를 생성하면 다음과 같이 개발에 필요한 것들을 알아서 설치하여 준다.
$ng serve
명령어를 실행하면 이 도구에서 자체 제공하는 개발서버가 실행되어지는데 실행결과는 다음과 같다.








3번째 줄을 보면 알 수 있듯이, 4200번 포트로 서버에 접근할 수 있다.

http://localhost:4200
브라우저를 통해 들어가면 헬로~ 라는 문구가 뜨며 서버가 잘 개통 됨을 알 수 있을 것이다.


이 도구를 통해 개발하고자하는 바를 서버를 통해 테스트도 해보며 개발 하면 된다.

그리고 오늘 포스팅의 주제였던 스프링에 연동하는 방법을 알아본다.

3. 스프링과의 연동 

우리가 만든 프로젝트를 이용해서 구현하고자 하는 바를 다 이루었다면 이제는 스프링 프로젝트와 함께 서버에 올리고 싶을 것이다.

이때 쓰는 것이

$ng bulid

명령어이다. angular - cli 로 만들어진 프로젝트의 코드는 타입스크립트 기반이기때문에
빌드과정을 거쳐 브라우저에서 동작 가능한 자바스크립트로 변경해주어야 한다.
저 명령어를 사용해주면 dist라는 폴더가 만들어지면서 배포가능한 형태로 변환되어지는데
안에는 index.html 과 함께 잡다한 소스파일들이 들어있다.


빌드가 되었다면 이렇게 dist 디렉토리가 생성된다.


스프링에서도 처음로드 할때 실행하고자 하는 인덱스파일이 있을것이다.
로드하려는 경로에다가 dist 폴더안 파일을 죄다 긁어다 복사하고 붙여넣고 스프링을 실행해보자.
스프링으로 만들어진 프로젝트는 로드되자마자 index 파일을 찾게 될 것이다.

index 파일은 자연스럽게 빌드된 환경에 있는 자원들을 이용해 클라이언트에게 전달된다.
SPA이기 때문에 한번만 전송하면 끝!

이클립스를 통해 어떻게 들어갔는지 살펴보자! 


스프링 부트를 통해 만든 프로젝트
resources 디렉토리에 위에서 설명했던 dist 파일 내부를 전부 복사붙여넣기 하였다.


나도 이번에 알았는데 Angular는 SPA (Single Page Application)에 최적화된 프레임워크라고 한다.
한장으로 이루어진 어플리케이션이어서 페이지의 이동이 아닌 Restful 한 데이터 송수신을 통해 동적인 화면을 만들어 낸다는 것이다.






댓글

  1. 안녕하세요 dist파일을 붙여넣기 하고 스프링에서 실행을 해봤는데 처음에 loading..에서 넘어가야하는데 넘어가지 않습니다.
    어떻게 해줘야 하나요?

    답글삭제
  2. 요즘 정신없어서 블로깅을 못해서 이제야 봤네요. dist 폴더 안에 있는 모든 파일들을 다 붙여넣어주셔야 합니다. 같은 디렉토리 안에 있어야 하구요! loading 이 뜨는 걸로 봐서 스프링서버에서 index 파일을 확인했는데 그와 관련된 자바스크립트가 없어서 그럴 것 같습니다. 더 자세히 알고싶으시면 크롬으로 실행시키신 후에 개발자도구를 열어서 콘솔창을 확인하시면 더 많은 정보를 구하실수 있을겁니다.

    답글삭제
  3. 작성자가 댓글을 삭제했습니다.

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

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

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

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