쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
목차 시작하며 규모가 커지면서 생기는 문제점들 2.1 계속해서 생겨나는 중복 코드들 2.2 멀티레포 환경에서의 공통 라이브러리 업데이트 일관성을 위한 모노레포 도입과 고민 프로젝트 세팅 비용 단축하기 4.1 기존 멀티레포 환경에서의 프로젝트 세팅 4.2 모노레포 환경 구성 세팅하기 4.3 Code Generator를 활용한 프로젝트 세팅 4.4 결론 마치며 1. 시작하며 해당 글은 다음과 같은 분들에게 도움이 됩니다. 모노레포 환경으로 이관/구
쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
모노레포 환경에서 Code Generator를 활용한 프로젝트 구성 및 자동화 방법을 알아봅니다.
월간 크롬 이슈 리포트 2024년 8월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 8월호)
이걸 진짜 만든다고요? 세상에 없던 게임, 샐러드게임 | 2편. UX
…
Any의 함정 TypeScript와 Zod를 활용한 Type 명세로 해소
오늘은 TypeScript와 Zod에 관한 주제로 이야기하고자 합니다. TypeScript는 JavaScript의 동적 타이핑 대신 정적 타이핑을 도입해 코드의 안정성과 유지보수성을 높인 언어입니다. 하지만 TypeScript에서도 any 타입을 남발하다 보면 문제가 생길 수 있습니다. 이러한 문제를 방지하기 위해 세밀한 타입 지정과 유효성 검사를 지원하는 Zod라는 라이브러리를 함께 사용하는 것이 좋습니다. 이 과정에서 생성형 AI의 도움을
올리브영 타입스크립트로 알아보는 타입과 타입 시스템
올리브영은 뷰티 상품을 중심으로 각기 다른 특징을 가진 상품을 고객에게 전달하고 있습니다. 최근엔 W CARE…
OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
안녕하세요! 올리브영에서 라이브관과 매거진관을 담당하고 있는 몌으니입니다🦦💙 올리브영의 백오피스(BackOffice)시스템(이하 BO)에 Storybook…
[직무 인터뷰] 웹 프론트엔드 개발팀
월간 크롬 이슈 리포트 2024년 7월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2024년 7월호)
누가 내 쿠키를 먹었을까?
누가 내 쿠키를 먹었을까? 왜 iOS 웹뷰의 세션쿠키가 사라졌을까? 안녕하세요. 쏘카에서 프론트엔드 개발을 담당하고 있는 리우입니다. iOS 웹뷰에서만 세션쿠키가 갑자기 소실되는 현상을 마주한 적이 있나요? 해당 문제가 무엇이고, 왜 발생하고, 어떻게 해결했는지 실제로 겪은 사례를 통해 설명드리겠습니다. 여기서 세션쿠키는 Expires 또는 Max-Age가 없는 쿠키를 의미합니다. 세션쿠키는 브라우저를 닫는 순간 삭제됩니다. 개발자 도구→애플리
디자인 시스템, 디자인과 코드의 간극 줄이기
안녕하세요, 에잇퍼센트 웹 프론트엔드 팀의 김민정입니다. 프론트엔드 팀은 사내 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…