마법소녀 이세계 아이돌 웹툰 런칭! BFF 장애 대응기
카카오페이지 웹 서비스는 graphql을 활용해 BFF를 운영하고 있습니다. 팀 내부에서는 graphql을 사용하는 방법에 대한 노하우들이 적립되어 DX(Developer Experience…
devBlog
Frontend 글 모음
기업 기술블로그의 Frontend 관련 글 580개
월간 크롬 이슈 리포트 2023년 9월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 9월호)
새 배송지 추가 form 개발하기
안녕하세요. 올리브영에서 눈에 보이는 것들을 담당하고 있는 꾸옹입니다😺 📢 지난…
글또 8기 프론트엔드 반상회 회고.txt
오프라인으로 진행한 프론트엔드 개발 컨퍼런스의 준비 과정과 후기를 공유합니다.
React-query 를 사용해 상태관리를 해보자
React-query 를 사용해 상태관리를 해보자 프로젝트를 새로 시작함에 있어 상태관리 라이브러리를 찾아 보던 중, Redux나 MobX 같은 라이브러리 들에 비해 러닝커브가 상당히 낮고 보일러플레이트가 적어 편하게 사용할 수 있는 React Query에 대해 알게되었습니다. 이미 무스마의 많은 개발자 분들이 Reacy query를 개발에 잘 활용하고 계시지만, React Query를 학습하며 정리하는 차원에서 기술블로그에 작성해보려 합니다.
멀티턴 이미지 대화: 조규성 vs 안정환, 루다야 누가 더 잘생겼어?
포토챗 베타보다 개선된 궁극의 이미지 대화 모델을 만드는 과정을 다룹니다.
BackstopJS 적용 후기 (Visual Regression Test)
글을 시작하기에 앞서 BackstopJS에 대한 설명과 설정 방법이 궁금하신 분들은 시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test…
온라인몰 성능개선을 위한 FE 개발자의 고민 part-1
안녕하세요. 올영 프론트엔드 개발자 올리브정🔥 입니다! 최근 올리브영 온라인몰이 빠르게 성장함에 따라 저희 팀에서도 성능 개선을 위해 많은 고민을 하고 있습니다. 오늘은 그 고민을 해결하기 위해서 Infinite Scroll…
npm 패키지 배포 가이드
안녕하세요! 무스마 FE파트의 Yong입니다. 입사 후 온보딩으로 npm 배포를 실습해 보며 정리한 것들을 바탕으로 가이드를 작성해 보려 합니다. 여담이지만 저는 입사 전 npm에 배포되어 있는 패키지들을 사용할 줄만 알았지 배포해 본 경험은 없었습니다.. 반면, 무스마에서는 패키지가 잘 관리되고 있어서 무스마 크루들의 노력이 대단하다고 느꼈습니다! 목차 사전 준비 프로젝트 생성하기 폴더 생성 package.json 생성 module 작성 테스
월간 크롬 이슈 리포트 2023년 8월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 8월호)
WebRTC 화상회의 서버 구축
WebRTC 화상회의 서버 구축 소개하기 전… WebRTC 기본 정보 WebRTC 란? WebRTC 종류 WebRTC 서버 구축을 위해 필요한 4가지 테스트 프로젝트 spring boot 시그널링 서버 프론트 코드 ( html + javascript ) flutter 예제 소개하기 전.. 이번에 프로젝트에서 webRTC 사용하게 되었습니다. 사용 이유는 CCTV 를 웹과 flutter 앱 화면에 보기 위해서 입니다. 저는 WebRTC를 한번도
Jetbrains Cool Tips - Part. 1) Handy Hotkeys with Life Hacking Settings
G - reetings, G - market ! This is Minwoo Kim, a developer in Seller & SD Engineering team of Gmarket. After receiving a proposal from my colleague to write an article for our company's official tech blog, with great honor, I determined to pioneer the inclusion of English articles on this platform, showcasing a sophisticated level of expertise and craftsmanship. With the intention to attract int..
프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
이전 글에서는 테스트 전략과, 테스트를 작성하는 방법들에 대해서 알아봤습니다. 하지만, 테스트를 실행하는 환경에 대해서는 스토리북을 사용한다고 가정했을 뿐, 구체적인 이야기를 진행하지는 않았습니다. 이번 글에서는, 테스트 프레임워크를 활용해서 테스트를 자동으로 실행할 수 있는 환경을 구성하는 방법에 대해 알아보겠습니다. 설명하는 내용의 특성상, 개념적인 이야기보다는 설정 파일에 대한 내용이 더 많습니다. 정독하는 것보다는, 실제로 테스트 환경을
프론트엔드 테스트 자동화 전략 - 3. 구현하기
이전 글에서는 제품의 요구사항을 분석하며, 테스트 케이스를 산출하는 방법에 대해 알아봤습니다. 이 글에서는 구체적으로 어떻게 테스트 코드를 작성할 수 있는지에 대해 알아봅니다.
프론트엔드 테스트 자동화 전략 - 2. 요구사항 분석
저번 글에서는 프론트엔드의 테스트 자동화에 대해서 소개하고, 테스트 전략에 대해서 간단하게 다뤄봤습니다. 테스트 자동화가 아무리 중요하다고 해도, 테스트 작성을 시작하는 것은 쉽지 않습니다. 설정해야 하는 것들이 많고, 효과적인 테스트 작성 방법을 찾는 것도 어렵습니다. 이 문서에서는 프론트엔드에 맞춘 테스트 작성 방법을 고민해봤습니다. 물론 프로젝트마다 상황은 다를 수 있으며, 나중에는 더 나은 방법을 발견할 수도 있습니다. 그래도 이 문서가
프론트엔드 테스트 자동화 전략 - 1. 테스트 자동화란?
프론트엔드는 입력/출력이 명확하지 않기 때문에 테스트를 작성하면서 고민해봐야 할 내용이 많습니다. 프론트엔드 관점에 맞춰 테스트 자동화, 테스트의 정의와 방향성에 대해서 다뤄봤습니다.
월간 크롬 이슈 리포트 2023년 7월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 7월호)
React Query의 구조와 useQuery 실행 흐름 살펴보기
리액트 프런트엔드 프로젝트에서 서버 상태 관리를 위해 React Query…