기술 블로그 모음

안녕하세요, 네이버페이 내자산&회원FE에서 프론트엔드 개발하는 이선아입니다.저희 팀이 담당하는 일은 원용님의 아래 글에 잘 정리되어 있습니다.내자산: 마이데이터 자산 조회 by wonyong01.kim이 글에서는 코드 관리의 관점에서, 모노레포에 대해 간략히 알아보고 기존에 있던 두 레포를 하나로 통합하는 과정과 진행하면서 생겼던 고민거리와 느낀 점을 공유하려 합니다.개편 이전의 코드 관리저희 팀에서는 내자산 서비스뿐만 아니라, 신용점수, 송금, 간편결제 등의 서비스도 담당하고 있는데, 각 서비스에서 다뤄야 할 기능이 많다 보니 서비스 별로 레포를 분리해서 코드를 관리하고 있습니다.그리고 공통으로 사용해야 하는 부분을 패키지로 뽑아 패키지용 레포를 따로 두고 있었습니다. 패키지에는 범용적으로 사용되는 코드를 모아둔 utils 패키지나 원용님께서 설명해 주신 Session IO를 사용하기 위한 패키지 등이 있습니다.저희 팀에서 관리하는 레포가 늘어나다 보니, 패키지만 따로 뽑아둔 레포는 개발 스택 업데이트에서 누락되는 등 관리가 안 되는 문제가 발생했습니다. 서비스 코드 작업이 더 급하다 보니 패키지 코드 개선은 후순위로 밀리는 경우가 많았습니다.또한 패키지는 카나리 배포를 해야 코드 동작을 확인할 수 있다보니, 작업을 위한 컨텍스트 스위칭에 피로도가 높아졌습니다.결정적으로 배포 프로세스가 변경되었는데 패키지 레포에서도 이를 새로 적용해야 했고, 이전의 불편사항을 개선하기 위해 패키지 레포와 서비스 레포를 합쳐 모노레포로 관리하기로 결정했습니다.모노레포란?잠깐 모노레포에 대해 설명하자면, 여러 프로젝트의 코드를 하나의 레포에서 저장, 관리하는 소프트웨어 개발 전략을 뜻합니다.기존에도 패키지들을 하나의 레포에서 관리하고 있었으니 해당 레포는 모노레포 전략을 취하고 있었다고 볼 수 있습니다. 이전에 패키지들만 모아서 관리하던 레포에서 패키지들을 옮겨와 하나의 레포에서 코드를 관리할 수 있도록 변경했습니다.Repo before & afterturbo repo란?모노레포를 구성하기 위해서 저희는 turbo repo를 사용했습니다.turbo repo는 자바스크립트 또는 타입스크립트로 된 프로젝트를 대상으로 하는 고성능의 빌드 시스템입니다.turborepo모노레포를 구성하는 많은 방법 중에서 선택할 때에 저희의 기준은 두 가지였는데요, 적용 및 사용하기 어렵지 않을 것과 빌드 속도가 크게 저하되지 않을 것이었고, 결론적으로 저희 팀은 만족하며 사용하고 있습니다.turbo repo 알아보기turbo repo 사용법을 간략하게만 설명하려 합니다. turbo에서는 `turbo.json` 파일에서 설정을 명시하여 사용합니다.{ "$schema": "https://turbo.build/schema.json", "pipeline": { "build": { "cache": false, "dependsOn": ["^build"] }, "deploy": { "cache": false, "dependsOn": ["^build"] }, "start": { "dependsOn": ["^build"] }, "lint": {} }}pipeline은 turbo로 실행할 스크립트의 이름을 키로 가지는 객체입니다. `turbo run`으로 실행할 수 있으며 각 package.json에서 일치하는 스크립트가 있으면 실행시켜줍니다. 예를 들어 `turbo run build`를 실행하면 레포 내의 모든 패키지와 서비스를 빌드 할 수 있습니다.pipeline 별로 설정을 다르게 할 수 있습니다. turbo에서는 빠른 실행을 위해 캐싱을 지원하고 있는데, 스크립트를 실행한 결과를 저장해두어 다시 실행했을 때에 캐시 되어있던 결과가 있다면 그대로 사용합니다. 프로젝트를 빌드 할 때에는 캐싱 된 결과를 사용하지 않도록 cache로 설정을 제어할 수 있습니다. 스크립트 간에 의존성이 있을 경우에는 dependsOn으로 설정합니다.패키지 이관하기패키지 레포에 있는 코드들을 이관하고 turbo로 실행할 수 있도록 스크립트를 정리해 주었습니다.그리고 패키지 매니저인 pnpm에서 제공하는 기능으로, 서비스 코드에서 배포된 버전이 아닌 같은 레포에 있는 코드를 바라볼 수 있도록 package.json을 수정해 주었습니다.{ // ... "dependencies": { "@mydata/packageA": "workspace:*", "@mydata/packageB": "workspace:*" }}배포 프로세스 정리하기코드 이관 후에는 github actions를 이용하여 패키지 버전관리와 배포 프로세스를 정리했습니다. 우선 패키지의 버전 관리와 changelog 작성을 쉽게 하도록 도와주는 Changesets를 도입했습니다.ChangesetsChangesets를 활용한 버전 관리 과정을 짧게 설명하면, PR 생성 시에 패키지에 변경사항이 있는지를 감지하여 코멘트를 달아줍니다.코멘트에서 major, minor, patch 중 어떤 버전을 bump할 것인지 선택하고 changelog를 작성하면 임시 파일을 추가해 줍니다. 해당 PR이 특정 브랜치인 develop에 머지 되면 이를 감지해서 임시파일의 내용으로 버전 업데이트와 changelog를 추가하여 새로운 PR를 생성해주며, 패키지 작업이 모두 완료되었을 때에 작업자가 머지합니다.여기에 나아가서 develop에서 패키지 버전에 변경이 있었을 때에 자동으로 publish를 실행하도록 했습니다. 배포가 정상적으로 완료되면 메신저로 알람을 보내 배포 결과를 공유합니다. 작성한 publish actions 코드를 발췌한 내용입니다.name: Release Publishon: push: branches: - developjobs: publish: runs-on: air-fe steps: - name: Checkout Repo uses: actions/checkout@v2 - name: install dependencies run: pnpm install --frozen-lockfile - name: Create Release Pull Request id: changesets uses: common-fe/changeset-actions@main with: title: "🚀 version changed packages" publish: pnpm run publish - name: Publishing success! if: steps.changesets.outputs.published == 'true' uses: actions/github-script@v6 with: script: # 배포 성공한 경우 사내 메신저인 works 발송마지막으로, 작업 중 카나리 배포를 쉽게 할 수 있도록 PR 코멘트에서 canary-publish를 인식하여 카나리 배포를 자동화했습니다.자동화 작업할 때에는 한주님이 작성해 주신 FinFE Bot을 많이 활용했습니다. 처음 소개해 주신 글보다 지금은 더 많은 기능을 고도화하여 제공하고 있지만, 읽어보시면 자동화에 대한 인사이트를 얻을 수 있습니다!반복적이고 귀찮은 일은 Bot에게! by 이한주불편한 점 개선하기배포 프로세스까지 정리하고 나니 “해야 하는 일”은 다 끝난 상태였고, 약간의 불편한 부분이 남은 상태였습니다.첫 번째로 CI/CD에 걸리는 시간이 길어진 것이었습니다. PR 생성 시에 작성한 코드에 이상이 없는지 확인하는 CI가 걸려있는데, 코드를 모두 빌드 하는 단계가 포함되어 있었습니다. 패키지에 비해 서비스 빌드 시간이 더 길었는데, 패키지 코드를 조금만 고쳐도 긴 서비스 빌드 시간을 기다려야 했습니다.이런 문제를 해결하기 위해서 빌드 스크립트를 분리하고 패키지 변경 시에는 서비스 코드에 대한 테스트를 건너뛸 수 있도록 github actions를 보완했습니다.두 번째로는 브랜치 관리가 이슈가 되었습니다. 패키지 코드 작업과 서비스 코드 작업에 의존 관계가 있어서 문제 되는 부분이 있었습니다.처음에는 패키지 수정 시에 패키지 쪽만 수정해서 PR을 작성하여 changelog에서 쉽게 확인할 수 있도록 하려 했는데, 서비스 코드에서 이를 참조하고 있어서 에러가 발생할 수 있습니다. 브랜치가 잘못 관리 되면 다른 브랜치로 에러가 전파될 수 있어서 브랜치 관리 전략을 새로 논의해야 했습니다.장단점 분석해보기모노레포로 전환하고 몇 달간 사용해 보면서 느낀 장단점을 분석해 봤습니다.장점은- 한 레포에서 관리하다 보니, 패키지 작업이 수월해졌습니다.- 개발 스택 업데이트할 때에 누락되는 경우가 적어졌습니다.- 코드 검색과 관리가 쉬워졌습니다.단점은- 브랜치 관리 방법이 더 복잡해졌습니다.- 팀원 모두 빌드 시스템에 대한 공부가 더 필요했습니다.전체적으로 봤을 때에 코드 작업 측면에서는 모노레포를 사용하는 것이 유리하지만, 환경 설정이나 브랜치 관리가 복잡하여 피로해진 부분도 있었습니다.마치면서작업 착수 전에는 코드 이동만 하면 되려나 했는데, 실제로 작업하면서는 빌드 시스템부터 github actions까지 다양하게 공부해 볼 수 있었습니다.제 경험기가 모노레포 전환을 고려하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다.이번 모노레포 전환 작업을 진행하면서 시행착오도 많이 하고 고민도 많이 하면서 한 뼘 더 성장할 수 있었습니다. 작업 중 막힐 때마다 함께 고민해 주신 팀원분들 덕분에 무사히 마무리할 수 있었습니다.저희 네이버페이 내자산&회원FE에서는 팀원들의 지속적인 성장을 독려하고 있습니다. 저희와 함께하실 열정적인 분들을 언제나 기다리고 있습니다!채용: https://recruit.naverfincorp.com/코드, 어떻게 관리하세요? was originally published in NAVER Pay Dev Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

쏘카플랜 개편기 대부분의 개발자들은 논리적 사고와 정교한 설계를 통해 체계적으로 멋진 제품을 만드는 것을 목표로 합니다. 하지만 현실에서는 마감일에 쫓겨 우선순위를 정하고, 기능만 동작하도록 급히 코드를 작성해야 하는 상황에 처할 때가 많습니다. 다음과 같은 분들이 읽으면 좋습니다. 모든 프론트엔드 개발자 코드 품질과 마감일 사이에서 고민 중인 개발자...

생성형 기업이란 AI, 머신러닝, 딥러닝 등 생성형 기술을 활용하여 새로운 콘텐츠, 제품, 서비스를 창출하고, 비즈니스 모델을 혁신하는 기업을 의미합니다. 생성형 기술을 성공적으로 적용하기 위한 전략, 핵심 구성 요소, 그리고 생성형 기업으로 진화하기 위한 전략적 접근 방법을 제시합니다. 마지막으로, 생성형 기술의 미래 전망 및 도전 과제를 논의하며,...

안녕하세요. 왓챠 ML팀에서 머신러닝 엔지니어로 일하고 있는 찰스입니다.이전 글에서는 기존 왓챠 ML 파이프라인 및 실험 환경이 가진 문제점에 대해서 살펴보고, 문제를 해결하기 위해 컨테이너 환경의 도입, On-premise GPU 서버와 클라우드 서비스와의 연동, ML 파이프라인과 실험 환경을 제공하기 위해 여러 서비스를 활용한 사례에 대해 살펴보았...

생성형 AI는 소프트웨어 개발의 전통적인 방식을 혁신하며 새로운 도구와 개발 패러다임을 소개하고 있습니다. 이 기술은 코드 생성에서 검증, 통합, 배포에 이르기까지 소프트웨어 개발 생애주기(SDLC)의 모든 단계에 영향을 미치며, 개발자의 역할을 재정의하고 생산성을 비약적으로 향상시킬 전망입니다. 전문가들은 생성형 AI가 개발 팀의 효율성을 극대화하고...

안녕하세요, Tech Data AI검색 소속 데이터 분석가 최정현입니다. 지난해 말부터 커머스 유저 데이터를 분석 및 지표를 기획하고 대시보드로 자동화 하는 업무를 진행하였습니다. 이를 통해 추가적인 수익을 얻게 되었고 데이터를 통한 최적화 방향을 잡을 수 있었습니다. Databricks와 AWS 서비스를 활용한 데이터 파이프라인 설계 및 고도화 부분...

생성형 AI는 AI 모델을 생산하는 기업과 소비하는 기업 양쪽에 일하는 방법에 있어서 상당한 변화를 만들 것입니다. 생성형 AI를 신중하게 개발하고 적용하지 않으면, 법적, 사회적, 경제적 피해가 발생할 수 있습니다. 거버넌스와 ESG 리포트를 선제적으로 준비하는 기업은 지속 가능한 비즈니스를 이끌어 나갈 수 있을 것입니다.

안녕하세요. 왓챠 ML팀에서 머신러닝 엔지니어로 일하고 있는 찰스입니다.지난 글에서는 왓챠 추천 시스템을 컨테이너 환경으로 이전하면서 발생했던 여러 고민들을 어떻게 해결했는지 살펴보았습니다. 그 이후 왓챠 ML 팀에서는 왓챠와 왓챠피디아에 사용하는 추천 모델을 다양한 요구 조건에 맞춰 고도화했고, 다뤄야 하는 모델과 데이터가 지속적으로 늘어나게 되었습...

cert-manager의 버그로 의도와 다른 인증 체인이 사용되는 문제를 디버그하고, 업스트림에 기여한 과정을 소개합니다.

생성형 AI 툴은 그동안 소비자 중심 애플리케이션에 변화를 가져온 것처럼 실물 경제를 위한 AI 기반 상품을 개발하는 방식에도 큰 변화를 일으킬 수 있습니다. 실물 경제 분야에서 활동하는 기업이 직면한 가장 중대한 과제는 안전입니다. 이 맥락에서 컴퓨터 비전에 적용되는 생성형 AI는 앞으로 수십년에 걸쳐 실물 경제 산업을 변화시킬 잠재력을 지닌 가장 ...

AI가 알파고에서 챗GPT로 초 거대화되고 클라우드의 성능이 더욱 좋아지면서, 엣지 컴퓨팅은 새로운 전환의 계기가 만들어지고 있습니다. 새로운 정보 단말기에는 AI가 기본으로 탑재될 것이고, AI를 품은 엣지 컴퓨팅은 더 많은 기기에 필수 기술로 자리 잡을 것으로 전망합니다.

자바는 바이트코드 형태로 패키징돼 JVM을 통해서 실행 환경에 맞는 기계어로 변환되는 과정을 거쳐 실행됩니다. 그렇기에 JVM이 설치된 곳이라면 어디든 동일한 결과가 나오도록 실행할 수 있습니다. 이런 장점은 동시에 단점이 되기도 합니다. 실행 환경에 맞춰 변환하기 위해 많은 시간... The post 실행 시간 효율을 위한 클래스 데이터 공유(CDS...

소개 안녕하세요. 다나와 검색 파트 장민규, 오피스 파트 윤성현, 이주영입니다. 다나와에는 많은 기술 스택을 보유 하고 있습니다. Java, PHP, Go, Python 등 다양한 언어를 사용하고 있으며, 최근에는 Kotlin을 도입하여 사용하고 있습니다. 이번 포스팅에서는 Kotlin을 도입하게 된 이유와 어떻게 사용하고 있는지 소개하겠습니다. 왜 ...

안녕하세요 저는 원티드랩 HR솔루션사업팀에서 프론트엔드 개발을 하고 있는 신은선입니다.HR솔루션사업부에서는 팀 디렉토리, 근태, 전자결재/계약부터 슬랙 연동까지 모든 HR데이터를 쉽고 편하게 관리할 수 있는 HR 솔루션 SaaS인 원티드 스페이스를 만들고 있습니다.이번 글에서는 원티드 스페이스 프로젝트의 패키지 매니저를 Yarn Classic에서 Pn...

해당 아티클은 취준컴퍼니 우수 코치님을 인터뷰한 글입니다.   Q1. 안녕하세요, 양한솔 코치님. 간단히 자기소개 부탁드립니다. 안녕하세요, 마케터 양한솔입니다. 욕심은 없지만 책임감은 강한 사람이라고 저를 표현한 적이 있어요. 야망을 품고 살지는 않지만 이왕 하는 일이라면 잘해내고 싶어서 열심히 하는 편이거든요. 지금은 IT 스타트업의 마케...

파이썬은 오래전부터 서버 프레임워크 언어로 쓰였고, 거의 모든 규모와 모든 환경의 프로젝트를 지원합니다. 그러나 전통적으로는 백엔드 영역에 갇혀 있었습니다. 프론트엔드, 클라이언트 측 코드를 만들기 위한 용도로 파이썬을 쓰는 문화는, 적어도 아직까지는 크게 확산하지 않았습니다. 새로운 파이썬 웹 프레임워크 제품군을 사용하면 백엔드에서 프로그래밍 방식으...

디자인 씽킹과 TX의 결합은 고객과 직원 모두에게 가치를 제공하는 동시에, 시장에서의 지속 가능한 성장과 경쟁력을 확보하는 데 핵심적인 전략입니다. 이는 기업이 다양한 이해관계자의 요구와 기대를 효과적으로 관리하고 충족시키기 위한 최선의 방법론입니다.

(feat. WebSocket)안녕하세요. 네이버페이 내자산&회원FE 팀의 김원용입니다.저희 팀은 네이버페이 포인트는 물론, 마이데이터를 통한 다양한 금융 기관의 자산 정보를 한 곳에서 손쉽게 확인하고 관리할 수 있는, 네이버페이 내자산 서비스를 개발하고있습니다.이 글에서는 네이버페이 내자산 서비스에 대한 간략한 소개와 함께, 마이데이터 자산 조회 개발 과정을 단계별로 설명해보려고 합니다!네이버페이 내자산 서비스: https://new-m.pay.naver.com/mydata/home네이버페이 내자산 서비스 (이하 “내자산”)는 네이버페이 자산과 마이데이터 자산을 한 곳에서 조회 가능한 서비스 입니다.네이버페이 자산: - 네이버페이 포인트 - 네이버페이 머니(하나 통장) - 미래에셋 네이버통장 - 후불결제 - 우리집 - 마이카마이데이터 자산: - 은행 - 카드 - 보험 - 증권 - 대출 - 연금/IRP마이데이터는 고객이 본인의 개인신용정보를 금융회사로부터 마이데이터사업자에게 전송하도록 요구할 수 있는 권리를 의미합니다.이를 통해 사용자는 네이버페이에서 다양한 금융회사에 등록된 자신의 개인신용정보를 한눈에 조회하고 효율적으로 관리할 수 있습니다.여러 금융회사로부터 데이터를 가져온다는 개념을 바탕으로, 사용자의 모든 은행 계좌 잔액을 조회할 수 있는 은행 총 잔액 컴포넌트를 구현해보겠습니다.단순한 은행 총 잔액 컴포넌트1. 하나의 API로 모든 은행 잔액 확인하기은행 총 잔액을 표시하는 가장 간단한 방법은 한 번의 BE API 호출을 통해 데이터를 가져오는 것입니다.BE 에서는 모든 금융회사의 잔액을 병렬로 조회한 후, 이를 합산하여 응답합니다.// 은행 계좌의 총 잔액을 조회하는 함수const fetchBankTotalBalance = async () => { const bankTotalBalance = await fetch('/api/bank/total-balance'); return bankTotalBalance; // 예: 999,999,999}/* ================================================================== */// 총 잔액 조회 및 화면에 표시const bankTotalBalance = await fetchBankTotalBalance();render(bankTotalBalance);그러나, 만약 어떤 특정 금융기관의 데이터를 받아오는 데 시간이 많이 소요된다면, 이는 사용자 경험에 어떤 영향을 미칠까요?금융회사C 응답이 60초가 걸린다면 … ?2. 병렬 요청 방식마이데이터 자산 데이터는 여러 금융기관으로부터 가져오기 때문에, 특정 기관의 응답 지연은 전체 데이터 처리 속도에 영향을 미칠 수 있습니다. 예를 들어, 금융회사 C의 응답이 지연될 경우, 사용자는 전체 잔액 정보를 볼 수 없게 됩니다.이를 개선하기 위해 FE 에서는 금융회사별로 병렬 요청을 보내는 방식을 도입했습니다.FE 에서 금융회사별로 병렬 요청합니다.// 각 금융회사의 잔액 정보를 저장하는 객체const bankBalanceInfo = { 금융회사A: null, 금융회사B: null, 금융회사C: null,}// 개별 은행 계좌의 잔액을 조회하는 함수const fetchBankBalance = async (bankCode) => { const bankBalance = await fetch(`/api/bank/balance/${bankCode}`); return bankBalance; // 예: 100,000,000}// 금융사별 잔액 업데이트 및 화면에 표시const updateAndRender = (bankCode, balance) => { bankBalanceInfo[bankCode] = balance; render(sum(bankBalanceInfo));}/* ================================================================== */// 금융회사 병렬 요청Object.keys(bankBalanceInfo).forEach(async (bankCode) => { const bankBalance = await fetchBankBalance(bankCode); updateAndRender(bankCode, bankBalance);})이 방식을 통해 빠르게 응답을 받은 금융회사의 잔액 정보부터 합산하여 화면에 표시하게 되므로, 사용자는 신속하게 전체 정보를 확인할 수 있습니다.그러나, 만약 여러 금융기관에서 지연이 생기면, 이는 사용자 경험에 어떤 영향을 미칠까요?금융회사A 만 빠르게 온다면 … ?3. 캐시된 정보 활용여러 금융기관에서 데이터를 가져오는 과정에 지연이 생길 때, 병렬 요청 방식을 사용해도 전체 잔액 정보에 일시적인 오차가 생길 수 있습니다. 예를 들어, 전체 잔액이 999,999,999원인데 금융회사 A의 100,000,000원만 먼저 오면, 화면에는 100,000,000원만 표시되고, 지연 후에 서서히 999,999,999원으로 업데이트됩니다. 이것은 사용자에게 좋지 않은 경험을 줄 수 있습니다.이를 개선하기 위해 BE 에서 마지막으로 조회한 금융회사 데이터를 저장하고, FE 에서는 이 저장된 잔액을 먼저 보여줌과 동시에 최신 잔액으로 업데이트하는 방식을 도입했습니다.캐시된 잔액을 우선적으로 화면에 노출시키고, 병렬 요청 방식으로 금융회사의 최신 잔액으로 갱신합니다.// 각 금융회사의 잔액 정보를 저장하는 객체const bankBalanceInfo = { 금융회사A: null, 금융회사B: null, 금융회사C: null,}// 캐시된 총 잔액 정보를 먼저 가져오는 함수const fetchCachedBankTotalBalance = async () => { const cachedBankTotalBalance = await fetch('/api/bank/cached-total-balance'); return cachedBankTotalBalance; // 예: { 금융회사A: 100,000,000원, 금융회사B: 200,000,000원, ... }}// 개별 은행 계좌의 잔액을 조회하는 함수const fetchBankBalance = async (bankCode) => { const bankBalance = await fetch(`/api/bank/balance/${bankCode}`); return bankBalance; // 예: 100,000,000}// 금융사별 잔액 업데이트 및 화면에 표시const updateAndRender = (bankCode, balance) => { bankBalanceInfo[bankCode] = balance; render(sum(bankBalanceInfo));}/* ================================================================== */// 먼저 캐시된 총 잔액 정보를 화면에 표시const cachedBankTotalBalance = await fetchCachedBankTotalBalance();render(sum(cachedBankTotalBalance));// 금융회사 병렬 요청Object.keys(bankBalanceInfo).forEach(async (bankCode) => { const bankBalance = await fetchBankBalance(bankCode); updateAndRender(bankCode, bankBalance);})이 방법을 통해 사용자는 더욱 신속하고 안정적으로 은행 잔액 정보를 확인할 수 있게 되었습니다!4. WebSocket 적용으로 더 나아가기지금까지 3개 금융회사의 은행 잔액 조회 예시를 살펴봤습니다. 그러나 “내자산” 서비스는 은행뿐만 아니라 카드, 증권 등 다양한 금융회사의 데이터 조회도 지원합니다. 이는 갱신을 위한 HTTP API 요청의 증가를 의미합니다.자산이 100개라면 … ?이러한 상황을 개선하기 위해, Socket.IO 기반의 사내 플랫폼을 활용하여 WebSocket을 적용하였습니다.WebSocket 과 Socket.io 에 대한 자세한 내용은 NAVER D2 포스팅에서 확인 가능합니다.WebSocket은 한 번의 연결 설정으로 지속적인 데이터 교환을 가능하게 합니다. 이는 기존의 HTTP 요청 방식과 비교할 때 큰 이점을 제공합니다. HTTP 방식에서는 각 요청마다 헤더와 추가 데이터를 보내야 하지만, WebSocket은 초기 연결 설정 후에는 이러한 오버헤드 없이 데이터를 전송할 수 있습니다. 이는 특히 많은 양의 데이터를 실시간으로 주고받아야 하는 경우, 더욱 효율적입니다.한 번의 갱신 요청 API를 통해 전체 금융회사에 대한 데이터 요청을 하고, 응답은 조회가 완료된 금융회사 데이터부터 WebSocket을 통해 받습니다. 이 방식은 사용자가 신속하고 원활하게 실시간 데이터를 수신할 수 있게 해줍니다. 이 접근법은 네트워크 트래픽과 서버 부하를 줄이는 동시에 사용자에게 빠른 반응 속도를 제공하는 이점이 있습니다.한 번의 갱신 API 호출 후, Socket.IO 를 통하여 여러개의 응답을 받습니다.// 각 금융회사의 잔액 정보를 저장하는 객체const bankBalanceInfo = { 금융회사A: null, 금융회사B: null, 금융회사C: null,}// 캐시된 총 잔액 정보를 먼저 가져오는 함수const fetchCachedBankTotalBalance = async () => { const cachedBankTotalBalance = await fetch('/api/bank/cached-total-balance'); return cachedBankTotalBalance; // 예: { 금융회사A: 100,000,000원, 금융회사B: 200,000,000원, ... }}// 전체 은행 잔액을 갱신 요청const updateRequestBankTotalBalance = async () => { await fetch('/api/update-request/bank/total-balance');}// 금융사별 잔액 업데이트 및 화면에 표시const updateAndRender = (bankCode, balance) => { bankBalanceInfo[bankCode] = balance; render(sum(bankBalanceInfo));}/* ================================================================== */// WebSocket을 사용하여 갱신된 은행 잔액을 실시간으로 받을 준비const socket = io();socket.on("updateComplete", (bankCode, balance) => { updateAndRender(bankCode, balance);})// 먼저 캐시된 총 잔액 정보를 화면에 표시const cachedBankTotalBalance = await fetchCachedBankTotalBalance();render(sum(cachedBankTotalBalance));// 전체 은행 잔액을 갱신 요청updateRequestBankTotalBalance();이 방법을 통해 사용자는 더욱 신속하고 안정적으로 은행 잔액 정보를 확인할 수 있게 되었습니다!“내자산” 에서 WebSocket을 단방향 통신에만 사용하여, 응답 결과를 수신하는 데에 한정하고 있습니다. 이는 WebSocket의 양방향 통신 능력을 완전히 활용하지 못하고 있음을 나타냅니다. 실제로, 단방향 통신 상황에서는 Server-Sent Events(SSE)를 도입하는 것이 더 적합한 대안이 될 수 있습니다. 또한, WebSocket을 통한 데이터 통신의 효율성을 높이긴 했지만, 일부 데이터는 여전히 별도의 HTTP 요청을 통해 수집되는 상황이 발생하고 있습니다. 이는 향후 개선이 필요한 영역입니다.단순하지 않은 은행 총 잔액 컴포넌트지금까지 은행 총 잔액 컴포넌트 구현을 위해 기본 API 요청부터 WebSocket 통신에 이르기까지 단계별 과정을 살펴보았습니다. 단순한 기술적 최적화를 넘어서, 사용자 경험의 지속적인 향상에도 주의 깊게 노력하고 있습니다.이러한 점진적 개선 방식과 사용자 중심의 접근이 데이터 처리와 최적화를 고민하는 다른 개발자분들에게 조금이나마 도움이 되었기를 바랍니다.이 글을 읽어주셔서 감사합니다! 네이버페이 내자산&회원FE 팀은 긍정적인 에너지와 열정을 가진 팀원들이 모여, 지속적으로 성장하고 발전하는 환경을 조성하고 있습니다.이런 동기부여되는 분위기에서 함께 일할 새로운 팀원을 항상 찾고 있습니다. 저희 팀과 함께 성장하고 싶으신 분들은 언제나 환영합니다!채용: https://recruit.naverfincorp.com/내자산: 마이데이터 자산 조회 was originally published in NAVER Pay Dev Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

목차 인시던트란? 인시던트 정책을 수립하게 된 배경이 무엇인가요? 인시던트 정책을 수립하기 위해서 무엇을 하였나요? 인시던트 발생 시 어떻게 진행되나요? 인시던트 처리 후에는 어떻게 하고 있나요? 인시던트란? 인시던트(Incident…

안녕하세요~ 올리브영 커머스 서비스 개발팀에서 프론트엔드개발을 하고 있는 개발새발자 입니다~ 만반잘부 👋🏼👋🏼👋🏼 이번 포스팅에서는 Next.JS에 MSW…

생성형 AI는 지속적 자동화 테스트에 심오하고 다면적인 영향을 미칠 것이며, 코파일럿과 코드 생성기가 만든 코드를 테스트하고 평가하며, LLM을 개발하는 임베딩 및 기타 작업을 테스트하는 데 매우 중요합니다.

생성형 AI 학습에는 엄청난 양의 데이터와 이를 학습할 강력한 하드웨어인 GPU가 필수적입니다. 이번 글에서는 NVIDIA H100을 기준으로 생성형 AI 학습에 필수적인 GPU 아키텍처인에 대해 이야기해 보려고 합니다.

지난 글에 이어 이번 포스트 역시 Let'Swift 202…

하이브리드 워크를 위한 최선의 방법은 우리 회사의 업무 환경에 맞는 출퇴근 시간과 방법에 대한 확정 이후에 클라우드 기반의 자동화된 협업 솔루션으로 전환하는 것입니다. 사내 커뮤니케이션(메일, 메신저), 미팅, 문서 파일 관리 그리고 업무 협업을 위한 협업 툴(업무 보고, 정보 공유 및 일정 관리와 공동 온라인 문서 작업)을 클라우드 기반으로 전환하면...

「스크럼 개발 방법론은 속도 지향적입니다」 Sprint(단거리 경기, 전력 질주 🏃), Velocity(움직임의 빠르기, 속도)와 같은 단어에서 느낄 수 있고, 스크럼 가이드에서 권유(?)하는 이터레이션의 주기 또한 1~4주 사이로 짧은 데서도 알 수 있습니다.「스크럼 개발 방법론은 성과 지향적입니다」스크럼 가이드에서 “스크럼의 핵심(heart)은 한...

기업을 판단하는 수많은 지표가 있다. 투자유치, 매출, 연봉, 복지, 조직 문화 등 정말 다양한 기준으로 자신이 희망하는 기업을 분석, 탐색하게 된다. 하지만 스타트업의 경우 각 회사들이 너무 다양한 형태로 존재하고, 이제 막 성장하고 있는 회사들이 많기 때문에 위와 같은 명확한 지표들을 찾기 어려운 경우가 많다. 특히, 투자유치금액, 매출과 같은 정...

해당 아티클은 취준컴퍼니 우수 코치님을 인터뷰한 글입니다. Q1. 안녕하세요. 김민선 코치님! 간단히 자기소개 부탁드립니다. UX/UI와 인터랙션 디자인 사이에서 유영하는 프로덕트 디자이너라고 제 자신을 소개하고 싶어요. 처음에는 인터랙션 디자이너로 직무를 시작했다가 최근에 프로덕트 디자이너로 직무 전환을 했어요. 그래서 현재는 프로덕트 디자이너로서 ...

불확실한 경제 상황에도 기업은 코딩할 줄 아는 사람을 찾고 유지하려고 전력을 다하고 있습니다. 이럴 때 개발팀 책임자에게 있어 중요한 질문은 개발자가 직업에 만족하게 하는 요소가 무엇이냐는 것입니다. 문제점이 무엇인지도 알아야 합니다. 갈 곳이 많은 상황에서 개발자가 기대를 충족하지 않는 직장에 남을 동인은 크지 않기 때문입니다. 개발자의 직업적 만족...

쿠버네티스에서는 개별 파드에서 발생한 데이터가 주변 파드에 영향을 주지 않는 것이 기본 구성입니다. 하지만 사용자가 필요하다면 공유할 수 있는 방법을 제공하고 있습니다. Apache Camel과 헤이즐캐스트와 같은 오픈 소스들은 이미 쿠버네티스에서 제공하는 클러스터링 절차에... The post 리스와 헤이즐캐스트로 구성한 쿠버네티스 파드 클러스터링 ...