pnpm을 사용한 모노레포로 프론트엔드 생산성 늘리기
더스윙 FE 개발팀에서 모노레포를 도입한 배경과 과정, 그리고 어떤 것이 달라졌는지에 대해서 소개합니다
devBlog
Frontend 글 모음
기업 기술블로그의 Frontend 관련 글 580개
RSS로 누구보다 빠르게, 그리고 자동으로 새 소식 가져오기
안녕하세요.Pricing Tech Engineering팀원이자 해당 테크블로그의 에디터장을 담당하고 있는 김민우입니다.본격적인 글에 앞서 이번에 작업한 테크블로그 UI 변경 건을 잠깐 소개해드립니다. G마켓 테크블로그는 티스토리를 기반으로 제작되었으며, 티스토리에서 제공하는 HTML과 CSS를 직접 수정하는 '스킨 편집'을 통해 홈페이지를 변경하였습니다. (아래는 개편 이전의 스킨입니다.) 1. 전체적인 홈 디자인 변경 • 신규 로고 제작 후 적용 • 카테고리 상단 추가 및 썸네일 이미지 및 애니메이션 추가로 콘텐츠 가독성 강화. - 기존에 다소 밋밋했던 블로그 메인 페이지를 전면적으로 개편하였습니다. - 특히, 썸네일 이미지를 활용해 글의 주요 내용을 간략히 요약할 수 있도록 구성하여 독자들..
월간 크롬 이슈 리포트 2024년 12월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 12월호)
디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법
…
2024 프론트엔드 뉴스 한 방에 몰아 보기
 안녕하세요. NHN Cloud NCUI개발팀 이진우입니다. 저는 올해 2월부터 매주 프론트엔드 관련 다양한 뉴스레터를 읽고, FE 개발 직무 동료들에게
프론트엔드팀의 디자인 시스템 재구축기
안녕하세요, 카카오스타일 지그재그 서비스 FE팀의 제이슨입니다. 2023년 초, 저희 팀은 비즈니스와 더불어 기술적인 개선이 필요하다는 것을 느꼈습니다. 그중에서도 특히 여러 지면에서 독립적으로 관리되고 있던 상품 카드 컴포넌트의 일원화 작업이 중요하게 여겨졌고. 이 문제를 해결하기 위해서는 단순 리팩토링을 넘어, 팀 전체의 UI/UX를 통합적으로 관리할 수 있는 디자인 시스템의 재구축이 필요하다고 판단했습니다.
TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution
카카오엔터테인먼트 스토리FE개발팀은 카카오페이지, 카카오웹툰, 타파스 등 유저들이 사용하는 서비스뿐만 아니라 Email Generator, AI 프로젝트와 같은 사내 지원 프로젝트까지 포함해 총…
복잡한 웹 페이지도 개발자 없이 만드는 웹 빌더 “에디터” 개발기 (2)
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
안녕하세요. 올리브영에서 UI…
React Router
While developing with React, a framework for Single Page Applications (SPA), I had a question. React detects changes on a single page and updates the Virtual DOM, rendering only the parts that have changed. So I wondered, "Are all pages the same sinc
React State
1. What is State?In React, state is a way to manage data that can change over time, and it is specific to each component. Unlike props (which are immutable and passed down from parent to child), state allows a component to maintain and update its own
React Props
PropsIn React, the flow of data is unidirectional: it flows from the parent (higher-level) component to the child (lower-level) component. In this flow, data passed from the parent to the child is conveyed through an object called props, which is sho
React Component & Lifecycle
A ReactElement is an implementation of the concept called the Virtual DOM (VDOM). The VDOM is a JavaScript object that exists in memory and can be created using the React.createElement function. The elements created by this function are just regular
HTML5 / CSS3 Horizontal and Vertical Alignment
This article covers how to align sentences, paragraphs, and boxes containing paragraphs in a visually pleasing way using HTML and CSS. We will look at two methods for centering alignment on the horizontal and vertical axes. Method 1. display: table /
[ 셀러지원센터 ] 신입 개발자의 프로젝트 첫 시작
React Fragment
1. React Component Element Renderingclass CorrectComponent extends React.Component { // React Component is rendering only a single element. render() { return ( <h4> Hello React </h4> ) } } class WrongComponent extends React.Component { // React Compo
Hooks
There are two types of components in React. Class Component – This is the method of creating a component using a class. It is the default way of building components in React. The reason why Class Components are commonly used is because they allow acc
검색 서비스에서 좋은 품질의 코드를 찾는 은하수 항해 기록
들어가며 안녕하세요. 11번가 검색/추천 서비스 개발팀에서 11번가 검색 서비스의 프런트엔드 개발을 담당하고 있는 김다미, 이호찬입니다. 검색 서비스의 프런트엔드 파트에서는 검색 결과를 큐레이션하여 사용자가 원하는 상품을 더욱 쉽게 탐색할 수 있도록 돕는 다양한 형태의 UI를 개발하고 있습니다. 11번가 검색 서비스는 사용자의 클릭과 구매 전환율 등 다양한 활동 지표를 바탕으로, 더 나은 탐색 경험을 제공하기 위해 지속적으로 발전하고 있습니다.