리뉴얼 된 글로벌 웹사이트처음 당근에 들어오기 전, 저는 당근을 사용하는 1800만 유저 중 한 명이었어요. 중고거래 뿐만 아니라 지금은 동네모임까지 생긴 동네생활을 사용하며 이웃들과 도움을 주고 받고 따뜻한 마음을 느끼며 누군가의 이웃이 되는 그 행복이 저를 당근으로 이끌었네요. 저는 프론트엔드코어 팀의 웹사이트 파트에서 당근의 콘텐츠를 웹에 올리고 퍼뜨리고 있는 프론트엔드 개발자 lea.lah 입니다.당근에 웹사이트가 있다는 것, 알고 계셨나요? 많이 접속해보셨을 기업 소개 사이트 외에도, www.daangn.com/ 이라는 콘텐츠 중심의 웹사이트가 있답니다. 이제는 중고거래 뿐만 아니라 동네 업체, 알바, 부동산, 중고차, 그리고 곧 올라갈 모임까지 다양한 당근의 콘텐츠가 올라가 있어요. 그리고 꽤 많은 유저가 웹을 방문하고 있답니다.월 140만 명이 오가는 당근닷컴당근은 앱이 메인인 회사이기 때문에, 웹의 필요성이 대두 되기까지 꽤 오랜 시간이 걸렸어요. 이 글에서는 어떻게 초기 웹사이트가 개발되었고, 어떤 부분들을 챙겼으며, 어떻게 리뉴얼까지 이르렀는지 전반적인 내용을 담아보고자 해요. 앱에서 뿐만 아니라 웹으로 검색하는 유저도, 앱은 없지만 이웃, 지인, 가족으로부터 공유받은 당근의 콘텐츠를 열어보는 유저도 모두 접하고 탐색할 수 있는 당근닷컴을 한번 구경해보실래요?https://karrotmarket.com/?in=toronto-11052인터넷을 쓴다면 웹은 필요해요.당근은 MAU 1,800만 명이라는 큰 숫자의 유저를 보유하고 있어요. 하지만 몇 년 전까지만 해도, 어느 검색 사이트에서 검색하든 중고거래 게시글을 제외한 당근의 콘텐츠(알바, 부동산, 중고차, 동네업체)는 나오지 않았어요. 앱에 많은 콘텐츠가 갇혀 앱이 없는 유저는 공유된 글이 어떤 글인지 확인하지도 못했죠. 무조건 앱을 다운로드하거나 안 보거나, 하는 모 아니면 도의 선택지만 주어졌어요.하지만 다양한 서비스가 생기며 점점 빠르게 커져가는 당근의 생태계에서 콘텐츠가 앱에만 갇히는 건 큰 손실이에요. ‘난 굳이 앱까지 다운받고 싶지 않은데?’, ‘그냥 글만 보여주면 되지 왜 다운까지 받아야 해’ 하며 이탈하는 유저를 잃게 되고, 이탈한 유저들은 “당근”을 매개체로 한 지역 기반 커뮤니티를 모르게 되기 때문이죠. 우리가 얼마나 다양한 서비스를 운영하고 있고, 따뜻한 당신 근처의 이웃들을 만들기 위해 어떤 커뮤니티를 만들고 어떤 시도를 하고 있는지 유저에게 아예 보여줄 수가 없는 거예요.첫 삽은 그렇게 뜨기 시작했어요. World Wide Web에 콘텐츠를 올리자. 당근을 모르고, 평소 관심이 적었던 유저들에게 우리의 커뮤니티를 보여주자. 그럼 우리 플랫폼에 공감할거야. 그렇게 웹에 글을 노출하기 위해 URL을 따고 페이지를 만들기 시작했어요.코어 팀의 To-do와 Not To-do는 무엇일까?여기서 제가 속한 팀에 대한 소개를 해볼게요. 저희 팀은 프론트엔드 개발자들로 이루어져 있어요. 당근은 목적 조직이지만, 저희 팀은 Tech Core 조직으로 기능 조직과

안녕하세요, 인프랩 프런트엔드 개발자 융디입니다.최근 인프런 유저분들이 정성스럽게 작성해 주신 수강평과 질문&답변 페이지를 SNS에 공유 했을 때, 가장 먼저 보이는 링크 미리보기 이미지에 변화가 생겼다는 것을 눈치채신 분들이 계실까요?혹시 눈치채지 못하셨다면 이 글을 읽기 전, 본인이 인프런에 작성한 자랑스러운 수강평과 질문&답변 게시글을 SNS 에 공유해보세요. 아마도 이 글을 더 흥미롭게 읽으시는데 도움이 되실 것이라 생각합니다.그럼 이제, OG 이미지가 동적으로 생성되게 개발하면서 얻은 경험을 공유해보도록 하겠습니다.인프런은 동적으로 생성되는 OG 이미지가 왜 필요할까?인프런에는 강의를 수강한 학생과 강의를 제공하는 지식공유자 분들이 직접 작성한 좋은 콘텐츠가 많습니다. 이 콘텐츠를 외부에 공유할 때는 주로 링크 복사를 통해 SNS에 공유되는 경우가 많죠.하지만, 실제로 위와 같이 외부에 공유된 콘텐츠는 링크를 통해 직접 인프런 사이트에 접근해서 내용을 확인하지 않는 이상 어떤 내용을 담고 있는 콘텐츠인지 한 눈에 확인하기 어려운 경우가 많습니다.참고로 최근 수강평 상세 페이지의 유입 referrer 지표를 보면, SNS 공유를 통해 인프런 웹사이트에 접근하는 사용자가 큰 비중을 차지하고 있습니다. 데이터 지표로 이를 확인한 이상, 링크 공유 시 표시되는 미리보기 이미지를 이른 시일 내에 개선하고자 하는 니즈가 커졌습니다.이를 개선하고자, 다른 웹사이트들의 OG 이미지를 참고하다가 매주 슬랙에 공유되는 GeekNews 링크의 OG 이미지가 딱 이 문제를 해결해 줄 것 같다는 느낌이 들었습니다.그 이유는 평소 GeekNews 아티클을 골라 볼 때, OG 이미지에 있는 아티클의 제목과 간략한 내용을 확인하고 관심 있는 주제라면 자연스럽게 링크를 클릭하고 있었기 때문입니다.이에 따라, 인프런 유저 콘텐츠 페이지에도 OG 이미지를 동적으로 생성하여 적용하기로 결정했습니다.어떻게 콘텐츠마다 동적으로 OG 이미지 생성할까?동적으로 OG 이미지를 만들 수 있는 다양한 방법 중, Vercel 에서 HTML/CSS를 SVG로 변환하여 빠르고 다이나믹하게 소셜 이미지를 만들 수 있는 오픈 소스 라이브러리 를 제공하는 것을 발견했습니다.Vercel에서 제공하는 라이브러리인 를 사용하는 방법은 매우 간단합니다.공식 문서에 친절하게 나와 있는 대로 Next.js 프로젝트에 해당 의존성 라이브러리를 설치하고, 사용하고 있는 Next.js 프로젝트의 라우터 방식에 맞게 API 라우터를 생성하여 라이브러리 인터페이스에 맞게 코드를 작성해 주면 됩니다.라이브러리 사용 시, 참고해야 할 사항은 아래와 같습니다.• Node.js 16 이상만 지원합니다.• 는 Node.js 런타임을 지원하지 않습니다. Edge 런타임에서만 동작합니다.• 내부 핵심 엔진인 satori 가 허용하는 일부 HTML/CSS 기능만 지원합니다.웹 페이지에 동적 OG 이미지 적용하기동적으로 생성되는 OG 이미지를 웹 페이지에 적용하는 방법 또한 매우 간단합니다.동적 OG 이미지를 적용할 페이

안녕하세요. 카카오페이 자산플랫폼파티 셜록, 허브FE유닛 클로이, 인프라플랫폼팀 빌리, 기술전략팀 댄입니다. 저희는 카카오페이 기술 직군을 대표하여 2023년 11월 26일부터 12월 1일까지 5일 동안 개최된 AWS re:Invent 2023에 참석하게 되었습니다. 저희는 각자 다른 팀에서 일하고 있는데요, 이 글에서는 공동 저자 각자의 지극히 개인적인 관심 주제를 기준으로 Aurora DB, Amplify, Cost Optimization과 Observability에 대해 정리하고 느낀 점을 공유해보고자 합니다.이 글의 내용은 1편과 2편으로 나누어져서 게재하며, 본편은 1편으로 Aurora DB, Amplify에 대해서 이야기하겠습니다. 2편 글은 아래 바로가기를 확인해 주세요! 👉🏻 AWS re:Invent 2023, 관심 세션을 중심으로 (2편): Cost Optimization, Observability 바로가기본격적으로 후기를 공유하기에 앞서 AWS re:Invent 2023 키워드를 살펴보겠습니다. 이번 AWS re:Invent 키노트와 여러 세션들을 살펴보면, 주인공은 Generative AI임이 분명합니다. 이에 더해 기존 제품들에 새로운 기능을 추가하거나, 새로운 제품의 베타 버전을 공개했어요. 기존의 다양한 엔드투엔드(end-to-end) 라인업 솔루션에서 새로운 기능이나 업그레이드된 기능들을 소개하면서, AWS의 Generative AI 솔루션들을 특히 강조하고 있는데요. 이러한 다양한 AWS 솔루션들은 생성형 AI 기반 어시스턴트인 에 연결되어 더욱 강력한 사용자 경험을 제공하고 있습니다. (참고)또한, Amazon Q를 위한 머신러닝 엔진을 제공하는 도구로 Amazon Bedrock을 소개하고 있는데 이 제품은 머신러닝 모델을 선택하여 원하는 형태로 커스터마이징 할 수 있다는 점을 강조하고 있습니다. 즉, Amazon Bedrock을 통해 이 제품에서 제공하는 다양한 머신러닝 모델 중 내가 원하는 서비스에 적합한 모델을 선택하여 서비스에 적용할 수 있게 됩니다. 그럼 AWS re:Invent 2023 키워드 소개는 이것으로 마치고, Aurora DB 관련 세션 후기부터 공유드리겠습니다.카카오페이의 자산플랫폼파티에서 마이데이터 백엔드 개발을 하고 있는 셜록입니다. 이번 AWS re:Invent 2023은 모두들 Generative AI가 주인공이라고 얘기하지만, 백엔드 개발자인 저는 첫날 Peter Desantis의 키노트에 등장한 새로운 서버리스(Serverless) 제품의 소개에 관심이 갔습니다. 서버리스 컴퓨팅은 고객이 직접 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있어 보다 효율적으로 애플리케이션을 출시하는데 집중할 수 있게 합니다. AWS는 다양한 영역으로 서버리스 기술을 확장해 왔는데 이번 키노트를 통해 , , 제품을 선보였어요.저는 카카오페이에서 마이데이터 플랫폼을 개발하는 업무를 담당하고 있기 때문에 대용량 데이터 처리에 대한 고민을 항상 하고 있었고, 이 고민을 해결해 줄 또 하

안녕하세요~ 올리브영 커머스 서비스 개발팀에서 프론트엔드개발을 하고 있는 개발새발자 입니다~ 만반잘부 👋🏼👋🏼👋🏼이번 포스팅에서는 Next.JS에 MSW를 도입하면서 고민했던 내용들과 삽질했던 내용들을 여러분에게 소개하겠습니다!!그럼 긴 말은 필요 없습니다현재 올리브영 프론트엔드파트는 클래식 아키텍처인 Spring MVC에서 벗어나 모던 아키텍처인 Next.js 기반으로 전환하는 대규모 마이그레이션 작업을 진행 중에 있습니다.이러한 변화는 단순히 기술 스택의 전환을 떠나, 프론트엔드 개발자로서 성장할 수 있는 여러 과제를 제공하는데요.특히 클래식 아키텍처에서는 미처 다루지 못했던 단위 테스트 작업 또한 프론트엔드파트에서 열심히 진행하고 있는 주요 과제 중 하나입니다.하지만, 이 과정에서 예상치 못한 문제가 발생했습니다.단위 테스트를 작성하는 과정에서 만난 첫 번째 고민이 바로 MSW(Mock Service Worker)의 도입을 고려하게 만든 계기가 되었습니다.고민 1 - 불필요한 코드 및 중복 코드 증가첫 번째 고민은 바로 불필요한 코드 및 중복 코드의 증가입니다.특히 테스트 코드를 작성할 때 고민이 깊어졌는데요 😭단위 테스트를 작성 하다보면, API 서버 통신과 의존된 기능들을 만날 수 있을겁니다.올리브영에서는 axios-mock-adapter나 nock 같은 API 통신을 모의하는 라이브러리를 사용하지 않고, 자체적으로 API를 모의하여 테스트를 진행했었는데요보통 아래 코드와 같은 방식으로 작성했습니다.위 코드의 문제점이 보이시나요?아마 지금은 보이지 않으실 겁니다.하지만, 이러한 코드들을 계속해서 작성하다 보면, 비슷한 데이터를 반환하는 API 모의 코드들이 다양한 파일들에 산재되고 있다는 것을 느낄수 있고, 유지관리 또한 잘 안되는 것을 느끼실 수 있을 겁니다.물론 최대한 공통화 및 모듈화를 통해서 중복된 부분을 어느 정도 해소할 수 있겠지만, API를 Mocking하기 위한 불필요한 작업들이 존재하게 됩니다.이러한 작업들이 지속될수록 단위 테스트를 작성하는 게 피로해지고 King(👑) 받게 됩니다.그럼 다음 고민으로 넘어가 볼까요?고민 2 - 개발 일정이 빠듯해요!!개발자로 서비스 개발을 하다 보면 한 번쯤은 개발 일정이 빠듯했던 경험이 있지 않나요?아마 대부분의 개발자는 이러한 경험이 있을 것이며, 개발 일정이 빠듯할 경우 개발 일정을 미루거나 크런치 모드를 해 겨우 일정을 맞췄던 경험이 있을 거라 생각합니다.그럼 왜 이렇게 개발 일정이 빠듯할까요?보통 프로젝트의 착수하면 아래와 같은 플로우로 진행하게 됩니다.제가 스토리텔링을 매우 극단적으로 작성하긴 했지만, 종종 발생하는 상황이기도 하며, 저도 종종 겪었던 상황이라 이렇게 작성해 보았습니다.그럼, 여기서 문제는 무엇일까요?? 🤔바로 프론트엔드가 화면을 구성한 후 백엔드를 개발이 완료될 때 까지 대기시간이 존재한다는 것입니다.그럼 아래 사진과 같은 상황이 발생하겠죠??🐧물론! 저 잉여 시간이 꼭 프로젝트의 마감기한을 넘기는 문제는 아닐 수 있지만, 개선할 점이 존재하는 건