#parallelism다중 이미지 업로드 최적화: 병렬 스트림과 CompletableFuture사이드 프로젝트로 sns 서비스를 개발하며 사용자가 다수의 이미지를 업로드하는 기능을 개발하게 되었다. 웹 애플리케이션에서 다중 이미지 업로드는 일반적이며, 이를 효율적으로 처리하는 것은 사용자 경험 향상에 중요한 역할을 한다. 그렇다면 서버 측에서…
#JPAJPA가 Fetch Join에 대한 On절을 지원하지 않는 이유JPA가 Fetch Join에 대한 On절을 지원하지 않는 이유 집사의고민 프로젝트에서 조회 쿼리가 발생할 때 데이터가 삭제되는 상황이 발생하였습니다. 그래서 이번 글에서는 간단한 JPA의 Fetch Join 동작 원리와 유의해야 하는 부분들에 관해…
#Database데이터베이스 복제하기(리플리케이션) 2 - 테코와 알아보는 대규모 데이터 관리테코의 고민 2 - 이벤트에 어떤 내용을 기록해야 해? GTID 기반의 안정적인 복제 방식을 도입한 후 잘 운영되는 카페를 보며 행복한 나날을 보내는 테코. 그런데 어느 날, 데이터베이스에 저장된 회원 데이터를 전체적으로 업데이트하는 작업을 하던 …
#Database데이터베이스 복제하기(리플리케이션) 1 - 테코와 알아보는 대규모 데이터 관리일상을 공유하는 작은 카페 사이트를 직접 개발해 운영하고 있는 테코(1세). 사이드 프로젝트로 만든 카페에 많은 사람 들이 들어와 응원의 글을 남기자 테코는 행복해해요. 그런데 어느 날! 카카오톡에 ‘귀염둥이 우테코’ 신상 이모티콘이 출시되고, 이 …
#Test로컬에서도 프로덕션과 유사한 환경에서 테스트할 수 없을까? : Testcontainers 도입기우아한테크코스 레벨3과 레벨4 동안 프로젝트를 진행하면서, 로컬 테스트 환경과 실제 운영 환경이 다른 기술적 어려움을 겪었습니다. 해당 어려움으로 비롯된 문제 상황과 단계적 해결 방안, 그리고 최종 해결 방안으로 도입한 에 대한 소개와 사용법을 공유…
#useLayoutEffectuseLayoutEffect를 활용한 산발적 마커 렌더링 최적화마커 렌더링 최적화 서비스 소개 마커 렌더링 최적화 설명에 앞서 잠시 저희 팀에서 진행했던 서비스에 대해 소개드리겠습니다. 저희 서비스의 출발점은 이었습니다. 최근 들어 보조금과 저렴한 유지비용 등의 이유로 전기차의 수요는 점점 증가하고 있습니다. …
#Web웹 어플리케이션의 역사들어가면서 백엔드 개발자라면 웹 어플리케이션이라는 개념을 자주 접하게 됩니다. 그렇지만 웹 어플리케이션이 왜 등장했는지, 어떻게 지금의 형태에 이르렀는지에 대해 답하기는 쉬운 일이 아닐 것입니다. 좋은 엔지니어는 기술 그 자체에 매몰되는 것이 아니라…
#query어떤 경우에 한 방 조인 쿼리와 여러 개 쿼리 분리를 고려할 수 있을까?최근에 프로젝트에서 리팩토링과 동시에 쿼리 개선을 하고 있는데요. 조인 한 방 쿼리로 한 번에 끝내는 게 여러 번 네트워크 타는 것보다 좋을 것 같아서 한 방 쿼리로 수정하고 있다가 다음과 같이 모든 쿼리가 조인이 덕지 덕지 붙어있는 코드를 보고 뭔…
#ANDROID레이어드 아키텍처에서 이미지 업로드하기[Android] 레이어드 아키텍처에서 이미지 업로드하기 배경 저는 현재 ‘나아가’라는 우테코 프로젝트와 ‘ZOOC’이라는 사이드 프로젝트에서 안드로이드 개발을 담당하고 있습니다. 두 프로젝트에서 모두 이미지 업로드를 위해 를 사용하고 있습니다. 프…
#JPA공간 데이터 개념부터 적용까지들어가며 성수동에 위치한 힙하고 트렌디한 카페를 쉽게 찾을 수 있는 요즘카페 서비스에 지도 기능을 추가하기로 했다. 기능 개발을 위해 공부하던 중 공간 데이터에 대해 알게 되었다.. 공간 데이터는 좌표계를 통한 지리적인 위치 데이터를 의미한다. 좌…
#JPAJPA Cascade는 무엇이고 언제 사용해야 할까?들어가면서 JPA를 사용한 개발을 진행하면서 가장 많이 들었던 고민 중 하나는 였습니다. ‘Cascade는 위험하니 조심해서 사용해야 한다!’ 와 같은 이야기도 많이 들었을뿐더러, 언제 어떻게 사용해야 할지 명확한 가이드라인을 찾기도 어려웠기 때문…
#Network전송 제어 프로토콜이란?OSI 7계층과 전송제어 프로토콜 데이터 통신은 여러 단계로 진행되는데, OSI 참조 모델은 그 과정을 7개 계층으로 나눈다. 1계층(물리 계층)은 ‘케이블이 연결된 상대에 대한 전기·기계적 신호 전달’ 제어를 담당한다. 2계층(데이터링크 계층)은 …
#concurrency무한스크롤 기능에서 동시성 이슈 해결하기안녕하세요. 우아한테크코스 5기 BE 연어입니다. 팀 프로젝트에서 열심히 라는 서비스를 만들고 있습니다. 요즘카페는 스크롤 내리면서 성수동의 카페들을 하나씩 볼 수 있는 숏폼 형식의 서비스입니다. 최근에 무한 스크롤 기능을 추가하면서 예상치 못한 동…
#TanStack Query낙관적 업데이트로 사용자 경험을 개선해보자!들어가며: 낙관적 업데이트, 왜 필요할까? 장바구니에 상품을 추가했는데, 왜 화면에는 바로 반영되지 않을까? 낙관적 업데이트의 필요성을 처음 느낀 순간은, 기능을 만들 때였습니다. ‘장바구니 상품 추가’를 위해 POST 요청을 보내고, 이에 대한 …
#AWSAWS 로그인부터 시작하는 인프라 구축하기 1편AWS 로그인부터 시작하는 인프라 구축하기 1편 : AWS 로그인 / EC2 / VPC 이해하기 0. 들어가기 AWS를 처음 접한다면, 아래의 사진(인스턴스 생성 설정)에 나온 이야기들은 별나라 이야기 같을 것입니다. IAM 사용자, EC2 인스…
#AWSAWS 로그인부터 시작하는 인프라 구축하기 2편AWS 로그인부터 시작하는 인프라 구축하기 2편 : 서브넷 / 보안그룹 / 퍼블릭vs프라이빗 인스턴스 / 라우팅 테이블과 인터넷 게이트웨이 6. 서브넷 이해하기 인스턴스를 생성할 때, 설정한 VPC에 따라 선택할 수 있는 서브넷 목록이 바뀌는 것을 …
#concurrency선착순 티켓 예매의 동시성 문제: 잠금으로 안전하게 처리하기들어가며 대학 축제 티케팅 서비스 페스타고를 개발하면서 아래와 같은 고민을 하게 되었다. 티켓 오픈 시간에 많은 사용자가 동시에 티켓 예매를 요청하면 어떠한 문제가 발생할까? 그리고 그 문제를 어떻게 해결할 수 있을까? 여기서 가장 중요한 것은 요청…
#JDBCJDBC와 DataSource 이해하기JDBC란? JDBC(Java Database Connectivity)는 자바 프로그래 밍 언어를 사용해 데이터베이스에 접근할 수 있도록 하는 자바 API이다. 이를 통해서 우리는 데이터베이스에 접속하고, SQL을 실행하고, 이를 통해 데이터를 가져오…
#reactReact 18 - 동시성 렌더링들어가며 2022년 3월, React 18이 발표되었습니다. 여러 변경 사항이 있었지만 그 중 핵심은 Concurrency(동시성)입니다. 기존 experimental 버전에서만 동작하던 ‘concurrent mode’를 공식 지원하게 되었고, 따라…
#spring@Configuration은 어떻게 빈을 등록하고, 싱글톤으로 관리할까?어노테이션을 사용해서 빈을 생성하는 방법은 크게 두 가지가 있다. 과 을 사용해 빈 설정 정보 클래스 생성 와 이를 상속한 , 어노테이션등을 사용해 자바 컴포넌트 생성 은 어떻게 빈을 등록하고, 싱글톤으로 관리하는지 알아보자! @Configurat…
#web이미지 사이즈 최적화들어가며 사용하고자 하는 서비스의 기능은 잘 구현되어 있지만, 사용자에게 제공하는 시간이 느리다면 좋은 서비스라고 할 수 있을까? 사용자의 경험을 고려해 봤을 때, 기능적인 측면도 중요하지만 다양한 기기와 네트워크 환경에서도 원활하게 제공하기 위해서…
#springExceptionHandler와 ControllerAdvice를 알아보자콘솔 애플리케이션을 구현할 때, 우리는 예외를 핸들링하기 위해 try / catch문을 사용했습니다. 그러나 웹 애플리케이션에서는 예외 처리 방법이 조금 다릅니다. 이번 글에서는 스프링을 사용한 웹 애플리케이션 적용할 수 있는 예외 처리 방법인 와 …
#DAODAO와 RepositoryDAO를 사용해서 DB에 접근할 때, 대부분 DAO 클래스에 Spring의 @Repository를 달아 둡니다. 왜 DAO를 Repository라고 하지? DAO가 Repository의 일종인가? 싶었는데, DAO와 Repository라는 클래스를 …
#Mysql데드락 해결 모험기용어 설명 Cycle이란, 사용자가 특정 챌린지에 도전할 때 생성되는 객체이다. 비즈니스 규칙 상 하루에 한번씩 총 3일을 인증해야 하며, 하루에 여러번 인증을 할 수는 없다. 아직 인증을 하지 않은 상황에서 활동을 인증하게 되면 인증 내역인 Cy…
#aopAOP에 대한 사실과 오해 그런데 트랜잭션을 사알짝 곁들인..들어가며 트랜잭션을 공부하다보면서 자연스럽게 AOP에 대해 접하게 되었습니다. AOP를 사용하게 되면서 직접 경험했던 사실과 오해에 대해서 공유하려고 합니다. 첫 번째 사실: public이외의 메서드는 AOP가 걸리지 않는다. 실제 인텔리제이에서 …
#spring스프링 이벤트 적용기상황 스모디 프로젝트를 하면서 랭킹 기능을 도입하기로 했습니다. 랭킹 기능은 유저가 활동을 했을 때, 활동에 따라 랭킹 점수를 부여해야 합니다. 저희 서비스는 챌린지에 도전하고 매일 챌린지 에 해당하는 활동을 인증하여 총 3회 인증 시 성공하는 사이클…
#Transaction트랜잭션 격리 수준Transaction Isolation Level 애플리케이션을 개발 중 데이터베이스를 도입하면 격리 수준에 대한 이해가 자연스럽게 요구됩니다. 격리 수준은 데이터베이스의 ACID 성질 중 Isolation 에 해당하며, 여러 트랜잭션이 동시에 변경…
#typescriptinterface vs type aliaswhat is the difference between interface and type alias? typescript를 공부해본 사람이라면 위의 키워드를 사용해서 구글링을 해본 적이 있을 것이다. (최소한, 나는 그렇다…🙄) 실제로, 아래와 같…
#무중단배포무중단 배포무중단 배포를 도입하게 된 계기 프로젝트를 론칭한 이후, 사용자의 피드백을 반영하다보니 운영 환경으로의 배포가 점차 잦아졌습니다. 문제는 배포를 할 때마다 기존 서버를 내리고 새롭게 띄우는 과정에서 평균 20초 이상의 다운타임이 발생한다는 것이었습니…
#Test테스트코드 성능 개선기들어가며 코드를 수정하면, 검토 요청(PR) 과정의 첫 번째에 전체 테스트 코드가 잘 돌아가는지 확인하는 과정이 주기적으로 일어나고 있어요. 혼자 개발하며 테스트 코드를 접했을 때는 비지니스 로직의 안정성을 보장해주고, 문서화 기능도 있어 테스트는 …
#OpenIDOpenID와 OAuth2.0요즘 많은 서비스가 소셜 로그인을 지원합니다. 저만 해도 새로운 서비스를 이용할 때, 네이버 또는 카카오 로그인이 있으면 거기에 손이 먼저 가는데요. 번거로운 개인 정보 입력을 생략할 수 있는 소셜 로그인은 사용자 입장에서 참 고맙습니다. 개발자 입…
#JPAJPA의 동적 쿼리F12 프로젝트를 진행하면서 검색기능을 개발하는 과정에서 고민했던 부분을 소개해드리려고 합니다. F12 서비스에는 회원을 검색할 수 있는 기능과 제품을 검색할 수 있는 기능이 존재합니다. 이 글에서는 좀 더 복잡한 조건이 들어가 있는 회원을 검색하는…
#gitGit Merge와 branch로 merge 관련된 여러 개념을 이해해봅시다! : base branch : branch에서 나눠진 하위 branch 오늘 생각해볼 내용은 이렇습니다. merge fast-forward merge non fast-forward …
#slack슬랙 소셜 로그인과 알림을 위한 앱 설치 가이드슬랙 소셜 로그인과 알림을 위한 앱 설치 가이드 구글, 깃허브, 카카오, 네이버와 같은 서비스는 소셜 로그인을 제공합니다. 슬랙도 해당 기능을 지원하지만 사용자가 많지 않아 한글로 작성된 가이드를 찾기 어렵습니다. 슬랙은 앱을 배포하면 워크스페이스에…
#JPAJPA Hibernate 프록시 제대로 알고 쓰기JPA를 사용할 때 장점이 뭘까요? 많은 장점들이 있겠지만, 그 중 하나로 객체 그래프를 통해 연관관계를 탐색할 수 있다는 것을 꼽을 수 있습니다. 하지만 엔티티들은 데이터베 이스에 저장되어 있기 때문에 한 객체 조회 시 연관되어 있는 엔티티들을 모두…
#function함수 오버로딩서언 TypeScript에는 Function Overloading 기능이 있습니다. 이번에 Function Overloading의 강력함을 깨닫고, 이를 공유하고자 아티클을 씁니다. 함수 오버로딩이 왜 필요한지 이해하고, 예시와 저희 프로젝트에 적…
#sseSpring에서 Server-Sent-Events 구현하기웹 애플리케이션을 개발하다보면 클라이언트의 요청이 없어도 서버에서 데이터를 전달해줘야 하는 경우가 있습니다. 대표적으로 뉴스피드나 댓글 알림처럼 실시간으로 서버의 변경사항을 웹 브라우저에 갱신해줘야 하는 경우를 예로 들 수 있을 것 같습니다. 제가 …
#test테스트 자동화 라이브러리 개발기cypress-ci는 Cypress 테스트 자동화 라이브러리로, CI Provider에서 서버 실행과 테스트 실행을 자동화하기 위한 여러가지 기능을 지원하고 있습니다. 개발 배경 체크메이트 팀에서는 Jenkins와 Cypress로 빌드 전 E2E 테…
#MySQL좋아요 개수 조회 최적화하기속닥속닥 프로젝트(https://github.com/woowacourse-teams/2022-sokdak)를 진행하면서 현재는 문제가 되지 않지만 시간이 갈수록 데이터가 쌓이면서 문제가 될 수도 있겠다라고 생각한 부분이 있습니다. 게시글에 대한 ‘좋…
#service서비스 추상화😘 서론 우아한테크코스에서 사용하는 협업 도구 중 하나인 은 무료 프리티어 사용 시 3개월이 지난 메시지들을 보여주지 않습니다. 레벨 3 팀 프로젝트인 줍줍에서는 이 사라지는 메시지들을 백업해주는 서비스를 제공합니다. 의 메시지에 대한 정보를 주로 …
#spring-bootSpring Profile: yml 파일 하나로 프로퍼티 관리하기서비스를 개발하다보면 하나의 서버 애플리케이션을 다양한 환경에서 실행할 일이 생깁니다. 그리고 H2 DB를 사용하는 테스트 환경과 MySQL DB를 사용하는 배포 환경에서 사용되는 환경변수 값이 서로 다른 것은 당연한 일이겠죠. 해당 글에서는 일반적…
#React공식 팀에서의 에러 헨들링현재 팀에서의 에러 핸들링 공식에서 비동기 통신에 대하여 제대로 된 에러 관리 방식이 없어서 잡지 못하는 에러도 많았고, 컴포넌트내에 에러 로직이 무더기로 있는 경우가 있었다. 그래서 지금부터 공식팀이 에러를 처리한 방식에 대해서 알아볼 것이다! 일…
#compositeLife of Pixel이 글은 Google Chrome 개발자 Steve Kobes의 Life of Pixel영상을 보고 정리한 내용입니다. 사용된 이미지들은 Steve Kobes의 허락 하에 slide show에서 가져왔습니다. 이 글의 목표 어떤 과정을 통해 HTML…
#docker이론과 실습을 통해 이해하는 Docker 기초본 포스팅은 도커에 대한 자세한 개념, 도커 기본 명령어, 컨테이너 실행 실습, 도커 컴포즈, 도커 이미지 빌드, 도커 허브에 이미지 배포 등 전반적인 도커 기초에 대한 내용을 다룬다. 도커 (Docker) 도커는 컨테이너 기반의 오픈소스 가상화 플…
#transactional트랜잭션 내에 외부 리소스 요 청이 담기게 되면 어떤 문제가 발생할까?트랜잭션 처리를 위해서는 데이터베이스와 통신하기 위한 이 필요하다. 하지만 커넥션 생성을 위해서 많은 비용이 필요하다. 이러한 비용을 절감하기 위해 커넥션을 미리 생성한 뒤 을 통해 관리한다. 커넥션 풀의 개수는 되어 있다. 만약 동시에 데이터베이스…
#nginx이미지 스토리지 서버 구축 및 최적화레벨 3 프로젝트 과정 중 이미지 서버를 개발하고 개선해나가는 과정을 이야기하려 합니다. 왜 이미지 서버를 만들어야 하는가? 레벨 3 프로젝트인 공책에서는 특정 공간에 관해서 설명하는 이미지를 올려 보여주어야 합니다. 글보다는 이미지를 제공함으로써 …
#hashmapHashMap vs HashTable vs ConcurrentHashMap이미지 출처: Top 35 Data Structure & Algorithms Interview Questions and Answers in 2021 각 자료구조는 필요에 따라 선 택되고 활용된다. 인터페이스의 구현체로는 , , 등이 있다. Map …
#springbootSpringBoot 존재하지 않는 API 요청의 응답 커스마이징하기SpringBoot 에서 존재하지 않는 api 요청에 대한 에러메시지를 커스터마이징한 과정을 소개한다. 배경 프로젝트를 진행하면서 api의 url을 실수로 잘못 입력했을 때, 에러의 원인을 확인하지 못해 디버깅 과정에 많은 시간을 사용했다. 이런 상…
#WebAssembly웹어셈블리(WebAssembly)에 대해 알아보자최근에 Developer-Roadmap을 둘러보다 라는 개념에 대해 접하게 되었다. 웹 개발을 공부하는 입장에서 처음 접하는 용어에 대한 호기심이 생겼고, 이번 시간을 통해 에 대해 함께 알아보려고 한다. 웹어셈블리 는 2017년에 처음 발표되었고,…
#solidDIP : 변경에 유연하고 테스트하기 좋은 코드 설계1. 들어가며 클린 코드 관련 저서들이 공통 적으로 강조하는 내용은 단연 변경에 유연하고 테스트하기 좋은 코드의 중요성입니다. 소프트웨어는 항상 변경이 발생하기 쉽습니다. 요구 사항이 변경될 때마다 코드를 대거 수정해야 한다면 유지보수 측면에서 좋지 …
#functional-interface함수형 인터페이스와 람다를 이용한 코드 중복 제거코드를 작성하다 보면 비슷한 로직의 중복 코드가 생길 수 있고, 그로 하여금 관리 지점이 늘어나기 때문에 대부분 리팩터링의 대상으로 취급한다. 이번 글에서는 함수형 인터페이스와 람다에 대해 알아보고, 이를 이용해 코드의 중복을 제거하는 방법을 다룰 …
#chart리액트에서 도넛 차트를 만들어보자!리액트에서 도넛 차트를 만들어보자 목차 도넛 차트 Canvas? DIV? SVG? stroke-dasharray stroke-dashoffset 직접 만들어보기 애니메이션 keyframes 도넛 차트 Canvas? DIV? SVG? 도넛 차트는 Ca…
#websocket웹 소켓에 대해 알아보자! - 테스트 편이 글은 웹 소켓으로 만든 채팅방을 어떻게 테스트할지 고민하는 독자를 위해 작성되었다. 웹 소켓은 어떻게 테스트하면 좋을까? Babble 팀의 데모데이 날 부스에서 질문을 받았다. “웹 소켓은 테스트를 어떻게 해야 할 지 감이 안 잡히는데 어떻게 구…
#infra쿠버네티스 입문하기기존에 웹 서버를 이용해 로드밸런싱, 포트포워딩, 헬스체킹, 무 중단 배포 등 안정적인 인프라를 구성하고 있었다. 지금의 인프라 구조도 좋은데 쿠버네티스라는 기술을 적용함으로써 얻는 이점은 무엇일까? 이미지가 변경되면 기존 컨테이너를 새로운 컨테이너로…
#hashmapHash와 HashMap서비스를 개발하거나 알고리즘, 자료구조를 공부하면서 Map, Set 등의 자료구조를 자주 이용했었다. Map 이나 Set 자료구조를 사용하면 자료의 양이 엄청 많아도 검색하는데 O(1) 만큼의 시간복잡도를 가지게 된다. 이렇게 빠른 검색을 위해 Ma…
#component당신의 컴포넌트는 안녕하신가요❗ 원지혁님의 컴포넌트, 다시 생각하기에서 얻은 인사이트를 정리한 글임을 밝힙니다. ❗ 필자의 생각도 많이 들어가 있으니 원본 영상도 함께 보는 것을 추천합니다! 🎯 개요 당신의 컴포넌트는 안녕하신가요? 조금 관심을 끌기 위한 멘트로 글을 시작했는데…
#linuxUbuntu PPA 저장소 관리서버를 구성할 때, 필요한 프로그램들을 공식 저장소를 통하여 보통 설치하게 됩니다. 하지만 저장소에 모든 프로그램 설치 데이터가 존재하진 않습니다. 다른 버전을 설치해야 할 때도 있을 것이고, 아예 등록되어 있지 않은 프로그램을 설치해야 할 때도 있…
#load-balancing로드 밸런싱에 대해 알아보자!인터넷의 발달로 인해 데이터 통신이 활발해졌고, 이는 트래픽의 폭발적인 증가로 이어졌다. 방금 누른 페이스북 ‘좋아요’와 친구에게 카톡으로 전송한 동영상, 좋아하는 유튜버의 채널 시청까지 어느 것 하나 인터넷을 통하지 않은 것이 없을 정도이다. 그 …