code를 헤엄치는 인어공쭈

1. React Native란?React Native(RN)는 React 기반의 크로스플랫폼 모바일 앱 개발 프레임워크이다. JavaScript 및 TypeScript를 사용하여 iOS와 Android 앱을 동시에 개발할 수 있도록 해준다.주요 특징크로스플랫폼 개발: 하나의 코드베이스로 iOS, Android 동시 개발 가능네이티브 성능: React와 네이티브 코드를 결합하여 최적화된 성능 제공핫 리로드(Hot Reload): 코드 변경 시 앱을 새로 실행하지 않고 바로 반영풍부한 라이브러리 지원: Expo, React Navigation, Redux 등과 호환광범위한 커뮤니티: Meta 및 오픈소스 커뮤니티에서 활발히 유지보수됨 2. React Native의 기본 구조 React Native 앱의 주요..

⇒ 금액이 0보다 큰 금액이 있는 결제 SEQ 를 취소를 해야 하는 데, 0인 SEQ 는 제외해서 매핑⇒ TASF 빼고 RV의 합산금액을 초과할수 없다. 취소가능금액 해당 payment 에 가능금액으로 RV 합산금액과 비교해서 사용 따라서 리스트를 매핑하는 과정에서 다양한 방법이 존재하길래 한번 정리해보았다.onClickSave() { if (this.putForm.invalid || this._checkCancelAmountExceeds()) { this._checkValid = true; return; } const cancelItems = this.payments.value.flatMap((item) => item.transactions .fi..

AJAX란 무엇인가?AJAX는 "Asynchronous JavaScript And XML"의 약자로, JavaScript를 사용하여 서버와 비동기적으로 데이터를 주고받는 기술이다. 비동기 처리를 통해 웹페이지 전체를 새로고침하지 않고도 필요한 데이터를 서버로부터 받아올 수 있다. 이로 인해 사용자 경험(UX)이 크게 향상된다.AJAX의 동작 원리AJAX는 클라이언트(브라우저)와 서버 간의 비동기 데이터 통신을 관리하는 메커니즘으로 다음의 단계로 동작한다.클라이언트 요청:JavaScript가 서버로 요청을 보냅니다.요청은 비동기적으로 수행되며, 웹페이지가 새로고침되지 않는다.서버 처리:서버는 클라이언트 요청을 처리하고, 데이터(예: JSON, XML)를 생성.클라이언트 응답:서버로부터 응답 데이터를 받아 ..

🌍 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 이벤트가 발..

오늘은 Coursera에서 제공하는 Technical Support Fundamentals 코스에 대해 소개하려고 한다.이 코스는 IT 지원 업무에 필요한 기초 지식을 제공하는 입문 과정으로, 구글이 주관하는 IT 지원 전문가 자격증 프로그램의 첫 번째 과정이다. 이 과정은 IT 기술자로서의 첫걸음을 떼는 데 필요한 핵심 개념들을 다루고 있다.아래 주소에서 강의를 직접 확인할 수 있다. 자 한번 배운것을 정리해보자~! https://www.coursera.org/professional-certificates/google-it-support?action=enroll Google IT 지원Google에서 제공합니다. IT 분야에서 빠르게 커리어를 쌓으세요. 이 자격증 프로그램에서는 수요가 많은 기술을 배우고..

프론트 개발자로써 웹사이트 보안에 있어서 어떤걸 방지하고 미리 대응하면 좋을까?대부분 이슈는 서버나 백엔드쪽에서 보안유지를 하고 있는데 프론트에선 어떤걸 사전 방지 하면 좋을지 생각해보았다.  1. 입력값 검증 (Input Validation) 예시 문제: 사용자가 웹 사이트의 입력 필드(검색, 회원가입 등)에 악의적인 코드를 입력할 경우, 예상치 못한 동작이나 페이지가 깨지는 현상이 발생할 수 있다.해결 방법: 사용자가 입력한 데이터가 문자열이 맞는지, 특정 길이를 초과하지 않는지, 특수문자가 포함되지 않는지 등을 검증하는 로직을 추가한다. 2. XSS (Cross-Site Scripting) 방지예시 문제: 사용자가 작성한 댓글에 같은 코드를 입력하면, 그 페이지에 접속한 다른 사용자에게 악성 스크..