나빼고다천재

마지막 쯤 우린 보간이라는것을 알게되었다.

이는 우리가 배우고자하는 바인딩이라 불리우는것 중 하나이다.

간혹 누군가는

"바인딩이 뭐죠?" 라고 묻는자들이 있는데 바인딩이란 프로그램에서 어떤 기본 단위가 가질 수 있는

구성요소의 구체적인 값 혹은 성격을 정하는것을 바인딩이라고 한다

하나의 예시를 보자면

var number = 1

이러한 변수가 있으면 number는 변수의 이름 1은 변수의 값 이러한것을 할당하고 정하는것을 바인딩이라고한다.

다시 돌아와 설명하자면 보간법이란 Angular에서 문자열 바인딩을 뜻하며 이는

문자열에 무언가 담아 할당하고 정하는것을 뜻하는것이다.

1. 문자열 바인딩 사용법

문자열 바인딩은 전 글에서 더듬어보자면 {{ sample }} 이라는 기호를 사용했다.

또한 우린 title이라는 프로퍼티에 자신만의 멋진 문구를 할당하였다.

그렇다 그렇게 사용하면 된다.

그렇지만 이렇게 쓰면 너무 성의 없으니 실제로 어떻게 쓰는지 한번 보도록하자

참고로 필자는 body라는 프로퍼티에 개미는 뚠뚠 오늘도 뚠뚠 열심히 일을 하네 뚠뚠 이라는 데이터를 바인딩하였다.

이제 이 body라는 프로퍼티를 사용하려면

이렇게 쓰면된다 

이처럼 문자열 바인딩은 위와같은 경우고 단순 문자열부터 많은것들을 담을수있다.

+ 아니 그래서 이걸 어따써요 니마...

그래서 예제를 하나 들고왔다

yes 버튼을 누르면

이런화면이 

만약 no를 누른다면...

이런 화면이 나온다

실제로 코드 조차 엄청나게 간단한데

이런 형태이다 엄청나게 간단하지않는가?

보면 아니 뭔가 처음보는게 있는데 뭐가 쉬워요! 라고 꾸짖을 갈을 외친다면

좋은 지적이다.

저 위에 있는것은 다음편 이벤트 바인딩때 설명할 것이다.

2. 또다른 쓰임새

우린 이제 템플렛 표현식에 대해 알아볼 시간이다. 이 아름다운 기능은 단순히 문자나

데이터뿐만 아니라 연산식을 가능케 해준다 아래 사진을 보자

이러한 표현식에는 메서드도 호출할 수 있다.

원래는 문자열 바인딩의 처리 방식에 대해 배우고 어쩌구 저쩌구 있는데

굳이 다 알필요는 없고

간단히 이야기하자면 angular는 보간법 안에 있는 표현식을 모두 평기하고 문자열로 변환한다음 

평가결과를 주변 문자열들과 결합한다음 할당하는 형태인것이다

또한 JS와 다른 몇가지 문법이 있는데..

- 표현식 외부에 영향을 미치거나 그러한 가능성이 있는 표현은 사용할 수 없다

값을 할당하는 표현 (=, +=, -=, ...)

new, typeof, instanceof 연산자

;나 ,를 사용해서 표현식을 여러 번 사용하는 표현

++, --와 같은 증감 연산자

ES2015 이상에서 지원하는 연산자 일부

그리고 JS와의 차이점은

|, &와 같은 비트 연산자는 사용할 수 없습니다.

|, ?., !와 같은 템플릿 표현식 연산자를 사용할 수 있습니다.

위와 같은 문법차이와 준수사항을 지키고 쓰도록 하자

3.컨텍스트

템플릿 참조 변수라는게 있다 이 컨텍스트는 템플릿내에 있는것을 참조하는것인데 간단히 예를 보여주자면

어느정도 짐작이 될것이라 생각된다 템플릿 참조 변수는 내가 작성하는 템플렛안에서만 존재하는 프로퍼티를 참조하는것

이다. 이를 통해 광역이나 다른참조가 아닌 템플렛 안에만 있는것을 참조할 수 있다.

4.기타

우린 이 멋진 기능을 쓰는데 있어서 주의해야될 여러가지 사항들이 있다

아래 그 주의사항들을 소개한다.

1. 되도록 짧게 써야한다.

템플렛 표현식은 프로퍼티의 이름,메서드의 실행 명령 정도가 제일 좋습니다. 

앱의 로직이나 비즈니스 로직은 별도의 컴포넌트에 사용해야 유지보수,시인성,테스트 다방면으로 유리합니다.

2. 실행은 복잡하지 않아야한다.

Angular는 거대한 프레임워크입니다. 여러가지 기능과 라이브러리들과 복잡한 로직이 얽혀있는 툴로써

Angular는 상태 감지(혹은 변화 감지)주기 마다 템플릿 표현식을 실행합니다.

이는 promise,HTTP,타이머,키,스크롤,마우스 이동 등 비동기 작업들이 상태 감지 주기를 다시 실행시킵니다.

그러므로 실행이 복잡하다면 사용자의 디바이스에 큰 무리를 주게 되고 이는 

웹의 발전 이유(웹 이탈율 감소)에 역행하게 되는겁니다. 더군다나 디바이스의 성능이 높지 않다면 이는

치명적인 단점으로 작용하니 가급적 복잡하지 않게 사용해야합니다.

3. 사이드 이펙트 최소화

이는 프로그래밍 방법론에 대한것이기도 합니다. 

대규모의 프로젝트 혹은 작은 규모의 프로젝트라도 하나의 기능이 다른값까지 변경하는것 그리 추천하는 방법이 아닙니다.

프레임워크의 컴포넌트화를 기억하세요. 

비단 angular만 가지는 주의사항이 아닙니다 기능을 파편화 시키고 간소화 시키세요. 

이렇게 함으로써 화면은 초기 렌더링이 끝난 이후에도 안정된 상태를 보장하게 됩니다.

 + 왜 이렇게 딱딱한가요? 

중요하기 때문입니다. 기능을 사용함에 있어 우수성보다 중요하다 생각해서 궁서체로 썼습니다. 

반드시 준수해야합니다.

- 다음편은 이벤트 바인딩입니다.

(중요함)

우린 이제까지 별거아닌 지식들을 글을 통해 습득했다.

물론 그 결말이 

"와 정말 좋은 킹갓엠퍼러 갓귤러!" 이러면서 시작은 안되겠지만 말이다.

이 글을 보고 있다는건 적어도 위의 반응은 아니더라도

"그래도 배워는보자" 라고 생각했을거라 믿는다. 

그렇다면 우린 프로그래밍의 첫시작 "hello world"를 출력해야한다. 오늘의 글은 개발환경 셋팅에 촛점을 두고 

진행하도록 하겠다.

PC 셋팅은 윈도우 11과 VScode를 기반으로 설명하니 그외 편집기와 운영체제를 사용중인 사람들에게는

전~혀 도움이 되지않으니 참고바란다.(윈도우 10은 될수도..?)

1. Node js 설치

Node js는 터미널을 통해 NPM을 사용할 수 있게해준다. 이를 통해 여러가지 라이브러리를 자유롭게 컨트롤 할 수 있고

본인이 원하는 환경을 구축할 수 있다.

첨언. 가급적이면 검색엔진은 구글을 쓰자 요새 구글검색엔진이~ 광고가~ 이러는데 구글만한게 없다.

들어가면 굉장히 직관적인 구조다.

다운로드 받자

첨언. LTS와 현재 버전 무엇을 받아야하나? 라고 고민하는 당신!

주저하지말고 LTS를 받자, 현재 버전이라 일컫는 버전은 굉장히 불안정하며 시중에 나온 라이브러리들이

작동하지않고 몇몇 예기치 못한 오류가 발생할 수 있다. 이 버전은 숙련되었거나 혹은 라이브러리 개발자들을

위해 선행되는 버전으로 이글을 읽고있는 뉴비에겐 전혀 단 일말의 고민도 가져서는 안된다.

거듭 강조한다 LTS로 받자

LTS는 long term support라는 말의 약자다. 장기 지원 버전이라고한다. 일반 버전과는 다르게 안정성에 촛점을 두고 

버그나 오류를 잡아내는 버전으로 사용자가 쓰기 적합한 버전이다. 꼭 LTS를 받자

받고 설치하자

+글을 중간에 저장하고 쓰고 이런형태다보니 8/31일 기준 16.17버전이 lts 버전이다 버전은 상관없이 lts를 받으면된다.

설치가 끝났으면 나만의 응큼한 폴더를 하나 만들자 본 필자같은 경우 문서 포럳에 angular라는 폴더를 만들었다.

이제 이 폴더를 Vs code로 열어보자

이제 터미널을 활용해 본격적으로 셋팅을 시작해보자

컨트롤+쉬프트+` 키를 누르면 아래에 터미널창이 솟아오른다. 

여기를 통해 npm을 컨트롤 할 수 있다.

자주보게될 화면이다. 파이어베이스연동,npm,테스트,컴파일,빌드,라이브러리 버전관리 기타 등등...

간혹 오른쪽 터미널이 nodejs 혹은 powershell로 되어있는 경우가 있는데 cmd로 바꾸길 추천한다.

https://www.npmjs.com/package/@angular/cli

위 사이트는 NPM으로 설치할수있는 패키지를 볼수있는 사이트이다. 

메테리얼부터 CLI까지 온갖 라이브러리를 가져다 쓸수있는 사이트이니 프론트엔드 개발자라면 필히 즐겨찾기 해두자

오른쪽에 보면 install이 있고 아래 명령어가 있다.

클릭하면 자동으로 카피되는 정-말 유저친화적인 UI다 클릭하여 아까 열어둔 터미널에 붙여넣자

설치가 진행된다.

추가적으로 npm install 명령어중 -g @~~~ 형태로 하는것이 있는데 여기서 -g는 글로벌을 뜻한다. 프로젝트마다 버전이 다르고 써야할 라이브러리가 다른경우가 종종있다 라이브러리의 경우 레거시 처리되며 현재버전을 지원하지 않는 경우가 있다보니 숙련되어있는 사람이 아니면 -g 명령어는 어느정도 알고 쓰는게 좋다

설치가 완료되면 드디어 앵귤러 프로젝트를 만들수있다.

ng new -----

라는 명령어로 프로젝트를 만들 수 있다. 프로젝트명은 무얼하든 상관없다. 엔터를 누르면 

무시무시한 질문을한다.

해당 질문은 앵귤러 라우팅 모듈을 추가할것이냐 묻는것이다. 이것은 나중에 라우팅에 대해 이해할때 자세하게 이야기할것이다 지금은 단지 y를 누르고 엔터를 치자

스타일 형태를 지정하는 질문이다. 보통의 사람이라면 이걸 배울떄 쯤이면 마크업 언어들을 배웠을것이다.

CSS는 여러 단점을 지닌 마크업 언어이고 그것을 개선한 스타일 전처리기들을 앵귤러에서 지원한다. 숙련자라면 다른
전처리기를 선택해도 되지만 지금 당장 신경쓸것은 아니니 css를 선택하도록하자

뭔가 설치가 끝나면 건드리면 큰일날거같은 폴더들과 파일들이 마구 생겨났다.

우선 무시하고 폴더를 다시 열어야한다.

그냥 가서 폴더를 다시 여는건 멋이 안나니깐 우린 개발자 티를 내기 위해 터미널을 쓰자

터미널에

cd 프로젝트명

을 작성하고 엔터치면 해당 디렉토리로 이동한다 그 상태로 ng-serve 라는 명령어로 가동을 시키면...

이렇게 어지러운 안내가 나온다. 여기서 http 주소를 컨트롤+클릭하면...

이렇게 만든 페이지가 나온다. 방금 여러분은 테스트 서버를 가동시키고 빌드시킨 다음 가상환경에 배포까지 시킨거다!

내가 이렇게 어려운일을! 이라고 축배를 들기전 우린 이 페이지를 다 부시고 초라한 hello world를 써야한다.

아까 열린 폴더에서 src 폴더로 간다음 app폴더로 가보자

여기서 .html 확장자를 지닌 파일을 열어보면...

우리가 아까 열어보았던 페이지가 이 파일에 전부 들어가있는것을 알수있다.

잠깐 학습에 흥미를 위해 재미있는걸 보여주자면

이 페이지에서 보면 로켓이 그려진 상단의 문구에 자신이 임의로 설정한 프로젝트명이 들어간걸 볼수있다.

우린 이 문구를 한국인의 정서에 맞게 한글로 바꿔볼꺼다.

혹자는 야 그 파일에 있는거 이름만 바꾸면 되지 뭘 ㅋㅋ 이런걸 ㅋㅋ;;; 이라고 생각하겠지만 애석하게도

앵귤러는 그렇게 만만하지않다. 눈치가 빠른사람이라면 알겠지만 

해당 구간은 무언가 우리가 처음보는 불을 처음 발견한 원시인처럼 용도를 알수없는 무언가가 들어차있다.

위 타이틀이라는 문구를 컨트롤 클릭을 해보면...

이렇게 다른파일에서 정의가 되있는것을 알수있다. 이는 앵귤러에서 보간이라고 한다.

보간은 나중에 바인딩이라는 개념을 배우기 전에 확립하고 갈것인데 대충 이런 개념이고 이렇게 쓴다는것만 이해하면된다

본인이 원하는 문구로 바꿔놓고 저장해보자. 지금까지 서버를 내리지않았다면 서버는 알아서 새로 빌드하고

배포한다(정말 편하다)

자 이것으로 우린 보간이 어떤 방식으로 어떤형태로 기능적인 답변은 할수없지만 무엇인지 어느정도 이해했다.

이제 마지막으로 hello world를 띄워보자 html 파일 내용물을 전체 지우자 잘못들은게 아니다 전체 지우자

어딜 내놔도 부끄럽지않던 페이지가 어딜내놔도 부끄러운 페이지로 바뀌어버렸다..

여기까지 잘 따라왔다면 얼른 이 페이지를 이쁘게 꾸미고 싶을거다. 하지만 애석하게도..우린 기능을 배워야하니 

이 페이지는 더 곱창날꺼다.

이로써 개발 환경 셋팅은 끝났다. 다음 시간에는 앵귤러의 기본적인 모듈과 기능에 대해 조금씩 알아보자

Angular란 무엇인가?

1.앵귤러는 SPA 만들게 해주는 프레임워크다.

- SPA는 single page applications의 약자이다. 최근 웹 개발의 트렌드는 하나의 페이지에서 비동기적 서버 통신을 실시해

페이지 전체를 다시 렌더링하지않고 사용자가 요청한 부분만을 새로고침하는 웹을 뜻한다. 물론 모든 페이지가 그렇게

만들어진것은 아니다. 하지만 이 방식은 분명하게 기존의 웹보다 장점이 더 많기에 SPA 프레임워크와 라이브러리

들이 대세가 된것이다.

(실제로 SPA가 가지는 장점들은 상당히 많다. 나중에 이 단어에 대해 그리고 장점과 단점에 대해 이야기하겠다

지금은 단지 앵귤러가 SPA만들게 해주는 프레임워크라는것만 이해하면된다.)

2. 앵귤러는 MV+ 에서 MVVM 패턴을 가지고 있다.

갑자기 난이도가 올라간거같지만 지금 당장 이해할 필욘없다. 

간단하게 설명하자면 MVVM 패턴은 일종의 UI 아키텍쳐 디자인 패턴이다. 

여러모로 장점과 단점이 있는 패턴인데 차후 MV+ 들에 대해 떠들 기회를 만들어 정리하도록 하겠다. 

지금 그냥 단순히 아 앵귤러가 MVVM 패턴을 따르고 있다는것만 숙지하자.

정 궁금하다면 아래의 마이크로 소프트 공식 문서를 참조하면 도움이 된다.

https://docs.microsoft.com/ko-kr/windows/uwp/data-binding/data-binding-and-mvvm

3. google이 만들었다.

여기서 개그를?

이라고 생각할 수 있겠지만

이는 명백하게 엄청난 장점이다. 구글의 지원을 받는다는건 다양한 메테리얼 디자인,관련 라이브러리..기타 등등 

많은 오픈 소스들이 꾸준히 업데이트 된다는거다. 특히나 구글이 제작하고 배포하는 메테리얼UI들은 예로부터 

구글틱스러운(장점이자 단점이지만)깔끔하고 보기 좋은 디자인을 뽑아내는것으로 유명하다

또한 그들은 기본적으로 신뢰성있고 다양한 브라우저 호환성과 성능에 미치는 영향을 최소화하면서 

완벽하게 문서화 되있다(다만 앵귤러 공식 한글문서는 문제점이 조금있다.)

만약 여러분이 '어디 버튼디자인 심플하고 이쁜거없나..?' 찾는다면 구글은 멋진 버튼 이미지로 화답할것이다.

4. Typescript와 완벽한 호환

타입스크립트의 장점은 전부터 입이 마르게 칭찬을 했다. 

참으로 아이러니한건 진입장벽을 만듬과 동시에 Angular를 뷰와 리액트가 다른 특징이자 장점을 만든다는것에 있다.

글을 쓰고있는 본인도 아직도 타입스크립트를 쓸때마다 뒷목을 잡지만 언어가 확실히 생산성있고 

뛰어난 언어임에는 부정하지않는다.

NPM과 CLI 조합으로 디버깅이 더 빨라지고 대규모 프로젝트의 코드를 더 쉽게 유지 및 관리를 할 수 있다.

이러한 장점들은 대규모 엔터프라이즈 프로젝트에 특히나 매우 강력한 모습을 보인다.

타입스크립트는 분명하게 자바스크립트보다 더 나은 환경을 제공하는것임에 틀림없다.

5. angular는 완벽한 풀패키지이다.

Angular는 별다른 외부 라이브러리 없이도 서비스,디렉티브,클래스 많은 모듈들이 기본적으로 탑재되어있다.

이는 모든 코드가 일관성있게 작성되며 다른개발자들이 다른 개발자들의 코드를 볼때도 시인성과 유지보수

에도 굉장히 유리하다는 장점이 있다. 이는 생산성과도 깊은 연관성이 있는데 개발자가 기능,유틸리티,구성

이 무엇인지 살펴보고 파악할 시간을 할애하지않아도 된다는뜻이고 기본 모듈만 학습한다면 

높은 생산성을 유지 할수있다. 

여타 다른 언어들이 그렇듯 프론트엔드에서도 많은 프레임워크와 라이브러리가 있다.

보통의 코스의 경우 대부분 JS를 어느정도 다룰줄 알게된다면(실제 다를수있는 수준이건 아니건)

리액트,뷰,앵귤러 라는 3개의 도구 중 하나를 선택하게 된다.

언뜻보기엔 3강 체제가 형성되어 각자의 목적과 장,단이 뚜렷한 상황에서

파이를 나눠먹은 상황이라 생각하겠지만 애석하게도

현재 구도 자체는 90% 점유율을 지닌 리액트와 나머지 10%의 점유율을 두고 뷰와 앵귤러

(물론 요샌 뷰가 꽤나 큰 비중을 차지하고 있다)가 투닥 거리고 있다.

필자도 누군가 어떤걸 배워야되나요? 라고 묻는다면 약 1초 정도 고민을 한다 그리고 대답한다 

"리액트" 

필시 리액트는 엄청난 잠재력을 지닌 라이브러리이다(명목상 리액트는 라이브러리다. 이부분은 나중에 리액트

카테고리를 만들떄 설명하겠다).

많은 생태계와 많은 개발자

네이티브를 활용하여 앱 컨버전 용이

일렉트론과의 호환으로 pc app 까지 개발할 수 있는

그야말로 프론트엔드계의 소금이자 맥가이버툴이다.

내가 이러한 리액트 신봉자가 된건 앵귤러의 미칠듯한 모습도 한몫한다

그렇다고해서 나쁜건 아니다.

앵귤러라도 앵귤러만의 장점이있다.

JS 언어학개론에도 설명했듯 타입스크립트는 그야말로 자바스크립트의 슈퍼셋이다. 

개발자가 예측 가능한 코드를 만들수 있게 되고

생산성이 증대되며

오류를 컴파일 과정에서 발견해주는 대단히 뛰어난 언어이다. 

하지만 이러한 대단한 언어들은 필시 러닝커브를 발생시키며 이는 입문자들 혹은 현업개발자들에게도 굉장히

큰 스트레스로 다가온다.

앵귤러는 타입스크립트 기반이다. 이말이 즉슨 앵귤러라는 프레임워크를 다루기 위해선

타입스크립트를 필수로 다뤄야한다는 뜻이다. 

단순 앵귤러라는 프레임워크를 이해하는것도 힘들고 짜증나고 용기가(?)필요한 일인데 다른 언어까지 배워야한다.

하지만 내가 굳이 앵귤러에 대한 글을 먼저 쓰는건 힘든일을 먼저 도전하는 성향이 있기 때문이지

앵귤러를 좋아해선 아니다.

앞으로 앵귤러에 대한 프레임워크 기술 문서를 작성할것이다.

공식문서와 내가 알고 있는 지식들을 적절하게 섞을 예정이며 틀린 부분은 지적해주면 감사하겠다.