프론트엔드 기술 블로그 최신 글

NEW FEATURE

기술을 읽던 곳에서, 다음 기회를 만나세요.

채용 검색부터 관심사 기반 추천, 내 적합도까지.

필터 0
선택된 필터 없음
안드로이드 Hilt 딥 다이브 - DI와 Dagger 그리고 Hilt 에 대해서
카카오헤어샵
프론트엔드

안드로이드 Hilt 딥 다이브 - DI와 Dagger 그리고 Hilt 에 대해서

안드로이드 DI의 필요성과 Dagger, Hilt의 관계를 정리한 글입니다. Hilt를 통해 상용구를 줄이는 방향을 소개했습니다.

#Android#Hilt
2000
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
비브로스
프론트엔드

비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.

웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능을 측정하며 개선 문화를 만들었습니다. 또한 측정 결과의 변동성을 줄이기 위한 모니터링 방식도 함께 고민했습니다.

#React#Next.js
300
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
비브로스
프론트엔드

비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.

웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능 관리를 문화로 도입한 과정을 소개했습니다. 이미지 로딩, 코드 분할, 스크립트 전략으로 개선하고 측정 변동성까지 다뤘습니다.

#성능#Lighthouse
1800
테스트 코드 자동으로 만들기 feat. Cypress Studio
카카오엔터테인먼트FE
프론트엔드

테스트 코드 자동으로 만들기 feat. Cypress Studio

Cypress Studio로 사용자 액션과 단언을 기록해 E2E 테스트 코드를 자동 생성하는 방법을 소개했습니다. 비개발자도 Standalone 앱과 로우코드 방식으로 테스트를 만들고 Git 브랜치로 관리할 수 있습니다.

#Cypress#E2E
100
테스트 코드 자동으로 만들기 feat. Cypress Studio
카카오엔터테인먼트FE
프론트엔드

테스트 코드 자동으로 만들기 feat. Cypress Studio

Cypress Studio를 활용해 E2E 테스트 코드를 자동 생성하는 로우코드 방법을 소개했습니다. 개발자와 QA의 반복 작업 부담을 줄이고 브랜치 기반으로 테스트를 관리하는 흐름을 정리했습니다.

#Cypress#E2E 테스트
4000
마크다운에 컴포넌트 추가하기
카카오엔터테인먼트FE
프론트엔드

마크다운에 컴포넌트 추가하기

unified 기반의 마크다운 AST 변환 과정을 설명했습니다. Gatsby에서 커스텀 태그를 React 컴포넌트로 치환하고 MDX 대안도 소개합니다.

#Markdown#Gatsby
000
마크다운에 컴포넌트 추가하기
카카오엔터테인먼트FE
프론트엔드

마크다운에 컴포넌트 추가하기

마크다운을 mdast, hast, HTML로 변환하는 흐름을 살펴보고, 커스텀 태그를 리액트 컴포넌트로 치환하는 방법을 소개했습니다. MDX와 Gatsby 연동 예시도 함께 정리했습니다.

#Markdown#HTML
3100
신상마켓 i18n 개발과정
딜리셔스
프론트엔드

신상마켓 i18n 개발과정

신상마켓의 글로벌 서비스 대응을 위해 i18n 적용 과정과 구현 방식을 소개했습니다. 구글시트 관리의 한계를 보완하려고 Lokalise를 도입해 번역 워크플로우를 개선했습니다.

#i18n#vue.js
3700
Android Kotlin StateFlow 도입기
올리브영
프론트엔드

Android Kotlin StateFlow 도입기

Kotlin Flow와 StateFlow를 도입한 경험을 바탕으로 LiveData의 한계와 대체 가능성을 정리했습니다. 클린 아키텍처와 생명주기 대응 관점에서 Flow 활용 방법도 살펴봤습니다.

#Android#Kotlin
3100
서비스 워커에 대해 알아보고 Mock Response 만들기
카카오엔터테인먼트FE
프론트엔드

서비스 워커에 대해 알아보고 Mock Response 만들기

서비스 워커의 생명주기와 fetch 가로채기, 페이지 통신 방식을 소개했습니다. MessageChannel로 요청을 전달해 Mock 응답·오류·원본 통과를 제어하는 방법을 설명했습니다.

#service worker#PWA
100
서비스 워커에 대해 알아보고 Mock Response 만들기
카카오엔터테인먼트FE
프론트엔드

서비스 워커에 대해 알아보고 Mock Response 만들기

서비스 워커의 위치와 생명주기, fetch 가로채기와 메시지 통신 방식을 설명했습니다. 이를 바탕으로 네트워크 요청을 Mock Response로 바꾸는 흐름을 소개했습니다.

#서비스 워커#PWA
2500
올영라이브 템플릿화
올리브영
프론트엔드

올영라이브 템플릿화

올영라이브 이벤트 페이지를 반복 제작 부담을 줄이기 위해 모듈형 템플릿으로 전환한 사례를 소개했습니다. 고정 정보와 변경 요소를 분리해 등록만으로 페이지를 만들 수 있도록 구성했습니다.

#템플릿#module
4300
지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions
뱅크샐러드
프론트엔드

지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions

웹폰트 서빙 시 발생하는 지연 시간을 줄이기 위한 방법을 다룹니다. Safari와 Edge Functions를 함께 고려한 서빙 접근을 소개합니다.

#web#Safari
2700
후기 개선 프로젝트가 끝이 아닌 시작인 이유
마켓컬리
프론트엔드

후기 개선 프로젝트가 끝이 아닌 시작인 이유

컬리 후기 서비스의 탐색 UX와 레거시 문제를 개선한 Phase 1 사례를 소개했습니다. 초기 정리, 협업 커뮤니케이션, 단계적 로드맵 수립이 핵심이었습니다.

#UI/UX#성능
3000