티스토리

Normal

검색하기

블로그 홈

Normal

yeoulcoding.tistory.com/m

Normal Engineer, Economist, Antifragilist

구독자: 21

방명록 방문하기

주요 글 목록

Suspense Deep Dive (Code Implementation) Overview 이전 포스팅 Conceptual Model of React Suspense과, Algebraic Effects of React Suspense에서 React가 Suspense를 어떤 관점으로 바라보고 있는지, 그리고 어떤 개념적 모델을 바탕으로 구성되어 있는지를 살펴보았습니다. 이번 포스팅에서는 이러한 내용들을 바탕으로 Suspense가 실제로 React 소스 코드 레벨에서 어떻게 구현되어 있고, 구체적으로 어떤 과정을 거쳐 동작하게 되는지를 간략하게 살펴보도록 하겠습니다. (소스 코드는 글을 작성하는 시점의 최신 코드를 기반으로 하지만, React 프로젝트는 코드가 굉장히 자주 바뀌는 편이기 때문에 변경사항이 생길 수 있습니다.) Recap Example Code 이전 포스팅에서 언급한.. 공감수 2 댓글수 0 2023. 3. 26.
How @next/font Works Overview @next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used. This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of y.. 공감수 3 댓글수 0 2023. 1. 15.
Concept of React Scheduler Overview 이전 포스팅에서 React Sync Mode(Concurrent Mode가 아닌 것, Legacy Mode)가 어떻게 동작하는지에 대해 Source Code Level에서 간략하게 살펴보았습니다. 이번 포스팅부터는 해당 내용을 기반으로 해서 Concurrent Mode가 어떻게 동작하는지에 대해서 한 단계씩 살펴보려고 합니다. Fiber, workInProgress Node, workLoopSync와 같은 용어들을 이해하고 있다는 전제로 전개되므로 이전 포스팅을 먼저 읽어보시는 것을 추천합니다. Concurrent Mode의 핵심은 Task를 수행하는 도중에 더 높은 우선순위를 지니고 있는 Task가 들어오면, 지금 처리 중인 Task를 "일시중단(Pause)"하고, 우선순위가 더 높은 .. 공감수 0 댓글수 0 2023. 1. 14.
React Mount System Deep Dive (Sync Mode) Overview 이전 글들 (Conceptual Model of React Suspense, Algebraic Effects of React Suspense, Suspense SSR Architecture in React 18)에 이어 Suspense의 동작 원리에 대해 Source Code Level에서 다루는 포스팅을 준비하고 있었습니다. 하지만 막상 Code Level에서 이를 분석하려고 하니 너무나 방대한 React의 개념들과 용어들(Fiber, Scheduler, Task, Lane, performUnitOfWork, Double Buffering)을 능숙하게 이해하고 있음을 전제하여야 했고, 이 모든 내용을 하나의 포스팅에 담기는 어려울 것 같다는 결론을 내렸습니다. 따라서 React18에서 .. 공감수 3 댓글수 5 2023. 1. 8.
Node.js + Puppeteer Memory Leak Handling Overview 콴다 팀에서는 수학 문제를 이미지가 아닌 Latex String의 형태로 저장합니다. 용량 측면에서도 그렇지만, 문제의 "유사도"를 측정하거나, 문제의 컨텐츠를 기반으로 사용자에게 알맞은 문제를 추천하는 데에 있어서는 이미지보다 스트링의 형태가 더 효율적이기 때문입니다. 하지만 결국 이 컨텐츠를 사용하는 학생들의 입장에서는 이 스트링이 올바르게 렌더 된 수식이 필요하기 때문에 이를 렌더 해주는 작업이 필요합니다. 이 수식을 라이브러리를 사용해서 user-side에서 사용자의 화면에 그대로 그려주는 방법도 있겠지만, 이는 클라이언트 사이드의 많은 리소스를 소모하게 됩니다. 게다가 웹뷰가 아닌 Native 환경에서는 수식을 렌더 하기 위해 엄청난 양의 폰트를 로드해야 하는데, 이는 결국 애플.. 공감수 1 댓글수 2 2022. 11. 20.
Suspense SSR Architecture in React 18 Introduction React Working Group(reactwg)에서 React Core Team의 Dan Abramov는 React 18의 주요 Feature 중 하나인 Suspense가 SSR Architecture의 구조적인 성능 개선을 위해 어떤 역할을 하게 될지에 대한 내용을 설명했습니다. [discussion link] 이번 포스팅은 해당 Discussion을 번역해서 현재 SSR이 어떻게 이루어지고 있는지, React 18의 Suspense가 이를 어떻게 구조적으로 개선했는지에 대해 살펴보려고 합니다. (원문 링크는 discussion link나 아래 Reference를 참고해주세요) 이 글은 새로운 서버사이드 렌더링 아키텍처와, 디자인, 그리고 문제 해결 방법에 대한 High-Le.. 공감수 3 댓글수 1 2022. 9. 18.
Algebraic Effects of React Suspense Overview React Suspense의 개념적 모델을 다룬 이전 포스팅의 마지막 부분에서 Dan Abramov(React Core Team)의 Suspense에 대한 Comment를 잠깐 언급했습니다. 이 Comment에 대한 구체적인 내용은 아래 인용문과 같습니다. (아래 인용문은 Suspense가 Fallback UI를 처리하기 위해서 throw 된 Promise를 사용한다는 내용을 이해하고 있다는 것을 전제로 합니다. 해당 내용에 대한 이해가 필요하다면 이에 대해 다룬 이전 포스팅을 참고해 주세요) This builds on a React feature called “Suspense”, which is in active development for the data fetching use cas.. 공감수 1 댓글수 1 2022. 9. 12.
Conceptual Model of React Suspense Overview React v18의 정식 릴리즈가 나오면서 Automatic Batching, Transition등 여러 Feature들이 소개되었습니다. 그중에는 React v16.6에 Experimental Feature로 등장했다가 이번에 정식으로 탑재된 "Suspense"에 대한 내용도 추가되어 있는데, 이번 포스팅에서는 특별히 이 Suspense라는 기능에 대해서 살펴보려고 합니다. What is Suspense? Suspense lets your components “wait” for something before they can render. In this example, two components wait for an asynchronous API call to fetch some data.. 공감수 2 댓글수 0 2022. 9. 12.
프론트엔드 테스트 전략 - (2) Integration Test Overview 이번 포스팅에서는 지난 포스팅에서 소개한 대로 프론트엔드에서 통합 테스트(Integration Test)를 구현하기 위한 방법을 설명하고자 합니다. 테스트가 작성되는 프로젝트는 React + Nextjs를 사용한 Server Side Rendering 프로젝트이고, 통합 테스트를 위한 도구로는 가장 유명한 도구 중 하나인 Cypress를 사용하였습니다. 또한 서버사이드 요청을 모킹하기 위해서 MSW(Mock Service Worker)를 사용하였습니다. React + Nextjs로 구성된 프로젝트가 아니더라도(e.g Angularjs, Vuejs) 통합 테스트를 작성하는 핵심 원리와 Server Side Request를 모킹 하는 핵심 원리는 동일하기 때문에 다른 적절한 방법을 찾아 테스.. 공감수 2 댓글수 1 2022. 9. 4.
프론트엔드 테스트 전략 - (1) Overview Overview 2년 조금 넘는 시간 동안 프론트엔드 개발을 해 오면서 애플리케이션 생태계에서의 웹 서비스의 비중이 시간이 지날수록 점점 커지는 것을 실감하고 있습니다. 빠른 주기의 업데이트와 유연한 UI를 제공하기 위해서 많은 앱 애플리케이션들이 웹뷰를 사용해서 서비스를 구현하고 있으며 이에 따라 데스크톱 생태계에서 뿐 아니라 스마트폰 / 태블릿 생태계에서도 웹 서비스는 여전히 서비스의 가장 앞단에서 수많은 사용자에게 접점을 제공하는 중요한 역할을 맡고 있습니다. 이렇게 애플리케이션 내에서 웹, 즉 웹뷰의 사용이 점점 확대됨에 따라 웹뷰에서 제공하는 기능 또한 다양해졌고, 이로 인해 웹뷰 프로젝트의 규모가 커지고, 복잡도가 증가하게 되는 경우가 많아지는 것 같습니다. 여느 큰 규모의 프로젝트들이 그렇듯.. 공감수 6 댓글수 0 2022. 9. 4.
Declarative React, and Inversion of Control Overview React 공식문서의 Design Principles 부분을 보면, 다음과 같은 문구가 있습니다. Even when your components are described as functions, when you use React you don’t call them directly. Every component returns a description of what needs to be rendered, and that description may include both user-written components like and platform-specific components like . It is up to React to “unroll” at some point in the futur.. 공감수 2 댓글수 0 2022. 9. 3.
모노레포의 기술적 요구사항 (5) - Sparse Checkout Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout Large Files Problem 10명정도 규모의 팀이 하나의 레포에서 개발을 하게.. 공감수 0 댓글수 0 2022. 8. 7.
모노레포의 기술적 요구사항 (4) - Plugin Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout Yarn Plugin Yarn Berry(v2) 부터 공식적으로 plugin에 대한 지.. 공감수 0 댓글수 0 2022. 8. 7.
모노레포의 기술적 요구사항 (3) - Deploy / Branch 전략 Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout CI / CD Pipeline 프론트엔드 서비스들을 모노레포로 이전하기 전과 후 CI.. 공감수 1 댓글수 0 2022. 8. 7.
모노레포의 기술적 요구사항 (2) - Global Lint / Prettier Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout Global Lint & Prettier Settings 모노레포로 이전하면서 콴다 프.. 공감수 0 댓글수 0 2022. 8. 7.
모노레포의 기술적 요구사항 (1) - Workspaces & Dependencies Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout yarn workspaces # Yarn workspaces aim to make wo.. 공감수 0 댓글수 0 2022. 8. 7.
[Web.dev] Fast (6) - Resource Delivery Optimization Overview web.dev에서 소개하는 Web Performance에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Optimize your resource delivery Content delivery networks (CDNs) Prioritize resources Preload critical assets to improve loading speed Establish network connections early to improve perceived page speed Prefetch resources.. 공감수 0 댓글수 0 2022. 7. 3.
[Web.dev] Fast (5) - Javascript Optimization Overview web.dev에서 소개하는 Web Performance에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. JavaScript 최적화 Apply instant loading with the PRPL pattern Reduce JavaScript payloads with code splitting Remove unused code Minify and compress network payloads Serve modern code to modern browsers for faster page loads .. 공감수 0 댓글수 0 2022. 6. 25.
[Web.dev] Fast (4) - Lazy Loading Overview web.dev에서 소개하는 Web Performance에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 및 비디오 지연 로드 Use lazy-loading to improve loading speed Lazy-loading images Lazy-loading video Browser-level image lazy-loading for the web Use lazysizes to lazy-load images Use Lazy Loading to Improve Loading Speed 지연 .. 공감수 0 댓글수 2 2022. 6. 1.
모노레포의 문화적 의의 Overview 콴다 프론트엔드 팀에서 최근 효율적인 프로젝트 관리를 위해 "모노레포(monorepo)"를 도입했습니다. (레포 이름도 굉장히 Semantic 한 "qanda-frontend"입니다) 팀 내에서 모노레포를 도입하자는 이야기는 작년 2분기 정도부터 조금씩 나오기 시작했지만, 이런저런 이유들과 고민들로 미뤘었다가 올해 1분기 말부터 본격적으로 리서치를 시작했고, 검색 결과 페이지(search-result-web), 콴다 과외(tutor-web), 콴다 메인 페이지(qanda-ai-web, qanda-ai-user-web)등의 주요 프로젝트들을 마이그레이션 하기 시작하면서 지난주 목요일 "모노레포 레이드(Raid)"를 종료했습니다. 모노레포를 도입하면서 Yarn Workspace와 같은 모노레.. 공감수 13 댓글수 0 2022. 5. 30.
코드 리뷰 문화에 대한 고찰 Overview 코드 리뷰가 무엇인지, 코드 리뷰를 왜 해야 하며, 어떤 방식으로 운영해야 하는지에 대해서 최근에 많은 고민들을 하게 되었습니다. 사람마다, 회사마다, 팀마다 코드 리뷰에 대한 생각들이 각기 다르기 때문에 이를 상황에 맞게 정의하고 방법을 찾는 것이 중요했습니다. 이를 위해 꽤 오랜 시간 동안 프론트엔드 팀에 코드 리뷰 문화를 정착시키기 위한 여러 가지 시도들과 노력들을 했었고, 이를 거치면서 경험한 것들과 생각했던 것들을 정리하려 합니다. Why Code Reviews? 풀려고 하는 문제가 무엇인지를 정확히 알아야 그 문제를 풀기 위한 알맞은 노력을 기울이고 방법을 찾아낼 수 있기 때문에 "코드 리뷰를 왜 해야 하는가?"에 대한 명확한 정의를 하는 것이 굉장히 중요하다고 생각했습니다. .. 공감수 5 댓글수 1 2022. 5. 5.
[Nextjs] How Image Optimization Works Overview Nextjs가 편리한 점은 웹 사이트 최적화를 위해 고려해야 하는 여러 가지 사항들을 대부분 "미리" 고려해서 default 옵션으로 제공해 주고 있다는 것입니다. 이번 포스팅에서는 Nextjs에서 웹 사이트 최적화를 위해 제공하는 기능 중의 하나인 Next/Image 가 내부적으로 어떻게 동작하는지에 대해 살펴보려고 합니다. 공식 문서에서 찾아볼 수 있는 내용들은 포함되어 있지 않으며, 실제로 nextjs 라이브러리가 어떻게 구현되어 있는지를 소스 코드를 기준으로 설명합니다. Image Optimization next/image 를 사용하려면 html의 img 태그 대신에 다음과 같이 next/image를 import 해서 사용하면 됩니다. 사용법이 굉장히 간단하고, next/image.. 공감수 2 댓글수 2 2022. 4. 30.
[Web.dev] Fast (3) - Image Optimization Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 최적화 Choose the right image format Choose the correct level of compression Use Imagemin to compress images Replace animated GIFs with video for faster page loads Serve responsive images Serve images with correct dimension.. 공감수 0 댓글수 0 2022. 4. 30.
[Web.dev] Fast (2) - Performance Budget Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 성능 예산 수립 Performance budgets 101 Your first performance budget Incorporate performance budgets into your build process Use Lighthouse for performance budgets Using bundlesize with Travis CI Using Lighthouse Bot to set a perf.. 공감수 0 댓글수 0 2022. 4. 22.
[Web.dev] Fast (1) - Introduction Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table of Contents Why does speed matter? What is speed? How to measure speed? How to stay fast? Measure performance with the RAIL model Why does Speed Matter? 연구에 따르면 낮은 성능은 비즈니스 목표에 부정적인 영향을 미칠 수 있습니다. 예를 들어 BBC는 사이트를 로드하는 .. 공감수 0 댓글수 0 2022. 4. 15.
[Web] preload, prefetch, preconnect Overview 아무리 복잡한 웹 애플리케이션이라도 모든 것은 HTML 문서를 로딩하는 것부터 시작됩니다. 로딩된 문서는 자바스크립트를 실행하기 위한 태그, CSS style이나 image 등을 가져오기 위한 태그들을 포함하는 경우가 대부분이며, 브라우저는 HTML 문서를 받아온 뒤 이를 파싱 하면서(혹은 파싱 한 후에) 해당 태그들이 포함하는 리소스들을 가져옵니다. 기본적으로 브라우저는 Critical Rendering Path를 기준으로 삼아 fetch 해야 하는 리소스에 우선순위를 부여합니다. 브라우저의 경우 도메인마다 2~6개(Chrome브라우저의 경우 도메인마다 최대 6개)의 커넥션을 맺을 수 있고, 최대 커넥션의 개수를 넘어서는 요청은 이전 요청이 끝나야 이루어질 수 있습니다. 따라서 같은 도.. 공감수 0 댓글수 0 2022. 4. 3.
[Javascript] script async & defer Overview React, Nextjs와 같은 Javascript 라이브러리를 사용해서 개발을 하면, 대부분의 경우 build 옵션에 대해서 큰 신경을 쓸 필요가 없습니다. React의 경우 react-scripts를 기반으로 하는 Create React App(CRA)가 기본적인 웹팩 설정을 해주고, Nextjs의 경우 내부적으로 next build 커맨드를 통해서 모듈 번들링을 지원해줍니다. 하지만 각각의 라이브러리를 사용해서 개발을 하더라도 실제로 내부적으로 bundling이 어떻게 되는지를 이해하는 것은 중요합니다. 이번 포스팅에서는 브라우저가 html문서를 파싱하는 도중 script 태그를 만났을 때 어떻게 동작하는지, 어떤 옵션을 사용할 수 있는지에 대해서 살펴보려고 합니다. 2. Cross.. 공감수 1 댓글수 1 2022. 4. 2.
[Nextjs] How getInitialProps Works Overview Nextjs 공식문서에 따르면 next v9 이후 버전부터는(현재 기준 release 버전은 12.1.1) getInitialProps 대신에 getStaticProps와 getServerSideProps를 사용하도록 권장합니다. 이는 getInitialProps가 Client Side와 Server Side에서 모두 동작하는 특징을 갖고 있기 때문입니다. 이번 포스팅에서는 Nextjs의 getInitialProps의 구현을 살펴보며 실제로 어떤 식으로 동작하는지를 살펴보도록 하겠습니다. Official Documents getInitialProps를 설명한 공식문서를 보면 다음과 같은 설명을 확인할 수 있습니다. getInitialProps enables server-side rende.. 공감수 1 댓글수 0 2022. 3. 28.
Strict Mode Javascript에서의 Strict Mode와 React에서의 Strict Mode, 그리고 Typescript에서의 Strict Mode는 동일한 이름을 갖지만 각각의 역할과 기능이 다릅니다. 이번 포스팅에서는 이를 정리합니다. Javascript Strict Mode Javascript에서의 Strict Mode(엄격 모드)는 다음과 같은 특징을 갖습니다. 기존에 조용히 무시되던 에러들을 Throwing 한다. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다 ECMAScript의 차기 버전들에서 정의될 문법을 금지한다. Examples 암묵적 전역 선언하지 않은 변수를 참조하면 Reference 에러를 발생시킵니다 'use strict' x = 1; console.log(.. 공감수 0 댓글수 0 2022. 3. 27.
[Web.dev] Network Overview Web.dev에서 소개하는 Network에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 네트워크 안정성을 측정하는 방법 # What is network reliability and how do you measure it? Identify resources loaded from the network Measuring offline usage 캐싱 도구 상자의 옵션 # Prevent unnecessary network requests with the HTTP Cache Love you.. 공감수 0 댓글수 0 2022. 3. 19.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.