기술 블로그 탐방기 (7) 썸네일형 리스트형 [토스 SLASH24] N개의 탭, 단 하나의 웹소켓: SharedWorker https://www.youtube.com/watch?v=SVt1-Opp3Wo실시간으로 데이터를 가져오는 방법1. WebSocket2. 폴링3. Server Sent Event (SSE)웹 소켓브라우저 서버웹소켓 연결 방식웹 소켓 연결시도연결이 되면 서버에서 데이터를 송수신할 수 있음토스 증권은 올해 초까지만 했어도 유저가 한개의 폰에서만 접속이 가능했었음 즉 여러개의 폰으로 접속이 불가능했음 유저 하나당 토스 증권은 한개의 서버만 열렸다 문제가 될 건 없었음 하지만 PC버전의 토스 증권을 출시하게 되어 문제가 발생함 PC환경에서는 여러개의 탭을 쓰면서 차트를 보는 것이 일반적이고 이로 인해 탭의 개수만큼 웹소켓의 연결이 늘어나게 되어 문제가 생기게 됨 이렇게 웹 소켓의 개수가 많아진다면 서버의 리소.. [토스 모닥불 | EP.6] 프론트엔드 개발에서 Next.js, 꼭 써야 할까? https://toss.tech/article/firesidechat_frontend_6 모닥불 | EP.6 프론트엔드 개발에서 Next.js, 꼭 써야 할까?프론트엔드 개발에서 프레임워크는 정말 필수 일까요? 토스 정진우, 조유성 님이 전하는 프레임워크와 라이브러리의 정의부터 실제 업무에서의 활용법까지, 실용적인 예시를 통해 함께 알아보toss.tech 개발에서 가장 중요한 것은 무엇인가요?동영상 내용은 아니고 그냥 이 글을 읽으려는 사람들한테 던지는 질문입니다. 저는 개발을 할 때 가장 중요하다고 생각하는 것은 의도와 목적이라고 생각합니다. 목적성이 없는 코드는 결국 제 기능을 못하게 되고 의도가 명확하지 않은 코드도 결국 사라지게 되는 것 같습니다. 프론트엔드를 희망하는 분들은 다들 React냐 N.. [ 토스 기술 블로그 ] SLASH 21 - Day 3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 바로 쓰는 Frontend Clean Code실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집toss.im 실무에서 클린코드의 의의== 유지보수 시간의 단축 유지보수를 하려면 - 코드 파악- 디버깅- 리뷰등의 과정을 거쳐야 하는데 이를 하는 시간을 줄인다는 것은 비용을 줄인다는 말이다. 그때는 맞고 지금은 틀리다 코드에 유지보수를 할 때는 항상 위와 같은 생각을 염두에 두어야한다. 실제로 예시를 보여줬는데 이거 이렇게 하면 되겠는데? 하고 머리속으로 생각한 것을 그대로 보여줬다. ㅋㅋㅋ.... 뒤이어 그 방법이 잘못된 것은 아니지만 유지보수에 어려움을 주.. [ 토스 기술 블로그 ] SLASH 21 - Day 3 TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까? TDS로 UI 쌓기: 그 많던 코드는 누가 다 치웠을까?TDS(Toss Design System)로 구성되어 있는 토스의 제품들. 복잡한 화면도 단숨에 개발할 수 있도록 큰 힘이 되어주는 TDS를 개발자들이 사용하고, 확장하는 과정을 공유합니다.toss.im TDS란? Toss Desgin System 토스는 글꼴이나 애니메이션 등 디자인 관련한 시스템이 존재해서 일관된 UI를 제공한다. 이로써 다른 제품을 개발할 떄 쉽게 적용가능해서 생산성을 높인다.( 역시 큰 회사는 이런게 있구나 ) 1. 컬러들을 팔레트로 나누어 변수명 ex) blue_700으로 사용 이러한 규칙을 사용해서 앱, 웹에 적용하며 디자이너, 기획자랑도 소통이 좋다 또한 테마에 적절하게 적용할 수 도 있음 2. 상황에 맞는 디자인을 적용.. [ 토스 기술 블로그 ] SLASH 21 - Day 2 Micro-frontend React, 점진적으로 도입하기 Micro-frontend React, 점진적으로 도입하기거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을toss.im Django MVC 프로젝트가 Micro-frontend React 프로젝트가 되는 이야기 웹 개발을 하다보니 한계를 느껴 React를 점차 도입하기로 했음 저희, CRA로 시작해볼까요 ? 하지만 Django에 조금씩 도입하는 과정에서 CRA로 하는 방법은 옳지 않았음 webpack 빌드의 결과물을 Django에 삽입하기 위해 ( Django는 템플릿 언어이다 ) webpack-bundle-tracker라는 webpack 플러그인과 django-webp.. [ 토스 기술 블로그 ] SLASH 21 - Day 1 결제 시스템의 SDK와 API 디자인 결제 시스템의 SDK와 API 디자인PG 연동 개발자들에게 쉽고 빠른 가이드 제공을 위해, 20년 동안 유지된 기존 시스템에 추상화 레이어를 만들고 SDK와 API를 설계했던 경험을 공유합니다. 추가로 인터페이스의 일관성과 예측 가능toss.im PG ExperiencePayment Gateway 온라인 결제 연동 개발을 해야한다면 1. 구매자가 쇼핑몰에서 물건을 사면2. 쇼핑몰에서 PG에게 요청을 한다음 카드사로 결제를 요청한다 이때 쇼핑몰에서 PG로 연동하는 개발이 필요하다 우리나라에는 많은 PG가 있으나 여러 문제가 있다. 환경이 비슷하다보니 python ,node, go를 이용해 개발하는 업체들한테는 제공을 못하는 문제가 발생했다. -> 개선전략이 필요했다 기존 연동 흐름 1. 서버 ) 연동 모듈.. [ 토스 기술 블로그 ] SLASH 21 - Day 1 토스의 서버 인프라 모니터링 토스의 서버 인프라 모니터링서버 인프라를 효과적으로 트러블 슈팅할 수 있도록 노력한 경험과 모니터링 인프라를 운영한 경험을 공유합니다.toss.im 모니터링 시스템의 변화토스는 모니터링 시스템에서 2019년 -> 2021년 사이 인프라 변화가 있었음 DC/OS , Vamp -> Istio , kubernetes ( k8 ) 이렇게 모니터링 시스템의 변화가 생김 쿠버네티스를 주로 사용하다보니 프로메테우스가 메인 모니터링 시스템이 되었음 Service Mesh는 분산 API Gateway로 서버사이드 로드 밸런싱이 아니라 클라이언트 사이드 로드 밸런싱임 -> 하나의 Api Gateway에 장애가 발생해도 영향이 적었음 서비스 메쉬?마이크로서비스 아키텍처에서 서비스 간의 통신을 관리하고 제어하기 위한 인프라 .. 이전 1 다음
