전체 글

[우아콘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..