GoGo GoGo

https://blog.angular.io/version-10-of-angular-now-available-78960babd41 Version 10 of Angular Now Available Version 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI… blog.angular.io Angular 9가 나온지 얼마 지나지 않아서 10이 나왔다. Angular 공식 블로그에 올라온 글을 해석해봤다. Version 10.0.0 is here! This is a major release that spans the entire pla..

⚠️ Problem Angular/typescript로 개발한 웹 페이지를 카톡 인앱브라우저에서 띄웠을 때, 뒤로가기가 작동하지 않는다는 이슈를 받았다. 메인 화면에서 항목 선택 후 상세 페이지로 넘어갔을 때, 왼쪽 화면처럼 인앱브라우저 뒤로가기 버튼이 활성화되어야 하는데, 실제로 개발된 페이지에는 뒤로가기 버튼이 활성화되어있지 않았다. 코드는 아래와 같다. {{content.name}} Angular 가이드 페이지에서 routing에 대해 공부할 때 routerLink 라는 속성을 배웠고, 이를 자연스럽게 적용했는데 왜 뒤로가기가 되지 않는 걸까? 그래서 routerLink 대신 일반적으로 많이 썼던 href로 바꿔봤더니 뒤로가기 버튼이 활성화되어 정상 화면처럼 작동했다. {{content.name}}..

🧐 monorepo 형태의 프로젝트를 진행 중인데, 프로젝트 내에 ui와 markup 앱이 같이 있어서 사실 scss, img 파일들이 중복된다. 컴포넌트별 스타일 파일은 어쩔 수 없이 마크업에서 업데이트 될 때마다 덮어씌워야하지만, 공통으로 사용하는 스타일 파일이라던지 이미지 파일은 중복으로 갖고 있을 필요가 없다. ✅ Nx.dev로 monorepo를 생성하면 libs 폴더가 있는데, 여기에 프로젝트 내 app에서 공통으로 사용하고 있는 것들을 넣어주면 된다. 만약 공통 컴포넌트 같은 라이브러리를 생성하려면, nx g @nrwl/angular:lib 라이브러리 명 명령어를 사용하면 되지만 이번에는 정적 파일(scss, img)만 넣을거니까 새 폴더 추가해서 다 넣어버렸다. 그 다음, 기존에 각 app내..

Nx.dev는 monorepos 프로젝트를 위한 개발 툴이다. 기존에 Lerna, Git-repo 등 다른 툴로 monorepo를 구성할 수 있었는데, Nx.dev라는 걸 알게되어서 이를 이용해 프론트 개발 환경을 구성해보기로 했다. monorepos 란? In revision control systems, a monorepo (syllabic abbreviation of monolithic repository) is a software development strategy where code for many projects is stored in the same repository. (출처: https://en.wikipedia.org/wiki/Monorepo) monorepo는 한 repository..

⚠️ Problem 검색 컴포넌트를 개발하던 중, 검색 input에 한글을 입력했을 때 검색 결과가 조금 이상하다는 것을 발견하게 되었다. 영어를 입력했을 땐 정상적으로 검색되지만, 한글을 입력할 땐 마지막에 입력한 한글이 짤린채로 검색 method를 호출하고 있었다. 영어 입력시 한글 입력시 -> '가나'를 입력했지만, 실제 input text에는 '가'만 나옴. 스페이스바나 방향키를 눌러야 '가나'로 인식함. ✅ Solution 구글링한 결과, 한 블로그에서 해결방법을 찾게 되었다. 한글과 같은 조합형 문자의 경우, 일반적으로 글자 입력 후 space나 enter 등을 통하여 문자 입력을 완료한 시점에 compositioned 라는 이벤트가 발생한다. 이 이벤트에 따라 Angular는 양방향 바인딩을..

❗️Problem 진행하던 프로젝트가 어느정도 개발이 되어가면서 다국어 처리를 해줘야했다. ⚠️ Angular Internationalization (i18n) 기존에 Angular에서 다국어 처리는 Internationalization (i18n) 기능을 지원하고 있었는데, 아쉽게도 한국어가 없고 적용 과정이 복잡했다. (참고 : https://angular.kr/guide/i18n) 불러오는 중입니다... ✅ ngx-translate 그래서 두 번째로 찾아본 모듈이 바로 'ngx-translate' 이다. (참고: https://github.com/ngx-translate/core) ngx-translate/core The internationalization (i18n) library for Ang..

프로젝트를 진행하면서 production 빌드를 해야할 때가 있었는데, 아래와 같은 빌드 이슈가 발생했다. 이슈 > ng build admin-client --prod Terser 에서 발생한 "RangeError: Maximum call stack size exceeded" 라는 에러 메세지를 구글링해본 결과, 찾은 해결 방법은 세 가지 정도 되었다. - node_modules 폴더를 삭제하고 다시 npm을 설치할 것. > node_modules 뿐만 아니라 package-lock.json 파일도 함께 삭제해주는 것이 좋다. - Angular CLI 버전을 9.0.2 이하로 다운그레이드 할 것. > 이미 내 Angular CLI 버전이 9.0.1로 해당 사항이 없음. - terser 버전을 최신 버전으..

Directive란? 사전에서 Directive를 검색해보면, '지시'라는 의미를 가진 단어로 나타난다. Angular에서 Directive는 DOM을 관리하기 위해, Directive를 사용한 요소들에게 어떠한 '지시'를 한다. Directive 종류 컴포넌트 디렉티브(Component Directive) 컴포넌트 역시 디렉티브의 한 종류로 볼 수 있다. 하지만 컴포넌트는 @Component() 데코레이터를 사용해서 별도로 사용한다고 한다. (참고 사이트에 자세한 설명이 나와있음.) 컴포넌트 디렉티브는 @Component() 데코레이터의 select 프로퍼티에 디렉티브 이름을 정의한다. 어트리뷰트 디렉티브(Attribute Directive) 템플릿파일에서 HTML 요소의 어트리뷰트와 같이 사용하는 디..