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

자바스크립트 deep dive 책을 읽으면서 자바스크립트란 전부 객체다 라는 말을 보고 한번 정리할 필요가 있을거 같아서 적어본다.이 말은 단순히 멋있는 철학처럼 들릴 수도 있지만, 실제로 자바스크립트의 동작 방식을 이해하면 진짜 이 말이 무슨 뜻인지 깨닫게 된다.그럼, 어떤 의미인지 살펴보자. 원시 타입도 객체처럼 동작한다자바스크립트에서 기본 데이터 타입인 원시 타입(Primitive Type)은 다음과 같다:String (문자열)Number (숫자)Boolean (참/거짓)BigInt (큰 정수)Symbol (유일한 값)undefinednull이 데이터 타입들은 원래 값(primitive)으로 동작하지만, 필요할 때는 객체처럼 행동할 수 있다.왜냐하면 자바스크립트는 원시 타입에 객체의 메서드와 프로퍼..

개발을 하다가 결제쪽 에러로그 분석을 하려고 키바나라는걸 알게 되었다.한번 정리해두면 좋을거 같아서 작성해보겠다. Kibana는 Elastic Stack의 한 부분으로, 데이터를 탐색, 시각화, 분석하는 강력한 도구이다.Elasticsearch에 저장된 데이터를 그래프, 차트, 대시보드 등으로 시각화해서 이해하기 쉽게 만들고 특히 로그 분석, 애플리케이션 모니터링, 보안 데이터 분석 같은 분야에서 많이 활용된다. 주요 기능:데이터 시각화: Kibana를 사용하면 선 그래프, 막대 그래프, 파이 차트 등 다양한 형태로 데이터를 시각화. 이를 통해 데이터의 패턴과 추세를 쉽게 파악.대시보드 생성: 여러 시각화를 하나의 대시보드에 모아 실시간으로 데이터를 모니터링하고 분석. 대시보드는 사용자 정의가 가능하며,..

1. 캡슐화 (Encapsulation)"데이터와 메서드를 묶고, 외부에선 숨긴다."정의: 객체의 상태(필드)와 동작(메서드)을 하나의 단위로 묶는 것. 외부에서는 객체 내부의 세부 구현을 보지 못하도록 숨기고, 필요한 인터페이스만 공개.목적: 데이터 무결성을 유지하고, 외부 코드와 내부 구현의 의존성을 줄임.예시:class BankAccount { private balance: number = 0; // 외부에서 직접 접근 불가 deposit(amount: number): void { if (amount > 0) this.balance += amount; } getBalance(): number { return this.balance; // 필요한 정보만 ..

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