분류 전체보기

[우아콘2023] 대용량 트래픽을 받는 모놀리식 서비스에 Woowa하게 RPC 적용하기

https://www.youtube.com/watch?v=iOoquUhKT5g ※ 영상을 보며 아래 노션 페이지에 내용을 정리하였고, 포스트에는 노션을 한 번 더 요약한 내용을 담았습니다. [우아콘2023] 대용량 트래픽을 받는 모놀리식 서비스에 Woowa하게 RPC 적용하기 | Notion https://www.youtube.com/watch?v=iOoquUhKT5g jn307742.notion.site 내용 요약 배경 설명 1명당 기본적으로 3~4개의 과제를 병렬적으로 진행하고 있었다. 병렬적으로 진행되는 과제가 많다는 것이 단순히 이 프로젝트를 관리하는 개발자들의 어려움은 물론이고 함께 협업하는 기획팀이나 유관부서에게도 이런 어려움들이 전파되었었다. 이런 상황을 타파하고자 시스템을 작은 단위로 분리..

[사이드 프로젝트] fillsa 개발일지 010. Spring 패키지 구조 설계하기

패키지 구성의 종류 1. 계층형 └── src ├── main │ ├── java │ │ └── com │ │ └── example │ │ └── demo │ │ ├── DemoApplication.java │ │ ├── config │ │ ├── controller │ │ ├── dao │ │ ├── domain │ │ ├── exception │ │ └── service │ └── resources │ └── application.properties 각 계층을 대표하는 디렉터리를 기준으로 코드들이 구성한다. 해당 프로젝트에 이해가 상대적으로 낮아도 전체적인 구조를 빠르게 파악할 수 있다. 2. 도메인형 └── src ├── main │ ├── java │ │ └── com │ │ └── example..

[사이드 프로젝트] fillsa 개발일지 009. 리액트 처음 세팅하기 (3) CSS

React에 CSS를 적용하는 여러가지 방법 1. css 파일을 바로 import하기 가장 간단한 방법이지만 여러 컴포넌트에서 class name이 중복될 수 있어 관리하기가 매우 힘들다. // App.js import "styles.css"; const App = () => { return( ... ); } 2. React에서 제공하는 CSS module 이용하기 css 파일의 이름을 이름.module.css과 같이 변경하여 사용할 수 있다. 이것은 css 모듈이 작동하도록 코드를 변환하라고 컴파일 과정에 보내는 신호이다. // App.js import styles from "./App.module.css"; const App = () => { return ( CSS 적용 ); }; export def..

[우아콘2023] Kafka Streams를 활용한 이벤트 스트림 처리 삽질기

https://www.youtube.com/watch?v=YACC1t_oSlA ※ 영상을 보며 아래 노션 페이지에 내용을 정리하였고, 포스트에는 노션을 한 번 더 요약한 내용을 담았습니다. [우아콘2023] Kafka Streams를 활용한 이벤트 스트림 처리 삽질기 | Notion https://www.youtube.com/watch?v=YACC1t_oSlA jn307742.notion.site 내용 요약 스트림 처리 도입 배경 과거의 '지역별 배달/라이더 현황' 집계 방법 과거에는 대량의 데이터를 주기적으로 처리하는 방식인 배치 처리로 하고 있었으나, 다음 4가지 이유로 실시간으로 데이터를 처리하는 스트림 처리로의 전환이 필요로해졌다. 일 수백만 건 주문 건수, 데이터의 양이 늘었다. 주문 건수 및 ..

[사이드 프로젝트] fillsa 개발일지 008. 리액트 처음 세팅하기 (2) Axios, React Query, Zustand

1. Axios 설정 AJAX(Asynchronous Javascript And XML)을 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야한다. HTTP Client 라이브러리에는 Fetch API, Axios 등이 있고, 이 프로젝트에서는 Axios를 사용한다. 1) axios 설치 npm install axios 2) axios 모듈 만들기 src > apis 디렉토리 하위에 'customTestAxios.js'라는 파일 생성하기 import axios from 'axios'; const customTestAxios = axios.create({ baseURL: 'https://koreanjson.com/', }); export { cus..

[우아콘2023] Kafka를 활용한 이벤트 기반 아키텍처 구축

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

[사이드 프로젝트] fillsa 개발일지 007. 리액트 처음 세팅하기 (1)

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. 리액트 디렉토리 구조 만들기 pages react router로 라우팅을 적용하는 컴포넌트들을 저장 여기에 담기는 컴포넌트들은 파일명을 '~~Page'로 끝내기 components 재사용 가능한 컴포넌트들을 저장 hooks 커스텀..

[우아콘2023] 대규모 트랜잭션을 처리하는 배민 주문시스템 규모에 따른 진화

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

[사이드 프로젝트] fillsa 개발일지 006. vite로 리액트 프로젝트 생성하기

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

[사이드 프로젝트] fillsa 개발일지 005. 피그마로 리액트 코드 생성하기

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