GoGo GoGo

🧐 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..

Mac OS 카탈리나로 업데이트한 후 프로젝트에서 npm install을 실행했더니 "gyp: No Xcode or CLT version detected!" 라는 에러메세지가 나타나면서, 일부 모듈이 설치가 안되는 문제가 발생했다. No Xcode 라는 메세지를 보고, 내가 Xcode를 설치 안했나? 했을텐데? 하고 앱스토어에서 검색해봤는데 삭제되어있었다. 그래서 다시 앱스토어에서 재설치하고 npm install 해봤는데, 또 실패.. 구글링해보니 아예 xcode를 삭제하고 다시 재설치해야 했다. 🛎 해결 방법 1. xcode 삭제 > sudo rm -r -f {xcode설치 경로} xcode 설치 경로는 아래 명령어를 입력하면 나온다. (일반적으로 /Library/Developer/CommandLine..

프로젝트를 진행하면서 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 버전을 최신 버전으..

Javascript를 공부하다보면 비동기 처리에 대해 배우게 되는데, 이부분에 대해 정리해보려고 한다. 1. 콜백 함수(Callback Function) 가장 일반적인 비동기 요청 결과를 처리하는 방법이다. 대표적인 예로는 HTTP 요청에 따른 응답 처리가 있다. 일반적으로 비동기 요청이 한 개인 경우에는 콜백 함수를 쓰는 것이 가장 편리하다. 하지만 실제로 개발을 하다보면, 여러 개의 비동기 요청을 처리해야할 때가 있다. 이럴 때, 계속해서 콜백함수를 쓰게되면 아래와 같이 콜백 헬(Callback Hell)이 발생한다. 위 예제를 보면, 콜백 함수와 if/else 문들이 여러 개 사용되어서 코드 가독성이 좋지 않다. 이런 경우, 나중에 유지보수를 할 때 매우 불편하다. 잘못 건드리면 모든 호출이 다 망..

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