포기할 수 없는 편리함을 제공하는 서비스를 만든다 README README 안녕하세요! 👋🏻프론트엔드 개발자로 활동하고 있는 Shelly입니다.저는 "한 번 경험하면 포기할 수 없는 편리함을 제공하는 서비스를 만든다!"라는 야심 찬 꿈을 갖고 있습니다! 🌟 다이어트를 할 때 가장 참기 힘든 것은 바로 "아는 맛"입니다.그 음식이 얼마나 맛있는지 아니까 포기하기 힘든 것이죠.마치 32인치 모니터를 사용하다가 13인치 노트북을 사용하려고 할 때의 답답함과도 비슷합니다. 이처럼 경험은 강력한 힘을 갖고 있습니다.저는 그런 서비스를 만들고 싶습니다.한 번 사용하면 이전으로 돌아갈 수 없는 경험을 주는 서비스를 말이죠! 그리고 그 꿈을 이루는 과정을 블로그에 남겨보려고 합니다.티스토리를 처음 시작할 땐 프론트엔드 기술에 중점을 두고 글을 쓰려고 했지만,블로그의 목적을 조금 바꿔보려.. 경험 Lesson & Learn 5년차 프론트엔드 개발자, 두 번째 이직 결심 | 즐겁게 일한다는 것 Lesson & Learn 대학교 학생회 활동이 스펙에 도움이 될까? | 전 부총학생회장, 현 개발자 Lesson & Learn FECONF2024 후기 | 컨퍼런스를 오프라인으로 참석해야하는 이유 Lesson & Learn 3년차 프론트엔드 개발자, 어떻게 성장할 것인가 | 삼쩜삼 FE 개발자 개발 Next [Next] Next 살펴보기 저는 얼마 전까지 React로만 개발하다가 최근에 이직을 하며 Next를 처음 제대로 사용해 보게 되었어요. Vue를 사용하다가 React로 넘어왔을 때 만큼의 변화는 아니지만, Next가 버전이 올라가면서 큼직한 변화들이 많이 있었고 그 과정에서 버전별 히스토리가 남아있는 것 같더라구요. 특히 Next13 버전을 기점으로 App Router이 도입되면서 패러다임이 크게 변했기 때문에 이를 특히 주의해야 했습니다. 이러한 변화들을 인지하고 있어야 올바른 개발이 가능할 것 같아서 간략하게 Next의 히스토리와 개발할 때 주의해야할 점에 대해 정리해 보았습니다! Next는 왜 만들어졌을까?React만 사용할 때 겪는 몇 가지 문제점을 해결하기 위해 2016년 Vercel(당시 ZEIT)에서 Next를 만들.. HTML [CSS] transform 속성을 layer와 stacking context 관점에서 알아보기 [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지devshelly.com 지난 글에서 stacking context가 어떤 의미인지 알아봤어요!특정 element를 다른 element보다 위에 그리고 싶을 때,z-index를 사용하여 화면에 그려지는 순서를 조절할 수 있습니다. 그런데 css 속성 중 `transform`을 사용할 때에도 다른 element보다 위에 그려지게 됩니다.그 이유는 stacking context가 생성되었기 때문이에요.얼핏 보아서는 화면에 .. HTML [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기 Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지만 css의 속성 중 z-index를 사용해 보신 적 있다면, 이미 stacking context를 활용하고 계신 것입니다! DIV #1 z-index: 4; DIV #2 z-index: 3; DIV #3 z-index: 2; DIV #4 z-index: 1; 위 이미지에서 보이듯, z-index가 클수록 상위에 노출됩니다.DIV#1, DIV#2, DIV#3, DIV#4는 하나의 영역(context)에서 z-index를 기준으로 어떤 순서로 쌓일지(stacking)..