code를 헤엄치는 인어공쭈

🌍 Angular에서 i18next를 사용한 번역 설정1.  프로젝트 설정i18next 관련 라이브러리 설치  npm install i18next --save npm install angular-i18next --save npm install --save-dev i18next-scanner 2.  i18next 설정i18next 설정 파일 생성 (i18next.config.js)번역 키를 스캔하고 변환할 설정 파일을 작성합니다.module.exports = { input: ['src/**/*.html', 'src/**/*.ts'], // 번역할 소스 경로 설정 output: './src/assets/locales', // 추출된 번역 파일의 저장 위치 options: { removeUnuse..

문제 개요기존 코드에서 발생한 문제는 다음과 같다:모달이 열려 있을 때 뒤로 가기 버튼을 누르면 페이지가 이동되는 문제사용자가 뒤로 가기 버튼을 누르면 모달이 닫히기만 하고 페이지가 이동되지 않도록 해야 한다.Angular ngOnDestroy가 호출되지 않음모달을 단순히 CSS로 보이고 숨기는 방식으로 구현해 Angular 컴포넌트가 DOM에서 완전히 제거되지 않기 때문에, 리소스 해제를 위한 ngOnDestroy 호출이 이루어지지 않음.해결 접근 방식모달 열림 시 history.pushState로 히스토리 추가모달이 열릴 때마다 history.pushState로 현재 페이지를 히스토리에 추가해 히스토리 스택을 쌓음. 이렇게 하면 뒤로 가기 버튼을 누를 때 페이지 이동 없이 popstate 이벤트가 발..

Angular에서 ControlValueAccessor 쉽게 이해하기Angular에서 사용자 정의 폼 컴포넌트를 만들다 보면, Angular의 폼 시스템과 연동해야 하는 경우가 있다. 그때 필요한 것이 바로 ControlValueAccessor이다. 이 인터페이스를 사용하면 Angular 폼 제어기(FormControl, NgModel)가 커스텀 컴포넌트와 원활하게 연결될 수 있다. 쉽게 말해, Angular의 기본 폼 요소(input, select 등)처럼 커스텀 컴포넌트도 동일하게 동작하도록 만들어 주는 역할을 한다. Angular에서 커스텀 폼 컴포넌트가 Angular 폼 제어기(FormControl, NgModel)와 상호작용하는 과정은 ControlValueAccessor의 메서드들을 통해 이루..

앵귤러 개발자로써 까먹은 기본적인 개념들을 한번 정리하는 시간을 가져 보겠다. 앵귤러의 동작원리란?앵귤러 부트스트랩: 브라우저가 HTML(index.html) 파일을 로드하고 앵귤러 애플리케이션이 부트스트랩됩니다.루트 모듈 초기화: main.ts 파일에서 platformBrowserDynamic().bootstrapModule(AppModule)이 호출되어 루트 모듈(AppModule)이 부트스트랩됩니다. AppModule이 부트스트랩되면 Angular는 루트 컴포넌트(AppComponent)를 로드하고, 이를 기반으로 애플리케이션의 나머지 컴포넌트들을 초기화합니다.의존성 주입: 필요한 서비스들이 컴포넌트에 주입됩니다.라우팅 처리: URL에 맞는 컴포넌트가 선택되고 로드됩니다.템플릿 렌더링: 컴포넌트의 ..

https://angular-maps.com/ Angular Google Maps Components angular-maps.com위에서 많은 참고 바람 네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지...  구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!https://developers.google.com/maps/documentation/javascript/g..

Introduction Angular 애플리케이션을 개발할 때, 코드의 품질과 안정성을 유지하기 위해 유닛 테스트는 중요한 부분이다. Angular에서는 Jasmine과 Jest와 같은 테스트 프레임워크를 사용하여 유닛 테스트를 작성할 수 있다. 1. Jasmine - Jasmine은 Angular에서 따로 설치할 필요 없이 기본으로 포함되어 있는 테스트 프레임워크다. - Jasmine은 BDD (Behavior-Driven Development) 스타일의 문법을 제공하여 가독성이 높은 테스트 코드 작성을 도와준다. - TestBed, async 함수, RouterTestingModule 등을 사용하여 Angular 테스트 환경을 설정할 수 있다. - Jasmine의 describe, it 함수를 사용하..

개념 RxJS는 Observables을 사용한 반응형 프로그래밍을 위한 라이브러리이다. 이는 이벤트 처리와 데이터 스트림 관리를 위해 특히 비동기 프로그래밍에 널리 사용되는 JavaScript 라이브러리이다 비교 일반적인 자바스크립트 코드와의 비교 1) 자바스크립트 let count = 0; let rate = 1000; let lastClick = Date.now() - rate; document.addEventListener('click', () => { if (Date.now() - lastClick >= rate) { console.log(`Clicked ${++count} times`); lastClick = Date.now(); } }); 2) RxJS 사용 - 다양한 제어 연산자들은 이벤트 ..

TypeScript 이란? - 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 특징 - 컴파일 언어, 정적 타입 언어 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점도 존재. - 자바스크립트 슈퍼셋(Superset) : 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어, 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다. - 객체 지향 프로그래밍 지원 : 타입스크립트는 ES6(ECMAScript ..

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 - 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합 - TypeScript와 함께 사용 - 정적 타입 검사 및 코드 예측 등의 이점을 제공 - 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시 - 양방향 / 단방향 데이터 바인딩 둘다 가능 1. 컴포넌트(Component) 컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성. Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 ..

* NgRx - Angular에서 반응형 애플리케이션을 구축하기 위한 프레임워크 로컬 상태관리에 용이함. Angular 라우터와 통합. 다양한 형태의 데이터, Entity 수집관리. State Store - Redux에서 영감을 받은 Angular 앱을 위한 RxJS 기반 글로벌 상태 관리. Effects - @ngrx/store에 대한 Model. Router Store - Angular 라우터를 @ngrx/store에 연결하기 위한 Bindings. Entity - record collections을 관리하기 위한 어댑터. ComponentStore - 로컬/컴포넌트 상태를 관리하기 위한 독립 실행형 라이브러리. Store 에 대해서 자세히 궁금하다면? Angular - ngrx in State (1..