code를 헤엄치는 인어공쭈

HOxy, 프론트 개발자가 경험한 혹시 주도 개발(Feat: Server-Driven UI)

빠르게 변하는 서비스에서 Server-Driven UI가 왜 핵심이었나HOxy(혹시) 개발을 진행하면서 가장 크게 필요했던 것은UI 구조를 서버 정책 변화에 의존하게 만들지 않는 것,즉 server-driven UI 기반의 확장 가능 구조였습니다.기획 변경이 하루에도 몇 번씩 들어오는 환경에서“앱을 다시 빌드해야만 반영되는 구조”는 더 이상 유지가 불가능했습니다.그래서 프론트의 모든 UI 흐름을정책 플래그, 서버 응답, 동적 레이아웃 정보로 제어할 수 있도록 만들었습니다.아래는 실제로 활용했던 server-driven UI의 핵심 개념과 구현 방식 입니다. 간략하게 설명하고자 ~이다 체로 변경할께요 : )Server-Driven UI가 필요한 이유일반적인 모바일 앱에서 UI는 코드에 강하게 묶여 있다.버..

React로 만든 “하리니 오락실” 제작 썰“아니, 프론트 개발자가 오락실을 만든다고?”네, React로요. 그리고 또 1등했습니다. 😏 하리니 오락실의 정체하리니 오락실은 영끌 앱 안의 미니게임 센터예요.“앱 안에 오락실이 있다고요?”네, 광고도 노출하고, 포인트도 쓰고,유저도 붙잡는 일석삼조 프로젝트입니다.목표 요약하면 이렇습니다 👇리텐션 확보 — “하리니 보러 매일 출근각”광고 구좌 확보 — “죽었을 때 광고 보면 부활 (상술의 미학)”포인트 소진 — “이왕이면 즐겁게 소비하게 하자”체류시간 확보 — “유저가 앱에서 못 나가게 하자 😈”PM님이 한 줄로 정리했습니다.“유저의 시간을 뺏자. 착하게.” 🎮 게임 두 개, 미친듯이 단순하게 React로 FPS 떨어지는 순간, 그건 게임이 아니라 슬..

React로 시작해 인턴을 만들었습니다AI 챗봇 ‘하리니’ 개발 회고이미 몇달이나 지나서 앱에 올라갔지만 그냥 넘어가긴 아쉬워서 쓰는 글부틀리(Bootly): 하고 싶은 걸 해보는 시간저희 회사에는 부틀리(Bootly)라는 문화가 있습니다.한 달에 한 번, 정해진 토픽 아래 일주일에 몇 시간 정도를 본업 외의 무언가에 도전해보는 시간이죠.누군가는 새로운 기능을 실험하고, 누군가는 데이터를 분석하거나 디자인을 다시 뜯어봅니다.저는 이번에, 조금 다른 걸 해보기로 했습니다.“CX팀을 도와줄 챗봇을 직접 만들어보자.”CX의 한숨에서 시작된 프로젝트시작은 단순했습니다.옆자리 CX 담당자분이 “오늘도 문의가 너무 많아요…”라고 말하던 그날.유저 수는 빠르게 늘고 있었고, 매일 쏟아지는 문의는 하루를 꽉 채우고 있..

🧭 웹 개발자가 앱 마이그레이션을 맡으면 생기는 일 .zip“안녕하세요, 5년차 웹 프론트엔드 개발자입니다.”“아, 그럼 앱도 할 줄 아시겠네요?””(??!?!!)”그 말을 들은 날, 제 React Native 설치 창에는 npm install과 함께 신호 없이 찾아온 여정이 열렸습니다.👶 React Native 처음 써봤습니다. 말 그대로 처음처음엔 그냥 웹처럼 div, className, px 단위 쓰면 되겠지~ 싶었습니다.네, 바로 뚝배기 맞았습니다. React Native에는 div도 없고, className도 없고, px도 그냥 무시당합니다.대신 View, Text, StyleSheet.create() 같은 낯선 친구들과 친해져야 했고, 어느샌가 저는 “Metro 번들러가 터졌을 때는 캐시부..

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를 사용하면 선 그래프, 막대 그래프, 파이 차트 등 다양한 형태로 데이터를 시각화. 이를 통해 데이터의 패턴과 추세를 쉽게 파악.대시보드 생성: 여러 시각화를 하나의 대시보드에 모아 실시간으로 데이터를 모니터링하고 분석. 대시보드는 사용자 정의가 가능하며,..