TIL

맥 사용 6년 차드디어 한글 자소분리/자모분리 및 입력 지연 문제를 해결했다!!!!!!!!!!!!!!! 아래의 단계대로 하면 된다. 한 10분 정도 걸리는데, 로그아웃/로그인 과정이 필요해서 약간 귀찮긴 하다. 1. 구름 입력기 설치2. 로그아웃 후 다시 로그인3. Karabiner-Elements 설치4. 룰 등록 그럼 꼬우~ 우선 구름 입력기에 접속해서 pkg를 내려받아 설치를 해준다. 소개 사이트 : https://gureum.io/설치 사이트 : https://github.com/gureum/gureum/releases 비개발자라면 안 익숙할 수 있어서 스크린샷까지 첨부해 둔다.티스토리의 개구려 이미지 에디터에는 도형 추가 기능이 없어서 피치로 화살표를 대체한다..... 최하단의 As..

요번 거는 간단한거.. 근데 뭐가 문제인지 모르고 좀 헤맸다. 원래 알고리즘 풀 때 리스트랑 배열을 같이 쓰는 것을 안 좋아하는데, 오늘은 무슨 바람이 불었는지 이렇게 풀고 싶었다. public class Main { public static void main(String[] args) { List[] graph = new ArrayList[3]; Arrays.fill(graph, new ArrayList()); for (int i = 0; i 이런 식으로 List[] 로 이차원 배?열을 만들었다. 그리고 Arrays.fill로 각 배열 요소에 ArrayList를 넣어주었다. 그리고 (원래는 입력 받아 넣겠지만 패스하고) 반복문으로 각 인덱스에..

문제Spring Kafka를 이용해서 아웃박스 패턴을 간단히 만들어보고 있었다. 도커로 카프카를 띄우고, 프로듀서가 메시지를 잘 전송하는 것을 확인했는데 컨슈머가 브로커와 연결을 못하고 있었다. 상황도커 컴포즈로 카프카 실행하기services: kafka: image: bitnami/kafka:3.7.1 container_name: kafka ports: - "19092:19092" environment: - KAFKA_KRAFT_CLUSTER_ID=A616ADF4-FA94-440F-BE52-CC89ED7EC507 - KAFKA_CFG_NODE_ID=0 - KAFKA_CFG_PROCESS_ROLES=controller,broker - ..

요약@WithMockUser는 기본적인 인증만 제공한다. 하지만 우리는 도메인에 맞는 커스텀 UserDetails를 사용하는 상황이고, 이럴 경우 @WithMockUser만으로는 인증 객체의 테스트가 어렵다. 이 글에서는 그런 상황에서 커스텀 인증 어노테이션을 만들어 중복 없이 테스트하는 방법을 정리한다. 문제 @RestController@RequestMapping("/users")@RequiredArgsConstructorpublic class UserController { private final UserService userService; @GetMapping public UserRes getUser(@AuthenticationPrincipal UserDetails userDetai..

요약기존 구글 번역 기반의 느리고 문단이 깨지는 방식을 next-intl 도입으로 렌더링 평균 2.34초 → 0.71초로 70% 개선한 적용하였다. 문제 인턴으로 입사한 직후, 대표님으로부터 받은 첫 업무는 서비스 내 영문 페이지의 성능 개선이었다. 기존에는 별도의 영문 페이지가 존재하지 않았고, 사용자가 전환 버튼을 누르면 국문 페이지에 구글 번역 스크립트를 삽입하여 클라이언트에서 전체 번역을 수행하는 방식이었다. 이 방식은 국문 페이지가 먼저 렌더링된 뒤, 번역 스크립트가 로드되고 번역 요청이 수행된 후에야 화면이 바뀌는 구조라, 사용자 입장에서는 약 2초간 한글 화면을 계속 보게 되어 이질감을 느낄 수 있었다. 또한 번역 도중 줄바꿈이 깨지거나, 마우스 호버 시 구글 번역 UI가 노출되는 등의 문..

요약PNG 형식의 퍼블릭 이미지를 WebP 확장자로 변경하여 용량 95% 절감 (평균 2.46MB → 128KB, 총 29.53MB → 1.54MB) 문제 1 : public 이미지의 용량 비대 기존의 public 디렉터리에 있던 이미지들은 모두 PNG 확장자였고 기본적으로 MB 단위라서 불러오는데 체감 시간이 오래 걸렸다. 특히 가장 큰 이미지의 경우 11MB나 됐는데, 504 Gateway Timeout 에러가 발생했다. 이미지 로딩이 너무 오래 걸려서 타임아웃이 난거다. 물론 Next.js의 Image 컴포넌트가 브라우저 호환여부에 따라 webp로 변환해주기는 하나, 원본의 용량 자체가 커서 다소 불러오는데 시간이 걸렸다.  해결 1 : WebP 변환하여 용량 절감WebP 란?WebP는 구글이 2..

요약기존의 매 페이지마다 인증 처리를 하던 방식에서 Axios interceptor로 요청 전후를 공통 관심사로 묶어서 총 7페이지에서 순 141줄을 절감했다.  상황인증이 필요한 페이지에서 등록/수정/삭제 요청을 보낼 때마다 매 페이지에서 인증 처리를 구현하고 있었다.  해결Axios interceptor 도입하여 반복되는 인증 로직을 공통 관심사로 묶어 유지보수성과 일관성을 확보했다.  Axios 란?Axios는 브라우저와 Node.js를 위한 Promise 기반 HTTP 클라이언트이다. 그러니까 브라우저든 Node.js든 동일하게 사용할 수 있는 웹 요청 라이브러리다.  Axios Instance 란?Axios instance는 공통된 설정(예: baseURL, 헤더 등)을 사전에 정의해 재사용할 ..

요약SWR이라는 데이터 패치 라이브러리를 도입하여 외부에서 데이터를 불러올 때 로딩, 에러, 데이터를 단순하게 관리하고, 7페이지에서 총 순 93줄을 줄였다. 상황인턴으로 간 회사에서 코드를 보니 매 페이지마다 외부 요청 페이지에서 요청, 로딩, 에러를 일일이 useState, fetch로 구현하고 있었다.  해결SWR 라이브러리를 도입하였다. SWR란?SWR은 데이터 패치 리액트 훅이다. Stale-While-Revalidate이라는 HTTP 캐시 무효 전략을 기반으로 만들어진 라이브러리로, Stale-While-Revalidate은 우선 캐시된 데이터를 반환하면서 데이터를 요청하고, 응답받으면 이를 최신화하는 전략이다. import useSWR from 'swr'const fetcher = (url:..

요약 1.99GB였던 Next.js Docker 이미지를 멀티스테이지 빌드와 .dockerignore 도입으로 1.01GB까지 줄여 약 49% 경량화 문제 Next.js로 도커 이미지로 빌드하여 ECR에 푸쉬하여 사용하고 있었다. 하지만 기존에는 도커 이미지가 약 2GB로 크기가 커서, 빌드 시간이 오래 걸리고 ECR 업로드/다운로드 속도도 느렸다. 또 ECR에 저장할 때는 1GB당 월 0.1달러씩 부과하며, 트래픽에도 요금을 받고 있었기 때문에 용량을 더 줄이고자 했다.  해결 1 : 멀티 스테이지 도입 // 기존 DockerfileFROM node:version-alpineENV TZ=Asia/SeoulWORKDIR /appCOPY package.json package-lock.json ./RUN n..