전체 글

※ 영상을 보며 아래 노션 페이지에 내용을 정리하였고, 포스트에는 노션을 한 번 더 요약한 내용을 담았습니다. [우아콘2023] Kafka를 활용한 이벤트 기반 아키텍처 구축 | Notion https://www.youtube.com/watch?v=DY3sUeGu74M jn307742.notion.site 내용 요약 이벤트 기반 아키텍처를 왜? '배달' 시스템이 점점 커짐에 따라 '알림', '배달시간', '통계', '쿠폰' 등 부가적인 기능이 필요해졌다. 이 모든 기능들을 하나의 배달 시스템에서 관리하기에는 복잡도가 너무 커져 시스템을 모두 분리하기로 하였다. 알림, 배달시간 등의 기능들은 배달 기능과 강한 일관성을 필요로하지 않는다. 즉, 배달이 변경되었을 때 다른 관련 기능들이 '동시에' 반영될 필요..

1. vscode extensions 설치하기전부 필수는 아니고, 그냥 내 vscode에 깔려있는 것들을 나열해보았다. Auto Rename Tag ES7+ React/Redux/React-Native snippets ESLint HTML CSS Support JS Quick Console`console.log()` 코드를 log라는 축약어로 바로 쓸 수 있다. Live Server Prettier - Code formatter프리티어 구체적인 설정 방법은 링크 참조   2. 리액트 디렉토리 구조 만들기pagesreact router로 라우팅을 적용하는 컴포넌트들을 저장여기에 담기는 컴포넌트들은 파일명을 '~~Page'로 끝내기 components재사용 가능한 컴포넌트들을 저장 hooks커스텀 훅을 저장..

※ 영상을 보며 아래 노션 페이지에 내용을 정리하였고, 포스트에는 노션을 한 번 더 요약한 내용을 담았습니다. [우아콘2023] 대규모 트랜잭션을 처리하는 배민 주문시스템 규모에 따른 진화 | Notion https://www.youtube.com/watch?v=704qQs6KoUk jn307742.notion.site 내용 요약 배달의민족은 2018년 일 평균 50만건의 주문이 발생했지만 2023년 현재는 일 평균 300만건의 주문이 발생한다. 이러한 빠른 성장 속에서 겪었던 여러가지 성장통들을 소개한다. 문제상황 1. 단일 장애 포인트 과거 배민은 중앙 집중 DB(Ruby)를 사용했었다. 따라서 여러 시스템들 중 하나에서 장애가 발생하면 이는 루비의 부하로 이어졌고, 결과적으로 중앙 DB를 바라보는 ..

원래 webpack을 써서 리액트 개발을 이어가보려고 했으나 예전에 webpack은 느려서 답답하니 vite를 쓰는 게 좋다는 말을 들은 기억이 나서 뒤늦게 vite를 부랴부랴 찾아보았다. 그 전에 프론트엔드의 모듈 번들러에 대한 이해가 부족해서 함께 공부하였다.모듈 번들러의 역사npm의 등장자바스크립트는 모듈(module)이 없다.자바스크립트가 탄생했을 당시에는 ‘웹에서 자바스크립트로 대형 애플리케이션을 만들거야’라고 상상조차 하지 못했기 때문이다. 아주 간단한 동작만 하기 위한 목적을 가지고 태어났기에 파일을 여러 개로 만들어서 개발할 수도 없었다. 이후 node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수와 module.export를 쓰는 CommonJS 방식의 모듈이 만..

어떻게 피그마를 코드로 변환할 수 있을까? 피그마 플러그인에서 react, code 등의 키워드로 검색해보았다. 그 중 다운로드 수가 제일 많은 플러그인 4가지를 추려봤다. 참고로 Figma to Code랑 Anima는 피그마에서 기본으로 추천해주는 플러그인 인 듯하다. 4개의 플러그인 중에서 무엇을 사용할지 결정하기 위해서 피그마에서 만든 아래의 동일한 페이지를 각각의 플러그인을 이용하여 React 코드로 변환시켜 비교해보았다. 1. Figma to Code 선택할 수 있는 옵션이 다양하지 않다. 지금 바로 필사를 시작해보세요. 필사는 외국어 학습에 유익한 방법입니다. 좋은 글을 따라 쓰면서 어휘력과 문장 구조를 향상시키며, 다양한 표현과 스타일을 배울 수 있습니다. 더불어 문화적 이해와 자극을 받아 ..