전체 글

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

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

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..

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

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..