댓글 모듈 레거시 걷어내기 with TDD
안녕하세요, 포털개발팀 프론트파트의 신입 개발자 김선규 입니다. 이번 글은 파일럿 프로젝트로 진행하게 된 줌인터넷 댓글 모듈 개선과정에 대한 내용입니다. TL;DR JavaScript, jQuery 기반으로 이루어진 댓글 모듈 → Vue, TypeScript 로 개선 TDD(테스트 주도 개발)로 프로젝트를 진행 댓글 모듈 컴포넌트 사내 라이브러리 배포 줌 소셜 댓글 모듈 현재, 줌인터넷의 서브 도메인(투자, 뉴스, 허브 등)은 모두 사진과 같은
Goodbye 2021! Hello 2022!
올-하 💚 안녕하세요! 올디브에서 프론트엔드 개발을 맡고 있는 주리랑입니다. 어느새 2021년이 지나고 2022년 새해가 찾아왔습니다. 202…
React Query와 함께하는 API 에러 처리 설계하기
API 에러 처리 API 에러가 발생했을 때 에러를 처리하는 흐름을 정리하고 체계를 갖춥니다. 이를 통해서 모든 에러에 공통적으로 적용되는 규칙과 처리는 전역적으로 관리하여 매번 개발자가 따로 고민하지 않도록 합니다.
[여의도 43층 사람들] Web팀에게 무엇이든 물어보세요!
뱅크샐러드 웹 개발자는 무슨 일을 하나요? 뱅크샐러드 Web Front-End Engineer는 뱅크샐러드 앱 내에 들어가는 웹뷰부터 데스크탑 환경의 웹사이트 그리고 다양한 Internal Product…
Zum Portal Core JS 소개
본 포스트는 줌인터넷 포털개발팀 프론트엔드 파트에서 사용되고 있는 표준화 core package 에 대해 다루고 있습니다. 안녕하세요! 다시 한 달 만에 블로그 포스트를 작성하게 되었습니다. 이번에는 저희 프론트엔드 파트에서 사용하고 있는 zum-portal-core-js에 대해 다뤄볼 생각입니다. zum-portal-core-js 는 서비스를 만들 때 필요한 Frontend config와 uilts, 그리고 backend config 및 ut
올디브의 How To Tech Session
올-하 💚 안녕하세요! 올디브에서 프론트엔드 개발을 맡고 있는 주리랑입니다. 현재 올디브에서는 Tech Session 을 진행하고 있는데요! 제가 운영진으로 참여하여 진행하는 Friday Tech Sesison…
웹사이트 최적화 방법 - 이미지 파트
…
Sanitizer API를 이용해 안전하게 DOM 조작하기
문자열을 이용한 DOM 조작을 보다 안전하게 처리할 수 있게 도와주는 Sanitizer API를 소개합니다.
Rollup 기반 라이브러리 개발 환경 구성하기
Rollup, React, TypeScript 기반의 라이브러리 개발 환경을 구성하는 과정에 대해 살펴봅니다.
팀과 함께 성장하는 Engineering Manager의 역할
안녕하세요. 뱅크샐러드 UX Strategy 팀 Product Manager 이승민 입니다. 저는 2019년 11월부터 2021년 6월까지 Android, iOS, Web, QA 4개의 Frontend 플랫폼의 Engineering Manager…
브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까?
브라우저의 사용자 에이전트(User Agent)에 얽힌 역사적인 이야기를 이해하기 쉽게 정리해봅니다.
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
안녕하세요, 줌인터넷 포털개발팀 프론트엔드 파트리더 황준일입니다 🙇♂️ 오랜만에 기술블로그에 투고를 하네요. 어떤 글을 주제로 글을 작성해야 유익할까 꽤 오랜 시간 동안 고민을 했습니다. 이번에는 제가 실무를 하면서 생각보다 꽤 많은 삽질을 했던, SSR(Server Side Rendering)을 주제로 다뤄보도록 하겠습니다. 본 포스트는 모바일 줌 SpringBoot → NodeJS 전환기 (feat. VueJS SSR)을 먼저 읽어보면
Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?
Redux Toolkit 최근 훅 기반의 API 지원이 가속화되고 React Query, SWR 등 강력한 데이터 패칭과 캐싱 라이브러리를 사용하면서 리덕스 사용이 줄어드는 방향으로 프론트엔드 기술 트렌드가 변화하고 있다고 생각합니다.
Brand Stickers | Next Gen’s Ad
Finite state machine & statecharts – XState
XState 리액트 상태 관리에 대한 기술 흐름 파악으로 조사했던 내용을 공유드리려 합니다. 복잡한 상태 변화를 갖는 애플리케이션을 구현하거나 상태 흐름을 flowchart로 도식화하면 동료 개발자뿐만 아니라 비개발자와의 협업에서도 효율적으로 커뮤니케이션하기 좋을 것 같습니다.
리액트 교과서
책 『리액트 교과서(React Quickly)』를 읽고 작성한 서평입니다.
[TokTokHan.dev]ES6 문법정리
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Luke 입니다. 👋 똑똑한개발자 똑똑한개발자 프론드엔드 팀은 es6를 기반으로 한 타입스크립트 언어를 활용하여 프로젝트를 진행하고 있습니다. 기존에는 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 코드를 작성하게 되고, es5와 비교했을때 여러 변경사항이 있습니다. 오늘 글에서는 ES6에서 새로 추가된 기능을 모두 설명하기보다는 코드
프로젝트에 테스팅 도입하기 - 삽질의 기억
안녕하세요. 플랫폼 개발팀에서 프론트 개발을 하고 있는 엘리엇입니다. 최근에 파트너스 프로젝트에 react-testing-libarary를 활용하여 테스트를 도입하여 소개하고자 합니다. 테스트를 도입하게 된 이유 Side Effect 관리의 어려움 파트너스 프로젝트는 user가 입력해야 하는 Form들이 매우 많습니다. 그리고 user들이 어떤 것을 입