devBlog
Frontend 글 모음
기업 기술블로그의 Frontend 관련 글 580개
월간 크롬 이슈 리포트 2024년 7월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 7월호)
누가 내 쿠키를 먹었을까?
누가 내 쿠키를 먹었을까? 왜 iOS 웹뷰의 세션쿠키가 사라졌을까? 안녕하세요. 쏘카에서 프론트엔드 개발을 담당하고 있는 리우입니다. iOS 웹뷰에서만 세션쿠키가 갑자기 소실되는 현상을 마주한 적이 있나요? 해당 문제가 무엇이고, 왜 발생하고, 어떻게 해결했는지 실제로 겪은 사례를 통해 설명드리겠습니다. 여기서 세션쿠키는 Expires 또는 Max-Age가 없는 쿠키를 의미합니다. 세션쿠키는 브라우저를 닫는 순간 삭제됩니다. 개발자 도구→애플리
파일 변수 Deep-Dive
서론 제가 속해있는 스토리FE…
디자인 시스템, 디자인과 코드의 간극 줄이기
안녕하세요, 에잇퍼센트 웹 프론트엔드 팀의 김민정입니다. 프론트엔드 팀은 사내 EDS(Eight Design System)를 적용한 웹 서비스를 효율적으로 구현하기 위해 팀 내 UI 라이브러리인 eds-wc를 제공하고 있습니다. 디자인 팀과 프론트엔드 팀이 협업하여 디자인 시스템을 구현하는 과정에서는 고려할 사항이 매우 많습니다. 특히, 명세에 대해 디자이너와 개발자 간 이해의 차이로 인한 반복적인 커뮤니케이션은 대부분 경험하였을 것입니다. 또
웹 컴포넌트로 프레임워크 마이그레이션 준비하기
들어가며 소프트웨어는 살아있는 생명체와 같아서, 시간이 흐르면 그 생애를 마감합니다. 우리 개발자의 역할은 제 몫을 다한 소프트웨어를 조심스럽게 분해하여 새로운 소프트웨어에 생명을 불어넣는 것입니다. EOL(End of Life)을 맞이한 Vue2는 7년이 넘는 시간 동안 에잇퍼센트 프론트엔드를 무사히 잘 이끌어왔습니다. 이제는 Vue2를 쉬게 하고 새로운 기술로 전환할 때입니다. 에잇퍼센트는 웹 컴포넌트를 도입하여 Vue2에서 React로의
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편
안녕하세요. Web Frontend팀 이민하입니다. 지난 편에서 꿀템 서비스를 기획하고 필요한 개념들의 이름을 지어주며 이를 바탕으로 데이터베이스를 설계해 보았습니다. 이번 편에서는 어떤 기술 스택을 선택했는지 소개하도록 하겠습니다. 기술 스택 선택과 개발 External 망에는 기존에 BSD 프론트엔드 영역 어플리케이션들이 있습니다. node.js와 경량 웹프레임워크인 fastify로 되어있습니다. 프론트에서 api를 호출하면 attraction 집계 어플리케이션이 메인 데이터 저장소인 Oracle DB에서 데이터를 조회해 옵니다. 구매내역, 링크루 등 외부 api를 호출한 결과도 전달해 줍니다. 저장된 데이터는 Admin화면을 통해 관리할 수 있습니다. 누가 어떤 피드를 작성했고 누가 좋아요 버튼을 ..
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -1편
안녕하세요. Web Frontend팀 이민하입니다. 지난 빅스마일데이에 첫 론칭한 꿀템 피드 서비스! 이 서비스를 만들기 위한 여정을 여러분께 소개드리려고 합니다. Intro시작은 디지털 빅세일이 끝난 2월 말.. 저희 팀장님의 한마디에서 시작했습니다."챗GBT를 우리만 보기에 아깝지 않아..!?"챗GBT(Gmarket Best iTem)는 임직원분들이 직접 추천하는 상품을 모아둔 페이지로 하나하나가 진짜 꿀템입니다! 아깝다고 생각했습니다. 저도 GBT를 보며 많이 샀기 때문에 고객도 이 페이지를 같이 보면 구매가 많이 일어날 것이라고 생각했습니다.추가로 고객들이 게시글을 작성할 수 있다면..? 그러면 고객들이 우리 사이트에서 놀 수 있는 공간이 되지 않을까?또한 사내에서도 우리 프러덕에 커뮤니티 기능을..
뱅크샐러드의 새로운 집(Home) 짓기 - 1편 | 기초공사
이제는 여러 사용자분들이 익숙해지셨을 뱅크샐러드의 홈 화면, 그렇지만 2년 전의 뱅크샐러드에는 놀랍게도 ‘홈’이 없었다. 지금으로부터 2년 전인 202…
월간 크롬 이슈 리포트 2024년 6월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 6월호)
NEXT.JS와 CDN, 그리고 도커 이미지 경량화
안녕하세요. 올리브영에서 프론트엔드 개발 업무를 담당하는 코난입니다. 올리브영 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. NEXT.JS 프레임워크를, Vercel이나, AWS Amplify…
상품 설명 영역 개선기 Part.2
안녕하세요. 상품 스쿼드의 백엔드 개발자 벙개맨⚡️ 입니다. 이번에 개선된 상품 설명 영역은 상품 상세 페이지 내에 위치하여 제품에 대한 자세한 설명이 포함된 문서를 말하는데요. 저희 올리브영에서는 상품 설명을 생성할 때 이미지 타입과 HTML…
API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편
라이브러리 사용 없이 수학과 물리를 이용해 카카오페이에서 진행했던 트리를 밝혀줘 웹 애니메이션 개발 과정을 공유합니다.
머신러닝 엔지니어가 퍼즐 게임을 더 재미있게 만드는 방법
머신러닝 엔지니어가 더 재미있는 퍼즐 게임을 위해 진행했던 프로젝트를 소개합니다.
월간 크롬 이슈 리포트 2024년 5월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 5월호)
Biome: 차세대 JS Linter와 Formatter
안녕하세요. 데이블 Service Front-end Team(SF Team)의 장희영입니다. 이 글에서는 JavaScript에서 Code Formatter와 Linter 역할을 동시에 수행하는 Biome이라는 도구를 소개해보려고 합니다. 들어가기 전에… 혹시 Prettier라는 Code Formatter를 들어본 적이 있으신가요? 아마 자바스크립트를 사용하는 개발자라면 모를 수가 없을 것으로 생각합니다. Prettier는 지배적인 위치를 차지하
리액트 19 신규 기능 및 개선 사항
안녕하세요. 데이블 Service Front-end Team(SF Team)의 이진호입니다. 리액트는 리액트만의 편리함과 확장성으로 프론트엔드 개발의 기본으로 자리 잡았습니다. 리액트 18은 배포된 지 벌써 2년이 지났고 이제 리액트 19가 저희를 기다리고 있습니다. 이에 맞춰 리액트 19에서 새롭게 선보이는 기능들과 개선 사항에 대해 요약해 보려 합니다. 새로운 기능 이번 리액트 19의 신규 기능은 크게 두 가지로 나눌 수 있습니다. 유저 액
Next.js 캐싱으로 웹 서버 성능 최적화
올해 초 저희 팀에서는 신규 커머스 서비스를 오픈했습니다. 아무래도 커머스에서는 SEO가 중요하다보니 의 App Router를 사용해서 SSR(Server Side Rendering…