월간 크롬 이슈 리포트 2024년 4월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 4월호)
devBlog
React 글 모음
기업 기술블로그의 React 관련 글 108개
월간 크롬 이슈 리포트 2024년 2월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 2월호)
더 가치 있는 공통 컴포넌트 만들기
…
쏘카의 웹 팀에 관하여
쏘카의 웹 프론트엔드 개발자들은 어떤 일을 할까요?
SVG를 이용하여 Animation 만들기
안녕하세요 씨앤텍시스템즈입니다. 오늘은 SVG를 이용한 Animation을 생성하는 방법에 대해서 정리하겠습니다. 이 글은 https://youtu.be/UTHgr6NLeEw?si=L0r4UHGpoLLN96Ld 자료를 참고하여 작성하였습니다. 이 글의 각 파트별 마지막에는 아래의 두 가지 animation을 완성할 수 있습니다. animation1 animation2 목표 1 : animation1 먼저, animation1을 만드는 과정을 살
월간 크롬 이슈 리포트 2023년 12월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 12월호)
P여도 문제없어! ‘다음 여행지 추천’ 서비스 개발기 - 24편 - 세션 기반의 다음 장소 추천받기
여행! 여행은 일상에서 벗어나 새로운 경험을 누리며, 지난 스트레스를 해소하고 소중한 사람들과 특별한 순간을 만들어내는 설렘으로 넘쳐납니다. 새로운 장소의 낯섦은 여행의 매력이기도 하죠. 하지만 여행지에서는 ‘어디 가지?’, 뭐 하지?’, ‘무엇을 먹지?’에 대한 고민으로 시간을 허비하기도 합니다. 그래서 열심히 검색을 하고 인스타그램과 같은 SNS를 부단
카카오헤어샵 vanilla-extract 도입기 - 카카오헤어샵 마크업 내재화 이야기
안녕하세요, 카카오헤어샵 플랫폼 개발팀 프론트엔드 개발자 조이입니다! 오늘은 프론트엔드 파트에서 진행한 마크업 내재화에 대한 이야기를 해보려고 합니다. 외부 개발로 진행한 마크업의 문제 카카오 헤어샵, 파트너스(점주님 서비스)는 기존에 외부 마크업 개발자(퍼블리셔)분들께 html, css 작업을 요청하고 있었습니다. 내부 개발자 분들이 아니다 보니 저희
월간 크롬 이슈 리포트 2023년 9월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 9월호)
React-query 를 사용해 상태관리를 해보자
React-query 를 사용해 상태관리를 해보자 프로젝트를 새로 시작함에 있어 상태관리 라이브러리를 찾아 보던 중, Redux나 MobX 같은 라이브러리 들에 비해 러닝커브가 상당히 낮고 보일러플레이트가 적어 편하게 사용할 수 있는 React Query에 대해 알게되었습니다. 이미 무스마의 많은 개발자 분들이 Reacy query를 개발에 잘 활용하고 계시지만, React Query를 학습하며 정리하는 차원에서 기술블로그에 작성해보려 합니다.
React Query의 구조와 useQuery 실행 흐름 살펴보기
리액트 프런트엔드 프로젝트에서 서버 상태 관리를 위해 React Query…
Storybook의 MSW mock 구조 개선
카카오스타일의 파트너센터 서비스에서는 UI 테스트와 문서화를 위해서 Storybook과 MSW를 사용하고 있습니다. Storybook의 각 스토리마다 MSW GraphQL mock을 개별로 정의해서 사용하고 있었는데, 이로 인해 코드가 중복되고 mock 누락으로 인한 오류가 자주 발생했습니다. 이런 문제를 해결하기 위해, 스토리마다 따로 정의된 MSW mock을 한 군데로 모아서 관리할 수 있는 새로운 구조를 제안하고, recast를 사용한 변
반응형 프로그래밍 with RxJS
Higher-Order Components는 여전히 유용하다
Higher-Order Components는 여전히 유용하다 HOC는 공식 문서에서도 알 수 있듯이 ‘컴포넌트 로직 재사용’을 위한 패턴입니다. Hooks가 나온 뒤로는 컴포넌트 로직 재사용을 위해서 Hooks를 주로 사용하기 때문에 HOC를 사용하는 경우가 많이 줄었습니다.
Scroll Snap API를 통해 이미지 캐러셀 완성하기
프로젝트를 개발하는 과정에서 SwiperJS 라이브러리를 통해 여러 슬라이드 UI를 스와이프 할 수 있는 기능을 구현한 적이 있습니다. 공식 문서 가이드에서 cssMode 옵션을 사용하면 Scroll-Snap API…
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
안녕하세요, 플랫폼 개발팀 프론트엔드 개발자 제리입니다. 오늘은 지난 시간에 소개드린 파트너스 서비스의 레거시 코드들을 어떻게 개선하였는지 소개해드리겠습니다. 리덕스 스토어 안의 덕스 패턴에 얽힌 API 분리하기 기존 파트너스 프로젝트는 Redux를 활용하여 전역 상태의 값을 관리하였고 actionTypes , actions , reducer을 하나의
타입스크립트, 리액트쿼리 도입 - 파트너스 레거시 코드 리팩토링(1)
안녕하세요, 플랫폼 개발팀 프론트엔드 개발자 제리입니다. 오늘은 자사 서비스 중, 카카오헤어샵에 입점한 점주분들의 매장관리 웹사이트인 "파트너스 서비스"의 리팩토링을 진행한 이야기를 소개하려 합니다. 리팩토링의 필요성을 합의하기 레거시 코드를 꼭 리팩토링 해야하는 것은 아닙니다. 프로젝트의 규모가 커질수록, 복잡해지는 dependency 때문에 라이브러
마크다운에 컴포넌트 추가하기
…