직방

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
react-native 에 모듈 페더레이션 더하기 (with. RePack)
이 글은 React Native 환경에서 Module Federation을 도입하는 방법을 RePack 라이브러리를 활용하여 설명합니다. Module Federation은 애플리케이션을 여러 개의 작은 애플리케이션으로 분할하여 Micro-frontends 아키텍처를 구현하는 기술입니다. 이를 통해 OTA(Over-the-air programming)를 활용한 업데이트 과정 최적화, 유연한 배포 관리, 심사 과정 없는 앱 업데이트, 서비스별 개발 및 배포 용이성 등의 이점을 얻을 수 있습니다. 글에서는 Module Federation의 주요 기능과 Host Application, Local Module 등 관련 용어를 소개하며, 각 모듈을 격리된 컨테이너로 분할하고 동적으로 로드하는 방식에 대해 다룹니다. React Native 앱의 개발 및 배포 효율성을 높이는 데 초점을 맞춘 기술적인 내용을 담고 있습니다.
React NativeModule FederationRePack
직방·2023년 10월 26일
Frontend
코드 가독성을 높이는 젯브레인 계열 IDE 에디터 세팅과 플러그인 추천
이 글은 젯브레인 계열 IDE에서 코드 가독성을 높이기 위한 에디터 설정 및 플러그인 활용법을 소개합니다. 코드 작성보다 코드 읽기에 더 많은 시간을 할애하는 개발자들에게 가독성은 매우 중요하며, 클린코드와 같은 텍스트 중심의 지침 외에도 IDE의 개인화 기능을 통해 시각적인 효과를 더하는 것이 효과적이라고 강조합니다. 특히, 특정 단어 검색 시 결과를 강조 표시하는 기능 등을 통해 코드 탐색 및 이해를 돕는 구체적인 설정 방법을 제시하며, 개발 환경 최적화를 통한 생산성 향상을 목표로 합니다.
IDEJetBrains코드 가독성
직방·2023년 6월 14일
Frontend
WebStorm 대신 VSCode 로 TypeScript 테스트와 디버깅 해보기 (with Jest)
이 글은 WebStorm 대신 VSCode를 사용하여 TypeScript 프로젝트의 테스트 및 디버깅을 수행하는 방법을 안내합니다. VSCode는 무료이며 가볍다는 장점이 있습니다. 글에서는 Node.js와 TypeScript가 설정된 프로젝트를 기준으로 하며, Jest를 테스트 프레임워크로 사용합니다. ts-jest, ts-node, tsc-watch와 같은 도구 설치 및 활용법을 설명하고, tsconfig.json 설정의 중요성도 언급합니다. Monorepo 환경에서의 설정 가이드도 포함되어 있어, VSCode 환경에서 효율적인 TypeScript 개발 워크플로우를 구축하고자 하는 개발자들에게 유용한 정보를 제공합니다.
VSCodeTypeScriptJest
직방·2023년 2월 27일
Frontend
그 많던 문자열 배열은 왜 오브젝트가 됐을까?
이 글은 아파트 매물 검색 필터 개선 작업 중 발생한 문자열 배열과 객체 변환 문제에 대한 경험을 공유합니다. 필터 조건 추가 과정에서 기존 문자열 배열 방식의 비효율성을 발견하고, 이를 객체 형태로 변경하여 데이터 관리의 유연성과 효율성을 높인 사례를 다룹니다. 특히, API 응답 데이터를 처리하고 프론트엔드에서 필터링 로직을 구현하는 과정에서 마주친 문제점과 해결 과정을 상세히 설명합니다. 이를 통해 개발자는 데이터 구조 설계의 중요성과 실제 개발 과정에서의 유용한 팁을 얻을 수 있습니다.
JavaScript배열객체
직방·2022년 11월 25일
Frontend
Unity UI를 MV(R)P로 리팩토링하기
이 글은 Unity 게임 개발 환경에서 UI 로직을 MVP(Model-View-Presenter) 패턴을 활용하여 리팩토링하는 과정을 다룹니다. 특히, 기존의 복잡하게 얽힌 UI 코드를 분리하고 테스트 용이성을 높이기 위한 구체적인 방법을 제시합니다. MVP 패턴을 적용함으로써 UI 로직과 비즈니스 로직을 분리하고, 각 컴포넌트의 역할을 명확히 하여 코드의 가독성과 유지보수성을 향상시키는 것을 목표로 합니다. 이를 통해 개발자는 더 효율적으로 UI를 관리하고 새로운 기능을 추가하거나 버그를 수정하는 데 집중할 수 있습니다. 게임 개발에서 UI 아키텍처의 중요성과 MVP 패턴의 유용성을 보여주는 실용적인 가이드입니다.
UnityUIMVP
직방·2022년 10월 12일
Frontend
디더 투명도 셰이더를 만들어보자
이 글은 직방 3D 단지투어에서 건물 가림 현상을 해결하기 위해 사용된 '디더 투명도 셰이더' 제작 과정을 다룹니다. 일반적인 알파 블렌딩 대신 디더 투명도를 사용한 이유와 그 원리를 설명합니다. 디더 투명도는 알파 테스트를 활용하여 픽셀의 일부를 컬링함으로써 반투명 효과를 구현하는 방식으로, Screen-Door Transparency 또는 Stipple Transparency라고도 불립니다. 이 기법은 패턴 텍스처를 기반으로 투명도를 조절하며, 특히 성능상의 이점을 제공합니다. 글에서는 디더 투명도 셰이더의 개념과 실제 적용 사례를 보여주며, 개발 과정에서의 경험과 시행착오를 공유합니다.
셰이더디더 투명도Unity
직방·2022년 3월 3일
Frontend
라이트 맵 효율적으로 사용하기
이 글은 3D 그래픽스 분야에서 사실적인 조명 효과를 구현하는 데 사용되는 라이트맵 기술에 대해 설명합니다. 라이트맵은 글로벌 일루미네이션을 비교적 적은 연산 비용으로 표현할 수 있어 실시간 렌더링이 중요한 게임 개발 등에서 유용하게 활용됩니다. 글에서는 라이트맵의 기본적인 구현 아이디어와 작동 방식을 소개하며, 광원에서 출발한 빛의 경로 계산 결과를 맵 형태로 저장하여 렌더링 시 음영 표현에 참조하는 원리를 설명합니다. 또한, Unity와 Unreal Engine과 같은 주요 게임 엔진에 기본 기능으로 탑재되어 있음을 언급하며, 라이트맵을 효율적으로 활용하기 위한 테크닉을 소개할 것을 예고합니다.
라이트맵3D 그래픽스유니티
직방·2021년 11월 8일
Frontend
Unity3D Project 최적화 #1
이 글은 Unity3D 프로젝트의 성능 최적화를 위한 첫 번째 단계로, SetPass Call과 Draw Call을 줄이는 방법에 대해 다룹니다. 특히 프로파일링 준비 단계에서 Unity3D의 Frame Debugger와 Xcode의 GPU Frame Capture 기능을 활용하여 SetPass Call이 많이 발생하는 부분을 상세하게 파악하는 방법을 설명합니다. Frame Debugger는 GameObject별 SetPass Call 수를 비교적 쉽게 파악할 수 있도록 돕고, Xcode GPU Frame Capture는 Draw Call 단위의 세부적인 분석을 가능하게 합니다. 또한, Unity3D의 Stats 메뉴를 통해 FPS와 SetPass Call 수치를 확인하여 성능 저하 구간을 찾는 과정을 보여줍니다. 이를 통해 개발자는 병목 현상의 원인을 정확히 진단하고 최적화 작업을 효율적으로 수행할 수 있습니다.
Unity3D최적화SetPass Call
직방·2021년 9월 28일
Frontend
React 상태 관리 도구 살펴보기
이 글은 React의 다양한 상태 관리 도구들을 비교하고 설명합니다. Redux, Zustand, Recoil, Context API 등 여러 라이브러리의 특징과 장단점을 분석하며, 각 도구가 어떤 상황에 적합한지에 대한 인사이트를 제공합니다. 특히, 각 도구의 사용법과 함께 실제 프로젝트 적용 시 고려해야 할 점들을 상세히 다룹니다. 이를 통해 개발자는 자신의 프로젝트 요구사항에 맞는 최적의 상태 관리 도구를 선택하는 데 도움을 받을 수 있습니다. 궁극적으로는 효율적인 상태 관리를 통해 React 애플리케이션의 성능과 유지보수성을 향상시키는 것을 목표로 합니다.
React상태 관리Redux
직방·2021년 6월 21일
Frontend
자바스크립트 인코딩
이 글은 자바스크립트에서 문자열 인코딩을 수행하는 다양한 방법에 대해 설명합니다. 주로 `encodeURI`, `decodeURI`, `encodeURIComponent`, `decodeURIComponent` 함수를 중심으로 각 함수의 특징과 사용 사례를 비교 분석합니다. 또한, `escape`와 `unescape` 함수가 더 이상 사용되지 않는 이유와 그 대안으로 `encodeURIComponent`를 사용하는 것이 좋다는 점을 강조합니다. URL에 포함될 수 있는 특수 문자를 안전하게 처리하기 위한 인코딩의 중요성을 이해하고, 상황에 맞는 적절한 인코딩 함수를 선택하는 데 도움을 주는 것을 목표로 합니다.
JavaScript인코딩URL
직방·2021년 5월 20일
Frontend
Mobx 최적화로 직방앱 성능 개선하기
이 글은 직방 앱의 성능 개선을 위해 Mobx 최적화 과정을 상세히 다룹니다. Mobx는 React 환경에서 많이 사용되는 상태 관리 라이브러리이지만, 잘못 사용하면 성능 저하를 유발할 수 있습니다. 필자는 Mobx의 동작 방식을 이해하고, 불필요한 리렌더링을 줄이기 위한 다양한 최적화 기법을 소개합니다. 예를 들어, `observer` 컴포넌트의 범위를 좁히거나, `computed` 값을 효율적으로 사용하는 방법 등을 설명합니다. 또한, 실제 직방 앱에 적용했던 구체적인 사례와 그로 인한 성능 개선 효과를 수치로 제시하며, 개발자들이 Mobx를 활용하여 웹 애플리케이션의 성능을 효과적으로 향상시킬 수 있는 실질적인 가이드라인을 제공합니다.
Mobx성능 개선React
직방·2021년 5월 3일
Frontend
반복되는 로직을 커스텀 훅으로 다이어트하기
이 글은 React 개발에서 반복되는 로직을 효과적으로 관리하기 위한 방법으로 커스텀 훅(Custom Hook)을 활용하는 방법을 소개합니다. 직방 프론트엔드팀의 경험을 바탕으로, 중복되는 코드를 커스텀 훅으로 추출하여 코드의 재사용성을 높이고 가독성을 개선하는 과정을 설명합니다. 이를 통해 개발 생산성을 향상시키고 유지보수가 용이한 코드를 작성하는 방법을 배울 수 있습니다. 특히, 컴포넌트 간에 동일한 로직이 반복될 때 이를 함수로 분리하는 것의 한계를 지적하며, React의 훅(Hook) 개념을 활용하여 상태와 생명주기를 가지는 로직을 재사용 가능한 형태로 만드는 커스텀 훅의 중요성을 강조합니다.
Custom HookReactJavaScript
직방·2021년 4월 22일
Frontend
React Native와 Flutter
이 글은 크로스 플랫폼 모바일 앱 개발 시장을 양분하고 있는 React Native와 Flutter를 비교 분석합니다. 직방 프론트엔드팀에서 React Native를 사용하여 iOS, Android, Web 플랫폼을 서비스하는 경험을 바탕으로, Flutter의 잠재력을 탐색하고 프로덕션 서비스 도입 가능성을 검토합니다. 글은 React Native 소개, Flutter 소개, 두 프레임워크의 비교, 그리고 저자의 느낀점으로 구성됩니다. React Native는 'Learn once, write anywhere'를 모토로 페이스북에서 개발되었으며, React를 활용하여 iOS 및 Android 앱 개발을 가능하게 합니다. 기존 웹앱의 성능, 배터리, 오프라인 지원 한계를 극복하고 네이티브 개발의 비효율성을 해결하기 위해 탄생했습니다.
React NativeFlutter크로스 플랫폼
직방·2021년 4월 22일
Frontend
직방 3D 단지보기 개발 과정 소개
직방 ZED팀은 부동산 데이터를 3차원 그래픽으로 시각화하는 프로젝트를 진행하며, 아파트 서비스에 3D 단지보기 기능을 추가했습니다. 이 기능은 2차원 UI의 한계를 넘어 3차원 공간에서 단지 전경과 동호 배치 등 사용자가 궁금해하는 정보를 효과적으로 제공하는 것을 목표로 합니다. 개발 과정 전반을 소개하며, 향후 포스팅에서는 구체적인 문제 해결 사례를 다룰 예정입니다. 3D 시각화를 통해 부동산 정보 전달의 새로운 가능성을 모색하고 사용자 경험을 향상시키는 데 중점을 두었습니다.
3DVisualizationReact
직방·2021년 4월 22일
Frontend
모노레포에 yarn workspace 적용하기
본 글은 직방 프론트엔드팀에서 `zigbang-client` 리포지토리에 Lerna에서 Yarn Workspace로 마이그레이션한 경험을 공유합니다. `zigbang-client`는 React Native 기반 네이티브 앱과 Next.js 기반 웹 앱에서 공통으로 사용되는 프론트엔드 소스 코드를 하나의 리포지토리에서 관리하는 모노레포 전략을 채택하고 있습니다. 초기에는 Lerna를 사용했으나, 개발 생산성과 코드 재활용성을 높이기 위해 Yarn Workspace로 전환하게 된 배경과 과정을 상세히 설명합니다. 특히, `zigbang-client`가 외부 npm 패키지로 사용되는 것이 아니라 내부적으로 패키지를 관리하는 목적이 강하다는 점을 들어 Yarn Workspace가 더 적합한 선택이었음을 강조합니다. 이를 통해 모노레포 환경에서의 효율적인 패키지 관리 및 개발 경험 개선 방안을 제시합니다.
yarn workspacemonorepoReact
직방·2021년 4월 5일
Frontend
iOS 14 선택적 권한에 대응하는 image picker native module 만들기
이 글은 iOS 14에서 도입된 선택적 권한에 대응하기 위해 새로운 네이티브 모듈을 개발한 경험을 공유합니다. 기존에 사용하던 react-native-image-picker 라이브러리가 iOS 14의 선택적 사진 접근 권한을 지원하지 않아, 더 나은 사용자 경험과 최신 OS 대응을 위해 직접 네이티브 모듈을 개발하게 된 과정을 설명합니다. 특히, iOS 14의 사진 권한 변경 사항과 이에 대한 직접적인 대응 필요성을 강조하며, 새로운 네이티브 모듈 개발을 결정하게 된 배경을 상세히 다룹니다.
iOS 14Image PickerNative Module
직방·2021년 4월 1일