카카오헤어샵

RSS

게시글: 38
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
오버레이 권한을 받았는데 오버레이가 안됩니다. - 제 폰에선 되는데요??
카카오헤어샵 Android 개발자가 오버레이 기능 개발 중 겪은 문제를 공유하는 글입니다. 개발자 본인과 동료의 폰에서는 정상 작동하던 오버레이 기능이 기획자의 폰에서는 작동하지 않는 현상이 발생했습니다. 특히, 배포용 빌드에서 문제가 두드러졌으며, '다른 앱 위에 표시' 권한이 활성화되어 있음에도 불구하고 오버레이 기능 사용 시 권한이 꺼지는 증상을 발견했습니다. 이 문제는 개발 환경과 배포 환경 간의 차이, 특정 기기나 OS 버전과의 호환성 문제 등 다양한 원인을 추측하게 하며, 문제 해결을 위한 디버깅 과정을 상세히 설명하고 있습니다.
Android오버레이권한
카카오헤어샵·2024년 4월 24일
Etc
잘 먹고 잘 자면 개발 품질이 좋아질까? - feat. 연속혈당측정기
이 글은 개발자의 건강 관리가 개발 품질에 미치는 영향을 탐구합니다. 특히, 연속혈당측정기를 사용하여 식습관과 신체 활동이 혈당 수치에 미치는 영향을 직접 실험하고 공유합니다. 저자는 제시 인차우스페의 책을 참고하여 채소를 먼저 먹고, 첨가당/과당 섭취를 줄이며, 식사 후 가벼운 운동을 하는 등의 생활 습관 개선이 지방 감소, 장 건강 증진, 정신 건강 향상에 기여한다고 주장합니다. 이러한 건강 관리가 개발자의 집중력 향상으로 이어져 궁극적으로 개발 품질을 높일 수 있다는 점을 강조하며, 개발자들에게 실질적인 건강 관리 팁을 제공합니다.
개발자건강혈당 관리
카카오헤어샵·2024년 2월 26일
Frontend
카카오헤어샵에 Compose 적용하기 - xml 에서 Compose 로 가는 여정길
카카오헤어샵 Android 팀에서 기존 XML 기반 UI를 Jetpack Compose로 전환하는 여정을 공유합니다. 최신 트렌드인 선언형 UI를 적용하기 위해 마이페이지와 설정 화면을 우선적으로 개선 대상으로 선정했습니다. 이 과정에서 커스텀 폰트 적용, 반복되는 UI 로직 관리, 로컬 데이터 기반 화면 구현 등 세 가지 주요 문제에 직면했습니다. 이에 대한 해결책으로 Color, Font, Text System 가이드를 설계하고, 코드의 직관성, 확장성, 가독성을 높이는 방안을 모색했습니다. 본 글은 이러한 도입 배경, 직면한 문제점, 그리고 이를 해결하기 위한 시스템 가이드 설계 과정을 상세히 다룹니다.
Jetpack ComposeAndroidUI
카카오헤어샵·2024년 2월 8일
Frontend
앱 진입로직 개선(feat. RxSwift)
카카오헤어샵 iOS 개발자가 앱 진입로직에서 발생한 버그 해결 과정을 공유하는 글입니다. 앱 진입로직은 홈 화면 진입 전 보안, 로그인, 업데이트 등 8가지 항목을 체크하고, 하나라도 실패하면 에러를 핸들링하는 로직입니다. 최근 서버 장애 시 iOS 앱에서 네트워크 에러 팝업이 뜨지 않고 스플래시 화면에서 무한 대기하는 버그가 발견되었습니다. 기존 코드를 분석한 결과, RxSwift의 zip operator를 사용하여 여러 비동기 작업을 동시에 처리하는 과정에서 발생한 문제임을 확인하고 해결 방안을 모색합니다.
iOSRxSwift앱 진입로직
카카오헤어샵·2023년 12월 14일
Frontend
Form(폼) 요소에 대한 검증 및 오류 처리 개선 - 파트너스는 모든 페이지에 폼이 있고, 우린 모든 페이지를 수정해야 합니다
파트너스 사이트의 프론트엔드 개발팀은 모든 페이지에 존재하는 폼 요소의 검증 및 오류 처리 방식을 개선했습니다. 기존에는 각 페이지마다 독립적인 코드를 사용하여 코드 재사용이 어렵고, 새로운 페이지 개발 시 많은 시간과 노력이 소요되는 문제가 있었습니다. 이를 해결하기 위해 폼 요소를 공통 컴포넌트로 제작하여 UI 일관성을 유지하고 개발 속도를 높이는 것을 목표로 삼았습니다. 라이브러리로는 formik을 계속 사용하되, 변경 및 유지보수가 용이하도록 코드를 개선하는 방향으로 리팩토링을 진행했습니다. 코드 개선 전에는 하나의 입력값을 생성하기 위해 반복적인 코드가 많이 사용되어 가독성이 떨어졌으나, 공통 컴포넌트 도입을 통해 이러한 문제를 해결하고 효율적인 개발 환경을 구축하고자 합니다.
Form검증오류 처리
카카오헤어샵·2023년 11월 23일
Frontend
카카오헤어샵 vanilla-extract 도입기 - 카카오헤어샵 마크업 내재화 이야기
카카오헤어샵 플랫폼 개발팀은 외부 마크업 개발 방식에서 발생하는 비효율성을 해결하기 위해 마크업 내재화를 결정했습니다. 기존에는 외부 개발자에게 HTML, CSS 작업을 요청했으나, 기술 스택 불일치, 단일 SCSS 파일 관리의 비효율성, 커뮤니케이션 비용 증가 등의 문제가 있었습니다. 이에 따라 프론트엔드 개발팀은 마크업 작업을 내재화하고, 점진적으로 디자인 시스템을 구축하는 방향을 선택했습니다. 첫 단계로, 기존의 단일 SCSS 파일을 페이지 단위로 분리하고 module.css를 도입하여 화면 단위 스타일을 구분함으로써 기능 개발에 차질 없이 진행하면서도 코드 관리의 효율성을 높이는 방안을 모색했습니다.
카카오헤어샵마크업 내재화CSS
카카오헤어샵·2023년 11월 1일
Backend
헤어샵 백엔드 개발자 코드 리뷰 - 단일책임원칙 편 - 지극히 주관적인 저스틴 코드 리뷰 방법 - 1
카카오헤어샵 백엔드 개발자가 코드 리뷰 방법론 중 '교육적 코드 리뷰'에 대해 설명하는 글입니다. 코드 리뷰는 회사적 리뷰와 교육적 리뷰로 나눌 수 있으며, 특히 교육적 리뷰는 개발자가 배우고 반론하는 것을 좋아하는 특성을 활용하여 진행됩니다. 이 글에서는 객체지향 설계 원칙 중 '단일 책임 원칙'에 초점을 맞춰, 객체의 책임과 역할 분리가 코드의 이해도, 가독성, 유지보수성을 높이는 데 어떻게 기여하는지 예시 코드를 통해 설명합니다. 또한, 사이드 이펙트를 검증하며 변경하는 것의 중요성도 언급합니다.
코드 리뷰단일 책임 원칙객체지향
카카오헤어샵·2023년 11월 1일
Frontend
우리는 한다 리팩토링을 - UIKit+RxSwift 에서 SwiftUI+Combine 로의 여정
카카오헤어샵 iOS 개발팀이 UIKit+RxSwift 기반의 디자이너 앱을 SwiftUI+Combine으로 리팩토링하는 과정을 공유합니다. 볼륨이 작아 빠르게 대응 가능하고 SwiftUI와 Combine의 완성도가 높아져 실무 적용이 가능하다고 판단하여 프로젝트를 시작했습니다. 초기에는 MVVM 디자인 패턴을 유지하며 UI만 SwiftUI로 변경하고 RxSwift를 Combine으로 옮기는 단순한 접근을 생각했으나, 실제 진행하며 API 호출 부분을 Combine의 Future와 eraseToAnyPublisher를 사용하여 성공/실패에 따른 결과값을 Publisher 형태로 깔끔하게 내보내는 방식으로 변경했습니다. 이 글은 기존 기술 스택에서 최신 기술 스택으로 전환하는 과정에서의 경험과 기술적인 변경 사항을 다룹니다.
SwiftUICombineRxSwift
카카오헤어샵·2023년 1월 19일
Frontend
파트너스 레거시 코드 리팩토링 (2) - api 분리, HOC 걷어내기, react-query로 데이터 처리하기
이 글은 파트너스 서비스의 레거시 코드를 리팩토링하는 두 번째 이야기로, 프론트엔드 개발자가 겪었던 문제점과 해결 과정을 공유합니다. 기존에는 Redux의 덕스 패턴을 사용하여 전역 상태 관리와 API 로직을 함께 처리했으나, API 엔드포인트를 별도로 분리할 필요성을 느꼈습니다. API 파일 작성 방식을 클래스형과 함수형으로 비교 분석한 결과, 직관성과 개발 편의성을 고려하여 클래스형으로 API를 분리하기로 결정했습니다. 이 과정에서 React-query 도입을 위한 기반을 마련하고 코드의 구조를 개선하는 데 중점을 두었습니다.
React리팩토링API
카카오헤어샵·2023년 1월 18일
DevOps
Version Catalog 도입을 위한 온보딩 - gradle 버전 관리를 위한 Version Catalog 도입
이 글은 Gradle 빌드 시스템에서 라이브러리 및 플러그인 의존성 관리를 효율적으로 하기 위한 Version Catalog 도입 과정을 설명합니다. 여러 모듈을 사용하는 프로젝트에서 build.gradle 파일 관리가 복잡해지는 문제와 새로운 프로젝트 생성 시 반복적인 설정의 번거로움을 해결하기 위해 Version Catalog를 소개합니다. Version Catalog는 단일 파일에서 여러 프로젝트 또는 모듈의 버전 관리를 통합할 수 있으며, 함께 사용되는 의존성들을 묶어서 관리하는 장점을 제공합니다. 이를 통해 빌드 스크립트의 가독성과 유지보수성을 향상시킬 수 있습니다.
GradleVersion Catalog빌드 관리
카카오헤어샵·2023년 1월 6일
Frontend
파트너스 레거시 코드 리팩토링 - 타입스크립트, 리액트쿼리를 도입하다
카카오헤어샵의 파트너스 서비스 웹사이트에서 레거시 코드 리팩토링을 진행한 경험을 공유합니다. 프로젝트 규모가 커지고 의존성이 복잡해지면서 발생할 수 있는 라이브러리 및 프레임워크 버전 관리의 어려움, 그리고 수정 시 예측 불가능한 에러 발생 가능성 때문에 리팩토링의 필요성을 인지했습니다. 특히, 리브랜딩 및 기능 확장을 앞두고 개발 리소스가 충분하다고 판단하여 리팩토링을 결정했습니다. 리팩토링 범위는 작업될 페이지로 한정했으며, Typescript, React-query, 함수형 컴포넌트 도입을 통해 휴먼 에러 감소, 서버 데이터 효율적 관리, 코드 가독성 및 직관성 개선을 목표로 했습니다. 이를 통해 팀 내 프론트 코드 컨벤션을 확립하고 ESLint 규칙을 정립하는 성과를 얻었습니다.
레거시 코드리팩토링TypeScript
카카오헤어샵·2022년 12월 29일
Backend
안드로이드 Hilt 딥 다이브 - DI와 Dagger 그리고 Hilt 에 대해서
이 글은 안드로이드 개발에서 의존성 주입(DI)의 개념과 이를 위한 라이브러리인 Dagger 및 Hilt에 대해 깊이 있게 다룹니다. 의존성 주입은 객체 간의 결합도를 낮추어 코드의 유연성과 유지보수성을 높이는 기법으로, 직접 객체를 생성하는 대신 외부에서 생성된 객체를 전달받는 방식으로 작동합니다. 글에서는 의존성 주입을 사용하지 않을 때 발생하는 문제점과 사용했을 때의 이점을 그림을 통해 명확하게 설명하며, Hilt가 Dagger를 기반으로 안드로이드 프로젝트에서 DI 구현을 간소화하는 라이브러리임을 소개합니다. 이를 통해 개발자는 더 적은 상용구 코드로 효율적인 DI를 적용할 수 있습니다.
HiltDaggerDI
카카오헤어샵·2022년 12월 28일
Backend
안드로이드 멀티모듈 도입기 - 온보딩 프로젝트를 통한 안드로이드 멀티모듈 도입기
본 글은 안드로이드 개발에서 멀티모듈 방식 도입 경험을 공유합니다. 기존에는 단일 앱 모듈에서 패키지로 레이어를 구분했지만, 멀티모듈 프로젝트에서는 각 레이어별로 모듈을 분리하고, 그 안에서 화면이나 기능별로 다시 모듈을 나누어 코드 관리를 용이하게 했습니다. 글에서는 모듈의 정의와 함께 안드로이드 프로젝트에서 주로 사용되는 Application, Android Library, Java or Kotlin Library 세 가지 대표 모듈 유형을 설명합니다. 또한, 온보딩 프로젝트에 멀티모듈을 처음 도입하면서 `build.gradle` 파일을 Groovy에서 KTS로 변환한 경험도 언급합니다. 멀티모듈 도입을 통해 코드 탐색의 편리성을 높이고 프로젝트 구조를 개선하는 데 초점을 맞추고 있습니다.
안드로이드멀티모듈Android
카카오헤어샵·2022년 10월 28일
Frontend
LiveData에서 Flow로 변형해보기 - LiveData -> Flow(StateFlow & SharedFlow)
본 글은 Android 개발자가 기존 LiveData를 Kotlin의 Flow(StateFlow, SharedFlow)로 마이그레이션하는 경험을 공유합니다. LiveData는 생명주기 인식, 메모리 누수 방지, 최신 데이터 유지 등의 장점을 가지지만 Android 플랫폼에 종속적이라는 단점이 있습니다. 반면 Flow는 순수 Kotlin 라이브러리로, zip, flatMapMerge 등 다양한 함수를 활용하여 더 편리한 기능 구현이 가능합니다. 글에서는 LiveData의 장점을 설명하고, Flow로 전환하려는 이유와 함께 전환 시 발생할 수 있는 고려사항에 대해 논의합니다. 특히 LiveData의 생명주기 인식 기능이 Flow에서는 직접적으로 지원되지 않는다는 점을 지적하며, 이에 대한 해결 방안 모색의 필요성을 시사합니다.
LiveDataFlowStateFlow
카카오헤어샵·2022년 10월 28일
Frontend
유연하게 프로젝트별 개발환경 자동 설정하기(nvm) - nvm deeper shell integration 활용
카카오헤어샵의 프론트엔드 개발팀은 여러 개의 프로젝트를 동시에 개발하며 각기 다른 Node.js 버전을 사용해야 하는 상황에 직면했습니다. 프로젝트마다 Node.js 버전을 삭제하고 재설치하는 번거로움과 이로 인한 잠재적인 오류를 해결하기 위해 nvm(Node Version Manager)을 도입했습니다. nvm은 사용자별로 설치되며 쉘별로 호출되어, 여러 Node.js 버전을 쉽게 설치하고 전환할 수 있게 해줍니다. 이를 통해 개발자들은 프로젝트별로 최적의 Node.js 버전을 수동으로 설정하는 수고를 덜고, 개발 생산성을 향상시킬 수 있었습니다. 특히, nvm의 'deeper shell integration' 기능을 활용하여 더욱 유연하고 자동화된 개발 환경 설정을 구축하는 방법을 공유합니다.
nvmNode.js개발 환경
카카오헤어샵·2022년 10월 27일
Frontend
프로젝트에 테스팅 도입하기 - 삽질의 기억
이 글은 React 기반의 파트너스 프로젝트에 테스트 도입 경험을 공유합니다. 잦은 Form 입력과 상호 의존적인 UI로 인해 Side Effect 관리가 어렵고, Javascript의 동적 타입 체크로 인한 런타임 에러 감지의 한계를 극복하기 위해 테스트 도입을 결정했습니다. 테스트는 사용자의 최종 UI 경험에 초점을 맞춰, 컴포넌트 내부 로직보다는 사용자의 액션에 따른 UI 변화를 검증하는 방식으로 진행됩니다. 또한, 개별 컴포넌트가 아닌 Page 전체를 렌더링하여 컴포넌트 간 통합 작동 시 발생할 수 있는 문제를 사전에 감지하는 것을 목표로 합니다. 이를 통해 개발 단계에서 에러를 미리 발견하고 안정적인 서비스 개발에 기여하고자 합니다.
ReactTestingreact-testing-library
카카오헤어샵·2021년 8월 17일
Backend
언제까지 자동으로 잡아 주길 원해. - LocalContainerEntityManagerFactoryBean
카카오헤어샵 백엔드 개발팀에서 AttributeConverter 개발 중 발생한 문제를 공유하고 해결 과정을 설명하는 글입니다. 엔티티 속성 값의 전/후 처리를 위해 AttributeConverter를 구현하던 중, 로직 내에서 빈으로 등록된 값을 사용해야 하는 상황에서 문제가 발생했습니다. 특히 `secretVaultKey`와 같이 빈으로 등록된 값을 AttributeConverter에서 직접 참조하려고 할 때 `BeanCreationException`과 `MappingException`이 발생했습니다. 이 문제는 `LocalContainerEntityManagerFactoryBean`이 초기화되는 과정에서 발생하며, Hibernate가 기본 타입을 추론하지 못하는 원인으로 분석됩니다. 글에서는 이 문제를 어떻게 해결했는지에 대한 구체적인 해결책을 제시합니다.
AttributeConverterLocalContainerEntityManagerFactoryBeanSpring
카카오헤어샵·2021년 5월 14일
Backend
boot 1.3을 2.3으로 버전업
본 글은 카카오헤어샵 어드민 서비스의 Spring Boot 버전을 1.3에서 2.3으로 업그레이드하면서 겪었던 시행착오를 공유합니다. 버전 업그레이드의 주된 이유는 스프링의 새로운 모듈 사용 필요성과 팀원들의 Boot 2.x 숙련도 향상에 따른 유지보수성 증대입니다. 업그레이드 과정에서 Gradle 플러그인 변경, JpaRepository의 findOne 메서드 삭제 및 findById로의 변경, Hibernate의 namingStrategy 변경 등 구체적인 코드 수정 사례를 제시합니다. 특히, JpaRepository의 findOne이 findById로 변경되면서 Optional을 반환하게 된 점과 새로운 naming strategy 적용 방법을 상세히 설명하여, 유사한 버전 업그레이드를 진행하는 개발자들에게 실질적인 도움을 제공합니다.
Spring Boot버전 업그레이드Gradle
카카오헤어샵·2021년 4월 16일
Backend
JPA Dirty Checking사용시 주의점 - JPA를 사용한 업데이트 연산을 믿지 말자.
이 글은 JPA의 Dirty Checking 기능을 사용할 때 발생할 수 있는 성능 문제와 그 해결 방법을 다룹니다. 카카오헤어샵 백엔드 개발팀은 API 모니터링 중 응답 속도가 느린 API를 발견했고, 원인을 분석한 결과 JPA의 Dirty Checking 메커니즘이 예상치 못한 성능 저하를 일으키고 있음을 확인했습니다. 특히, 여러 개의 알림 엔티티를 조회한 후 각각의 엔티티에 대해 `viewBadge` 메소드를 호출하여 변경 사항을 저장하는 과정에서, 트랜잭션 커밋 시 알림 개수만큼의 UPDATE 쿼리가 불필요하게 실행되는 문제가 있었습니다. 이를 해결하기 위해, 알림 ID 목록만 조회한 후 벌크 업데이트(Bulk Update)를 수행하도록 코드를 개선하여 성능을 최적화하는 방법을 제시합니다. JPA의 편리함 뒤에 숨겨진 잠재적인 성능 이슈를 인지하고, 효율적인 데이터베이스 연산을 설계하는 것이 중요함을 강조합니다.
JPADirty Checking트랜잭션
카카오헤어샵·2021년 4월 5일
Backend
REST API 초고속 개발?! - Spring Data REST
본 글은 카카오헤어샵 백엔드 개발자가 Spring Data REST와 Spring Data JPA를 활용하여 REST API 개발 생산성을 높이는 방법을 공유합니다. 일반적으로 REST API 개발은 Controller, Service, Repository 계층을 거쳐야 하지만, Spring Data REST를 사용하면 Repository 계층만으로도 CRUD REST API를 쉽게 생성할 수 있습니다. 또한, 메타데이터 제공, 페이징 및 정렬 처리, HATEOAS 지원 등 REST API 개발에 필요한 다양한 기능을 기본적으로 제공하여 개발 시간을 단축할 수 있습니다. build.gradle 설정과 도메인 구성을 통해 실제 API 생성 과정을 보여주며, 이를 통해 개발자가 복잡한 설정 없이도 효율적으로 API를 구축할 수 있음을 강조합니다.
Spring Data RESTSpring Data JPAREST API
카카오헤어샵·2021년 1월 26일